day3 「Todo の復元機能の実装」の一例

src/features/todos/components/TodoContainer.tsx

@@ -1,13 +1,22 @@
 import type { FC } from 'react';
+import { useAppSelector } from '../../../app/hooks';
+import { selectTodos, selectDeletedTodos } from '../todosSlice';
 import { TodoForm } from './TodoForm';
 import { TodoList } from './TodoList';
 
 export const TodoContainer: FC = () => {
+  const todos = useAppSelector(selectTodos);
+  const deletedTodos = useAppSelector(selectDeletedTodos);
+
   return (
     <div>
       <TodoForm />
       <hr />
-      <TodoList />
+      <h2>Todo一覧</h2>
+      <TodoList todos={todos} />
+      <hr />
+      <h2>削除されたTodo一覧</h2>
+      <TodoList todos={deletedTodos} />
     </div>
   );
 };

src/features/todos/components/TodoList.tsx

@@ -1,9 +1,13 @@
 import type { FC } from 'react';
-import { useAppSelector, useAppDispatch } from '../../../app/hooks';
-import { remove, update, selectTodos } from '../todosSlice';
+import { useAppDispatch } from '../../../app/hooks';
+import { remove, update, restore } from '../todosSlice';
+import { Todo } from '../types';
 
-export const TodoList: FC = () => {
-  const todos = useAppSelector(selectTodos);
+type Props = {
+  todos: Todo[];
+};
+
+export const TodoList: FC<Props> = ({ todos }) => {
   const dispatch = useAppDispatch();
 
   return (
@@ -59,13 +63,23 @@ export const TodoList: FC = () => {
                     </button>
                   </td>
                   <td>
-                    <button
-                      onClick={() => {
-                        dispatch(remove(todo.id));
-                      }}
-                    >
-                      削除
-                    </button>
+                    {isDeletedTodo(todo) ? (
+                      <button
+                        onClick={() => {
+                          dispatch(restore(todo.id));
+                        }}
+                      >
+                        復元
+                      </button>
+                    ) : (
+                      <button
+                        onClick={() => {
+                          dispatch(remove(todo.id));
+                        }}
+                      >
+                        削除
+                      </button>
+                    )}
                   </td>
                 </tr>
               );
@@ -77,4 +91,8 @@ export const TodoList: FC = () => {
   );
 };
 
+const isDeletedTodo = (todo: Todo) => {
+  return todo.deletedAt !== undefined;
+};
+
 export default TodoList;

src/features/todos/crud/index.ts

@@ -1,3 +1,4 @@
 export { createTodo } from './create';
 export { removeTodo } from './remove';
 export { updateTodo } from './update';
+export { restoreTodo } from './restore';

src/features/todos/crud/restore.ts

@@ -0,0 +1,8 @@
+import type { Todo } from '../types';
+
+export const restoreTodo = (todo: Todo): Todo => {
+  return {
+    ...todo,
+    deletedAt: undefined,
+  };
+};

src/features/todos/todosSlice.ts

@@ -2,7 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from '../../app/store';
 import type { TodoInput, Todo, TodoId, TodoUpdatePayload } from './types';
-import { createTodo, removeTodo, updateTodo } from './crud';
+import { createTodo, removeTodo, updateTodo, restoreTodo } from './crud';
 
 export type TodoState = {
   todos: Todo[];
@@ -43,12 +43,23 @@ export const todoSlice = createSlice({
         ...input,
       });
     },
+    restore: (state, action: PayloadAction<TodoId>) => {
+      const id = action.payload;
+      const index = state.todos.findIndex((todo) => todo.id === id);
+      const todo = state.todos[index];
+      if (!todo) return;
+
+      state.todos[index] = restoreTodo(todo);
+    },
   },
 });
 
-export const { create, remove, update } = todoSlice.actions;
+export const { create, remove, update, restore } = todoSlice.actions;
 
 export const selectTodos = (state: RootState) =>
   state.todos.todos.filter((todo) => todo.deletedAt === undefined);
 
+export const selectDeletedTodos = (state: RootState) =>
+  state.todos.todos.filter((todo) => todo.deletedAt !== undefined);
+
 export default todoSlice.reducer;