Adding todo

.gitignore

@@ -1,2 +1,3 @@
 #node modules
-node_modules/
+node_modules/
+.vscode/

src/actions/todoAction.js

@@ -0,0 +1,11 @@
+import { ADD_TODO, REMOVE_TODO } from '../constants/todo.constants';
+
+export const addTodo = data => ({
+  type: ADD_TODO,
+  payload: data
+});
+
+export const removeTodo = data => ({
+  type: REMOVE_TODO,
+  payload: data
+});

src/components/form/Form.jsx

@@ -52,13 +52,13 @@ export class Form extends React.Component {
         />
 
         <button type='button'
-          className={`${styles.btn} ${styles.search}`}
+          className={`${styles.btn} ${styles.btnSearch}`}
           onClick={this.onGoButtonClick}
         >Go
         </button>
 
         <button type='button'
-          className={`${styles.btn} ${styles.location}`}
+          className={`${styles.btn} ${styles.btnLocation}`}
           onClick={this.onMyLocationClick}
         >
           My location

src/components/form/Form.less

@@ -6,7 +6,7 @@
   'statusbar statusbar statusbar'
   'results results results';
 
-  grid-template-columns: auto auto auto;
+  grid-template-columns: 60px 120px auto;
   grid-template-rows: 30px auto 20px auto;
   grid-row-gap: 10px;
   grid-column-gap: 10px;
@@ -45,8 +45,9 @@
 
     }
 
-    &-search {
-      grid-area: searchBtn;
+    &-location {
+
+      grid-area: myLocationBtn;
 
     }
 

src/components/header/Header.jsx

@@ -2,10 +2,14 @@ import React from 'react';
 import styles from './Header.less';
 import { Link } from 'react-router-dom';
 
-export const Header = () =>
+export const Header = () => (
   <header className={styles.pageHeader}>
     <h1 className={styles.pageLogo}>PropertyCross</h1>
-    <Link to='/favorites' className={styles.btnFaves}>
-      Faves
+    <Link to='/favorites' className={`${styles.btn} ${styles.btnFaves}`}>
+        Faves
     </Link>
-  </header>;
+    <Link to='/todolist' className={`${styles.btn} ${styles.btnTodo}`}>
+        TodoList
+    </Link>
+  </header>
+);

src/components/header/Header.less

@@ -2,9 +2,9 @@
   grid-area: header;
 
   display: grid;
-  grid-template-areas: ". logo fav";
-  grid-template-columns: 5% auto 50px;
-  grid-row-gap: 5px;
+  grid-template-areas: ". logo todo fav";
+  grid-template-columns: 125px auto 65px 60px;
+  grid-column-gap: 5px;
 
   .page-logo {
     grid-area: logo;
@@ -13,11 +13,7 @@
     font-size: 18px;
   }
 
-  .btn-faves {
-    grid-area: fav;
-    justify-self: end;
-    align-self: center;
-
+  .btn {
     width:100%;
     padding: 5px;
     text-align: center;
@@ -31,11 +27,26 @@
     background: rgb(245,245,245) linear-gradient(#f4f4f4, #f1f1f1);
     transition: all .218s ease 0s;
     outline:none;
+
+    box-sizing: border-box;
+
     &:hover {
       color: rgb(24,24,24);
       border: 1px solid rgb(198,198,198);
       background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
       box-shadow: 0 1px 2px rgba(0,0,0,.1);
     }
+
+    &-faves {
+      grid-area: fav;
+      justify-self: end;
+      align-self: center;
+    }
+
+    &-todo {
+      grid-area: todo;
+      justify-self: end;
+      align-self: center;
+    }
   }
 }

src/components/locations/Locations.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import { RECENT_SEARCHES } from '../../constants/location.constants';
 
-import { saveToLocalStorage, getFromLocalStorage } from '../../utils.js';
+import { saveToLocalStorage } from '../../utils.js';
 
 import styles from './Locations.less';
 

src/components/todoList/TodoList.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import uuidv4 from 'uuid/v4';
+
+export class TodoList extends React.Component {
+
+  state = {
+    placeName: ''
+  };
+
+  onInputChange = evt => {
+    this.setState({
+      placeName: evt.target.value
+    });
+  }
+
+  onAddBtn = () => {
+    this.props.addTodo(this.state.placeName);
+  }
+
+  btnAdd = () => (
+    <button onClick={this.onAddBtn}>+</button>
+  )
+
+  renderItems = () => (
+    this.props.todoList.map(item =>
+      <li key={uuidv4()}>
+        {item}
+        <button
+          onClick={() => {
+            this.props.removeTodo(item);
+          }}
+        >-</button>
+      </li>)
+  )
+
+  render() {
+    return (
+      <div>
+        <input onChange={this.onInputChange} type='text' value={this.state.placeName} /> {this.btnAdd()}
+        <ul>
+          {this.renderItems()}
+        </ul>
+      </div>
+    );
+  }
+}

src/constants/todo.constants.js

@@ -0,0 +1,4 @@
+export const ADD_TODO = 'ADD_TODO';
+export const REMOVE_TODO = 'REMOVE_TODO';
+
+export const TODO_LIST = 'TODO_LIST';

src/containers/Favorites.js

@@ -5,12 +5,13 @@ import { setToInitialState } from '../actions/favoritesAction.js';
 import { getPropertyData } from '../actions/propertyActions.js';
 
 import { FAVORITES } from '../constants/favorites.constants.js';
+import { getFromLocalStorage } from '../utils.js';
 
 
 const mapStateToProps = ({ favorites }) => ({
   searchResults: favorites.data,
   totalResults: favorites.data.length,
-  listOfFavorites: JSON.parse(localStorage.getItem(FAVORITES))
+  listOfFavorites: getFromLocalStorage(FAVORITES)
 });
 
 const mapDispatchToProps = {

src/containers/TodoList.js

@@ -0,0 +1,23 @@
+import { connect } from 'react-redux';
+
+import { TodoList } from '../components/todolist/TodoList.jsx';
+
+import { addTodo, removeTodo } from '../actions/todoAction';
+
+const mapStateToProps = ({
+  todos: {
+    todoList
+  }
+}) => ({
+  todoList
+});
+
+const mapDispatchToProps = {
+  addTodo,
+  removeTodo
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TodoList);

src/index.js

@@ -7,25 +7,25 @@ import Locations from './containers/Locations';
 import RealtyList from './containers/RealtyList';
 import PropertyDetails from './containers/propertyDetails';
 import Favorites from './containers/Favorites';
+import TodoList from './containers/TodoList';
 
 import store from './store/configureStore';
 import { RECENT_SEARCHES } from './constants/location.constants';
 import { FAVORITES } from './constants/favorites.constants';
+import { TODO_LIST } from './constants/todo.constants';
 
-if (!localStorage.getItem(RECENT_SEARCHES)) {
-  localStorage.recentSearches = JSON.stringify([]);
-}
-
-if (!localStorage.getItem(FAVORITES)) {
-  localStorage[FAVORITES] = JSON.stringify([]);
-}
+import { setInitialStateOfLocalStorage } from './utils.js';
 
+setInitialStateOfLocalStorage(RECENT_SEARCHES);
+setInitialStateOfLocalStorage(FAVORITES);
+setInitialStateOfLocalStorage(TODO_LIST);
 
 render(
   <Provider store={store}>
     <BrowserRouter>
       <Switch>
         <Route exact path='/' component={Locations} />
+        <Route path='/todolist' component={TodoList} />
         <Route exact path='/realty/:item' component={RealtyList} />
         <Route path='/realty/:item/:name' component={PropertyDetails} />
         <Route exact path='/:fav' component={Favorites} />

src/reducers/favoritesReducer.js

@@ -1,9 +1,9 @@
 import { SET_TO_FAVORITES, FAVORITES, SET_TO_INITIAL_STATE } from '../constants/favorites.constants.js';
 
-import { saveToLocalStorage } from '../utils.js';
+import { saveToLocalStorage, getFromLocalStorage } from '../utils.js';
 
 const initialState = {
-  data: JSON.parse(localStorage.getItem(FAVORITES))
+  data: getFromLocalStorage(FAVORITES)
 };
 
 export const favoritesReducer = (state = initialState, action) => {
@@ -23,7 +23,7 @@ export const favoritesReducer = (state = initialState, action) => {
 
   case SET_TO_INITIAL_STATE:
     return {
-      data: JSON.parse(localStorage.getItem(FAVORITES))
+      data: getFromLocalStorage(FAVORITES)
     };
 
   default: return state;

src/reducers/locationReducer.js

@@ -1,13 +1,15 @@
 import { FETCH_LOCATIONS, FETCH_LOCATIONS_SUCCESS, FETCH_LOCATIONS_ERROR, RECENT_SEARCHES, FETCH_MY_LOCATION_SUCCESS, SET_TO_INITIAL_STATE } from '../constants/location.constants';
 
+import { getFromLocalStorage } from '../utils.js';
+
 const initialState = {
   fetching: false,
   fetched: false,
   error: null,
   locations: [],
   title: 'Recent searches:',
   searchedValue: '',
-  recentSearches: JSON.parse(localStorage.getItem(RECENT_SEARCHES)) || []
+  recentSearches: getFromLocalStorage(RECENT_SEARCHES) || []
 };
 
 export const locationsReducer = (state = initialState, {
@@ -59,7 +61,7 @@ export const locationsReducer = (state = initialState, {
       locations: [],
       title: 'Recent searches:',
       searchedValue: '',
-      recentSearches: JSON.parse(localStorage.getItem(RECENT_SEARCHES)) || []
+      recentSearches: getFromLocalStorage(RECENT_SEARCHES) || []
     };
 
   default: return state;

src/reducers/todoReducer.js

@@ -0,0 +1,39 @@
+import { ADD_TODO, REMOVE_TODO, TODO_LIST } from '../constants/todo.constants.js';
+
+import {
+  saveToLocalStorage,
+  getFromLocalStorage,
+  deleteFromLocalStorage
+} from '../utils.js';
+
+const initialState = {
+  todoList: getFromLocalStorage(TODO_LIST)
+};
+
+export const todoListReducer = (state = initialState, action) => {
+  switch (action.type) {
+  case ADD_TODO:
+
+    saveToLocalStorage(TODO_LIST, state.todoList, action.payload);
+
+    return {
+      ...state,
+      todoList: [
+        ...state.todoList,
+        action.payload
+      ]
+    };
+
+  case REMOVE_TODO:
+
+    deleteFromLocalStorage(TODO_LIST, state.todoList, action.payload);
+
+    return {
+      ...state,
+      todoList: [...state.todoList.filter(todo => todo !== action.payload)]
+    };
+
+  default: return state;
+
+  }
+};

src/store/combineReducers.js

@@ -3,12 +3,14 @@ import { locationsReducer } from '../reducers/locationReducer';
 import { realtyReducer } from '../reducers/realtyReducer';
 import { propertyReducer } from '../reducers/PropertyReducer';
 import { favoritesReducer } from '../reducers/favoritesReducer';
+import { todoListReducer } from '../reducers/todoReducer';
 
 const rootReducer = combineReducers({
   locations: locationsReducer,
   realty: realtyReducer,
   property: propertyReducer,
-  favorites: favoritesReducer
+  favorites: favoritesReducer,
+  todos: todoListReducer
 });
 
 export default rootReducer;

src/utils.js

@@ -8,5 +8,19 @@ export function saveToLocalStorage(constant, state, payload) {
 }
 
 export function getFromLocalStorage(constant) {
-  JSON.parse(localStorage.getItem(constant));
+  return JSON.parse(localStorage.getItem(constant));
+}
+
+export function deleteFromLocalStorage(constant, state, payload) {
+  const stringifyData = JSON.stringify([
+    ...state.filter(todo => todo !== payload)
+  ]);
+
+  localStorage.setItem(constant, stringifyData);
+}
+
+export function setInitialStateOfLocalStorage(constant) {
+  if (!localStorage.getItem(constant)) {
+    localStorage[constant] = JSON.stringify([]);
+  }
 }