From c4fd1821d7ecbc34e93c835ce4e06cfd8453f8d4 Mon Sep 17 00:00:00 2001
From: Tsuyoshi Maeda <oasis5tsuyoshi@gmail.com>
Date: Wed, 27 Jul 2022 15:34:56 +0900
Subject: [PATCH] Impl display todos with useAppSelector and TodoList
 component.

---
 .../todos/components/TodoContainer.tsx        |  3 +
 src/features/todos/components/TodoList.tsx    | 69 +++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 src/features/todos/components/TodoList.tsx

diff --git a/src/features/todos/components/TodoContainer.tsx b/src/features/todos/components/TodoContainer.tsx
index 2b21a7d..226d96e 100644
--- a/src/features/todos/components/TodoContainer.tsx
+++ b/src/features/todos/components/TodoContainer.tsx
@@ -1,10 +1,13 @@
 import type { FC } from 'react';
 import { TodoForm } from './TodoForm';
+import { TodoList } from './TodoList';
 
 export const TodoContainer: FC = () => {
   return (
     <div>
       <TodoForm />
+      <hr />
+      <TodoList />
     </div>
   );
 };
diff --git a/src/features/todos/components/TodoList.tsx b/src/features/todos/components/TodoList.tsx
new file mode 100644
index 0000000..1bf20ed
--- /dev/null
+++ b/src/features/todos/components/TodoList.tsx
@@ -0,0 +1,69 @@
+import type { FC } from 'react';
+import { useAppSelector } from '../../../app/hooks';
+
+export const TodoList: FC = () => {
+  const todos = useAppSelector((state) => state.todos.todos);
+
+  return (
+    <>
+      <table border={1}>
+        <thead>
+          <tr>
+            <th>id</th>
+            <th>タイトル</th>
+            <th>本文</th>
+            <th>ステータス</th>
+            <th>作成日時</th>
+            <th>更新日時</th>
+            <th>削除日時</th>
+            <th>更新ボタン</th>
+            <th>削除ボタン</th>
+          </tr>
+        </thead>
+        <tbody>
+          {todos.length === 0 ? (
+            <tr>
+              <td colSpan={9} style={{ textAlign: 'center' }}>
+                データなし
+              </td>
+            </tr>
+          ) : (
+            todos.map((todo) => {
+              return (
+                <tr key={todo.id}>
+                  <td>{todo.id}</td>
+                  <td>{todo.title}</td>
+                  <td>{todo.body}</td>
+                  <td>{todo.status}</td>
+                  <td>{todo.createdAt}</td>
+                  <td>{todo.updatedAt ?? '無し'}</td>
+                  <td>{todo.deletedAt ?? '無し'}</td>
+                  <td>
+                    <button
+                      onClick={() => {
+                        //TODO: 更新機能の実装
+                      }}
+                    >
+                      更新
+                    </button>
+                  </td>
+                  <td>
+                    <button
+                      onClick={() => {
+                        //TODO: 削除機能の実装
+                      }}
+                    >
+                      削除
+                    </button>
+                  </td>
+                </tr>
+              );
+            })
+          )}
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default TodoList;