From 834b6172e5d2802fc967dd5016f38db49b497d35 Mon Sep 17 00:00:00 2001 From: ASD Date: Wed, 10 Oct 2018 14:31:38 +0300 Subject: [PATCH 01/13] adding utils function --- src/containers/Favorites.js | 3 ++- src/reducers/favoritesReducer.js | 6 +++--- src/reducers/locationReducer.js | 6 ++++-- src/utils.js | 2 +- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/containers/Favorites.js b/src/containers/Favorites.js index d402151..c262f05 100644 --- a/src/containers/Favorites.js +++ b/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 = { diff --git a/src/reducers/favoritesReducer.js b/src/reducers/favoritesReducer.js index da2a477..8dfc9b1 100644 --- a/src/reducers/favoritesReducer.js +++ b/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; diff --git a/src/reducers/locationReducer.js b/src/reducers/locationReducer.js index e9c8495..582e971 100644 --- a/src/reducers/locationReducer.js +++ b/src/reducers/locationReducer.js @@ -1,5 +1,7 @@ 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, @@ -7,7 +9,7 @@ const initialState = { 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; diff --git a/src/utils.js b/src/utils.js index 87b3664..0b49617 100644 --- a/src/utils.js +++ b/src/utils.js @@ -8,5 +8,5 @@ export function saveToLocalStorage(constant, state, payload) { } export function getFromLocalStorage(constant) { - JSON.parse(localStorage.getItem(constant)); + return JSON.parse(localStorage.getItem(constant)); } From 589316a528b2e299b812dae26f7ee2e9beeb4496 Mon Sep 17 00:00:00 2001 From: asdHome Date: Mon, 15 Oct 2018 13:54:21 +0300 Subject: [PATCH 02/13] adding components for todo list --- src/components/todoItem/TodoItem.jsx | 0 src/components/todoList/TodoList.jsx | 7 +++++++ 2 files changed, 7 insertions(+) create mode 100644 src/components/todoItem/TodoItem.jsx create mode 100644 src/components/todoList/TodoList.jsx diff --git a/src/components/todoItem/TodoItem.jsx b/src/components/todoItem/TodoItem.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/todoList/TodoList.jsx b/src/components/todoList/TodoList.jsx new file mode 100644 index 0000000..2446826 --- /dev/null +++ b/src/components/todoList/TodoList.jsx @@ -0,0 +1,7 @@ +import React from 'react'; + +export const todo = props => ( + +); From ec502f54d2f5e098ede0b0371c58af6b5733cb76 Mon Sep 17 00:00:00 2001 From: asdHome Date: Mon, 15 Oct 2018 23:17:48 +0300 Subject: [PATCH 03/13] added basic settings --- src/components/header/Header.jsx | 5 ++++- src/components/header/Header.less | 23 ++++++++++++++++------- src/components/locations/Locations.jsx | 2 +- src/components/todoItem/TodoItem.jsx | 0 src/components/todoList/TodoList.jsx | 26 +++++++++++++++++++++----- src/containers/TodoList.js | 14 ++++++++++++++ src/index.js | 2 ++ 7 files changed, 58 insertions(+), 14 deletions(-) delete mode 100644 src/components/todoItem/TodoItem.jsx create mode 100644 src/containers/TodoList.js diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index 67c67f4..12bd023 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -5,7 +5,10 @@ import { Link } from 'react-router-dom'; export const Header = () =>

PropertyCross

- + Faves + + TodoList +
; diff --git a/src/components/header/Header.less b/src/components/header/Header.less index ae7a37d..412fbee 100644 --- a/src/components/header/Header.less +++ b/src/components/header/Header.less @@ -2,8 +2,8 @@ grid-area: header; display: grid; - grid-template-areas: ". logo fav"; - grid-template-columns: 5% auto 50px; + grid-template-areas: ". logo todo fav"; + grid-template-columns: 5% auto 50px 50px; grid-row-gap: 5px; .page-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,24 @@ background: rgb(245,245,245) linear-gradient(#f4f4f4, #f1f1f1); transition: all .218s ease 0s; outline:none; + &: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; + } } } diff --git a/src/components/locations/Locations.jsx b/src/components/locations/Locations.jsx index c5674b9..3f2d363 100644 --- a/src/components/locations/Locations.jsx +++ b/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'; diff --git a/src/components/todoItem/TodoItem.jsx b/src/components/todoItem/TodoItem.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/todoList/TodoList.jsx b/src/components/todoList/TodoList.jsx index 2446826..840729e 100644 --- a/src/components/todoList/TodoList.jsx +++ b/src/components/todoList/TodoList.jsx @@ -1,7 +1,23 @@ import React from 'react'; -export const todo = props => ( -
    - -
-); +export class TodoList extends React.Component { + + componentDidMount() { + console.log('mounted'); + } + + render() { + + const btnAdd = '+'; + const btnRemove = '-'; + + return ( +
+ +
    +
  • value{btnAdd}{btnRemove}
    • +
+
+ ); + } +} diff --git a/src/containers/TodoList.js b/src/containers/TodoList.js new file mode 100644 index 0000000..ea4a45c --- /dev/null +++ b/src/containers/TodoList.js @@ -0,0 +1,14 @@ +import { connect } from 'react-redux'; + +import { TodoList } from '../components/todolist/TodoList.jsx'; + +const mapStateToProps = state => ({ + +}); + +const mapDispatchToProps = {}; + +export default connect( + mapStateToProps, + mapDispatchToProps +)(TodoList); diff --git a/src/index.js b/src/index.js index 3fe1af3..5165ba7 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ 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'; @@ -26,6 +27,7 @@ render( + From 50afcd847d58ab489177629028eb4729c77d9536 Mon Sep 17 00:00:00 2001 From: ASD Date: Tue, 16 Oct 2018 15:38:08 +0300 Subject: [PATCH 04/13] added action, reworked styles, added constants, reducer, added basic settings --- .gitignore | 3 ++- src/actions/todoAction.js | 11 +++++++++++ src/components/form/Form.jsx | 4 ++-- src/components/form/Form.less | 7 ++++--- src/components/header/Header.jsx | 13 +++++++------ src/components/header/Header.less | 6 ++++-- src/components/todoList/TodoList.jsx | 12 ++++-------- src/constants/todo.constants.js | 2 ++ src/containers/TodoList.js | 13 +++++++++++-- src/index.js | 4 ++-- src/reducers/todoReducer.js | 23 +++++++++++++++++++++++ src/store/combineReducers.js | 4 +++- 12 files changed, 75 insertions(+), 27 deletions(-) create mode 100644 src/actions/todoAction.js create mode 100644 src/constants/todo.constants.js create mode 100644 src/reducers/todoReducer.js diff --git a/.gitignore b/.gitignore index dc4e505..b43ce62 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ #node modules -node_modules/ \ No newline at end of file +node_modules/ +.vscode/ diff --git a/src/actions/todoAction.js b/src/actions/todoAction.js new file mode 100644 index 0000000..4dc8e0d --- /dev/null +++ b/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 +}); diff --git a/src/components/form/Form.jsx b/src/components/form/Form.jsx index 05594ff..32efed8 100644 --- a/src/components/form/Form.jsx +++ b/src/components/form/Form.jsx @@ -52,13 +52,13 @@ export class Form extends React.Component { /> ; + const btnRemove = ; return (
- + {btnAdd}
    -
  • value{btnAdd}{btnRemove}
    • +
  • value{btnRemove}
); diff --git a/src/constants/todo.constants.js b/src/constants/todo.constants.js new file mode 100644 index 0000000..d93c319 --- /dev/null +++ b/src/constants/todo.constants.js @@ -0,0 +1,2 @@ +export const ADD_TODO = 'ADD_TODO'; +export const REMOVE_TODO = 'REMOVE_TODO'; diff --git a/src/containers/TodoList.js b/src/containers/TodoList.js index ea4a45c..d1b603d 100644 --- a/src/containers/TodoList.js +++ b/src/containers/TodoList.js @@ -2,11 +2,20 @@ import { connect } from 'react-redux'; import { TodoList } from '../components/todolist/TodoList.jsx'; -const mapStateToProps = state => ({ +import { addTodo, removeTodo } from '../actions/todoAction'; +const mapStateToProps = ({ + todos: { + todoList + } +}) => ({ + todoList }); -const mapDispatchToProps = {}; +const mapDispatchToProps = { + addTodo, + removeTodo +}; export default connect( mapStateToProps, diff --git a/src/index.js b/src/index.js index 5165ba7..4ce2443 100644 --- a/src/index.js +++ b/src/index.js @@ -7,7 +7,7 @@ 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 TodoList from './containers/TodoList'; import store from './store/configureStore'; import { RECENT_SEARCHES } from './constants/location.constants'; @@ -27,7 +27,7 @@ render( - + diff --git a/src/reducers/todoReducer.js b/src/reducers/todoReducer.js new file mode 100644 index 0000000..e4c7335 --- /dev/null +++ b/src/reducers/todoReducer.js @@ -0,0 +1,23 @@ +import { ADD_TODO, REMOVE_TODO } from '../constants/todo.constants.js'; + +const initialState = { + todoList: [] +}; + +export const todoListReducer = (state = initialState, action) => { + switch (action.type) { + case ADD_TODO: + return { + ...state, + todoList: action.payload + }; + + case REMOVE_TODO: + return { + ...state + }; + + default: return state; + + } +}; diff --git a/src/store/combineReducers.js b/src/store/combineReducers.js index 3f86171..e42706e 100644 --- a/src/store/combineReducers.js +++ b/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; From 848e44e3326b5102de7cb1adb6772ad8e22eb69d Mon Sep 17 00:00:00 2001 From: ASD Date: Tue, 16 Oct 2018 16:12:33 +0300 Subject: [PATCH 05/13] reworking logic in component --- src/components/todoList/TodoList.jsx | 13 ++++++++++--- src/reducers/todoReducer.js | 5 ++++- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/todoList/TodoList.jsx b/src/components/todoList/TodoList.jsx index ce349d2..8fb8387 100644 --- a/src/components/todoList/TodoList.jsx +++ b/src/components/todoList/TodoList.jsx @@ -2,14 +2,21 @@ import React from 'react'; export class TodoList extends React.Component { - render() { + onInputChange = evt => { + const value = evt.target.value; + }; + + onAddBtn = () => { - const btnAdd = ; + } + + render() { + const btnAdd = ; const btnRemove = ; return (
- {btnAdd} + {btnAdd}
  • value{btnRemove}
diff --git a/src/reducers/todoReducer.js b/src/reducers/todoReducer.js index e4c7335..6a18c2b 100644 --- a/src/reducers/todoReducer.js +++ b/src/reducers/todoReducer.js @@ -9,7 +9,10 @@ export const todoListReducer = (state = initialState, action) => { case ADD_TODO: return { ...state, - todoList: action.payload + todoList: [ + ...state.todoList, + action.payload + ] }; case REMOVE_TODO: From c466e5b619373738afa880fcbf17158b5d0321ba Mon Sep 17 00:00:00 2001 From: ASD Date: Thu, 18 Oct 2018 15:19:22 +0300 Subject: [PATCH 06/13] creating list item is correct --- src/components/todoList/TodoList.jsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/todoList/TodoList.jsx b/src/components/todoList/TodoList.jsx index 8fb8387..ff9d4ae 100644 --- a/src/components/todoList/TodoList.jsx +++ b/src/components/todoList/TodoList.jsx @@ -1,24 +1,31 @@ import React from 'react'; +import uuidv4 from 'uuid/v4'; export class TodoList extends React.Component { + state = { placeName: '' }; + onInputChange = evt => { - const value = evt.target.value; - }; + this.setState({ + placeName: evt.target.value + }); + } onAddBtn = () => { - + this.props.addTodo(this.state.placeName); } render() { const btnAdd = ; const btnRemove = ; + const renderItem = this.props.todoList.map(item =>
  • {item}{btnRemove}
    • ); + return (
    {btnAdd}
      -
    • value{btnRemove}
      • + {renderItem}
    ); From 62694d4c8f31682b18fce9a3a107db28a530d678 Mon Sep 17 00:00:00 2001 From: ASD Date: Thu, 18 Oct 2018 18:29:50 +0300 Subject: [PATCH 07/13] creating list item is correct --- src/components/todoList/TodoList.jsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/todoList/TodoList.jsx b/src/components/todoList/TodoList.jsx index ff9d4ae..4890102 100644 --- a/src/components/todoList/TodoList.jsx +++ b/src/components/todoList/TodoList.jsx @@ -3,7 +3,9 @@ import uuidv4 from 'uuid/v4'; export class TodoList extends React.Component { - state = { placeName: '' }; + state = { + placeName: '' + }; onInputChange = evt => { this.setState({ @@ -15,11 +17,17 @@ export class TodoList extends React.Component { this.props.addTodo(this.state.placeName); } + onRemoveBtn = e => { + console.log(e.currentTarget.parentNode); + this.props.removeTodo(this.state.placeName); + } + render() { + const { todoList } = this.props; const btnAdd = ; - const btnRemove = ; + const btnRemove = ; - const renderItem = this.props.todoList.map(item =>
  • {item}{btnRemove}
    • ); + const renderItem = todoList.map(item =>
  • {item} {btnRemove}
    • ); return (
    From ce33cdbf10e2497b800bc4b72c8bda288d10db6c Mon Sep 17 00:00:00 2001 From: ASD Date: Fri, 19 Oct 2018 17:28:34 +0300 Subject: [PATCH 08/13] little changes --- src/components/todoList/TodoList.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/todoList/TodoList.jsx b/src/components/todoList/TodoList.jsx index 4890102..f086020 100644 --- a/src/components/todoList/TodoList.jsx +++ b/src/components/todoList/TodoList.jsx @@ -17,9 +17,9 @@ export class TodoList extends React.Component { this.props.addTodo(this.state.placeName); } - onRemoveBtn = e => { - console.log(e.currentTarget.parentNode); - this.props.removeTodo(this.state.placeName); + onRemoveBtn = () => { + console.log(this); + this.props.removeTodo(); } render() { @@ -27,7 +27,7 @@ export class TodoList extends React.Component { const btnAdd = ; const btnRemove = ; - const renderItem = todoList.map(item =>
  • {item} {btnRemove}
    • ); + const renderItem = todoList.map(item =>
  • {item} {btnRemove}
    • ); return (
    From 0d13bc9819b92530dbe131742ed91e1bfaca4bf0 Mon Sep 17 00:00:00 2001 From: ASD Date: Tue, 23 Oct 2018 11:27:35 +0300 Subject: [PATCH 09/13] deleted const for delete, and made it built-in to the li, so i can set item or item.id as data to removeTodo --- src/components/todoList/TodoList.jsx | 21 +++++++++++++-------- src/reducers/todoReducer.js | 3 ++- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/todoList/TodoList.jsx b/src/components/todoList/TodoList.jsx index f086020..666434b 100644 --- a/src/components/todoList/TodoList.jsx +++ b/src/components/todoList/TodoList.jsx @@ -17,17 +17,22 @@ export class TodoList extends React.Component { this.props.addTodo(this.state.placeName); } - onRemoveBtn = () => { - console.log(this); - this.props.removeTodo(); - } - render() { - const { todoList } = this.props; + const { todoList, removeTodo } = this.props; const btnAdd = ; - const btnRemove = ; - const renderItem = todoList.map(item =>
  • {item} {btnRemove}
    • ); + const renderItem = todoList.map(item => +
  • + {item} + +
    • + ); return (
    diff --git a/src/reducers/todoReducer.js b/src/reducers/todoReducer.js index 6a18c2b..d266433 100644 --- a/src/reducers/todoReducer.js +++ b/src/reducers/todoReducer.js @@ -17,7 +17,8 @@ export const todoListReducer = (state = initialState, action) => { case REMOVE_TODO: return { - ...state + ...state, + todoList: [...state.todoList.filter(todo => todo !== action.payload)] }; default: return state; From 5d6ae87a3c657487f1e7f9e76087e430d446b1e9 Mon Sep 17 00:00:00 2001 From: ASD Date: Tue, 23 Oct 2018 13:04:14 +0300 Subject: [PATCH 10/13] added function to add todoList to localStorage and function to delete from todoList from localStorage --- src/components/todoList/TodoList.jsx | 9 ++++++--- src/constants/todo.constants.js | 2 ++ src/index.js | 5 +++++ src/reducers/todoReducer.js | 16 ++++++++++++++-- src/utils.js | 8 ++++++++ 5 files changed, 35 insertions(+), 5 deletions(-) diff --git a/src/components/todoList/TodoList.jsx b/src/components/todoList/TodoList.jsx index 666434b..8086872 100644 --- a/src/components/todoList/TodoList.jsx +++ b/src/components/todoList/TodoList.jsx @@ -1,6 +1,9 @@ import React from 'react'; import uuidv4 from 'uuid/v4'; +import { TODOLIST } from '../../constants/todo.constants'; +import { saveToLocalStorage } from '../../utils.js'; + export class TodoList extends React.Component { state = { @@ -17,6 +20,8 @@ export class TodoList extends React.Component { this.props.addTodo(this.state.placeName); } + + render() { const { todoList, removeTodo } = this.props; const btnAdd = ; @@ -28,9 +33,7 @@ export class TodoList extends React.Component { onClick={() => { removeTodo(item); }} - > - - - + >- ); diff --git a/src/constants/todo.constants.js b/src/constants/todo.constants.js index d93c319..cd2d149 100644 --- a/src/constants/todo.constants.js +++ b/src/constants/todo.constants.js @@ -1,2 +1,4 @@ export const ADD_TODO = 'ADD_TODO'; export const REMOVE_TODO = 'REMOVE_TODO'; + +export const TODOLIST = 'TODOLIST'; diff --git a/src/index.js b/src/index.js index 4ce2443..868d869 100644 --- a/src/index.js +++ b/src/index.js @@ -12,6 +12,7 @@ import TodoList from './containers/TodoList'; import store from './store/configureStore'; import { RECENT_SEARCHES } from './constants/location.constants'; import { FAVORITES } from './constants/favorites.constants'; +import { TODOLIST } from './constants/todo.constants'; if (!localStorage.getItem(RECENT_SEARCHES)) { localStorage.recentSearches = JSON.stringify([]); @@ -21,6 +22,10 @@ if (!localStorage.getItem(FAVORITES)) { localStorage[FAVORITES] = JSON.stringify([]); } +if (!localStorage.getItem(TODOLIST)) { + localStorage[TODOLIST] = JSON.stringify([]); +} + render( diff --git a/src/reducers/todoReducer.js b/src/reducers/todoReducer.js index d266433..bc45e67 100644 --- a/src/reducers/todoReducer.js +++ b/src/reducers/todoReducer.js @@ -1,12 +1,21 @@ -import { ADD_TODO, REMOVE_TODO } from '../constants/todo.constants.js'; +import { ADD_TODO, REMOVE_TODO, TODOLIST } from '../constants/todo.constants.js'; + +import { + saveToLocalStorage, + getFromLocalStorage, + deleteFromLocalStorage +} from '../utils.js'; const initialState = { - todoList: [] + todoList: getFromLocalStorage(TODOLIST) }; export const todoListReducer = (state = initialState, action) => { switch (action.type) { case ADD_TODO: + + saveToLocalStorage(TODOLIST, state.todoList, action.payload); + return { ...state, todoList: [ @@ -16,6 +25,9 @@ export const todoListReducer = (state = initialState, action) => { }; case REMOVE_TODO: + + deleteFromLocalStorage(TODOLIST, state.todoList, action.payload); + return { ...state, todoList: [...state.todoList.filter(todo => todo !== action.payload)] diff --git a/src/utils.js b/src/utils.js index 0b49617..3524022 100644 --- a/src/utils.js +++ b/src/utils.js @@ -10,3 +10,11 @@ export function saveToLocalStorage(constant, state, payload) { export function getFromLocalStorage(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); +} From c3309632189586bb00dd749cce35dc83a21adf43 Mon Sep 17 00:00:00 2001 From: ASD Date: Tue, 23 Oct 2018 13:13:19 +0300 Subject: [PATCH 11/13] refactoring --- src/index.js | 15 ++++----------- src/utils.js | 6 ++++++ 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/index.js b/src/index.js index 868d869..5179a7f 100644 --- a/src/index.js +++ b/src/index.js @@ -14,18 +14,11 @@ import { RECENT_SEARCHES } from './constants/location.constants'; import { FAVORITES } from './constants/favorites.constants'; import { TODOLIST } from './constants/todo.constants'; -if (!localStorage.getItem(RECENT_SEARCHES)) { - localStorage.recentSearches = JSON.stringify([]); -} - -if (!localStorage.getItem(FAVORITES)) { - localStorage[FAVORITES] = JSON.stringify([]); -} - -if (!localStorage.getItem(TODOLIST)) { - localStorage[TODOLIST] = JSON.stringify([]); -} +import { setInitialStateOfLocalStorage } from './utils.js'; +setInitialStateOfLocalStorage(RECENT_SEARCHES); +setInitialStateOfLocalStorage(FAVORITES); +setInitialStateOfLocalStorage(TODOLIST); render( diff --git a/src/utils.js b/src/utils.js index 3524022..e8c9d80 100644 --- a/src/utils.js +++ b/src/utils.js @@ -18,3 +18,9 @@ export function deleteFromLocalStorage(constant, state, payload) { localStorage.setItem(constant, stringifyData); } + +export function setInitialStateOfLocalStorage(constant) { + if (!localStorage.getItem(constant)) { + localStorage[constant] = JSON.stringify([]); + } +} From 923e81c0c3ec07c9c0817022daab1b795ee435c2 Mon Sep 17 00:00:00 2001 From: ASD Date: Wed, 24 Oct 2018 08:59:13 +0300 Subject: [PATCH 12/13] rename to TODO_LIST, fixed value of the input in TodoComponent --- src/components/todoList/TodoList.jsx | 7 +------ src/constants/todo.constants.js | 2 +- src/index.js | 4 ++-- src/reducers/todoReducer.js | 8 ++++---- 4 files changed, 8 insertions(+), 13 deletions(-) diff --git a/src/components/todoList/TodoList.jsx b/src/components/todoList/TodoList.jsx index 8086872..db14374 100644 --- a/src/components/todoList/TodoList.jsx +++ b/src/components/todoList/TodoList.jsx @@ -1,9 +1,6 @@ import React from 'react'; import uuidv4 from 'uuid/v4'; -import { TODOLIST } from '../../constants/todo.constants'; -import { saveToLocalStorage } from '../../utils.js'; - export class TodoList extends React.Component { state = { @@ -20,8 +17,6 @@ export class TodoList extends React.Component { this.props.addTodo(this.state.placeName); } - - render() { const { todoList, removeTodo } = this.props; const btnAdd = ; @@ -39,7 +34,7 @@ export class TodoList extends React.Component { return (
    - {btnAdd} + {btnAdd}
      {renderItem}
    diff --git a/src/constants/todo.constants.js b/src/constants/todo.constants.js index cd2d149..aad8dc5 100644 --- a/src/constants/todo.constants.js +++ b/src/constants/todo.constants.js @@ -1,4 +1,4 @@ export const ADD_TODO = 'ADD_TODO'; export const REMOVE_TODO = 'REMOVE_TODO'; -export const TODOLIST = 'TODOLIST'; +export const TODO_LIST = 'TODO_LIST'; diff --git a/src/index.js b/src/index.js index 5179a7f..d79cbff 100644 --- a/src/index.js +++ b/src/index.js @@ -12,13 +12,13 @@ import TodoList from './containers/TodoList'; import store from './store/configureStore'; import { RECENT_SEARCHES } from './constants/location.constants'; import { FAVORITES } from './constants/favorites.constants'; -import { TODOLIST } from './constants/todo.constants'; +import { TODO_LIST } from './constants/todo.constants'; import { setInitialStateOfLocalStorage } from './utils.js'; setInitialStateOfLocalStorage(RECENT_SEARCHES); setInitialStateOfLocalStorage(FAVORITES); -setInitialStateOfLocalStorage(TODOLIST); +setInitialStateOfLocalStorage(TODO_LIST); render( diff --git a/src/reducers/todoReducer.js b/src/reducers/todoReducer.js index bc45e67..9da6b6a 100644 --- a/src/reducers/todoReducer.js +++ b/src/reducers/todoReducer.js @@ -1,4 +1,4 @@ -import { ADD_TODO, REMOVE_TODO, TODOLIST } from '../constants/todo.constants.js'; +import { ADD_TODO, REMOVE_TODO, TODO_LIST } from '../constants/todo.constants.js'; import { saveToLocalStorage, @@ -7,14 +7,14 @@ import { } from '../utils.js'; const initialState = { - todoList: getFromLocalStorage(TODOLIST) + todoList: getFromLocalStorage(TODO_LIST) }; export const todoListReducer = (state = initialState, action) => { switch (action.type) { case ADD_TODO: - saveToLocalStorage(TODOLIST, state.todoList, action.payload); + saveToLocalStorage(TODO_LIST, state.todoList, action.payload); return { ...state, @@ -26,7 +26,7 @@ export const todoListReducer = (state = initialState, action) => { case REMOVE_TODO: - deleteFromLocalStorage(TODOLIST, state.todoList, action.payload); + deleteFromLocalStorage(TODO_LIST, state.todoList, action.payload); return { ...state, From ce3e37166025bc8d26d57f7befcb6f328fbe7fc6 Mon Sep 17 00:00:00 2001 From: ASD Date: Wed, 24 Oct 2018 10:20:01 +0300 Subject: [PATCH 13/13] refactoring --- src/components/todoList/TodoList.jsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/todoList/TodoList.jsx b/src/components/todoList/TodoList.jsx index db14374..9d26b3f 100644 --- a/src/components/todoList/TodoList.jsx +++ b/src/components/todoList/TodoList.jsx @@ -17,26 +17,28 @@ export class TodoList extends React.Component { this.props.addTodo(this.state.placeName); } - render() { - const { todoList, removeTodo } = this.props; - const btnAdd = ; + btnAdd = () => ( + + ) - const renderItem = todoList.map(item => + renderItems = () => ( + this.props.todoList.map(item =>
  • {item} -
    • - ); + ) + ) + render() { return (
    - {btnAdd} + {this.btnAdd()}
      - {renderItem} + {this.renderItems()}
    );