From 4226037e48439eafd0f2a1b829b93da634f79d03 Mon Sep 17 00:00:00 2001 From: LinaYahya Date: Thu, 18 Jul 2024 11:44:05 +0200 Subject: [PATCH] fix: review comments --- src/langs/en.json | 3 +- .../AddLabelsStep/AddLabelForm.tsx | 10 +-- .../AddLabelsStep/AddLabelWithinFrame.tsx | 10 +-- .../AddLabelsStep/DraggableLabel.tsx | 8 ++- src/modules/common/UploadImage.tsx | 3 +- src/modules/context/LabelsContext.tsx | 64 +++++++++---------- 6 files changed, 48 insertions(+), 50 deletions(-) diff --git a/src/langs/en.json b/src/langs/en.json index 95f55a1..c6e1f76 100644 --- a/src/langs/en.json +++ b/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", diff --git a/src/modules/builder/configuration/AddLabelsStep/AddLabelForm.tsx b/src/modules/builder/configuration/AddLabelsStep/AddLabelForm.tsx index ceb2ba6..c4e9529 100644 --- a/src/modules/builder/configuration/AddLabelsStep/AddLabelForm.tsx +++ b/src/modules/builder/configuration/AddLabelsStep/AddLabelForm.tsx @@ -4,11 +4,12 @@ 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) => void; onSubmit: () => void; @@ -16,7 +17,7 @@ type Props = { }; const AddLabelForm = ({ - formPosition, + position, value, onChange, onSubmit, @@ -28,10 +29,9 @@ const AddLabelForm = ({ diff --git a/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx b/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx index 86a9d91..d7c22dd 100644 --- a/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx +++ b/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx @@ -83,7 +83,7 @@ const AddLabelWithinFrame = (): JSX.Element => { setContent(''); }; - const handleAddLabel = ( + const showLabelForm = ( event: React.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 && ( setOpenForm(false)} /> )} - + {labels.map((ele) => ( ))} diff --git a/src/modules/builder/configuration/AddLabelsStep/DraggableLabel.tsx b/src/modules/builder/configuration/AddLabelsStep/DraggableLabel.tsx index 51248fe..a5bda55 100644 --- a/src/modules/builder/configuration/AddLabelsStep/DraggableLabel.tsx +++ b/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); }} > diff --git a/src/modules/common/UploadImage.tsx b/src/modules/common/UploadImage.tsx index b60cdca..c52230c 100644 --- a/src/modules/common/UploadImage.tsx +++ b/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. diff --git a/src/modules/context/LabelsContext.tsx b/src/modules/context/LabelsContext.tsx index 7d0f9ea..be9a14d 100644 --- a/src/modules/context/LabelsContext.tsx +++ b/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(defaultContextValue); -type Prop = { - children: ReactElement | ReactElement[]; +type Props = { + children: JSX.Element; }; -export const LabelsProvider: FC = ({ children }) => { +export const LabelsProvider = ({ children }: Props): JSX.Element => { const { data: settingsData } = hooks.useAppSettings({ name: SettingsKeys.SettingsData, }); @@ -38,35 +38,35 @@ export const LabelsProvider: FC = ({ 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, @@ -74,10 +74,8 @@ export const LabelsProvider: FC = ({ children }) => { setIsDragging, openForm, setOpenForm, - }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [labels, isDragging, openForm], - ); + }; + }, [isDragging, openForm, patchSetting, settingsData]); return ( {children}