Remove Alert Dialogs (#155)

* Add TextDialog Component Add React Hooks ESLint Clean Code * Add Delete Node Dialog * Disable Delete and Unlock Menu Items for Root Node * Remove Alerts * Remove Gear * Fix Double Click Binding * ESLint Fixes * Bug Fixes
SpiritSeal · Oct 31, 2022 · 8c8da9e · 8c8da9e
1 parent ec0d60a
commit 8c8da9e
Show file tree

Hide file tree

Showing 10 changed files with 465 additions and 306 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,7 +6,14 @@ module.exports = {
     node: true,
   },
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'jest', 'jest-dom', 'jsx-a11y', 'prettier'],
+  plugins: [
+    '@typescript-eslint',
+    'jest',
+    'jest-dom',
+    'jsx-a11y',
+    'prettier',
+    'react-hooks',
+  ],
   extends: [
     'airbnb',
     'airbnb-typescript',
@@ -34,6 +41,10 @@ module.exports = {
       2,
       { namedComponents: 'arrow-function' },
     ],
+    'react/prop-types': 'off',
+    'react/require-default-props': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
   },
   settings: {
     jest: {

diff --git a/src/components/Dialogs/ConfirmationDialog/index.tsx b/src/components/Dialogs/ConfirmationDialog/index.tsx
@@ -28,26 +28,36 @@ const ConfirmationDialog = ({
   suggestedAction: 'approve' | 'reject' | undefined;
 }) => (
   <Dialog open={isOpen} onClose={onReject}>
-    <DialogTitle>{title}</DialogTitle>
-    <DialogContent>
-      <DialogContentText>{description}</DialogContentText>
-    </DialogContent>
-    <DialogActions>
-      <Button
-        variant={suggestedAction === 'reject' ? 'contained' : 'text'}
-        onClick={onReject}
-        autoFocus={suggestedAction === 'reject'}
-      >
-        {rejectButtonText}
-      </Button>
-      <Button
-        variant={suggestedAction === 'approve' ? 'contained' : 'text'}
-        onClick={onApprove}
-        autoFocus={suggestedAction === 'approve'}
-      >
-        {approveButtonText}
-      </Button>
-    </DialogActions>
+    <form
+      onSubmit={(e) => {
+        onApprove();
+        onReject();
+        e.preventDefault();
+      }}
+    >
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{description}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant={suggestedAction === 'reject' ? 'contained' : 'text'}
+          onClick={onReject}
+          type={suggestedAction === 'reject' ? 'submit' : 'button'}
+          autoFocus={suggestedAction === 'reject'}
+        >
+          {rejectButtonText}
+        </Button>
+        <Button
+          variant={suggestedAction === 'approve' ? 'contained' : 'text'}
+          onClick={onApprove}
+          type={suggestedAction === 'approve' ? 'submit' : 'button'}
+          autoFocus={suggestedAction === 'approve'}
+        >
+          {approveButtonText}
+        </Button>
+      </DialogActions>
+    </form>
   </Dialog>
 );
 

diff --git a/src/components/Dialogs/TextDialog/index.tsx b/src/components/Dialogs/TextDialog/index.tsx
@@ -0,0 +1,90 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
+  TextFieldProps,
+} from '@mui/material';
+
+const TextDialog = ({
+  isOpen,
+  onApprove,
+  onReject,
+  title,
+  description,
+  approveButtonText,
+  rejectButtonText,
+  suggestedAction,
+  initialValue,
+  updateOnInitialValueChange,
+  textFieldProps,
+}: {
+  isOpen: boolean;
+  onApprove: (value: string) => void;
+  onReject: () => void;
+  title: string;
+  description?: ReactNode;
+  approveButtonText?: string;
+  rejectButtonText?: string;
+  suggestedAction?: 'approve' | 'reject' | undefined;
+  initialValue?: string;
+  updateOnInitialValueChange?: boolean;
+  textFieldProps?: TextFieldProps;
+}) => {
+  const [value, setValue] = useState(initialValue || '');
+
+  useEffect(() => {
+    if (updateOnInitialValueChange && initialValue) setValue(initialValue);
+  }, [initialValue, updateOnInitialValueChange]);
+
+  const onClose = () => {
+    setValue(initialValue || '');
+    onReject();
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onClose}>
+      <form
+        onSubmit={(e) => {
+          onApprove(value);
+          onClose();
+          e.preventDefault();
+        }}
+      >
+        <DialogTitle>{title}</DialogTitle>
+        <DialogContent>
+          {description && <DialogContentText>{description}</DialogContentText>}
+          <TextField
+            sx={{ m: 2 }}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            inputProps={{ autoFocus: true }}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...textFieldProps}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant={suggestedAction === 'reject' ? 'contained' : 'text'}
+            onClick={() => onClose()}
+            type={suggestedAction === 'reject' ? 'submit' : 'button'}
+          >
+            {rejectButtonText}
+          </Button>
+          <Button
+            variant={suggestedAction === 'approve' ? 'contained' : 'text'}
+            type={suggestedAction === 'approve' ? 'submit' : 'button'}
+          >
+            {approveButtonText}
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+};
+
+export default TextDialog;
diff --git a/src/pages/ManageMindMaps/index.tsx b/src/pages/ManageMindMaps/index.tsx
@@ -45,6 +45,7 @@ import {
 import { MindMap, RecursivePartial, WithID } from '../../types';
 import ShareDialog from './ShareDialog';
 import ConfirmationDialog from '../../components/Dialogs/ConfirmationDialog';
+import TextDialog from '../../components/Dialogs/TextDialog';
 
 const ManageMindMaps = () => {
   const user = useUser().data;
@@ -82,6 +83,13 @@ const ManageMindMaps = () => {
     }
   ).data as WithID<MindMap>[];
 
+  const [isCreateMindMapDialogOpen, setIsCreateMindMapDialogOpen] =
+    useState<boolean>(false);
+
+  const [isRenameMindMapDialogOpen, setIsRenameMindMapDialogOpen] = useState<
+    null | string
+  >(null);
+
   const createMindMap = (title: string) => {
     const newDocData: MindMap = {
       metadata: {
@@ -110,15 +118,6 @@ const ManageMindMaps = () => {
     });
   };
 
-  const handleCreateMindMap = () => {
-    // eslint-disable-next-line no-alert
-    const title = window.prompt('What would you like to ideate upon?')?.trim();
-    createMindMap(
-      // eslint-disable-next-line
-      title === null || title === '' ? 'Untitled Mind Map' : title!
-    );
-  };
-
   // Snackbar stuff
   interface SnackbarMessage {
     message: string;
@@ -203,11 +202,61 @@ const ManageMindMaps = () => {
           startIcon={<Add />}
           variant="contained"
           onClick={() => {
-            handleCreateMindMap();
+            setIsCreateMindMapDialogOpen(true);
           }}
         >
           New Mind Map
         </Button>
+        <TextDialog
+          approveButtonText="Create"
+          isOpen={isCreateMindMapDialogOpen}
+          onApprove={(title) => createMindMap(title)}
+          onReject={() => {
+            setIsCreateMindMapDialogOpen(false);
+          }}
+          rejectButtonText="Cancel"
+          title="Create Mind Map"
+          suggestedAction="approve"
+          textFieldProps={{
+            label: 'Title',
+          }}
+          initialValue=""
+        />
+        <TextDialog
+          approveButtonText="Rename"
+          isOpen={isRenameMindMapDialogOpen !== null}
+          onApprove={(newTitle) => {
+            const mindmap = mindmaps.find(
+              (m) => m.ID === isRenameMindMapDialogOpen
+            );
+            if (!mindmap) return;
+
+            const updatedDocFields: RecursivePartial<MindMap> = {
+              metadata: {
+                updatedAt: serverTimestamp() as Timestamp,
+                updatedBy: user.uid,
+              },
+              title: newTitle || 'Untitled Mind Map',
+            };
+            setDoc(doc(firestore, 'mindmaps', mindmap.ID), updatedDocFields, {
+              merge: true,
+            });
+          }}
+          onReject={() => {
+            setIsRenameMindMapDialogOpen(null);
+          }}
+          rejectButtonText="Cancel"
+          title="Rename Mind Map"
+          suggestedAction="approve"
+          textFieldProps={{
+            label: 'Title',
+          }}
+          initialValue={
+            mindmaps.find((m) => m.ID === isRenameMindMapDialogOpen)?.title ||
+            ''
+          }
+          updateOnInitialValueChange
+        />
         <br />
         <br />
         <ButtonGroup variant="outlined">
@@ -376,27 +425,7 @@ const ManageMindMaps = () => {
               <IconButton
                 type="button"
                 onClick={() => {
-                  // eslint-disable-next-line no-alert
-                  const newTitle = prompt(
-                    `What would you like to rename ${mindmap.title} to?`,
-                    mindmap.title
-                  );
-                  if (newTitle) {
-                    const updatedDocFields: RecursivePartial<MindMap> = {
-                      metadata: {
-                        updatedAt: serverTimestamp() as Timestamp,
-                        updatedBy: user.uid,
-                      },
-                      title: newTitle,
-                    };
-                    setDoc(
-                      doc(firestore, 'mindmaps', mindmap.ID),
-                      updatedDocFields,
-                      {
-                        merge: true,
-                      }
-                    );
-                  }
+                  setIsRenameMindMapDialogOpen(mindmap.ID);
                 }}
                 aria-label="rename mindmap"
               >
@@ -410,7 +439,7 @@ const ManageMindMaps = () => {
         <div style={{ textAlign: 'center', margin: '1rem' }}>
           <Button
             onClick={() => {
-              handleCreateMindMap();
+              setIsCreateMindMapDialogOpen(true);
             }}
           >
             You don&apos;t have any MindMaps. Create one now!