From 0a138301af6598641215dac407506b26b4299bfe Mon Sep 17 00:00:00 2001
From: MurakawaTakuya <murakawatakuya5@gmail.com>
Date: Thu, 19 Dec 2024 15:35:23 +0900
Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E5=83=8F=E3=82=A2=E3=83=83=E3=83=97?=
 =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=89=E4=B8=AD=E3=81=AF=E6=8A=95=E7=A8=BF?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E3=83=AD=E3=83=BC=E3=83=87?=
 =?UTF-8?q?=E3=82=A3=E3=83=B3=E3=82=B0=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/PostModal/PostModal.tsx | 29 +++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/Components/PostModal/PostModal.tsx b/src/Components/PostModal/PostModal.tsx
index 082565b..cbc0cb6 100644
--- a/src/Components/PostModal/PostModal.tsx
+++ b/src/Components/PostModal/PostModal.tsx
@@ -18,6 +18,7 @@ import {
 } from "@mui/joy";
 import Box from "@mui/material/Box";
 import MuiButton from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
 import LinearProgress from "@mui/material/LinearProgress";
 import Typography from "@mui/material/Typography";
 import { styled } from "@mui/material/styles";
@@ -29,6 +30,7 @@ export default function PostModal({ goalId }: { goalId: string }) {
   const [image, setImage] = useState<File | null>(null);
   const [progress, setProgress] = useState<number>(100);
   const [fileName, setFileName] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
   const { user } = useUser();
 
   const handleTextChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -37,11 +39,18 @@ export default function PostModal({ goalId }: { goalId: string }) {
 
   const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
     const selectedFile = event.target.files?.[0];
+    if (selectedFile && !selectedFile.type.startsWith("image/")) {
+      showSnackBar({
+        message: "画像ファイルのみアップロードできます",
+        type: "warning",
+      });
+      return;
+    }
     setImage(selectedFile || null);
     setFileName(selectedFile ? selectedFile.name : "");
   };
 
-  const handleUpload = () => {
+  const handleUpload = async () => {
     if (!image) {
       showSnackBar({
         message: "ファイルが選択されていません",
@@ -50,8 +59,10 @@ export default function PostModal({ goalId }: { goalId: string }) {
       return;
     }
 
+    setLoading(true);
+
     try {
-      uploadImage(
+      await uploadImage(
         image,
         (percent) => setProgress(percent),
         async (url) => {
@@ -78,6 +89,7 @@ export default function PostModal({ goalId }: { goalId: string }) {
             setText("");
             setOpen(false);
             setFileName("");
+            setLoading(false);
           } catch (error: unknown) {
             console.error("Error creating post:", error);
             const message = handleCreatePostError(error);
@@ -85,6 +97,7 @@ export default function PostModal({ goalId }: { goalId: string }) {
               message,
               type: "warning",
             });
+            setLoading(false);
           }
         }
       );
@@ -94,6 +107,7 @@ export default function PostModal({ goalId }: { goalId: string }) {
         message: "画像のアップロードに失敗しました",
         type: "warning",
       });
+      setLoading(false);
     }
   };
 
@@ -176,6 +190,7 @@ export default function PostModal({ goalId }: { goalId: string }) {
                 </FileName>
                 <VisuallyHiddenInput
                   type="file"
+                  accept="image/*"
                   onChange={handleImageChange}
                   multiple
                 />
@@ -195,8 +210,16 @@ export default function PostModal({ goalId }: { goalId: string }) {
                   color="primary"
                   endDecorator={<SendIcon />}
                   onClick={handleUpload}
+                  disabled={loading}
                 >
-                  投稿
+                  {loading ? (
+                    <>
+                      <CircularProgress size={24} sx={{ marginRight: 1 }} />
+                      投稿中
+                    </>
+                  ) : (
+                    "投稿"
+                  )}
                 </JoyButton>
               </Stack>
             </Stack>