add react (#1)

* add react
app-bootstrap · Jan 20, 2018 · 6c273a3 · 6c273a3
1 parent 6468110
commit 6c273a3
Show file tree

Hide file tree

Showing 26 changed files with 1,070 additions and 33 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,14 +6,25 @@ module.exports = {
     "plugin:vue-libs/recommended"
   ],
   "plugins": [
-    "mocha"
+    "mocha",
+    "react"
   ],
   "rules": {
     "no-labels": 0,
     "no-empty-label": 0,
+    "no-redeclare": 0,
     "semi": [2, "always"],
     "space-before-function-paren": 0,
-    "no-new": 0
+    "no-new": 0,
+    "react/jsx-no-undef": 2,
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 1,
+    "react/no-did-mount-set-state": 1,
+    "react/no-did-update-set-state": 2,
+    "react/no-direct-mutation-state": 2,
+    "react/no-unknown-property": 1,
+    "react/prefer-es6-class": 1,
+    "react/react-in-jsx-scope": 2
   },
   "env": {
     "es6": true,
@@ -24,7 +35,8 @@ module.exports = {
     "ecmaVersion": 6,
     "sourceType": "module",
     "ecmaFeatures": {
-      "experimentalObjectRestSpread": true
+      "experimentalObjectRestSpread": true,
+      "jsx": true
     }
   }
 };
diff --git a/.npmignore b/.npmignore
@@ -4,6 +4,7 @@ test/
 .eslintrc.js
 .eslintignore
 .stylelintrc.js
+postcss.config.js
 coverage/
 screenshots/
 node_modules/

diff --git a/assets/app.less b/assets/app.less
@@ -39,10 +39,6 @@
   color: #b3b3b3;
   color: rgba(255, 255, 255, 0.3);
   text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
-  -webkit-text-rendering: optimizeLegibility;
-  -moz-text-rendering: optimizeLegibility;
-  -ms-text-rendering: optimizeLegibility;
-  -o-text-rendering: optimizeLegibility;
   text-rendering: optimizeLegibility;
 }
 
@@ -164,7 +160,6 @@ label[for='toggle-all'] {
   margin: auto 0;
   /* Mobile Safari */
   border: none;
-  -webkit-appearance: none;
   appearance: none;
 }
 
@@ -191,7 +186,6 @@ label[for='toggle-all'] {
   margin-left: 45px;
   display: block;
   line-height: 1.2;
-  -webkit-transition: color 0.4s;
   transition: color 0.4s;
 }
 
@@ -331,7 +325,6 @@ label[for='toggle-all'] {
     width: 65px;
     height: 41px;
     transform: rotate(90deg);
-    -webkit-appearance: none;
     appearance: none;
   }
 }

diff --git a/flux/actions.js b/flux/actions.js
@@ -0,0 +1,72 @@
+'use strict';
+
+import dispatcher from './dispatcher';
+
+export const add = text => {
+  dispatcher.dispatch({
+    type: 'ADD_TODO',
+    content: text
+  });
+};
+
+export const remove = (id) => {
+  dispatcher.dispatch({
+    type: 'DELETE_TODO',
+    id
+  });
+};
+
+export const compelete = (id) => {
+  dispatcher.dispatch({
+    type: 'COMPLETE_TODO',
+    id
+  });
+};
+
+export const edit = (id) => {
+  dispatcher.dispatch({
+    type: 'EDIT_TODO',
+    id
+  });
+};
+
+export const update = (data) => {
+  dispatcher.dispatch({
+    type: 'UPDATE_TODO',
+    id: data.id,
+    content: data.value
+  });
+};
+
+export const updateItem = (data) => {
+  dispatcher.dispatch({
+    type: 'UPDATE_ITEM_TODO',
+    id: data.id,
+    content: data.value
+  });
+};
+
+export const completedAll = () => {
+  dispatcher.dispatch({
+    type: 'COMPLETE_ALL'
+  });
+};
+
+export const uncompletedAll = () => {
+  dispatcher.dispatch({
+    type: 'UNCOMPLETE_ALL'
+  });
+};
+
+export const clearCompleted = () => {
+  dispatcher.dispatch({
+    type: 'CLEAR_COMPLETED'
+  });
+};
+
+export const setVisibilityFilter = (hash) => {
+  dispatcher.dispatch({
+    type: 'SET_VISIBILITY_FILTER',
+    hash
+  });
+};
diff --git a/flux/app.js b/flux/app.js
@@ -0,0 +1,29 @@
+'use strict';
+
+import {
+  Container
+} from 'flux/utils';
+
+import todoStore from './store/todo';
+import typeStore from './store/type';
+import View from './view.jsx';
+import * as actions from './actions';
+
+function getStores() {
+  return [
+    todoStore,
+    typeStore
+  ];
+}
+
+function getState() {
+  return {
+    todos: todoStore.getState(),
+    hash: typeStore.getState(),
+    actions: {
+      ...actions
+    }
+  };
+}
+
+export default Container.createFunctional(View, getStores, getState);
diff --git a/flux/dispatcher.js b/flux/dispatcher.js
@@ -0,0 +1,7 @@
+'use strict';
+
+import {
+  Dispatcher
+} from 'flux';
+
+export default new Dispatcher();
diff --git a/flux/index.html b/flux/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
+    <link rel="shortcut icon" href="../assets/images/logo.png" type="image/x-icon" />
+    <title>Flux &bull; TodoMVC</title>
+  </head>
+  <body>
+    <div id="app">
+      <script>
+        var isOnline = !!~location.host.indexOf('github');
+        var script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = (isOnline ? '//unpkg.com/dataflow-sample@latest' : '..') + '/dist/flux.js';
+        var head = document.getElementsByTagName('head')[0];
+        head.appendChild(script);
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/flux/index.js b/flux/index.js
@@ -0,0 +1,8 @@
+'use strict';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './app';
+
+ReactDOM.render(<App />, document.querySelector('#app'));
diff --git a/flux/store/todo.js b/flux/store/todo.js
@@ -0,0 +1,115 @@
+'use strict';
+
+import {
+  ReduceStore
+} from 'flux/utils';
+
+import dispatcher from '../dispatcher';
+
+const localStore = {
+  get() {
+    return JSON.parse(localStorage['enough-todo'] || '[]');
+  },
+  set(data) {
+    localStorage['enough-todo'] = JSON.stringify(data);
+  }
+};
+
+class TodoStore extends ReduceStore {
+  constructor() {
+    super(dispatcher);
+  }
+
+  getInitialState() {
+    return localStore.get();
+  }
+
+  reduce(state, action) {
+    switch (action.type) {
+      case 'ADD_TODO':
+        var res = [
+          ...state,
+          {
+            id: String(+new Date()),
+            completed: false,
+            content: action.content,
+            editing: false
+          }
+        ];
+        localStore.set(res);
+        return res;
+      case 'DELETE_TODO':
+        var res = state.filter(item => item.id !== action.id);
+        localStore.set(res);
+        return res;
+      case 'COMPLETE_TODO':
+        var res = state.map(item =>
+          item.id === action.id
+            ? {
+              ...item,
+              completed: !item.completed
+            }
+            : item
+        );
+        localStore.set(res);
+        return res;
+      case 'EDIT_TODO':
+        var res = state.map(item =>
+          item.id === action.id
+            ? {
+              ...item,
+              editing: true
+            }
+            : item
+        );
+        return res;
+      case 'UPDATE_TODO':
+        var res = state.map(item =>
+          item.id === action.id
+            ? {
+              ...item,
+              content: action.content,
+              editing: false
+            }
+            : item
+        );
+        localStore.set(res);
+        return res;
+      case 'UPDATE_ITEM_TODO':
+        var res = state.map(item =>
+          item.id === action.id
+            ? {
+              ...item,
+              content: action.content
+            }
+            : item
+        );
+        return res;
+      case 'COMPLETE_ALL':
+        var res = state.map(item => {
+          return {
+            ...item,
+            completed: true
+          };
+        });
+        localStore.set(res);
+        return res;
+      case 'UNCOMPLETE_ALL':
+        var res = state.map(item => {
+          return {
+            ...item,
+            completed: false
+          };
+        });
+        localStore.set(res);
+        return res;
+      case 'CLEAR_COMPLETED':
+        var res = state.filter(item => !item.completed);
+        localStore.set(res);
+        return res;
+    }
+    return state;
+  }
+}
+
+export default new TodoStore(dispatcher);
diff --git a/flux/store/type.js b/flux/store/type.js
@@ -0,0 +1,29 @@
+'use strict';
+
+import {
+  ReduceStore
+} from 'flux/utils';
+
+import dispatcher from '../dispatcher';
+
+class TypeStore extends ReduceStore {
+  constructor() {
+    super(dispatcher);
+  }
+
+  getInitialState() {
+    return location.hash.replace('#/', '') || 'all';
+  }
+
+  reduce(state, action) {
+    switch (action.type) {
+      case 'SET_VISIBILITY_FILTER':
+        state = action.hash;
+        return state;
+    }
+    return state;
+  }
+}
+
+export default new TypeStore(dispatcher);
+