fix: Step case overwriting prevention by hypothetical ID (#396)

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx

@@ -60,7 +60,7 @@ export default function CaseEditor({
   const [testCase, setTestCase] = useState<CaseType>(defaultTestCase);
   const [isTitleInvalid] = useState<boolean>(false);
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
-  const [plusCount, setPlusCount] = useState<number>(0);
+  const [idCounter, setIdCounter] = useState<number>(0);
   const [isDirty, setIsDirty] = useState(false);
   const [selectedTags, setSelectedTags] = useState<{ id: number; name: string }[]>([]);
 
@@ -68,9 +68,14 @@ export default function CaseEditor({
   useFormGuard(isDirty, messages.areYouSureLeave);
 
   const onPlusClick = async (newStepNo: number) => {
+    if (!testCase.Steps) {
+      return;
+    }
     setIsDirty(true);
+    const nextId = idCounter + 1;
     const newStep: StepType = {
-      id: plusCount,
+      // hypothetical ID
+      id: nextId,
       step: '',
       result: '',
       createdAt: new Date(),
@@ -78,12 +83,10 @@ export default function CaseEditor({
       caseSteps: {
         stepNo: newStepNo,
       },
-      uid: `uid${plusCount}`,
+      uid: `uid${nextId}`,
       editState: 'new',
     };
-    setPlusCount(plusCount + 1);
 
-    if (testCase.Steps) {
     const updatedSteps = testCase.Steps.map((step) => {
       if (step.caseSteps.stepNo >= newStepNo) {
         return {
@@ -104,14 +107,16 @@ export default function CaseEditor({
       ...testCase,
       Steps: updatedSteps,
     });
-    }
+    setIdCounter(nextId);
   };
 
   const onDeleteClick = async (stepId: number) => {
     setIsDirty(true);
-
+    if (!testCase.Steps) {
+      return;
+    }
     // find deletedStep's stepNo
-    if (testCase.Steps) {
+
     const deletedStep = testCase.Steps.find((step) => step.id === stepId);
     if (!deletedStep) {
       return;
@@ -137,7 +142,6 @@ export default function CaseEditor({
       ...testCase,
       Steps: updatedSteps,
     });
-    }
   };
 
   const handleDrop = (event: DragEvent<HTMLElement>) => {
@@ -201,7 +205,10 @@ export default function CaseEditor({
       changeStep.editState = 'changed';
     }
 
-    if (testCase.Steps) {
+    if (!testCase.Steps) {
+      return;
+    }
+
     setTestCase({
       ...testCase,
       Steps: testCase.Steps.map((step) => {
@@ -212,7 +219,6 @@ export default function CaseEditor({
         }
       }),
     });
-    }
   };
 
   useEffect(() => {
@@ -223,6 +229,11 @@ export default function CaseEditor({
         data.Steps.forEach((step: StepType) => {
           step.editState = 'notChanged';
         });
+
+        // set idCounter to the max step id to avoid id conflict for new steps
+        // id is not reflected on database
+        const maxStepId = data.Steps.reduce((maxId: number, step: StepType) => Math.max(maxId, step.id), 0);
+        setIdCounter(maxStepId);
         setTestCase(data);
         if (data.Tags) {
           setSelectedTags(Array.isArray(data.Tags) ? data.Tags : []);