single component todo

tak-onda · Mar 25, 2024 · d4cc086 · d4cc086
1 parent daa44b1
commit d4cc086
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 138 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}
diff --git a/README.md b/README.md
@@ -1,5 +1,8 @@
 # フロントエンド入門ワークショップ React 編
 
+<details>
+<summary>セットアップ</summary>
+
 ## 前準備
 
 ### 環境
@@ -268,3 +271,10 @@ Actions タブから deploy が走っていることを確認してください
 
 ![img_2.png](img_2.png)
 
+</details>
+
+
+## TODO アプリを作ろう！
+
+デプロイするところまで確認できたら、既存ファイルをもとに TODO アプリを作成していきます。
+
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="ja">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Super TODO</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "prettier": "^3.2.5",
     "typescript": "^5.4.3",
     "vite": "^5.2.6"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,33 +1,70 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { FormEvent, useState } from 'react'
+
+type Task = {
+  id: string
+  name: string
+  done: boolean
+}
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [tasks, setTasks] = useState<Task[]>([])
+  const [showAll, setShowAll] = useState(true)
+  const [input, setInput] = useState('')
+
+  const views = showAll ? tasks : tasks.filter((t) => !t.done)
+
+  function onCheck(task: Task) {
+    setTasks((tasks) => {
+      return tasks.map((t) => (t.id === task.id ? { ...t, done: !t.done } : t))
+    })
+  }
+
+  function addTask(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setInput('')
+    setTasks((tasks) => {
+      return [...tasks, { id: crypto.randomUUID(), name: input, done: false }]
+    })
+  }
 
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <h1>Super TODO</h1>
+      {tasks.length > 0 && (
+        <>
+          <h2>My Tasks</h2>
+          <label>
+            <input
+              type={'radio'}
+              name="showAll"
+              checked={showAll}
+              onClick={() => setShowAll(true)}
+            />
+            Show All (including completed)
+          </label>
+          <label>
+            <input
+              type={'radio'}
+              name="showAll"
+              checked={!showAll}
+              onClick={() => setShowAll(false)}
+            />
+            Show Only To Be Done
+          </label>
+          <hr />
+          {views.map((task) => (
+            <div key={task.id}>
+              <input type="checkbox" checked={task.done} onChange={() => onCheck(task)} />
+              {task.done ? <s>{task.name}</s> : task.name}
+            </div>
+          ))}
+        </>
+      )}
+      <h2>Register Task</h2>
+      <form onSubmit={addTask}>
+        <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
+        <button type="submit">Add</button>
+      </form>
     </>
   )
 }

diff --git a/src/index.css b/src/index.css
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>