Merge pull request #23 from piximi/issue/17-hotkeys-usability

Issue/17 hotkeys usability

src/components/app-bars/ImageViewerAppBar/ImageViewerAppBar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { ArrowBack } from "@mui/icons-material";
@@ -10,26 +10,32 @@ import {
   Typography,
 } from "@mui/material";
 
-import { useDialog } from "hooks";
+import { useDialogHotkey } from "hooks";
 
 import { ExitAnnotatorDialog } from "components/dialogs";
 
 import { LogoLoader } from "components/styled-components";
+import { HotkeyContext } from "utils/common/enums";
 
 export const ImageViewerAppBar = () => {
+  const [returnToProject, setReturnToProject] = useState(false);
   const {
     onClose: onCloseExitAnnotatorDialog,
     onOpen: onOpenExitAnnotatorDialog,
-    open: openExitAnnotatorDialog,
-  } = useDialog();
+    open: ExitAnnotatorDialogOpen,
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const navigate = useNavigate();
 
   const onReturnToMainProject = () => {
-    onCloseExitAnnotatorDialog();
-    navigate("/");
+    setReturnToProject(true);
   };
 
+  useEffect(() => {
+    //NOTE: Wait until ExitAnnotatorDialogOpen is finished updating. Otherwise unmounted component access warning
+    if (returnToProject && !ExitAnnotatorDialogOpen) navigate("/");
+  }, [returnToProject, ExitAnnotatorDialogOpen, navigate]);
+
   return (
     <>
       <AppBar
@@ -58,9 +64,9 @@ export const ImageViewerAppBar = () => {
       </AppBar>
 
       <ExitAnnotatorDialog
-        onReturnToProject={onReturnToMainProject}
+        returnToProject={onReturnToMainProject}
         onClose={onCloseExitAnnotatorDialog}
-        open={openExitAnnotatorDialog}
+        open={ExitAnnotatorDialogOpen}
       />
     </>
   );

src/components/app-bars/ProjectToolbar/ProjectToolbar.tsx

@@ -45,12 +45,12 @@ import {
   useThingSelection,
 } from "hooks";
 import { TooltipTitle } from "components/tooltips";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { useNavigate } from "react-router-dom";
 import { selectActiveCategories } from "store/project/reselectors";
 import { imageViewerSlice } from "store/imageViewer";
 import { TooltipButton } from "components/styled-components/TooltipButton/TooltipButton";
-import { DialogWithAction } from "components/dialogs";
+import { ConfirmationDialog } from "components/dialogs";
 import { ImageCategoryMenu } from "components/menus";
 import { Partition } from "utils/models/enums";
 import { dataSlice } from "store/data";
@@ -78,7 +78,7 @@ export const ProjectToolbar = () => {
     onClose: handleCloseDeleteImagesDialog,
     onOpen: onOpenDeleteImagesDialog,
     open: deleteImagesDialogisOpen,
-  } = useDialogHotkey(HotkeyView.DialogWithAction);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const handleDelete = () => {
     dispatch(
@@ -96,20 +96,11 @@ export const ProjectToolbar = () => {
         selectedThingIds: allSelectedThingIds,
       })
     );
-    dispatch(
-      applicationSettingsSlice.actions.unregisterHotkeyView({
-        hotkeyView: HotkeyView.MainImageGridAppBar,
-      })
-    );
+
     navigate("/imageviewer");
   };
 
   const handleNavigateMeasurements = () => {
-    dispatch(
-      applicationSettingsSlice.actions.unregisterHotkeyView({
-        hotkeyView: HotkeyView.MainImageGridAppBar,
-      })
-    );
     navigate("/measurements");
   };
 
@@ -211,7 +202,7 @@ export const ProjectToolbar = () => {
         )}
       </Toolbar>
 
-      <DialogWithAction
+      <ConfirmationDialog
         title={`Delete ${pluralize(
           "Object",
           unfilteredSelectedThings.length
@@ -392,6 +383,8 @@ const ProjectTextField = () => {
             inputRef={inputRef}
             size="small"
             sx={{ ml: 5 }}
+            variant="standard"
+            inputProps={{ min: 0, style: { textAlign: "center" } }}
           />
         </FormControl>
       )}

src/components/cards/ExampleProjectCard/ExampleProjectCard.tsx

@@ -125,10 +125,7 @@ export const ExampleProjectCard = ({
       );
       if (!deserializedProject) return;
 
-      const project = deserializedProject.project;
-      const data = deserializedProject.data;
-
-      const classifier = deserializedProject.classifier;
+      const { project, data, classifier } = deserializedProject;
 
       batch(() => {
         // loadPercent will be set to 1 here

src/components/dialogs/CategoryDialog/CategoryDialog.tsx

@@ -1,6 +1,6 @@
 import { TextField, Box } from "@mui/material";
 
-import { DialogWithAction } from "../DialogWithAction";
+import { ConfirmationDialog } from "../ConfirmationDialog";
 import { useCategoryValidation } from "hooks/useCategoryValidation/useCategoryValidation";
 import { ColorIcon } from "components/controls";
 
@@ -37,7 +37,9 @@ export const CategoryDialog = ({
   } = useCategoryValidation({ kind, initName, initColor });
 
   const handleConfirm = () => {
-    onConfirm(name, color, kind);
+    if (!isInvalidName) {
+      onConfirm(name, color, kind);
+    }
   };
 
   const handleClose = () => {
@@ -46,7 +48,7 @@ export const CategoryDialog = ({
   };
 
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       onClose={handleClose}
       isOpen={open}
       title={`${action} Category`}

src/components/dialogs/CreateCategoryDialog/CreateCategoryDialog.tsx → src/components/dialogs/CategoryDialog/CreateCategoryDialog.tsx

@@ -1,6 +1,6 @@
 import { useDispatch } from "react-redux";
 import { dataSlice } from "store/data/dataSlice";
-import { CategoryDialog } from "../CategoryDialog";
+import { CategoryDialog } from "./CategoryDialog";
 
 type CreateCategoriesDialogProps = {
   onClose: () => void;

src/components/dialogs/UpdateCategoryDialog/UpdateCategoryDialog.tsx → src/components/dialogs/CategoryDialog/UpdateCategoryDialog.tsx

@@ -1,6 +1,6 @@
 import { useDispatch } from "react-redux";
 import { dataSlice } from "store/data/dataSlice";
-import { CategoryDialog } from "../CategoryDialog";
+import { CategoryDialog } from "./CategoryDialog";
 import { Category } from "store/data/types";
 
 type UpdateCategoriesDialogProps = {

src/components/dialogs/CategoryDialog/index.ts

@@ -1 +1,2 @@
-export { CategoryDialog } from "./CategoryDialog";
+export { CreateCategoryDialog } from "./CreateCategoryDialog";
+export { UpdateCategoryDialog } from "./UpdateCategoryDialog";

src/components/dialogs/DialogWithAction/DialogWithAction.stories.tsx → src/components/dialogs/ConfirmationDialog/ConfirmationDialog.stories.tsx

@@ -1,9 +1,10 @@
+// ignore-no-logs
 import type { Meta, StoryObj } from "@storybook/react";
-import { DialogWithActionSHK } from "./DialogWithActionSHK";
+import { ConfirmationDialogSHK } from "./ConfirmationDialogSHK";
 
-const meta: Meta<typeof DialogWithActionSHK> = {
-  title: "Common/DialogWithAction",
-  component: DialogWithActionSHK,
+const meta: Meta<typeof ConfirmationDialogSHK> = {
+  title: "Common/ConfirmationDialog",
+  component: ConfirmationDialogSHK,
   tags: ["autodocs"],
   parameters: {
     docs: {
@@ -16,11 +17,11 @@ const meta: Meta<typeof DialogWithActionSHK> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof DialogWithActionSHK>;
+type Story = StoryObj<typeof ConfirmationDialogSHK>;
 
 export const Default: Story = {
   args: {
-    title: "Dialog with Action",
+    title: "Confirmation Dialog",
     content: "Dialog content",
     onConfirm: () => {
       console.log("I'm confirmed");
@@ -34,7 +35,7 @@ export const Default: Story = {
 
 export const AltText: Story = {
   args: {
-    title: "Dialog with Action",
+    title: "Confirmation Dialog",
     content: "Dialog content",
     onConfirm: () => {
       console.log("I'm confirmed");
@@ -49,7 +50,7 @@ export const AltText: Story = {
 
 export const WithReject: Story = {
   args: {
-    title: "Dialog with Action",
+    title: "Confirmation Dialog",
     content: "Dialog content",
     onConfirm: () => {
       console.log("I'm confirmed");

src/components/dialogs/DialogWithAction/DialogWithAction.tsx → src/components/dialogs/ConfirmationDialog/ConfirmationDialog.tsx

@@ -10,10 +10,10 @@ import {
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { useHotkeys } from "hooks";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { ReactElement } from "react";
 
-type DialogWithActionProps = Omit<
+type ConfirmationDialogProps = Omit<
   DialogProps,
   "children" | "open" | "content"
 > & {
@@ -26,34 +26,40 @@ type DialogWithActionProps = Omit<
   confirmText?: string;
   rejectText?: string;
   confirmDisabled?: boolean;
+  disableHotkeyOnInput?: boolean;
 };
 
-export const DialogWithAction = ({
+export const ConfirmationDialog = ({
   title,
   content,
   onConfirm,
   onClose: handleClose,
-  onReject: handleReject,
+  onReject,
   confirmText = "Confirm",
   rejectText = "Reject",
   isOpen,
   confirmDisabled,
+  disableHotkeyOnInput,
   ...rest
-}: DialogWithActionProps) => {
+}: ConfirmationDialogProps) => {
   const handleConfirm = () => {
+    handleClose();
     onConfirm();
+  };
 
+  const handleReject = () => {
+    onReject && onReject();
     handleClose();
   };
 
   useHotkeys(
     "enter",
     () => {
-      handleConfirm();
+      !confirmDisabled && handleConfirm();
     },
-    HotkeyView.DialogWithAction,
-    { enableOnTags: ["INPUT"], enabled: isOpen },
-    [handleConfirm]
+    HotkeyContext.ConfirmationDialog,
+    { enableOnTags: disableHotkeyOnInput ? [] : ["INPUT"], enabled: isOpen },
+    [handleConfirm, confirmDisabled]
   );
 
   return (
@@ -77,26 +83,26 @@ export const DialogWithAction = ({
         </IconButton>
       </Box>
 
-      {content && <DialogContent sx={{ py: 0 }}>{content}</DialogContent>}
+      {content && <DialogContent>{content}</DialogContent>}
 
       <DialogActions>
+        <Button onClick={handleClose} color="primary">
+          Cancel
+        </Button>
+
+        {onReject && (
+          <Button onClick={handleReject} color="primary">
+            {rejectText}
+          </Button>
+        )}
         <Button
           onClick={handleConfirm}
           color="primary"
+          variant="contained"
           disabled={confirmDisabled}
         >
           {confirmText}
         </Button>
-        {handleReject ? (
-          <Button onClick={handleReject} color="primary">
-            {rejectText}
-          </Button>
-        ) : (
-          <></>
-        )}
-        <Button onClick={handleClose} color="primary">
-          Cancel
-        </Button>
       </DialogActions>
     </Dialog>
   );

src/components/dialogs/DialogWithAction/DialogWithActionSHK.tsx → src/components/dialogs/ConfirmationDialog/ConfirmationDialogSHK.tsx

@@ -1,9 +1,9 @@
 import { useHotkeys } from "hooks";
 
-import { HotkeyView } from "utils/common/enums";
-import { DialogWithAction } from "./DialogWithAction";
+import { HotkeyContext } from "utils/common/enums";
+import { ConfirmationDialog } from "./ConfirmationDialog";
 
-type DialogWithActionHKProps = {
+type ConfirmationDialogProps = {
   title: string;
   content: string;
   onConfirm: () => void;
@@ -16,7 +16,7 @@ type DialogWithActionHKProps = {
 
 //NOTE: SHK : Sans Hotkey for storybook
 
-export const DialogWithActionSHK = ({
+export const ConfirmationDialogSHK = ({
   title,
   content,
   onConfirm,
@@ -25,7 +25,7 @@ export const DialogWithActionSHK = ({
   confirmText = "Confirm",
   rejectText = "Reject",
   isOpen,
-}: DialogWithActionHKProps) => {
+}: ConfirmationDialogProps) => {
   const handleConfirm = () => {
     onConfirm();
 
@@ -37,13 +37,13 @@ export const DialogWithActionSHK = ({
     () => {
       handleConfirm();
     },
-    HotkeyView.DeleteCategoryDialog,
+    HotkeyContext.ConfirmationDialog,
     { enableOnTags: ["INPUT"] },
     [handleConfirm]
   );
 
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       title={title}
       content={content}
       onConfirm={handleConfirm}

src/components/dialogs/ConfirmationDialog/index.ts

@@ -0,0 +1 @@
+export { ConfirmationDialog } from "./ConfirmationDialog";

src/components/dialogs/CreateKindDialog/CreateKindDialog.tsx

@@ -1,6 +1,6 @@
 import { batch, useDispatch, useSelector } from "react-redux";
 import { dataSlice } from "store/data/dataSlice";
-import { DialogWithAction } from "../DialogWithAction";
+import { ConfirmationDialog } from "../ConfirmationDialog";
 import { Box, TextField } from "@mui/material";
 import { selectAllKindIds } from "store/data/selectors";
 import { ChangeEvent, useCallback, useState } from "react";
@@ -88,7 +88,7 @@ export const CreateKindDialog = ({
   };
 
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       onClose={onClose}
       isOpen={open}
       title={"Create Kind"}