Skip to content

Instantly share code, notes, and snippets.

@ralexrdz

ralexrdz/actionTypes.js

Created November 30, 2016 02:32
Show Gist options
  • Save ralexrdz/62503959101056d6a4b275969a5ee54c to your computer and use it in GitHub Desktop.
Save ralexrdz/62503959101056d6a4b275969a5ee54c to your computer and use it in GitHub Desktop.
Download ZIP
vientos-nahual
Raw
actionTypes.js
export const FETCH_PROJECTS_REQUESTED = 'FETCH_PROJECTS_REQUESTED'
export const FETCH_PROJECTS_SUCCEEDED = 'FETCH_PROJECTS_SUCCEEDED'
export const FETCH_PROJECTS_FAILED = 'FETCH_PROJECTS_FAILED'
Raw
index.html
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Vientos</title>
<meta name="description" content="Plataforma de Colaboración">
<link rel="icon" href="/images/favicon.ico">
<!-- See https://goo.gl/OOhYW5 -->
<link rel="manifest" href="/manifest.json">
<!-- See https://goo.gl/qRE0vM -->
<meta name="theme-color" content="#3f51b5">
<!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My App">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My App">
<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="/images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="/images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/manifest/icon-192x192.png">
<!-- Tile icon for Windows 8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="/images/manifest/icon-144x144.png">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-tap-highlight" content="no">
<script src="bundle.js"></script>
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body>
<my-app></my-app>
<!-- Built with love using Polymer Starter Kit -->
</body>
</html>
Raw
package.json
{
"name": "vientos-app",
"version": "0.0.1",
"description": "Vientos App",
"main": "main.js",
"dependencies": {
"isomorphic-fetch": "^2.2.1",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-saga": "^0.12.1"
},
"devDependencies": {
"babel-plugin-transform-object-rest-spread": "^6.16.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bundle": "browserify main.js -t [ babelify --presets [ es2015 ] --plugins [ transform-object-rest-spread ] ] -o bundle.js -d" },
"author": "",
"license": "Unlicense",
"eslintConfig": {
"ecmaVersion": 2015,
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
}
}
}
Raw
reducers.js
import { combineReducers } from 'redux'
import * as ActionTypes from './actionTypes'
function projects (state = [], action) {
switch (action.type) {
case ActionTypes.FETCH_PROJECTS_SUCCEEDED:
return action.projects
default:
return state
}
}
export default combineReducers({
projects
})
Raw
redux-sagas.js
import 'babel-polyfill'
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import createLogger from 'redux-logger'
import * as ActionTypes from './actionTypes'
import reducer from './reducers'
import sagas from './sagas'
const sagaMiddleware = createSagaMiddleware()
const logger = createLogger()
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware, logger)
)
sagaMiddleware.run(sagas)
window.store = store
Raw
sagas.js
import { takeLatest, takeEvery } from 'redux-saga'
import { call, put } from 'redux-saga/effects'
import * as ActionTypes from './actionTypes'
import { fetchProjects } from './vientos'
function * getProjects (action) {
try {
const projects = yield call(fetchProjects)
yield put({
type: ActionTypes.FETCH_PROJECTS_SUCCEEDED,
projects
})
} catch (e) {
yield put({
type: ActionTypes.FETCH_PROJECTS_FAILED,
message: e.message
})
}
}
function * projectsSaga () {
yield* takeLatest(ActionTypes.FETCH_PROJECTS_REQUESTED, getProjects)
}
function * root () {
yield [
call(projectsSaga)
]
}
export default root
Raw
vientos-fetch.js
import fetch from 'isomorphic-fetch'
export function fetchProjects (){
return fetch('http://localhost:3000/api/projects',{credentials:'include'})
.then(response => response.json())
}
Raw
view-projects
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-view3">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<div class="card">
<div class="circle">3</div>
<h1>View Three</h1>
<p>Modus commodo minimum eum te, vero utinam assueverit per eu.</p>
<p>Ea duis bonorum nec, falli paulo aliquid ei eum.Has at minim mucius aliquam, est id tempor laoreet.Pro saepe pertinax ei, ad pri animal labores suscipiantur.</p>
</div>
</template>
<script>
Polymer({
is: 'my-view3'
});
</script>
</dom-module>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment