From b0f3852bb2fad4063d2329cd2b8124ddba4d8363 Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Sun, 5 May 2024 17:57:39 +0900
Subject: [PATCH] Refactor CaseEditor's props

---
 .../[folderId]/cases/[caseId]/CaseEditor.tsx  | 88 ++++++++++---------
 .../[folderId]/cases/[caseId]/page.tsx        | 12 ++-
 2 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
index 5f6cddb..ba95aeb 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
@@ -37,24 +37,28 @@ const defaultTestCase = {
   folderId: 0,
 };
 
+type Props = {
+  projectId: string;
+  folderId: string;
+  caseId: string;
+  messages: CaseMessages;
+  locale: string;
+};
+
 export default function CaseEditor({
-  params,
-}: {
-  params: {
-    projectId: string;
-    folderId: string;
-    caseId: string;
-    messages: CaseMessages;
-    locale: string;
-  };
-}) {
+  projectId,
+  folderId,
+  caseId,
+  messages,
+  locale,
+}: Props) {
   const [testCase, setTestCase] = useState<CaseType>(defaultTestCase);
   const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false);
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
   const router = useRouter();
 
   const onPlusClick = async (newStepNo: number) => {
-    const newStep = await fetchCreateStep(newStepNo, params.caseId);
+    const newStep = await fetchCreateStep(newStepNo, caseId);
     if (newStep) {
       newStep.caseSteps = { stepNo: newStepNo };
       const updatedSteps = testCase.Steps.map((step) => {
@@ -88,7 +92,7 @@ export default function CaseEditor({
     const deletedStepNo = deletedStep.caseSteps.stepNo;
 
     // delete request
-    await fetchDeleteStep(stepId, params.caseId);
+    await fetchDeleteStep(stepId, caseId);
 
     const updatedSteps = testCase.Steps.map((step) => {
       if (step.caseSteps.stepNo > deletedStepNo) {
@@ -111,11 +115,11 @@ export default function CaseEditor({
 
   const handleDrop = async (event) => {
     event.preventDefault();
-    handleFetchCreateAttachments(params.caseId, event.dataTransfer.files);
+    handleFetchCreateAttachments(caseId, event.dataTransfer.files);
   };
 
   const handleInput = (event) => {
-    handleFetchCreateAttachments(params.caseId, event.target.files);
+    handleFetchCreateAttachments(caseId, event.target.files);
   };
 
   const handleFetchCreateAttachments = async (
@@ -156,7 +160,7 @@ export default function CaseEditor({
   useEffect(() => {
     async function fetchDataEffect() {
       try {
-        const data = await fetchCase(params.caseId);
+        const data = await fetchCase(caseId);
         setTestCase(data);
       } catch (error: any) {
         console.error("Error in effect:", error.message);
@@ -170,15 +174,15 @@ export default function CaseEditor({
     <>
       <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
         <div className="flex items-center">
-          <Tooltip content={params.messages.backToCases} placement="left">
+          <Tooltip content={messages.backToCases} placement="left">
             <Button
               isIconOnly
               size="sm"
               className="rounded-full bg-neutral-50 dark:bg-neutral-600"
               onPress={() =>
                 router.push(
-                  `/projects/${params.projectId}/folders/${params.folderId}/cases`,
-                  { locale: params.locale }
+                  `/projects/${projectId}/folders/${folderId}/cases`,
+                  { locale: locale }
                 )
               }
             >
@@ -198,20 +202,20 @@ export default function CaseEditor({
             setIsUpdating(false);
           }}
         >
-          {isUpdating ? params.messages.updating : params.messages.update}
+          {isUpdating ? messages.updating : messages.update}
         </Button>
       </div>
 
       <div className="p-5">
-        <h6 className="font-bold">{params.messages.basic}</h6>
+        <h6 className="font-bold">{messages.basic}</h6>
         <Input
           size="sm"
           type="text"
           variant="bordered"
-          label={params.messages.title}
+          label={messages.title}
           value={testCase.title}
           isInvalid={isTitleInvalid}
-          errorMessage={isTitleInvalid ? params.messages.pleaseEnterTitle : ""}
+          errorMessage={isTitleInvalid ? messages.pleaseEnterTitle : ""}
           onChange={(e) => {
             setTestCase({ ...testCase, title: e.target.value });
           }}
@@ -221,8 +225,8 @@ export default function CaseEditor({
         <Textarea
           size="sm"
           variant="bordered"
-          label={params.messages.description}
-          placeholder={params.messages.testCaseDescription}
+          label={messages.description}
+          placeholder={messages.testCaseDescription}
           value={testCase.description}
           onValueChange={(changeValue) => {
             setTestCase({ ...testCase, description: changeValue });
@@ -249,12 +253,12 @@ export default function CaseEditor({
                 fill={priorities[testCase.priority].color}
               />
             }
-            label={params.messages.priority}
+            label={messages.priority}
             className="mt-3 max-w-xs"
           >
             {priorities.map((priority, index) => (
               <SelectItem key={priority.uid} value={index}>
-                {params.messages[priority.uid]}
+                {messages[priority.uid]}
               </SelectItem>
             ))}
           </Select>
@@ -272,12 +276,12 @@ export default function CaseEditor({
               );
               setTestCase({ ...testCase, type: index });
             }}
-            label={params.messages.type}
+            label={messages.type}
             className="mt-3 max-w-xs"
           >
             {testTypes.map((type, index) => (
               <SelectItem key={type.uid} value={index}>
-                {params.messages[type.uid]}
+                {messages[type.uid]}
               </SelectItem>
             ))}
           </Select>
@@ -295,12 +299,12 @@ export default function CaseEditor({
               );
               setTestCase({ ...testCase, template: index });
             }}
-            label={params.messages.template}
+            label={messages.template}
             className="mt-3 max-w-xs"
           >
             {templates.map((template, index) => (
               <SelectItem key={template.uid} value={index}>
-                {params.messages[template.uid]}
+                {messages[template.uid]}
               </SelectItem>
             ))}
           </Select>
@@ -309,12 +313,12 @@ export default function CaseEditor({
         <Divider className="my-6" />
         {templates[testCase.template].uid === "text" ? (
           <div>
-            <h6 className="font-bold">{params.messages.testDetail}</h6>
+            <h6 className="font-bold">{messages.testDetail}</h6>
             <div className="flex">
               <Textarea
                 size="sm"
                 variant="bordered"
-                label={params.messages.preconditions}
+                label={messages.preconditions}
                 value={testCase.preConditions}
                 onValueChange={(changeValue) => {
                   setTestCase({ ...testCase, preConditions: changeValue });
@@ -325,7 +329,7 @@ export default function CaseEditor({
               <Textarea
                 size="sm"
                 variant="bordered"
-                label={params.messages.expectedResult}
+                label={messages.expectedResult}
                 value={testCase.expectedResults}
                 onValueChange={(changeValue) => {
                   setTestCase({ ...testCase, expectedResults: changeValue });
@@ -337,7 +341,7 @@ export default function CaseEditor({
         ) : (
           <div>
             <div className="flex items-center">
-              <h6 className="font-bold">{params.messages.steps}</h6>
+              <h6 className="font-bold">{messages.steps}</h6>
               <Button
                 startContent={<Plus size={16} />}
                 size="sm"
@@ -345,7 +349,7 @@ export default function CaseEditor({
                 className="ms-3"
                 onPress={() => onPlusClick(1)}
               >
-                {params.messages.newStep}
+                {messages.newStep}
               </Button>
             </div>
             <CaseStepsEditor
@@ -364,13 +368,13 @@ export default function CaseEditor({
               }}
               onStepPlus={onPlusClick}
               onStepDelete={onDeleteClick}
-              messages={params.messages}
+              messages={messages}
             />
           </div>
         )}
 
         <Divider className="my-6" />
-        <h6 className="font-bold">{params.messages.attachments}</h6>
+        <h6 className="font-bold">{messages.attachments}</h6>
         <CaseAttachmentsEditor
           attachments={testCase.Attachments}
           onAttachmentDownload={(
@@ -378,7 +382,7 @@ export default function CaseEditor({
             downloadFileName: string
           ) => fetchDownloadAttachment(attachmentId, downloadFileName)}
           onAttachmentDelete={onAttachmentDelete}
-          messages={params.messages}
+          messages={messages}
         />
         <div
           className="flex items-center justify-center w-96 mt-3"
@@ -392,13 +396,11 @@ export default function CaseEditor({
             <div className="flex flex-col items-center justify-center pt-5 pb-6">
               <ArrowUpFromLine />
               <p className="mb-2 text-sm text-neutral-500 dark:text-neutral-400">
-                <span className="font-semibold">
-                  {params.messages.clickToUpload}
-                </span>
-                <span>{params.messages.orDragAndDrop}</span>
+                <span className="font-semibold">{messages.clickToUpload}</span>
+                <span>{messages.orDragAndDrop}</span>
               </p>
               <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                {params.messages.maxFileSize}: 50 MB
+                {messages.maxFileSize}: 50 MB
               </p>
             </div>
             <input
diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
index e639225..71a8347 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
@@ -62,13 +62,11 @@ export default function Page({
 
   return (
     <CaseEditor
-      params={{
-        projectId: params.projectId,
-        folderId: params.folderId,
-        caseId: params.caseId,
-        messages: messages,
-        locale: params.locale,
-      }}
+      projectId={params.projectId}
+      folderId={params.folderId}
+      caseId={params.caseId}
+      messages={messages}
+      locale={params.locale}
     />
   );
 }