From d02369a4e53721de87675b5ed9a1a0d0f42731c1 Mon Sep 17 00:00:00 2001
From: solufa <solufa2020@gmail.com>
Date: Tue, 26 Nov 2024 14:26:33 +0900
Subject: [PATCH] refactor: remove useRef

---
 client/features/tasks/TaskList.tsx        | 32 +++++++++++++++--------
 client/features/tasks/taskList.module.css | 13 +++++++++
 client/public/docs/openapi.json           | 30 ++-------------------
 3 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/client/features/tasks/TaskList.tsx b/client/features/tasks/TaskList.tsx
index ab6f6fc..75b7532 100644
--- a/client/features/tasks/TaskList.tsx
+++ b/client/features/tasks/TaskList.tsx
@@ -4,7 +4,7 @@ import { taskValidator } from 'common/validators/task';
 import { Loading } from 'components/loading/Loading';
 import { useAlert } from 'hooks/useAlert';
 import type { FormEvent } from 'react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { apiClient } from 'utils/apiClient';
 import { catchApiErr } from 'utils/catchApiErr';
 import styles from './taskList.module.css';
@@ -14,7 +14,6 @@ export const TaskList = () => {
   const { data: tasks, mutate: mutateTasks } = useAspidaSWR(apiClient.private.tasks, {
     refreshInterval: 5000,
   });
-  const fileRef = useRef<HTMLInputElement | null>(null);
   const [label, setLabel] = useState('');
   const [image, setImage] = useState<File>();
   const previewImageUrl = useMemo(() => image && URL.createObjectURL(image), [image]);
@@ -29,15 +28,22 @@ export const TaskList = () => {
       return;
     }
 
-    await apiClient.private.tasks
+    const res = await apiClient.private.tasks
       .$post({ body: { label: parsedLabel.data.label, image } })
-      .then((task) => mutateTasks((tasks) => [task, ...(tasks ?? [])]))
       .catch(catchApiErr);
+
+    if (!res) return;
+
+    mutateTasks((tasks) => [res, ...(tasks ?? [])]);
     setLabel('');
     setImage(undefined);
+  };
 
-    if (fileRef.current) fileRef.current.value = '';
+  const selectImage = (el: HTMLInputElement) => {
+    setImage(el.files?.[0]);
+    el.value = '';
   };
+
   const toggleDone = async (task: TaskDto) => {
     await apiClient.private.tasks
       ._taskId(task.id)
@@ -45,6 +51,7 @@ export const TaskList = () => {
       .then((task) => mutateTasks((tasks) => tasks?.map((t) => (t.id === task.id ? task : t))))
       .catch(catchApiErr);
   };
+
   const deleteTask = async (task: TaskDto) => {
     await apiClient.private.tasks
       ._taskId(task.id)
@@ -74,12 +81,15 @@ export const TaskList = () => {
             onChange={(e) => setLabel(e.target.value)}
           />
           <div className={styles.controls}>
-            <input
-              type="file"
-              ref={fileRef}
-              accept=".png,.jpg,.jpeg,.gif,.webp,.svg"
-              onChange={(e) => setImage(e.target.files?.[0])}
-            />
+            <div className={styles.fileInputContainer}>
+              <input type="button" value="画像を選択" className={styles.btn} />
+              <input
+                type="file"
+                className={styles.fileInput}
+                accept=".png,.jpg,.jpeg,.gif,.webp,.svg"
+                onChange={(e) => selectImage(e.target)}
+              />
+            </div>
             <input className={styles.btn} disabled={label === ''} type="submit" value="ADD" />
           </div>
         </form>
diff --git a/client/features/tasks/taskList.module.css b/client/features/tasks/taskList.module.css
index 0d97cae..7638333 100644
--- a/client/features/tasks/taskList.module.css
+++ b/client/features/tasks/taskList.module.css
@@ -35,6 +35,19 @@
   border-bottom: 1px solid #bbb;
 }
 
+.fileInputContainer {
+  position: relative;
+}
+
+.fileInput {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
 .btn {
   padding: 4px 8px;
   margin-left: auto;
diff --git a/client/public/docs/openapi.json b/client/public/docs/openapi.json
index 323f48d..50e4264 100644
--- a/client/public/docs/openapi.json
+++ b/client/public/docs/openapi.json
@@ -17,7 +17,8 @@
             "content": {
               "application/json": {
                 "schema": {
-                  "$ref": "#/components/schemas/Record<\"server\"|\"db\"|\"s3\"|\"cognito\",\"ok\">"
+                  "type": "string",
+                  "const": "ok"
                 }
               }
             }
@@ -332,33 +333,6 @@
   },
   "components": {
     "schemas": {
-      "Record<\"server\"|\"db\"|\"s3\"|\"cognito\",\"ok\">": {
-        "type": "object",
-        "properties": {
-          "server": {
-            "type": "string",
-            "const": "ok"
-          },
-          "db": {
-            "type": "string",
-            "const": "ok"
-          },
-          "s3": {
-            "type": "string",
-            "const": "ok"
-          },
-          "cognito": {
-            "type": "string",
-            "const": "ok"
-          }
-        },
-        "required": [
-          "cognito",
-          "db",
-          "s3",
-          "server"
-        ]
-      },
       "UserDto": {
         "allOf": [
           {