save todos for offline viewing

react/src/actions/lists.js

@@ -149,7 +149,8 @@ export function fetchLists() {
     if (lists.length !== 0) {
       dispatch(changeList(listsObj[Object.keys(listsObj)[0]].id));
     }
-    await localforage.setItem('lists', JSON.stringify(listsObj));
+    await localforage.setItem('lists', listsObj);
+    await localforage.setItem('todos', normalizeTodos(lists));
   };
 }
 
@@ -157,15 +158,13 @@ export function loadLists() {
   return async dispatch => {
     dispatch(requestLists());
 
-    try {
-      const listsJson = await localforage.getTodo('lists');
-      const listsObj = JSON.parse(listsJson);
-      dispatch(recieveLists(listsObj));
-      dispatch(changeList(listsObj[Object.keys(listsObj)[0]].id));
-    } catch (e) {
-      await localforage.removeItem('lists');
+    const lists = await localforage.getItem('lists');
+    const todos = await localforage.getItem('todos');
+    dispatch(recieveLists(lists));
+    dispatch({ type: RECIEVE_TODOS, todos });
+    if (lists[Object.keys(lists)[0]]) {
+      dispatch(changeList(lists[Object.keys(lists)[0]].id));
     }
-
     dispatch(fetchLists());
   };
 }

react/src/actions/todos.js

@@ -1,4 +1,5 @@
 import { API_ROOT, getToken } from './util';
+import { fetchLists } from './lists';
 
 export const ADD_TODO = 'ADD_TODO';
 export const REMOVE_TODO = 'REMOVE_TODO';
@@ -27,6 +28,20 @@ function validateTodos() {
   return { type: VALIDATE_TODOS };
 }
 
+export function fetchTodos() {
+  return async dispatch => {
+    dispatch({ type: REQUEST_TODOS });
+    const response = await fetch(`${API_ROOT}/todos`, {
+      headers: {
+        Authorization: `Bearer ${await getToken()}`,
+      },
+    });
+    const json = await response.json();
+    const todos = json.data;
+    dispatch({ type: RECIEVE_TODOS, todos });
+  };
+}
+
 export function addTodo(text) {
   return async (dispatch, getState) => {
     const state = getState();
@@ -43,7 +58,11 @@ export function addTodo(text) {
       });
       const json = await response.json();
       const todo = json.data;
-      dispatch({ type: ADD_TODO, todo });
+      if (json.success) {
+        dispatch({ type: ADD_TODO, todo });
+      } else {
+        dispatch(fetchLists());
+      }
       dispatch(validateTodos());
     }
   };
@@ -62,6 +81,8 @@ export function removeTodo(id) {
     const json = await response.json();
     if (json.success) {
       dispatch({ type: REMOVE_TODO, id });
+    } else {
+      dispatch(fetchLists());
     }
     dispatch(validateTodos());
   };
@@ -84,6 +105,8 @@ export function toggleTodo(id) {
     const json = await response.json();
     if (json.success) {
       dispatch({ type: TOGGLE_TODO, id });
+    } else {
+      dispatch(fetchLists());
     }
     dispatch(validateTodos());
   };
@@ -104,21 +127,9 @@ export function editTodo(id, text) {
     if (json.success) {
       const todo = json.data;
       dispatch({ type: EDIT_TODO, id, todo });
+    } else {
+      dispatch(fetchLists());
     }
     dispatch(validateTodos());
   };
 }
-
-export function fetchTodos(list) {
-  return async dispatch => {
-    dispatch({ type: REQUEST_TODOS, list });
-    const response = await fetch(`${API_ROOT}/todos`, {
-      headers: {
-        Authorization: `Bearer ${await getToken()}`,
-      },
-    });
-    const json = await response.json();
-    const todos = json.data;
-    dispatch({ type: RECIEVE_TODOS, todos });
-  };
-}

react/src/actions/user.js

@@ -31,6 +31,10 @@ function validateUser() {
 export function loadUser() {
   return async dispatch => {
     if (await getToken()) {
+      const user = await localforage.getItem('user');
+      dispatch(loginSuccess(user));
+      dispatch(loadLists());
+
       const response = await fetch(`${API_ROOT}/users/user`, {
         headers: {
           Authorization: `Bearer ${await getToken()}`,
@@ -40,7 +44,7 @@ export function loadUser() {
       });
       const json = await response.json();
       if (json.success) {
-        await localforage.setItem('jwt', json.data.jwt);
+        await localforage.setItem('user', json.data);
         dispatch(loginSuccess(json.data));
         dispatch(loadLists());
       } else {
@@ -64,7 +68,7 @@ export function login(user) {
     });
     const json = await response.json();
     if (json.success) {
-      await localforage.setItem('jwt', json.data.jwt);
+      await localforage.setItem('user', json.data);
       dispatch(loginSuccess(json.data));
       dispatch(loadLists());
     } else {
@@ -93,7 +97,7 @@ export function signup(user) {
     });
     const json = await response.json();
     if (json.success) {
-      await await localforage.setItem('jwt', json.data.jwt);
+      await await localforage.setItem('user', json.data);
       dispatch(signupSuccess(json.data));
       dispatch(loadLists());
     } else {
@@ -108,7 +112,7 @@ export function reset() {
 
 export function logout() {
   return async dispatch => {
-    await localforage.removeItem('jwt');
+    await localforage.removeItem('user');
     await localforage.removeItem('lists');
     await localforage.removeItem('items');
     dispatch({ type: LOGOUT });

react/src/actions/util.js

@@ -3,5 +3,6 @@ import localforage from 'localforage';
 export const API_ROOT = '/api';
 
 export async function getToken() {
-  return localforage.getItem('jwt');
+  const user = await localforage.getItem('user');
+  return user ? user.jwt : null;
 }

react/src/containers/getVisibleTodos.js

@@ -3,12 +3,12 @@ import { VisibilityFilters } from '../actions/todos';
 export default function getVisibleTodos(todos, filter) {
   switch (filter) {
     case VisibilityFilters.SHOW_ALL:
-      return todos;
+      return todos.filter(todo => todo);
     case VisibilityFilters.SHOW_ACTIVE:
-      return todos.filter(todo => !todo.completed);
+      return todos.filter(todo => todo).filter(todo => !todo.completed);
     case VisibilityFilters.SHOW_COMPLETED:
-      return todos.filter(todo => todo.completed);
+      return todos.filter(todo => todo).filter(todo => todo.completed);
     default:
-      return todos;
+      return todos.filter(todo => todo);
   }
 }