add completed active and all functionality

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 (
     <div className="app__container">
-      <ul className="app__todoContainer">
-        {todoList.map((item) => (
-          <TodoItem text={item.text} done={item.done} id={item.id} key={item.id} />
-        ))}
-      </ul>
       <AddTodo />
+      <TodoList />
     </div>
   );
 }

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;

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,
 });

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 (
+    <button
+      type="button"
+      onClick={() => dispatch(setVisibilityFilter(visibilityFilter))}
+    >
+      {text}
+    </button>
+  );
+}

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 (
+    <ul>
+      {todos.map((item) => (
+        <TodoItem
+          text={item.text}
+          done={item.done}
+          id={item.id}
+          key={item.id}
+        />
+      ))}
+      <div>
+        <span>Show: </span>
+        <FilterButton visibilityFilter={VisibilityFilter.ShowAll} text="All" />
+        <FilterButton
+          visibilityFilter={VisibilityFilter.ShowActive}
+          text="Active"
+        />
+        <FilterButton
+          visibilityFilter={VisibilityFilter.ShowCompleted}
+          text="Completed"
+        />
+      </div>
+    </ul>
+  );
+};
+
+export default TodoList;

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;