fix: review comments

src/langs/en.json

@@ -7,8 +7,7 @@
   "DESCRIPTION_DETAILS": "Add a description for your frame (optional)",
   "DROP_IMAGE_LABEL": "Upload image",
   "DROP_IMAGE_DESCRIPTION": "Add the image you want to add labels for",
-  "UPLOAD_IMAGE_NOTE": "You can upload up to {{FILE_UPLOAD_MAX_FILES}} file at a time",
-  "UPLOAD_IMAGE_NOTE_plural": "You can upload up to {{FILE_UPLOAD_MAX_FILES}} files at a time",
+  "UPLOAD_IMAGE_NOTE": "You can upload up your image here",
   "DROP_HERE": "Drop here or",
   "NEXT": "Next",
   "BACK": "Back",

src/modules/builder/configuration/AddLabelsStep/AddLabelForm.tsx

@@ -4,19 +4,20 @@ import { KeepScale } from 'react-zoom-pan-pinch';
 import { CloseRounded } from '@mui/icons-material';
 import { Box, Button, IconButton, Stack, TextField } from '@mui/material';
 
+import { Position } from '@/@types';
 import { useAppTranslation } from '@/config/i18n';
 import { APP } from '@/langs/constants';
 
 type Props = {
-  formPosition: { y: number; x: number };
+  position: Position;
   value: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onSubmit: () => void;
   onClose: () => void;
 };
 
 const AddLabelForm = ({
-  formPosition,
+  position,
   value,
   onChange,
   onSubmit,
@@ -28,10 +29,9 @@ const AddLabelForm = ({
     <Stack
       sx={{
         position: 'absolute',
-
         zIndex: 500,
-        top: formPosition.y,
-        left: formPosition.x,
+        top: position.y,
+        left: position.x,
       }}
       gap={1}
     >

src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx

@@ -83,7 +83,7 @@ const AddLabelWithinFrame = (): JSX.Element => {
     setContent('');
   };
 
-  const handleAddLabel = (
+  const showLabelForm = (
     event: React.MouseEvent<HTMLImageElement, MouseEvent>,
   ): void => {
     if (!isDragging) {
@@ -97,7 +97,7 @@ const AddLabelWithinFrame = (): JSX.Element => {
     }
   };
 
-  const openEditForm = (labelId: string): void => {
+  const showEditForm = (labelId: string): void => {
     const ele = labels.find(({ id }) => id === labelId);
     if (ele) {
       const { x, y, content: c } = ele;
@@ -121,19 +121,19 @@ const AddLabelWithinFrame = (): JSX.Element => {
       {permission === PermissionLevel.Admin && openForm && !isDragging && (
         <AddLabelForm
           value={content}
-          formPosition={formPosition}
+          position={formPosition}
           onChange={handleFormInputChange}
           onSubmit={handleFormSubmit}
           onClose={() => setOpenForm(false)}
         />
       )}
       <ImageFrame />
-      <Container onClick={handleAddLabel}>
+      <Container onClick={showLabelForm}>
         {labels.map((ele) => (
           <DraggableLabel
             key={ele.id}
             label={ele}
-            openEditForm={openEditForm}
+            showEditForm={showEditForm}
           />
         ))}
       </Container>

src/modules/builder/configuration/AddLabelsStep/DraggableLabel.tsx

@@ -27,11 +27,11 @@ const StyledLabel = styled(Box)<{ labelId: string }>(({ theme, labelId }) => ({
 }));
 
 type Props = {
-  openEditForm: (id: string) => void;
+  showEditForm: (id: string) => void;
   label: Label;
 };
 
-const DraggableLabel = ({ openEditForm, label }: Props): JSX.Element => {
+const DraggableLabel = ({ showEditForm, label }: Props): JSX.Element => {
   const [position, setPosition] = useState({ x: label.x, y: label.y });
   const { labels, saveLabelsChanges, deleteLabel, setIsDragging } =
     useContext(LabelsContext);
@@ -52,6 +52,8 @@ const DraggableLabel = ({ openEditForm, label }: Props): JSX.Element => {
     if (labelInd > -1) {
       const newLabel = { ...label, ...position };
       saveLabelsChanges(labelInd, newLabel);
+
+      // Set a delay before enabling actions like opening a new form or applying zoom/move to the image frame
       setTimeout(() => {
         setIsDragging(false);
       }, 2000);
@@ -86,7 +88,7 @@ const DraggableLabel = ({ openEditForm, label }: Props): JSX.Element => {
             }}
             onClick={(e) => {
               e.stopPropagation();
-              openEditForm(label.id);
+              showEditForm(label.id);
             }}
           >
             <Edit sx={{ color: 'white' }} fontSize="small" />

src/modules/common/UploadImage.tsx

@@ -4,7 +4,6 @@ import '@uppy/core/dist/style.css';
 import '@uppy/dashboard/dist/style.css';
 import { Dashboard } from '@uppy/react';
 
-import { FILE_UPLOAD_MAX_FILES } from '@/config/constants';
 import { useAppTranslation } from '@/config/i18n';
 import { APP } from '@/langs/constants';
 import { useUploadImage } from '@/utils/hooks';
@@ -31,7 +30,7 @@ const UploadImage = ({ onUploadComplete }: Props): JSX.Element | null => {
         height={400}
         width="100%"
         proudlyDisplayPoweredByUppy={false}
-        note={t(APP.UPLOAD_IMAGE_NOTE, { FILE_UPLOAD_MAX_FILES })}
+        note={t(APP.UPLOAD_IMAGE_NOTE)}
         locale={{
           strings: {
             // Text to show on the droppable area.

src/modules/context/LabelsContext.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement, createContext, useMemo, useState } from 'react';
+import { createContext, useMemo, useState } from 'react';
 
 import { Label, Settings, SettingsKeys } from '@/@types';
 import { hooks, mutations } from '@/config/queryClient';
@@ -25,11 +25,11 @@ export type SettingsContextType = {
 export const LabelsContext =
   createContext<SettingsContextType>(defaultContextValue);
 
-type Prop = {
-  children: ReactElement | ReactElement[];
+type Props = {
+  children: JSX.Element;
 };
 
-export const LabelsProvider: FC<Prop> = ({ children }) => {
+export const LabelsProvider = ({ children }: Props): JSX.Element => {
   const { data: settingsData } = hooks.useAppSettings<Settings>({
     name: SettingsKeys.SettingsData,
   });
@@ -38,46 +38,44 @@ export const LabelsProvider: FC<Prop> = ({ children }) => {
   const [openForm, setOpenForm] = useState(false);
 
   const { mutate: patchSetting } = mutations.usePatchAppSetting();
-  const labels = settingsData?.[0]?.data.labels || [];
 
-  const saveData = (l: Label[]): void => {
-    if (settingsData) {
-      const data = { ...settingsData?.[0]?.data, labels: l };
-      patchSetting({ id: settingsData?.[0]?.id, data });
-    }
-  };
+  const value = useMemo(() => {
+    const labels = settingsData?.[0]?.data?.labels || [];
 
-  const deleteLabel = (labelId: string): void => {
-    const filteredLabels = labels.filter(({ id }) => labelId !== id);
-    saveData(filteredLabels);
-  };
+    const saveData = (l: Label[]): void => {
+      if (settingsData) {
+        const data = { ...settingsData?.[0]?.data, labels: l };
+        patchSetting({ id: settingsData?.[0]?.id, data });
+      }
+    };
 
-  const saveLabelsChanges = (editingIndex: number, newLabel: Label): void => {
-    if (editingIndex > -1) {
-      const newLabelGroups = [
-        ...labels.slice(0, editingIndex),
-        newLabel,
-        ...labels.slice(editingIndex + 1),
-      ];
-      saveData(newLabelGroups);
-    } else {
-      saveData([...labels, newLabel]);
-    }
-  };
+    const deleteLabel = (labelId: string): void => {
+      const filteredLabels = labels.filter(({ id }) => labelId !== id);
+      saveData(filteredLabels);
+    };
 
-  const value = useMemo(
-    () => ({
+    const saveLabelsChanges = (editingIndex: number, newLabel: Label): void => {
+      if (editingIndex > -1) {
+        const newLabelGroups = [
+          ...labels.slice(0, editingIndex),
+          newLabel,
+          ...labels.slice(editingIndex + 1),
+        ];
+        saveData(newLabelGroups);
+      } else {
+        saveData([...labels, newLabel]);
+      }
+    };
+    return {
       labels,
       deleteLabel,
       saveLabelsChanges,
       isDragging,
       setIsDragging,
       openForm,
       setOpenForm,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [labels, isDragging, openForm],
-  );
+    };
+  }, [isDragging, openForm, patchSetting, settingsData]);
 
   return (
     <LabelsContext.Provider value={value}>{children}</LabelsContext.Provider>