From 2ba0319f3eb10ed5491162bf5229c39c08956a20 Mon Sep 17 00:00:00 2001
From: Morimoto Mana <cnj14140@ict.nitech.ac.jp>
Date: Fri, 20 Dec 2024 15:47:49 +0900
Subject: [PATCH] =?UTF-8?q?=E7=9B=AE=E6=A8=99=E3=82=92=E8=A4=87=E8=A3=BD?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E6=A9=9F=E8=83=BD=E3=82=92=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DeleteGoalModal/DeleteGoalModal.tsx       |   3 +-
 src/Components/GoalModal/CopyGoalButton.tsx   |  29 +++
 src/Components/GoalModal/CreateGoalModal.tsx  | 158 ++++++++++++++++
 src/Components/GoalModal/GoalModal.tsx        | 168 ------------------
 src/Components/GoalModal/GoalModalButton.tsx  |  44 +++++
 src/Components/Progress/Progress.tsx          |  12 +-
 src/app/mycontent/page.tsx                    |   4 +-
 src/app/page.tsx                              |   4 +-
 8 files changed, 244 insertions(+), 178 deletions(-)
 create mode 100644 src/Components/GoalModal/CopyGoalButton.tsx
 create mode 100644 src/Components/GoalModal/CreateGoalModal.tsx
 delete mode 100644 src/Components/GoalModal/GoalModal.tsx
 create mode 100644 src/Components/GoalModal/GoalModalButton.tsx

diff --git a/src/Components/DeleteGoalModal/DeleteGoalModal.tsx b/src/Components/DeleteGoalModal/DeleteGoalModal.tsx
index 71b2df0..ca681b9 100644
--- a/src/Components/DeleteGoalModal/DeleteGoalModal.tsx
+++ b/src/Components/DeleteGoalModal/DeleteGoalModal.tsx
@@ -37,9 +37,8 @@ export default function DeleteGoalModal({ goalId }: { goalId: string }) {
   return (
     <>
       <DeleteOutlineIcon
-        style={{ fontSize: "23px" }}
         onClick={() => setOpen(true)}
-        sx={{ cursor: "pointer" }}
+        sx={{ cursor: "pointer", fontSize: "23px" }}
       />
 
       <Modal
diff --git a/src/Components/GoalModal/CopyGoalButton.tsx b/src/Components/GoalModal/CopyGoalButton.tsx
new file mode 100644
index 0000000..019c06d
--- /dev/null
+++ b/src/Components/GoalModal/CopyGoalButton.tsx
@@ -0,0 +1,29 @@
+import LibraryAddOutlinedIcon from "@mui/icons-material/LibraryAddOutlined";
+import { useState } from "react";
+import CreateGoalModal from "./CreateGoalModal";
+
+export default function CopyModalButton({
+  deadline,
+  text,
+}: {
+  deadline: string;
+  text: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <LibraryAddOutlinedIcon
+        onClick={() => setOpen(true)}
+        sx={{ cursor: "pointer", fontSize: "23px" }}
+      />
+
+      <CreateGoalModal
+        open={open}
+        setOpen={setOpen}
+        defaultText={text}
+        defaultDeadline={deadline}
+      />
+    </>
+  );
+}
diff --git a/src/Components/GoalModal/CreateGoalModal.tsx b/src/Components/GoalModal/CreateGoalModal.tsx
new file mode 100644
index 0000000..36a6c4b
--- /dev/null
+++ b/src/Components/GoalModal/CreateGoalModal.tsx
@@ -0,0 +1,158 @@
+"use client";
+import { showSnackBar } from "@/Components/SnackBar/SnackBar";
+import { Goal } from "@/types/types";
+import { createGoal, handleCreateGoalError } from "@/utils/API/Goal/createGoal";
+import { useUser } from "@/utils/UserContext";
+import SendIcon from "@mui/icons-material/Send";
+import {
+  Button,
+  DialogContent,
+  DialogTitle,
+  Input,
+  Modal,
+  ModalDialog,
+  Stack,
+  Typography,
+} from "@mui/joy";
+import React, { useEffect, useState } from "react";
+
+export default function CreateGoalModal({
+  open,
+  setOpen,
+  defaultText,
+  defaultDeadline,
+}: {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  defaultText?: string;
+  defaultDeadline?: string;
+}) {
+  const [text, setText] = useState("");
+  const [dueDate, setDueDate] = useState("");
+
+  const { user } = useUser();
+
+  useEffect(() => {
+    if (defaultText) {
+      setText(defaultText);
+    }
+    if (defaultDeadline) {
+      const convertedDate = new Date(defaultDeadline);
+      const localDate = new Date(
+        convertedDate.getTime() - convertedDate.getTimezoneOffset() * 60000
+      );
+      setDueDate(localDate.toISOString().slice(0, 16));
+    }
+  }, [defaultText, defaultDeadline]);
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    // 過去の時間が入力されている場合
+    if (new Date(dueDate).getTime() < Date.now()) {
+      showSnackBar({
+        message: "過去の時間を指定することはできません",
+        type: "warning",
+      });
+      return;
+    }
+
+    const postData: Goal = {
+      userId: user?.userId as string,
+      text: text,
+      deadline: new Date(dueDate),
+    };
+
+    try {
+      const data = await createGoal(postData);
+      console.log("Success:", data);
+
+      showSnackBar({
+        message: "目標を作成しました",
+        type: "success",
+      });
+
+      setText("");
+      setDueDate("");
+      setOpen(false);
+    } catch (error: unknown) {
+      console.error("Error creating goal:", error);
+      const message = handleCreateGoalError(error);
+      showSnackBar({
+        message,
+        type: "warning",
+      });
+    }
+  };
+
+  // 以下のJoy UIによるエラーを無効化
+  // Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. Error Component Stack
+  try {
+    const consoleError = console.error;
+    console.error = (...args) => {
+      if (args[0]?.includes("Accessing element.ref was removed")) {
+        return;
+      }
+      consoleError(...args);
+    };
+  } catch {
+    console.error("Failed to disable Joy UI error");
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => setOpen(false)}
+      keepMounted
+      disablePortal={false}
+    >
+      <ModalDialog
+        aria-labelledby="create-goal-title"
+        aria-describedby="create-goal-description"
+        sx={{ width: "90%", maxWidth: 400 }}
+      >
+        <DialogTitle>目標を作成</DialogTitle>
+        <DialogContent>達成したい内容と期限を入力してください</DialogContent>
+        <form onSubmit={handleSubmit}>
+          <Stack spacing={2}>
+            <Input
+              placeholder="Goal Title"
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              required
+            />
+            <Input
+              type="datetime-local"
+              value={dueDate}
+              onChange={(e) => setDueDate(e.target.value)}
+              required
+            />
+            <Typography color="danger">
+              期限が1時間以内の目標は削除できなくなります
+            </Typography>
+            <Stack direction="row" spacing={1} justifyContent="flex-end">
+              <Button
+                variant="plain"
+                color="neutral"
+                onClick={() => setOpen(false)}
+              >
+                キャンセル
+              </Button>
+              <Button
+                type="submit"
+                variant="solid"
+                color="primary"
+                disabled={
+                  !user || user?.loginType === "Guest" || !user?.isMailVerified
+                }
+                endDecorator={<SendIcon />}
+              >
+                作成
+              </Button>
+            </Stack>
+          </Stack>
+        </form>
+      </ModalDialog>
+    </Modal>
+  );
+}
diff --git a/src/Components/GoalModal/GoalModal.tsx b/src/Components/GoalModal/GoalModal.tsx
deleted file mode 100644
index 272a99e..0000000
--- a/src/Components/GoalModal/GoalModal.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-"use client";
-import { showSnackBar } from "@/Components/SnackBar/SnackBar";
-import { Goal } from "@/types/types";
-import { createGoal, handleCreateGoalError } from "@/utils/API/Goal/createGoal";
-import { useUser } from "@/utils/UserContext";
-import AddIcon from "@mui/icons-material/Add";
-import SendIcon from "@mui/icons-material/Send";
-import {
-  Button,
-  DialogContent,
-  DialogTitle,
-  Input,
-  Modal,
-  ModalDialog,
-  Stack,
-  Typography,
-} from "@mui/joy";
-import Box from "@mui/material/Box";
-import Fab from "@mui/material/Fab";
-import React, { useState } from "react";
-
-export default function GoalModal() {
-  const [open, setOpen] = useState(false);
-  const [text, setText] = useState("");
-  const [dueDate, setDueDate] = useState("");
-  const { user } = useUser();
-
-  const handleSubmit = async (event: React.FormEvent) => {
-    event.preventDefault();
-
-    // 過去の時間が入力されている場合
-    if (new Date(dueDate).getTime() < Date.now()) {
-      showSnackBar({
-        message: "過去の時間を指定することはできません",
-        type: "warning",
-      });
-      return;
-    }
-
-    const postData: Goal = {
-      userId: user?.userId as string,
-      text: text,
-      deadline: new Date(dueDate),
-    };
-
-    try {
-      const data = await createGoal(postData);
-      console.log("Success:", data);
-
-      showSnackBar({
-        message: "目標を作成しました",
-        type: "success",
-      });
-
-      setText("");
-      setDueDate("");
-      setOpen(false);
-    } catch (error: unknown) {
-      console.error("Error creating goal:", error);
-      const message = handleCreateGoalError(error);
-      showSnackBar({
-        message,
-        type: "warning",
-      });
-    }
-  };
-
-  // 以下のJoy UIによるエラーを無効化
-  // Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. Error Component Stack
-  try {
-    const consoleError = console.error;
-    console.error = (...args) => {
-      if (args[0]?.includes("Accessing element.ref was removed")) {
-        return;
-      }
-      consoleError(...args);
-    };
-  } catch {
-    console.error("Failed to disable Joy UI error");
-  }
-
-  return (
-    <>
-      <Box
-        sx={{
-          "& > :not(style)": { m: 1 },
-          display: "flex",
-          flexDirection: "row-reverse",
-          position: "fixed",
-          bottom: "90px",
-          width: "100%",
-          maxWidth: "600px",
-          zIndex: 1000,
-        }}
-      >
-        <Fab
-          color="primary"
-          aria-label="add"
-          sx={{ marginRight: "10px !important" }}
-          // ゲストかメール認証が未完了のユーザーは使用不可
-          onClick={() => setOpen(true)}
-          disabled={
-            !user || user?.loginType === "Guest" || !user?.isMailVerified
-          }
-        >
-          <AddIcon />
-        </Fab>
-      </Box>
-
-      <Modal
-        open={open}
-        onClose={() => setOpen(false)}
-        keepMounted
-        disablePortal
-      >
-        <ModalDialog
-          aria-labelledby="create-goal-title"
-          aria-describedby="create-goal-description"
-          sx={{ width: "90%", maxWidth: 400 }}
-        >
-          <DialogTitle>目標を作成</DialogTitle>
-          <DialogContent>達成したい内容と期限を入力してください</DialogContent>
-          <form onSubmit={handleSubmit}>
-            <Stack spacing={2}>
-              <Input
-                placeholder="Goal Title"
-                value={text}
-                onChange={(e) => setText(e.target.value)}
-                required
-              />
-              <Input
-                type="datetime-local"
-                value={dueDate}
-                onChange={(e) => setDueDate(e.target.value)}
-                required
-              />
-              <Typography color="danger">
-                期限が1時間以内の目標は削除できなくなります
-              </Typography>
-              <Stack direction="row" spacing={1} justifyContent="flex-end">
-                <Button
-                  variant="plain"
-                  color="neutral"
-                  onClick={() => setOpen(false)}
-                >
-                  キャンセル
-                </Button>
-                <Button
-                  type="submit"
-                  variant="solid"
-                  color="primary"
-                  disabled={
-                    !user ||
-                    user?.loginType === "Guest" ||
-                    !user?.isMailVerified
-                  }
-                  endDecorator={<SendIcon />}
-                >
-                  作成
-                </Button>
-              </Stack>
-            </Stack>
-          </form>
-        </ModalDialog>
-      </Modal>
-    </>
-  );
-}
diff --git a/src/Components/GoalModal/GoalModalButton.tsx b/src/Components/GoalModal/GoalModalButton.tsx
new file mode 100644
index 0000000..f345e56
--- /dev/null
+++ b/src/Components/GoalModal/GoalModalButton.tsx
@@ -0,0 +1,44 @@
+import { useUser } from "@/utils/UserContext";
+import AddIcon from "@mui/icons-material/Add";
+import Box from "@mui/material/Box";
+import Fab from "@mui/material/Fab";
+import { useState } from "react";
+import CreateGoalModal from "./CreateGoalModal";
+
+export default function GoalModalButton() {
+  const [open, setOpen] = useState(false);
+
+  const { user } = useUser();
+
+  return (
+    <>
+      <Box
+        sx={{
+          "& > :not(style)": { m: 1 },
+          display: "flex",
+          flexDirection: "row-reverse",
+          position: "fixed",
+          bottom: "90px",
+          width: "100%",
+          maxWidth: "600px",
+          zIndex: 1000,
+        }}
+      >
+        <Fab
+          color="primary"
+          aria-label="add"
+          sx={{ marginRight: "10px !important" }}
+          // ゲストかメール認証が未完了のユーザーは使用不可
+          onClick={() => setOpen(true)}
+          disabled={
+            !user || user?.loginType === "Guest" || !user?.isMailVerified
+          }
+        >
+          <AddIcon />
+        </Fab>
+      </Box>
+
+      <CreateGoalModal open={open} setOpen={setOpen} />
+    </>
+  );
+}
diff --git a/src/Components/Progress/Progress.tsx b/src/Components/Progress/Progress.tsx
index ba31dce..b0f71c5 100644
--- a/src/Components/Progress/Progress.tsx
+++ b/src/Components/Progress/Progress.tsx
@@ -15,6 +15,7 @@ import { Divider } from "@mui/material";
 import { ReactNode, useEffect, useState } from "react";
 import DeleteGoalModal from "../DeleteGoalModal/DeleteGoalModal";
 import DeletePostModal from "../DeletePostModal/DeletePostModal";
+import CopyModalButton from "../GoalModal/CopyGoalButton";
 import PostModal from "../PostModal/PostModal";
 
 const successPostIndicatorStyle = {
@@ -291,10 +292,13 @@ const GoalCard = ({
           <Typography level="body-sm">
             {formatStringToDate(deadline)}までに
           </Typography>
-          {/* 期限の1時間以内、もしくは自分の目標ではない場合は削除できないようにする */}
-          {!isWithinOneHour && userId === user?.userId && (
-            <DeleteGoalModal goalId={goalId} />
-          )}
+          <div style={{ display: "flex", gap: "5px" }}>
+            <CopyModalButton deadline={deadline} text={goalText} />
+            {/* 期限の1時間以内、もしくは自分の目標ではない場合は削除できないようにする */}
+            {!isWithinOneHour && userId === user?.userId && (
+              <DeleteGoalModal goalId={goalId} />
+            )}
+          </div>
         </div>
         <Divider />
         <Typography level="body-lg">{goalText}</Typography>
diff --git a/src/app/mycontent/page.tsx b/src/app/mycontent/page.tsx
index e12f8ce..8cac74d 100644
--- a/src/app/mycontent/page.tsx
+++ b/src/app/mycontent/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import DashBoard from "@/Components/DashBoard/DashBoard";
-import GoalModal from "@/Components/GoalModal/GoalModal";
+import GoalModalButton from "@/Components/GoalModal/GoalModalButton";
 import { useUser } from "@/utils/UserContext";
 import { styled } from "@mui/material/styles";
 import ToggleButton from "@mui/material/ToggleButton";
@@ -55,7 +55,7 @@ export default function MyContent() {
         <DashBoard userId={user?.userId} pending={false} />
       )}
 
-      <GoalModal />
+      <GoalModalButton />
     </>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f112b9f..2460720 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,12 +1,12 @@
 "use client";
 import DashBoard from "@/Components/DashBoard/DashBoard";
-import GoalModal from "@/Components/GoalModal/GoalModal";
+import GoalModalButton from "@/Components/GoalModal/GoalModalButton";
 
 export default function Top() {
   return (
     <>
       <DashBoard pending={false} />
-      <GoalModal />
+      <GoalModalButton />
     </>
   );
 }