投稿したら同じ目標を次の日に複製するボタンを表示

MurakawaTakuya · Dec 20, 2024 · eff8908 · eff8908
1 parent 2ba0319
commit eff8908
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 20 deletions.
diff --git a/src/Components/GoalModal/CopyGoalAfterPostButton.tsx b/src/Components/GoalModal/CopyGoalAfterPostButton.tsx
@@ -0,0 +1,34 @@
+import { Add } from "@mui/icons-material";
+import { Button } from "@mui/joy";
+import { useState } from "react";
+import CreateGoalModal from "./CreateGoalModal";
+
+export default function CopyGoalAfterPostButton({
+  goalText,
+  deadline,
+}: {
+  goalText: string;
+  deadline: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button
+        variant="solid"
+        color="success"
+        startDecorator={<Add />}
+        onClick={() => setOpen(true)}
+      >
+        この目標を次の日も達成する
+      </Button>
+
+      <CreateGoalModal
+        open={open}
+        setOpen={setOpen}
+        defaultText={goalText}
+        defaultDeadline={deadline}
+      />
+    </>
+  );
+}
diff --git a/src/Components/GoalModal/CopyGoalButton.tsx b/src/Components/GoalModal/CopyGoalButton.tsx
@@ -4,10 +4,10 @@ import CreateGoalModal from "./CreateGoalModal";
 
 export default function CopyModalButton({
   deadline,
-  text,
+  goalText,
 }: {
   deadline: string;
-  text: string;
+  goalText: string;
 }) {
   const [open, setOpen] = useState(false);
 
@@ -21,7 +21,7 @@ export default function CopyModalButton({
       <CreateGoalModal
         open={open}
         setOpen={setOpen}
-        defaultText={text}
+        defaultText={goalText}
         defaultDeadline={deadline}
       />
     </>

diff --git a/src/Components/GoalModal/CreateGoalModal.tsx b/src/Components/GoalModal/CreateGoalModal.tsx
@@ -41,6 +41,7 @@ export default function CreateGoalModal({
       const localDate = new Date(
         convertedDate.getTime() - convertedDate.getTimezoneOffset() * 60000
       );
+      localDate.setDate(localDate.getDate() + 1); // 1日後にする
       setDueDate(localDate.toISOString().slice(0, 16));
     }
   }, [defaultText, defaultDeadline]);

diff --git a/src/Components/PostModal/PostModal.tsx b/src/Components/PostModal/PostModal.tsx
@@ -24,7 +24,13 @@ import Typography from "@mui/material/Typography";
 import { styled } from "@mui/material/styles";
 import React, { ChangeEvent, useState } from "react";
 
-export default function PostModal({ goalId }: { goalId: string }) {
+export default function PostModal({
+  goalId,
+  setIsSubmitted,
+}: {
+  goalId: string;
+  setIsSubmitted: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
   const [open, setOpen] = useState(false);
   const [text, setText] = useState<string>("");
   const [image, setImage] = useState<File | null>(null);
@@ -104,6 +110,7 @@ export default function PostModal({ goalId }: { goalId: string }) {
               message: "投稿しました",
               type: "success",
             });
+            setIsSubmitted(true);
 
             setImage(null);
             setText("");

diff --git 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 CopyGoalAfterPostButton from "../GoalModal/CopyGoalAfterPostButton";
 import CopyModalButton from "../GoalModal/CopyGoalButton";
 import PostModal from "../PostModal/PostModal";
 
@@ -98,30 +99,56 @@ export default function Progress({
     <>
       {allResults.map((result) => {
         const userName = userNames[result.userId] || "Loading...";
+
+        if (!user) {
+          return null;
+        }
+
         if (result.type === "success") {
-          return successStep(
-            result as SuccessResult,
-            userName,
-            user as UserData
+          return (
+            <SuccessStep
+              key={result.goalId}
+              result={result as SuccessResult}
+              userName={userName}
+              user={user}
+            />
           );
         }
         if (result.type === "failed") {
-          return failedStep(result as GoalWithId, userName, user as UserData);
+          return (
+            <FailedStep
+              key={result.goalId}
+              result={result as GoalWithId}
+              userName={userName}
+              user={user as UserData}
+            />
+          );
         }
         if (result.type === "pending") {
-          return pendingStep(result as GoalWithId, userName, user as UserData);
+          return (
+            <PendingStep
+              key={result.goalId}
+              result={result as GoalWithId}
+              userName={userName}
+              user={user as UserData}
+            />
+          );
         }
         return null;
       })}
     </>
   );
 }
 
-const successStep = (
-  result: SuccessResult,
-  userName: string,
-  user: UserData
-) => {
+const SuccessStep = ({
+  result,
+  userName,
+  user,
+}: {
+  result: SuccessResult;
+  userName: string;
+  user: UserData;
+}) => {
   return (
     <StepperBlock key={result.goalId} userName={userName} resultType="success">
       <Step
@@ -204,7 +231,15 @@ const successStep = (
   );
 };
 
-const failedStep = (result: GoalWithId, userName: string, user: UserData) => {
+const FailedStep = ({
+  result,
+  userName,
+  user,
+}: {
+  result: GoalWithId;
+  userName: string;
+  user: UserData;
+}) => {
   return (
     <StepperBlock key={result.goalId} userName={userName} resultType="failed">
       <Step
@@ -227,7 +262,17 @@ const failedStep = (result: GoalWithId, userName: string, user: UserData) => {
   );
 };
 
-const pendingStep = (result: GoalWithId, userName: string, user: UserData) => {
+const PendingStep = ({
+  result,
+  userName,
+  user,
+}: {
+  result: GoalWithId;
+  userName: string;
+  user: UserData;
+}) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
   return (
     <StepperBlock key={result.goalId} userName={userName} resultType="pending">
       <Step
@@ -246,8 +291,18 @@ const pendingStep = (result: GoalWithId, userName: string, user: UserData) => {
           userId={result.userId}
           user={user}
         />
-        {/* 自分の作成した目標の場合のみ投稿可能にする */}
-        {result.userId === user?.userId && <PostModal goalId={result.goalId} />}
+        {isSubmitted ? (
+          // 投稿したら同じ目標で明日にも作成できるボタンを表示する
+          <CopyGoalAfterPostButton
+            goalText={result.text}
+            deadline={result.deadline}
+          />
+        ) : (
+          // 自分の作成した目標の場合のみ投稿可能にする
+          result.userId === user?.userId && (
+            <PostModal goalId={result.goalId} setIsSubmitted={setIsSubmitted} />
+          )
+        )}
       </Step>
     </StepperBlock>
   );
@@ -293,7 +348,7 @@ const GoalCard = ({
             {formatStringToDate(deadline)}までに
           </Typography>
           <div style={{ display: "flex", gap: "5px" }}>
-            <CopyModalButton deadline={deadline} text={goalText} />
+            <CopyModalButton deadline={deadline} goalText={goalText} />
             {/* 期限の1時間以内、もしくは自分の目標ではない場合は削除できないようにする */}
             {!isWithinOneHour && userId === user?.userId && (
               <DeleteGoalModal goalId={goalId} />