fix(Goal): use shortId to confirm deleting

taskany-inc · May 25, 2023 · f58a01a · f58a01a
1 parent 08b310c
commit f58a01a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/components/GoalDeleteModal/GoalDeleteModal.tsx b/src/components/GoalDeleteModal/GoalDeleteModal.tsx
@@ -20,13 +20,13 @@ import { tr } from './GoalDeleteModal.i18n';
 const ModalOnEvent = dynamic(() => import('../ModalOnEvent'));
 
 interface GoalDeleteModalProps {
-    id: string;
+    shortId: string;
 
     onConfirm: () => void;
     onCancel?: () => void;
 }
 
-export const GoalDeleteModal: React.FC<GoalDeleteModalProps> = ({ id, onConfirm, onCancel }) => {
+export const GoalDeleteModal: React.FC<GoalDeleteModalProps> = ({ shortId, onConfirm, onCancel }) => {
     const [deleteConfirmation, setDeleteConfirmation] = useState('');
 
     const onConfirmationInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
@@ -48,14 +48,20 @@ export const GoalDeleteModal: React.FC<GoalDeleteModalProps> = ({ id, onConfirm,
             <ModalContent>
                 <Text>
                     {tr.raw('To confirm deleting goal please type goal key below', {
-                        goal: <b key={id}>{id}</b>,
+                        goal: <b key={shortId}>{shortId}</b>,
                     })}
                 </Text>
 
                 <br />
 
                 <Form>
-                    <FormInput flat="bottom" placeholder={id} autoComplete="off" onChange={onConfirmationInputChange} />
+                    <FormInput
+                        flat="bottom"
+                        placeholder={shortId}
+                        autoComplete="off"
+                        autoFocus
+                        onChange={onConfirmationInputChange}
+                    />
 
                     <FormActions flat="top">
                         <FormAction left />
@@ -64,7 +70,7 @@ export const GoalDeleteModal: React.FC<GoalDeleteModalProps> = ({ id, onConfirm,
                             <Button
                                 size="m"
                                 view="danger"
-                                disabled={deleteConfirmation !== id}
+                                disabled={deleteConfirmation !== shortId}
                                 onClick={onConfirm}
                                 text={tr('Yes, delete it')}
                             />

diff --git a/src/components/GoalPage/GoalPage.tsx b/src/components/GoalPage/GoalPage.tsx
@@ -426,7 +426,7 @@ export const GoalPage = ({ user, locale, ssrTime, params: { id } }: ExternalPage
             ))}
 
             {nullable(goal._isEditable, () => (
-                <GoalDeleteModal id={goal.id} onConfirm={onGoalDeleteConfirm} />
+                <GoalDeleteModal shortId={goal._shortId} onConfirm={onGoalDeleteConfirm} />
             ))}
         </Page>
     );

diff --git a/src/components/GoalPreview/GoalPreview.tsx b/src/components/GoalPreview/GoalPreview.tsx
@@ -356,7 +356,7 @@ const GoalPreview: React.FC<GoalPreviewProps> = ({ preview, onClose, onDelete })
                             <GoalEditForm goal={g} onSubmit={onGoalEdit} />
                         </ModalOnEvent>
 
-                        <GoalDeleteModal id={g.id} onConfirm={onGoalDeleteConfirm} />
+                        <GoalDeleteModal shortId={g._shortId} onConfirm={onGoalDeleteConfirm} />
                     </>
                 )),
             )}
-Original file line number
+Diff line change
@@ Expand Up @@
                 ))}
                 {nullable(goal._isEditable, () => (
-                    <GoalDeleteModal id={goal.id} onConfirm={onGoalDeleteConfirm} />
+                    <GoalDeleteModal shortId={goal._shortId} onConfirm={onGoalDeleteConfirm} />
                 ))}
             </Page>
         );
@@ Expand Down @@