#5 Previously entered timesheet URL is remembered in Local Storage

package.json

@@ -13,6 +13,7 @@
     "react-scripts": "1.0.11",
     "react-thunk": "^1.0.0",
     "redux": "^3.7.2",
+    "redux-localstorage": "^0.4.1",
     "redux-logger": "^3.0.6"
   },
   "scripts": {

src/components/SetupTimesheet/SetupTimesheet-component.js

@@ -5,7 +5,7 @@ import './SetupTimesheet-style.css';
 class SetupTimesheet extends PureComponent {
     constructor(props) {
         super(props);
-        this.state = {url: ''};
+        this.state = {url: props.previousUrl || ''};
 
         this._handleChange = this._handleChange.bind(this);
     }
@@ -27,7 +27,11 @@ class SetupTimesheet extends PureComponent {
                 <h1>Setup(2/2)</h1>
                 <p>Second: Enter your individual timesheet URL</p>
                 <form onSubmit={this._handleSubmit}>
-                    <input type="text" name="url" onChange={this._handleChange}/>
+                    <input type="text"
+                           name="url"
+                           defaultValue={this.state.url}
+                           onChange={this._handleChange}
+                    />
                     <input type="submit" value="Set"/>
                 </form>
             </div>

src/index.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {applyMiddleware as applyReduxMiddleware, combineReducers, createStore as createReduxStore} from 'redux';
+import {
+    applyMiddleware as applyReduxMiddleware,
+    combineReducers,
+    compose,
+    createStore as createReduxStore
+} from 'redux';
 import {Provider} from 'react-redux';
 import {BrowserRouter} from 'react-router-dom';
 
@@ -9,10 +14,12 @@ import GoogleClient from './model/google-client';
 import Context from './model/context';
 
 import setupReducer from './model/Setup/Setup-reducer';
+import {actionTypes} from './model/Setup/Setup-actions';
 
 import AppStage from './stages/App/App-stage';
 
 import reduxLogger from 'redux-logger'
+import persistReduxState from 'redux-localstorage'
 
 const googleClient = new GoogleClient(
     Consts.GOOGLE_CLIENT_ID,
@@ -21,10 +28,30 @@ const googleClient = new GoogleClient(
 );
 const context = new Context(googleClient);
 
-const reducer = combineReducers({"setup": setupReducer});
+const reduxEnhancer = compose(
+    applyReduxMiddleware(reduxLogger),
+    persistReduxState('stored')
+);
+
+function storedReducer(state = {}, action = {}) {
+    switch (action.type) {
+        case actionTypes.SET_TARGET_TIMESHEET:
+            return {
+                timesheetUrl: action.url
+            };
+        default:
+            return state;
+    }
+}
+
+const reducer = combineReducers({
+    "setup": setupReducer,
+    "stored": storedReducer
+});
 const store = createReduxStore(
     reducer,
-    applyReduxMiddleware(reduxLogger)
+    {},
+    reduxEnhancer
 );
 
 ReactDOM.render((

src/model/Setup/Setup-reducer.js

@@ -21,7 +21,11 @@ export default function appReducer(state = initialState, action = {}) {
             if (ret === null || ret.length !== 2) {
                 return {...state, error: "Invalid spreadsheets URL"};
             } else {
-                return {...state, spreadsheetId: ret[1], error: null};
+                return {
+                    ...state,
+                    spreadsheetId: ret[1],
+                    error: null
+                };
             }
         default:
             return state;

src/stages/Home/Home-stage.js

@@ -16,9 +16,7 @@ class HomeStage extends Component {
         super(props);
         this.sheetManager = new SheetManager();
         this.state = {
-            projects: [
-                'alamakota'
-            ],
+            projects: [],
             hasLoadedProjects: false
         };
     }

src/stages/Setup/Setup-stage.js

@@ -42,7 +42,11 @@ class SetupStage extends Component {
     };
 
     _renderTimesheetSetup = () => {
-        return <SetupTimesheet onTimesheetURLEntered={this._onTimesheetURLEntered}/>
+        const {state} = this.props;
+        return <SetupTimesheet
+            previousUrl={state.stored.timesheetUrl}
+            onTimesheetURLEntered={this._onTimesheetURLEntered}
+        />
     };
 
     render() {