Finish todo-pwa

Author: ajayns

README.md

@@ -16,7 +16,7 @@ A couple of projects to get familiar with the React framework.
 6. **book-store [WIP]**: Online book store built over react-redux and Bootstrap for UI.
 7. **trip-mate**: Manage and keep track of your trips with this simple, smooth webapp. Uses react-router, custom styling. [(Live Demo)](https://react-trip-mate.firebaseapp.com)
 8. **property-finder**: Search for and list properties. Built on React-Native, uses react-navigation.
-9. **todo-pwa**: The classic Todos Tracker as a Progressive Web App. Built using React, Redux, leveraging styled-components, PaperCSS, Service Worker tools. [(Live Demo)](https://paper-todo.firebaseapp.com)
+9. **todo-pwa**: The classic Todos Tracker as a Progressive Web App. Built using React, Redux, leveraging styled-components, PaperCSS, Service Worker tools. Data is retained using localStorage [(Live Demo)](https://paper-todo.firebaseapp.com)
 
 
 ## Development

todo-pwa/README.md

@@ -4,13 +4,13 @@
 
 [Live Demo](https://paper-todo.firebaseapp.com)
 
-The classic Todos Tracker as a Progressive Web App. Built using React, Redux, leveraging styled-components, PaperCSS, Service Worker tools.
+The classic Todos Tracker as a Progressive Web App. Built using React, Redux, leveraging styled-components, PaperCSS, Service Worker tools. Data is retained using localStorage.
 
 ## Features
 
 * Cross-browser, cross-platform support
 * Installable web app
-* Offline functionality
+* Offline functionality with local storage
 * Fancy yet simple UI
 * Lightweight
 
@@ -26,7 +26,7 @@ Serve the app to browser
 
 ## Checklist
 
-- [ ] Use localstorage to store todos
+- [x] Use localstorage to store todos
 - [ ] Improve app responsiveness on all devices
 
 ## Contributing

todo-pwa/src/actions/index.js

@@ -1,12 +1,16 @@
 // Action creators recieve data from the DOM event, format it as formal JSON 'action' object
 
-import { ADD_TODO, SET_FILTER, TOGGLE_TODO } from '../constants/action-types';
+import { ADD_TODO, SET_FILTER, TOGGLE_TODO, CLEAR_TODOS } from '../constants/action-types';
 
 export const addTodo = (payload) => ({
     type: ADD_TODO,
     payload
 });
 
+export const clearTodos = () => ({
+    type: CLEAR_TODOS
+});
+
 export const setFilter = (filter) => ({
     type: SET_FILTER,
     filter

todo-pwa/src/components/AddTodo.js

@@ -30,10 +30,10 @@ const AddTodo = ({onSubmit}) => {
                     }}
                 className="row"
             >
-                <div className="col col-xs-9 padding-right-small">
+                <div className="col padding-right-small">
                     <input type="text" placeholder="New Todo" ref={node => { input = node }} />
                 </div>
-                <div className="col col-xs-3 padding-left-small">
+                <div className="col padding-left-small">
                     <input type="submit" value="Add" className="paper-btn btn-small" />
                 </div>
             </form>

todo-pwa/src/components/Filter.js

@@ -2,28 +2,36 @@ import React from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 
-import { setFilter } from '../actions';
+import { setFilter, clearTodos } from '../actions';
 import { FILTER_COMPLETED, FILTER_ALL, FILTER_ACTIVE } from '../constants/filters';
 
 const mapDispatchToProps = (dispatch) => {
     return {
-        onChangeFilter: (e) => dispatch(setFilter(e.target.value))
+        onChangeFilter: (e) => dispatch(setFilter(e.target.value)),
+        onClickClear: (e) => dispatch(clearTodos())
     }
 }
 
 const Dropdown = styled.div`
     margin: 3em 0 0 0;
 `;
 
-const Filter = ({onChangeFilter}) => {
+const Filter = ({todosLength, filter, onChangeFilter, onClickClear}) => {
     return (
-        <Dropdown className="row flex-right">
-            <span className="padding-right-small">Show:</span>
-            <select onChange={onChangeFilter}>
-                <option value={FILTER_ALL}>All</option>
-                <option value={FILTER_ACTIVE}>Active</option>
-                <option value={FILTER_COMPLETED}>Completed</option>
-            </select>
+        <Dropdown className="row flex-edges">
+            <div className="col padding-small">
+                <button className="btn-small" style={todosLength ? {} : {display: 'none'}} onClick={onClickClear}>Clear</button>
+            </div>
+            <div className="col padding-small">
+                <div className="row flex-right margin-none">
+                    <span className="padding-right-small">Show:</span>
+                    <select onChange={onChangeFilter} value={filter}>
+                        <option value={FILTER_ALL}>All</option>
+                        <option value={FILTER_ACTIVE}>Active</option>
+                        <option value={FILTER_COMPLETED}>Completed</option>
+                    </select>
+                </div>                
+            </div>            
         </Dropdown>        
     );
 }

todo-pwa/src/components/TodoList.js

@@ -33,11 +33,20 @@ const List = styled.ul`
 `;
 
 const TodoList = ({todos, filter}) => {
-    if(todos.length === 0 && filter === FILTER_ALL) 
-        return <div className="row flex-center margin-top-large">Chill scenes.</div>
+    let message;
+    if(todos.length === 0) {
+        let text;
+        switch(filter) {
+            case FILTER_COMPLETED: text = 'Nothing completed yet.'; break;
+            case FILTER_ACTIVE: text = 'Nothing to be completed.'; break;
+            default: text = 'Chill scenes.'; break;
+        }
+        message = (<div className="row flex-center margin-top-large">{text}</div>);
+    }       
 
     return (
         <div>
+            {message}
             <List className="child-borders">
                 {todos.map(todo =>
                     <Todo
@@ -47,7 +56,7 @@ const TodoList = ({todos, filter}) => {
                     />
                 )}
             </List>
-            <Filter/>
+            <Filter todosLength={todos.length} filter={filter}/>
         </div>        
     );
 }

todo-pwa/src/constants/action-types.js

@@ -1,5 +1,6 @@
 // Using constants instead of strings used directly prevents errors due to typos etc
 
 export const ADD_TODO = 'ADD_TODO';
+export const CLEAR_TODOS = 'CLEAR_TODOS';
 export const SET_FILTER = 'SET_FILTER';
 export const TOGGLE_TODO = 'TOGGLE_TODO';

todo-pwa/src/reducers/filter.js

@@ -1,9 +1,12 @@
 import { SET_FILTER } from '../constants/action-types';
 import { FILTER_ALL } from '../constants/filters';
 
-const filter = (state = FILTER_ALL, action) => {
+const storedFilter = localStorage.getItem('filter') || FILTER_ALL;
+
+const filter = (state = storedFilter, action) => {
     switch(action.type) {
         case SET_FILTER:
+            localStorage.setItem('filter', action.filter);
             return action.filter;
         default:
             return state;

todo-pwa/src/reducers/todos.js

@@ -1,21 +1,29 @@
 // Reducer functions take state from Redux and action objects and returns a new state
 // Each action is defined as a case
 
-import { ADD_TODO, TOGGLE_TODO } from '../constants/action-types';
+import { ADD_TODO, TOGGLE_TODO, CLEAR_TODOS } from '../constants/action-types';
 
-const todos = (state = [], action) => {
+const storedTodos = JSON.parse(localStorage.getItem('todos')) || [];
+
+const todos = (state = storedTodos, action) => {
     switch (action.type) {
         case ADD_TODO:
+            localStorage.setItem('todos', JSON.stringify([...state, action.payload]));
             return [...state, action.payload];
+        
+        case CLEAR_TODOS:
+            localStorage.removeItem('todos');
+            return [];
 
         case TOGGLE_TODO:
-            return state.map(todo => {
-                if (todo.id === action.id) {
-                    return Object.assign({}, todo, { completed: !todo.completed });
-                }
-                return todo;
-                }
-            );
+            let modifiedTodos = state.map(todo => {
+                        if (todo.id === action.id) 
+                            return Object.assign({}, todo, { completed: !todo.completed });                    
+                        return todo;
+                    }
+                );
+            localStorage.setItem('todos', JSON.stringify(modifiedTodos));
+            return modifiedTodos;
 
         default:
             return state;