✨ pass context from angularjs to react

fabienjuif · guillaumecrespel · commit 7aac3d53d71b · 2017-12-30T15:27:44.000+01:00
diff --git a/angularjs/index.html b/angularjs/index.html
@@ -13,7 +13,7 @@
 		<script type="text/ng-template" id="todomvc-index.html">
 			<section id="todoapp">
 				<header id="header">
-					<h1>todos</h1>
+					<h1>AngularJS</h1>
 					<form id="todo-form" ng-submit="addTodo()">
 						<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" ng-disabled="saving" autofocus>
 					</form>
diff --git a/angularjs/js/controllers/todoCtrl.js b/angularjs/js/controllers/todoCtrl.js
@@ -47,6 +47,58 @@ angular.module('todomvc')
 					$scope.saving = false;
 
 					// go to the react application
+					// - save to localStorage
+					const time = Date.now()
+					const angularData = JSON.parse(window.localStorage.getItem('todos-angularjs'))
+
+					const array = []
+					const keys = []
+					const data = {}
+
+					const completedArray = []
+					const completedKeys = []
+					const completedData = {}
+
+					angularData.forEach((todo, index) => {
+						const id = index
+
+						// todo
+						const mappedTodo = { id, todo: todo.title }
+						keys.push(id)
+						array.push(mappedTodo)
+						data[id] = mappedTodo
+
+						// completed
+						if (todo.completed) {
+							const completed = { id, completed: true }
+
+							completedArray.push(completed)
+							completedKeys.push(id)
+							completedData[id] = completed
+						}
+					})
+
+					const initState = {
+						data: {
+							todos: {
+								keys,
+								data,
+								array,
+							},
+						},
+						ui: {
+							completed: {
+								keys: completedKeys,
+								data: completedData,
+								array: completedArray,
+							},
+						},
+					}
+
+					window.localStorage.setItem('redux-store', JSON.stringify(initState))
+					console.log('Temps de creation du store redux pour react', `${Date.now() - time} ms`)
+
+					// - go to react
 					window.history.pushState({}, 'react', '/react')
 				});
 		};
diff --git a/angularjs/js/services/todoStorage.js b/angularjs/js/services/todoStorage.js
@@ -13,78 +13,7 @@ angular.module('todomvc')
 
 		// Detect if an API backend is present. If so, return the API module, else
 		// hand off the localStorage adapter
-		return $http.get('/api')
-			.then(function () {
-				return $injector.get('api');
-			}, function () {
-				return $injector.get('localStorage');
-			});
-	})
-
-	.factory('api', function ($resource) {
-		'use strict';
-
-		var store = {
-			todos: [],
-
-			api: $resource('/api/todos/:id', null,
-				{
-					update: { method:'PUT' }
-				}
-			),
-
-			clearCompleted: function () {
-				var originalTodos = store.todos.slice(0);
-
-				var incompleteTodos = store.todos.filter(function (todo) {
-					return !todo.completed;
-				});
-
-				angular.copy(incompleteTodos, store.todos);
-
-				return store.api.delete(function () {
-					}, function error() {
-						angular.copy(originalTodos, store.todos);
-					});
-			},
-
-			delete: function (todo) {
-				var originalTodos = store.todos.slice(0);
-
-				store.todos.splice(store.todos.indexOf(todo), 1);
-				return store.api.delete({ id: todo.id },
-					function () {
-					}, function error() {
-						angular.copy(originalTodos, store.todos);
-					});
-			},
-
-			get: function () {
-				return store.api.query(function (resp) {
-					angular.copy(resp, store.todos);
-				});
-			},
-
-			insert: function (todo) {
-				var originalTodos = store.todos.slice(0);
-
-				return store.api.save(todo,
-					function success(resp) {
-						todo.id = resp.id;
-						store.todos.push(todo);
-					}, function error() {
-						angular.copy(originalTodos, store.todos);
-					})
-					.$promise;
-			},
-
-			put: function (todo) {
-				return store.api.update({ id: todo.id }, todo)
-					.$promise;
-			}
-		};
-
-		return store;
+		return $injector.get('localStorage');
 	})
 
 	.factory('localStorage', function ($q) {
diff --git a/react/index.html b/react/index.html
@@ -9,6 +9,6 @@
 
 <body>
   <div id="app" />
-<script type="text/javascript" src="/react/todomvc.js?75dcb5edd3762df4acd2"></script></body>
+<script type="text/javascript" src="/react/todomvc.js?6920eac13c181e8a2897"></script></body>
 
 </html>
diff --git a/react/src/components/header/header.container.js b/react/src/components/header/header.container.js
@@ -11,8 +11,7 @@ export const mapStateToProps = (state) => {
 
 export const mapDispatchToProps = (dispatch) => {
   return {
-    addTodo: e => dispatch(action('NEW_TODO_KEYDOWN_PRESSED', { todo: e.target.value, keyCode: e.keyCode })),
-    onNewTodoChange: e => dispatch(action('NEW_TODO_CHANGED', e.target.value)),
+    onFocus: () => dispatch(action('NEW_TODO_FOCUSED')),
   }
 }
 
diff --git a/react/src/components/header/header.jsx b/react/src/components/header/header.jsx
@@ -2,27 +2,24 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { onlyUpdateForPropTypes } from 'recompose'
 
-const Header = ({ newTodo, addTodo, onNewTodoChange }) => {
+const Header = ({ newTodo, onFocus }) => {
   return (
     <header className="header">
-      <h1>todos</h1>
+      <h1>React</h1>
       <input
         className="new-todo"
         name="newTodo"
         placeholder="What needs to be done?"
-        autoFocus
         value={newTodo}
-        onKeyDown={addTodo}
-        onChange={onNewTodoChange}
+        onFocus={onFocus}
       />
     </header>
   )
 }
 
 Header.propTypes = {
   newTodo: PropTypes.string,
-  onNewTodoChange: PropTypes.func.isRequired,
-  addTodo: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
 }
 
 Header.defaultProps = {
diff --git a/react/src/redux/data/index.js b/react/src/redux/data/index.js
@@ -1,7 +1,10 @@
 import { combineReducers } from 'redux'
 import todos from './todos'
 
+// const defaultTodosState = JSON.parse(window.localStorage.getItem('redux-store') || { data: { } }).data.todos
+
 /* Combine on data reducer */
 export default combineReducers({
   todos,
+  // todos: (state = defaultTodosState, action) => todos(state, action),
 })
diff --git a/react/src/redux/store.js b/react/src/redux/store.js
@@ -7,8 +7,12 @@ import reducers from './reducers'
 
 const sagaMiddleware = createSagaMiddleware()
 
+const time = Date.now()
+const initState = JSON.parse(window.localStorage.getItem('redux-store') || {})
+
 const store = createStore(
   reducers,
+  initState,
   compose(
     enhancer,
     applyMiddleware(sagaMiddleware, middleware),
@@ -17,6 +21,8 @@ const store = createStore(
   ),
 )
 
+console.log('Temps init store', `${Date.now() - time} ms`)
+
 sagaMiddleware.run(sagas(store))
 
 const initialLocation = store.getState().router
diff --git a/react/src/sagas/intents.js b/react/src/sagas/intents.js
@@ -10,17 +10,13 @@ const checkEscape = action => check(action, ESCAPE_KEY)
 
 export default function* () {
   yield takeLatest('REMOVE_TODO_CLICKED', action => todos.remove(action.payload))
-  yield takeLatest('NEW_TODO_CHANGED', action => ui.setNewTodo(action.payload))
+  yield takeLatest('NEW_TODO_FOCUSED', todos.goToAngular)
   yield takeLatest('COMPLETE_TODO_CLICKED', action => todos.complete(action.payload))
   yield takeLatest('COMPLETE_ALL_CHANGED', action => todos.completeAll(action.payload))
   yield takeLatest('TODO_DOUBLE_CLICKED', action => ui.edit(action.payload))
   yield takeLatest('TODO_BLURED', action => todos.update(action.payload))
   yield takeLatest('TODO_CHANGED', action => ui.setEditTodo(action.payload))
   yield takeLatest('CLEAR_COMPLETED_CLICKED', todos.clearCompleted)
-  yield takeLatest('NEW_TODO_KEYDOWN_PRESSED', (action) => {
-    if (checkEnter(action)) return todos.add(action.payload.todo)
-    return null
-  })
   yield takeLatest('TODO_KEYDOWN_PRESSED', (action) => {
     if (checkEnter(action)) return todos.update(action.payload.id)
     if (checkEscape(action)) return ui.cancelEdit(action.payload.id)
diff --git a/react/src/sagas/todos/todos.js b/react/src/sagas/todos/todos.js
@@ -1,13 +1,10 @@
 import { call, put, select } from 'redux-saga/effects'
 import store from 'redux/data/todos'
-import newTodo from 'redux/ui/newTodo'
 import completed from 'redux/ui/completed'
 import editing from 'redux/ui/editing'
 
-export function* add(todo) {
-  if (!todo || !todo.trim()) return
-  yield put(store.add(todo))
-  yield put(newTodo.reset())
+export function goToAngular() {
+  window.location = '/angularjs'
 }
 
 export function* remove(todoId) {
diff --git a/react/todomvc.js b/react/todomvc.js

Original file line number	Diff line number	Diff line change
`@@ -11,8 +11,7 @@ export const mapStateToProps = (state) => {`
`11`	`11`
`12`	`12`	`export const mapDispatchToProps = (dispatch) => {`
`13`	`13`	`return {`
`14`		`- addTodo: e => dispatch(action('NEW_TODO_KEYDOWN_PRESSED', { todo: e.target.value, keyCode: e.keyCode })),`
`15`		`- onNewTodoChange: e => dispatch(action('NEW_TODO_CHANGED', e.target.value)),`
	`14`	`+ onFocus: () => dispatch(action('NEW_TODO_FOCUSED')),`
`16`	`15`	`}`
`17`	`16`	`}`
`18`	`17`