From be391f46d6a8b378a07532d9cd92c43ac577bc10 Mon Sep 17 00:00:00 2001
From: notch_man <30828280+notchman8600@users.noreply.github.com>
Date: Fri, 3 Dec 2021 11:35:03 +0900
Subject: [PATCH] =?UTF-8?q?todopage=E3=81=AE=E3=82=A8=E3=83=A9=E3=83=BC?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/edit/todopage.jsx | 93 ---------------------------------------
 pages/edit/todopage.tsx | 96 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 96 insertions(+), 93 deletions(-)
 delete mode 100644 pages/edit/todopage.jsx
 create mode 100644 pages/edit/todopage.tsx

diff --git a/pages/edit/todopage.jsx b/pages/edit/todopage.jsx
deleted file mode 100644
index eb8cbfc..0000000
--- a/pages/edit/todopage.jsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, {useRef, useEffect, useState} from 'react';
-import axios from 'axios';
-
-const todo_page = () => {
-    const inputEl1 = useRef < HTMLInputElement > (null);
-    const inputEl2 = useRef < HTMLInputElement > (null);
-    const inputEl3 = useRef < HTMLInputElement > (null);
-
-    const handleClick = () => {
-        const cur_time = new Date()
-        const getTime = cur_time.getTime();
-        const getDdl = Date.parse(inputEl2.current.value);
-        if (inputEl1.current.value.length !== 0 && getTime < getDdl) {
-            axios({
-                method: 'POST',
-                url: 'https://api.digital-future.jp/task/read',
-                data: {name: inputEl1.current.value, deadline: inputEl2.current.value, is_finished: false}
-            }).then(response => console.log('response body:', response.data));
-        }
-    }
-
-    // const data = [{name: "finish my work", deadline: "2021-12-05", id: "1", is_finished: true}]
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [data, setData] = useState();
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-        const fetchData = async () => {
-            const result = await axios(
-                'https://api.digital-future.jp/task',
-            );
-
-            setData(result.data);
-        };
-
-        fetchData();
-    }, []);
-
-
-    const handleOnchange = () => {
-        axios({
-            method: 'POST',
-            url: 'https://api.digital-future.jp/task/read',
-            data: {id: inputEl3.current.id, is_finished: inputEl3.current.checked}
-        }).then(response => console.log('response body:', response.data));
-    }
-
-
-    // @ts-ignore
-    return (
-        <>
-            <div>
-                <input
-                    ref={inputEl1}
-                    type="text"
-                    placeholder={"Enter your tasks here"}
-                /><br/>
-                <input
-                    ref={inputEl2}
-                    type="date"
-                />
-                <button
-                    onClick={handleClick}
-                >登録
-                </button>
-
-                data !== undefined ?
-                {data.map(item => (
-
-                    <ul key={uuid.v4()}>
-                        <li>
-                            <input
-                                ref={inputEl3}
-                                id={item.id}
-                                type="checkbox"
-                                //チェックボックスの値が格納される
-                                defaultChecked={false}
-                                checked={item.is_finished}
-                                //値が変わるときに呼ばれる関数
-                                onChange={handleOnchange}
-                            />
-                            <label className="todo-label" htmlFor={item.id}>
-                                {item.name}&emsp;&emsp;&emsp;{item.deadline}
-                            </label>
-                        </li>
-                    </ul>
-                ))}:{}
-            </div>
-        </>
-    )
-}
-export default todo_page;
\ No newline at end of file
diff --git a/pages/edit/todopage.tsx b/pages/edit/todopage.tsx
new file mode 100644
index 0000000..d54d879
--- /dev/null
+++ b/pages/edit/todopage.tsx
@@ -0,0 +1,96 @@
+import React, {useRef, useEffect, useState} from 'react';
+import axios from 'axios';
+
+const todo_page = () => {
+    const inputEl1 = useRef(null);
+    const inputEl2 = useRef(null);
+    const inputEl3 = useRef(null);
+
+    const handleClick = () => {
+        const cur_time = new Date()
+        const getTime = cur_time.getTime();
+        const getDdl = Date.parse(inputEl2.current.value);
+        if (inputEl1.current.value.length !== 0 && getTime < getDdl) {
+            axios({
+                method: 'POST',
+                url: 'https://api.digital-future.jp/task',
+                data: {name: inputEl1.current.value, deadline: inputEl2.current.value, is_finished: false}
+            }).then(response => console.log('response body:', response.data.tasks));
+        }
+    }
+
+    // const data = [{name: "finish my work", deadline: "2021-12-05", id: "1", is_finished: true}]
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [data, setData] = useState([]);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        const fetchData = async () => {
+            const result = await axios('https://api.digital-future.jp/task/read',);
+
+            setData(result.data.tasks);
+        };
+
+        fetchData();
+    }, []);
+
+
+    const handleOnchange = () => {
+        axios({
+            method: 'POST',
+            url: 'https://api.digital-future.jp/task/',
+            data: {id: inputEl3.current.id, is_finished: inputEl3.current.checked}
+        }).then(response => console.log('response body:', response.data.tasks));
+    }
+
+    console.log(data)
+    // @ts-ignore
+    const uuid = require("uuid")
+    if (data !== undefined && data !== null && data.length !== 0) {
+        console.log(data)
+        return (
+            <>
+                <div>
+                    <input
+                        ref={inputEl1}
+                        type="text"
+                        placeholder={"Enter your tasks here"}
+                    /><br/>
+                    <input
+                        ref={inputEl2}
+                        type="date"
+                    />
+                    <button
+                        onClick={handleClick}
+                    >登録
+                    </button>
+                    {
+                        data.map(item => (
+                                <ul key={uuid.v4()}>
+                                    <li>
+                                        <input
+                                            ref={inputEl3}
+                                            id={item.id}
+                                            type="checkbox"
+                                            //チェックボックスの値が格納される
+                                            defaultChecked={false}
+                                            checked={item.is_finished}
+                                            //値が変わるときに呼ばれる関数
+                                            onChange={handleOnchange}
+                                        />
+                                        <label className="todo-label" htmlFor={item.id}>
+                                            {item.name}&emsp;&emsp;&emsp;{item.deadline}
+                                        </label>
+                                    </li>
+                                </ul>
+                            )
+                        )}
+                </div>
+            </>)
+    } else {
+        return (<></>)
+    }
+
+}
+export default todo_page;