refactor: Converted ExportDialog to ExportModal

michaelkoelle · May 17, 2021 · 6f47073 · 6f47073
1 parent ab7a91f
commit 6f47073
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 398 deletions.
diff --git a/app/components/ConditionalComment.tsx → app/components/ConditionalCommentPanel.tsx b/app/components/ConditionalComment.tsx → app/components/ConditionalCommentPanel.tsx
@@ -12,7 +12,6 @@ import {
   TextField,
   Tooltip,
 } from '@material-ui/core';
-import ConditionalComment from '../model/ConditionalComment';
 
 const PrimaryTooltip = withStyles((theme: Theme) => ({
   tooltip: {
@@ -38,17 +37,28 @@ function ValueLabelComponent(props: any) {
   );
 }
 
-export interface ConditionalCommentProps {}
+export interface ConditionalCommentProps {
+  conditionalComment;
+  setConditionalComment;
+  showLabel;
+  setShowLabel;
+  value;
+  setValue;
+  comments;
+  setComments;
+}
 
-const ConditionalComment = (props: ConditionalCommentProps) => {
-  const [conditionalComment, setConditionalComment] = useState(true);
-  const [showLabel, setShowLabel] = useState(true);
-  const [value, setValue] = React.useState<number[]>([60, 80, 100]);
-  const [comments, setComments] = React.useState<string[]>([
-    'Gut!',
-    'Sehr gut!',
-    'Perfekt!',
-  ]);
+const ConditionalCommentPanel = (props: ConditionalCommentProps) => {
+  const {
+    conditionalComment,
+    setConditionalComment,
+    showLabel,
+    setShowLabel,
+    value,
+    setValue,
+    comments,
+    setComments,
+  } = props;
 
   const marks = [
     {
@@ -114,16 +124,16 @@ const ConditionalComment = (props: ConditionalCommentProps) => {
           />
         </Grid>
       </Grid>
-      <Collapse in={conditionalComment}>
+      <Collapse in={conditionalComment} style={{ width: '100%' }}>
         <Grid container justify="center" alignItems="center">
           <Grid item xs={12}>
             <Paper
               variant="outlined"
               style={{
-                padding: '50px 60px 16px',
+                padding: '50px 50px 10px',
                 marginTop: '16px',
                 marginBottom: '16px',
-                width: 'calc(100% - 50px)',
+                width: 'calc(100%)',
               }}
             >
               <Slider
@@ -151,7 +161,7 @@ const ConditionalComment = (props: ConditionalCommentProps) => {
             <Grid key={`comment-${i}`} item>
               <TextField
                 id={`comment-${i}`}
-                label={`Comment ${i}`}
+                label={`Score ≥ ${value[i]}%`}
                 name={i.toString()}
                 defaultValue={c}
                 variant="outlined"
@@ -171,4 +181,4 @@ const ConditionalComment = (props: ConditionalCommentProps) => {
   );
 };
 
-export default ConditionalComment;
+export default ConditionalCommentPanel;
diff --git a/app/components/ReleaseNotes.tsx b/app/components/ReleaseNotes.tsx
diff --git a/app/containers/TitleBar.tsx b/app/containers/TitleBar.tsx
@@ -16,8 +16,6 @@ import { selectUnsavedChanges } from '../model/SaveSlice';
 import { version } from '../package.json';
 import { selectSettings, SettingsState } from '../model/SettingsSlice';
 import { selectAllSheets } from '../model/SheetSlice';
-import { selectCorrectionsBySheetId } from '../model/Selectors';
-import ExportDialog from '../components/ExportDialog';
 import { useAppDispatch } from '../store';
 import { shouldUseDarkColors } from '../model/Theme';
 import buildMenu from '../menu/Menu';
@@ -41,12 +39,10 @@ export default function TitleBar(props: TitleBarProps) {
   const settings: SettingsState = useSelector(selectSettings);
   const recentPaths: string[] = useSelector(selectRecentPaths);
   const sheets = useSelector(selectAllSheets);
-  const [exportSheetId, setExportSheetId] = useState<string>();
-  const corrections = useSelector(selectCorrectionsBySheetId(exportSheetId));
   const unsavedChanges: boolean = useSelector(selectUnsavedChanges);
   const [maximized, setMaximized] = useState(currentWindow.isMaximized());
   const [openFileError, setOpenFileError] = useState<boolean>(false);
-  const [openExportDialog, setOpenExportDialog] = useState<boolean>(false);
+
   // Only for force reloading menu
   const [, setBackupPaths] = useState<string[]>([]);
 
@@ -113,8 +109,6 @@ export default function TitleBar(props: TitleBarProps) {
             unsavedChanges,
             recentPaths,
             setOpenFileError,
-            setOpenExportDialog,
-            setExportSheetId,
             setReload,
             setOpenUpdater
           ) as any
@@ -156,16 +150,6 @@ export default function TitleBar(props: TitleBarProps) {
         disableMaximize={false}
         // is the current window maximized?
         maximized={maximized}
-      >
-        {/* custom titlebar items */}
-      </FramelessTitlebar>
-      <ExportDialog
-        open={openExportDialog}
-        handleClose={() => {
-          setOpenExportDialog(false);
-          setExportSheetId(undefined);
-        }}
-        correctionsToExport={corrections}
       />
       <Snackbar
         open={openFileError}

diff --git a/app/dialogs/ConfirmDeleteSheetDialog.tsx b/app/dialogs/ConfirmDeleteSheetDialog.tsx
@@ -0,0 +1,32 @@
+import Correction from '../model/Correction';
+import { overviewClearSelectedSheetWithId } from '../model/OverviewSlice';
+import { schemaClearSelectedSheetWithId } from '../model/SchemaSlice';
+import Sheet from '../model/Sheet';
+import {
+  deleteCorrectionFromWorkspace,
+  reloadState,
+  save,
+} from '../utils/FileAccess';
+
+const ConfirmDeleteSheetDialog = (
+  autosave: boolean,
+  sheet: Sheet,
+  workspace: string,
+  corrections: Correction[]
+) => {
+  return {
+    title: 'Confirm Delete Sheet',
+    text: `Are you sure you want to delete the sheet "${sheet.name}"?`,
+    onConfirm: (dispatch) => {
+      dispatch(schemaClearSelectedSheetWithId(sheet.id));
+      dispatch(overviewClearSelectedSheetWithId(sheet.id));
+      corrections.forEach((c) => deleteCorrectionFromWorkspace(c, workspace));
+      dispatch(reloadState());
+      if (autosave) {
+        dispatch(save());
+      }
+    },
+  };
+};
+
+export default ConfirmDeleteSheetDialog;
diff --git a/app/features/correction/CorrectionView.tsx b/app/features/correction/CorrectionView.tsx
@@ -7,14 +7,13 @@ import {
   Tooltip,
   Typography,
 } from '@material-ui/core';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import FirstPageIcon from '@material-ui/icons/FirstPage';
 import LastPageIcon from '@material-ui/icons/LastPage';
 import FindInPageIcon from '@material-ui/icons/FindInPage';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
 import { useDispatch, useSelector } from 'react-redux';
-import ExportDialog from '../../components/ExportDialog';
 import TimeAverage from '../../components/TimeAverage';
 import TimeRemaining from '../../components/TimeRemaining';
 import Status from '../../model/Status';
@@ -32,6 +31,7 @@ import ConfirmationDialog from '../../dialogs/ConfirmationDialog';
 import SkipUnreadFilesDialog from '../../dialogs/SkipUnreadFilesDialog';
 import OpenExportModalDialog from '../../dialogs/OpenExportModalDialog';
 import AutosaveCorrectionEffect from '../../effects/AutosaveCorrectionEffect';
+import ExportModal from '../../modals/ExportModal';
 
 type CorrectionViewProps = {
   corrections: Correction[];
@@ -47,8 +47,6 @@ export default function CorrectionView(props: CorrectionViewProps) {
   const workspace = useSelector(selectWorkspacePath);
   const autosave: boolean = useSelector(selectSettingsAutosave);
   const corr = corrections[index];
-  // Dialogs
-  const [openExportDialog, setOpenExportDialog] = useState(false);
 
   useEffect(AutosaveCorrectionEffect(autosave, corr, workspace), [
     autosave,
@@ -57,11 +55,10 @@ export default function CorrectionView(props: CorrectionViewProps) {
   ]);
 
   function onExport() {
-    setOpenExportDialog(true);
-  }
-
-  function onCloseExportDialog() {
-    setOpenExportDialog(false);
+    const sheetId = corrections[index]?.submission.sheet.id;
+    if (sheetId) {
+      showModal(ExportModal, { sheetId });
+    }
   }
 
   function setStatusDone() {
@@ -315,11 +312,6 @@ export default function CorrectionView(props: CorrectionViewProps) {
           </Tooltip>
         </Grid>
       </Grid>
-      <ExportDialog
-        open={openExportDialog}
-        handleClose={onCloseExportDialog}
-        correctionsToExport={corrections}
-      />
     </div>
   );
 }