From ca4db1f215a00815609192b89f0c0853ba9c6919 Mon Sep 17 00:00:00 2001 From: Israa91 Date: Wed, 28 Apr 2021 13:38:06 +0300 Subject: [PATCH] add completed active and all functionality --- src/App.js | 13 ++----- src/app/rootReducer.js | 10 ++++++ src/app/store.js | 6 ++-- src/components/Checkbox/index.js | 11 ------ src/components/Checkbox/style.css | 22 ------------ src/components/FilterButton/index.js | 18 ++++++++++ src/components/FilterButton/style.css | 0 src/components/TodoList/index.js | 50 +++++++++++++++++++++++++++ src/components/TodoList/style.css | 0 src/features/filtersSlice.js | 23 ++++++++++++ 10 files changed, 106 insertions(+), 47 deletions(-) create mode 100644 src/app/rootReducer.js delete mode 100644 src/components/Checkbox/index.js delete mode 100644 src/components/Checkbox/style.css create mode 100644 src/components/FilterButton/index.js create mode 100644 src/components/FilterButton/style.css create mode 100644 src/components/TodoList/index.js create mode 100644 src/components/TodoList/style.css create mode 100644 src/features/filtersSlice.js diff --git a/src/App.js b/src/App.js index b8d6016..ad3d98e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,14 @@ import React from 'react'; - -import { useSelector } from 'react-redux'; import AddTodo from './components/AddTodo'; -import TodoItem from './components/TodoItem'; -import { selectTodoList } from './features/todoSlice'; +import TodoList from './components/TodoList'; + import './App.css'; function App() { - const todoList = useSelector(selectTodoList); return (
- +
); } diff --git a/src/app/rootReducer.js b/src/app/rootReducer.js new file mode 100644 index 0000000..c62105a --- /dev/null +++ b/src/app/rootReducer.js @@ -0,0 +1,10 @@ +import { combineReducers } from '@reduxjs/toolkit'; +import todos from '../features/todoSlice'; +import visibilityFilter from '../features/filtersSlice'; + +const rootReducer = combineReducers({ + todos, + visibilityFilter, +}); + +export default rootReducer; diff --git a/src/app/store.js b/src/app/store.js index 8b28da7..daac292 100644 --- a/src/app/store.js +++ b/src/app/store.js @@ -1,8 +1,6 @@ import { configureStore } from '@reduxjs/toolkit'; -import todoReducer from '../features/todoSlice'; +import rootReducer from './rootReducer'; export default configureStore({ - reducer: { - todos: todoReducer, - }, + reducer: rootReducer, }); diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js deleted file mode 100644 index 1e1d8f5..0000000 --- a/src/components/Checkbox/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import './style.css' -const CheckBox = ({ id, checked, checkAll }) => ( - - - - -); - -export default CheckBox; diff --git a/src/components/Checkbox/style.css b/src/components/Checkbox/style.css deleted file mode 100644 index e2ce9f4..0000000 --- a/src/components/Checkbox/style.css +++ /dev/null @@ -1,22 +0,0 @@ -input[type="checkbox"] { - display: none; - } - input[type="checkbox"] + span { - display: inline-block; - position: relative; - top: -1px; - width: 12px; - height: 12px; - margin: -1px 0px 0 0; - vertical-align: middle; - background: white left top no-repeat; - border: 1px solid #ccc; - cursor: pointer; - } - input[type="checkbox"]:checked + span { - background: #D9534F -19px top no-repeat; - } - - input[type="checkbox"] + span { - margin-right: 4px; - } \ No newline at end of file diff --git a/src/components/FilterButton/index.js b/src/components/FilterButton/index.js new file mode 100644 index 0000000..759d652 --- /dev/null +++ b/src/components/FilterButton/index.js @@ -0,0 +1,18 @@ +import React from 'react'; + +import { useDispatch } from 'react-redux'; + +import { setVisibilityFilter } from '../../features/filtersSlice'; + +export default function FilterButton({ visibilityFilter, text }) { + const dispatch = useDispatch(); + + return ( + + ); +} diff --git a/src/components/FilterButton/style.css b/src/components/FilterButton/style.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/TodoList/index.js b/src/components/TodoList/index.js new file mode 100644 index 0000000..86fadee --- /dev/null +++ b/src/components/TodoList/index.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import TodoItem from '../TodoItem'; +import { VisibilityFilter } from '../../features/filtersSlice'; +import FilterButton from '../FilterButton'; + +const getVisibleTodos = (todos, filter) => { + switch (filter) { + case VisibilityFilter.ShowAll: + return todos; + case VisibilityFilter.ShowCompleted: + return todos.filter((t) => t.done === true); + case VisibilityFilter.ShowActive: + return todos.filter((t) => t.done === false); + default: + throw new Error(`Unknown filter: ${filter}`); + } +}; + +const TodoList = () => { + const todos = useSelector((state) => + getVisibleTodos(state.todos.todoList, state.visibilityFilter) + ); + return ( + + ); +}; + +export default TodoList; diff --git a/src/components/TodoList/style.css b/src/components/TodoList/style.css new file mode 100644 index 0000000..e69de29 diff --git a/src/features/filtersSlice.js b/src/features/filtersSlice.js new file mode 100644 index 0000000..449614b --- /dev/null +++ b/src/features/filtersSlice.js @@ -0,0 +1,23 @@ +import { createSlice } from '@reduxjs/toolkit'; + +export const VisibilityFilter = { + ShowAll: 'SHOW_ALL', + ShowCompleted: 'SHOW_COMPLETED', + ShowActive: 'SHOW_ACTIVE', +}; + +const initialState = VisibilityFilter.ShowAll; + +const visibilityFilterSlice = createSlice({ + name: 'visibilityFilter', + initialState, + reducers: { + setVisibilityFilter(state, action) { + return action.payload; + }, + }, +}); + +export const { setVisibilityFilter } = visibilityFilterSlice.actions; +export const selectVisibilityFilter = (state) => state.visibilityFilter.VisibilityFilter; +export default visibilityFilterSlice.reducer;