remove ProjectExported modal and use Toast

web/src/components/Header/HeaderLeftPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { NavLink, Route, useLocation, useRouteMatch } from 'react-router-dom'
 import useOnClickOutside from 'use-onclickoutside'
 
@@ -23,6 +23,9 @@ import triangleTopWhite from '../../images/triangle-top-white.svg'
 // @ts-ignore
 import DoorOpen from '../../images/door-open.svg'
 import { ModalState, OpenModal } from '../../context/ModalContexts'
+import { getCurrentDateFormatted } from '../../utils'
+import useFileDownloaded from '../../hooks/useFileDownloaded'
+import ToastContext, { ShowToast } from '../../context/ToastContext'
 
 function ActiveEntryPoint({
   entryPoint,
@@ -98,6 +101,19 @@ const HeaderLeftPanel: React.FC<HeaderLeftPanelProps> = ({
     : []
 
   const ref = useRef()
+  const { setToastState } = useContext(ToastContext)
+  const { fileDownloaded, setFileDownloaded } = useFileDownloaded()
+
+  useEffect(() => {
+    if (fileDownloaded) {
+      setFileDownloaded(false)
+      setToastState({
+        id: ShowToast.Yes,
+        text: 'Project Exported',
+        type: 'confirmation',
+      })
+    }
+  }, [fileDownloaded, setFileDownloaded, setToastState])
 
   // map, table and priority view routes
 
@@ -111,6 +127,14 @@ const HeaderLeftPanel: React.FC<HeaderLeftPanelProps> = ({
   useOnClickOutside(ref, () => setOpenEntryPointPicker(false))
   const [openEntryPointPicker, setOpenEntryPointPicker] = useState(false)
 
+  // replace spaces with dashes for project name
+  // add in the export date like 2023-12-31 and make it based on the
+  // timezone of the user
+  const projectNameForExport = `${projectName.replace(
+    /\s/g,
+    '-'
+  )}-${getCurrentDateFormatted()}`
+
   return (
     <div className="header-left-panel-rows">
       <div className="header-left-panel" ref={ref}>
@@ -212,10 +236,12 @@ const HeaderLeftPanel: React.FC<HeaderLeftPanelProps> = ({
                     withTooltip
                     tooltipText="Project Settings"
                     size="header"
-                    onClick={() => setModalState({
-                      id: OpenModal.ProjectSettings,
-                      cellId: projectId
-                    })}
+                    onClick={() =>
+                      setModalState({
+                        id: OpenModal.ProjectSettings,
+                        cellId: projectId,
+                      })
+                    }
                     className="header-action-icon"
                   />
                   {/* Export */}
@@ -240,24 +266,16 @@ const HeaderLeftPanel: React.FC<HeaderLeftPanelProps> = ({
                         <ExportMenuItem
                           type="json"
                           title="Export as JSON (Importable)"
-                          downloadFilename="acorn-project.json"
+                          downloadFilename={`${projectNameForExport}.json`}
                           onClick={() => {
-                            setModalState({
-                              id: OpenModal.ProjectExported,
-                              projectName,
-                            })
                             setIsExportOpen(false)
                           }}
                         />
                         <ExportMenuItem
                           type="csv"
                           title="Export as CSV"
-                          downloadFilename="acorn-project.csv"
+                          downloadFilename={`${projectNameForExport}.csv`}
                           onClick={() => {
-                            setModalState({
-                              id: OpenModal.ProjectExported,
-                              projectName,
-                            })
                             setIsExportOpen(false)
                           }}
                         />
@@ -274,7 +292,7 @@ const HeaderLeftPanel: React.FC<HeaderLeftPanelProps> = ({
               onClickInviteMember={() => {
                 setModalState({
                   id: OpenModal.InviteMembers,
-                  passphrase: projectPassphrase
+                  passphrase: projectPassphrase,
                 })
               }}
             />

web/src/components/Preferences/Preferences.tsx

@@ -85,7 +85,7 @@ function NavigationModeInternal({ navigation, setNavigationSelected }) {
     <div className="preferences-content-wrapper">
       <PreferenceSelect
         iconName="panning.svg"
-        title="Navigation Mode"
+        title="Canvas Navigation"
         subtitle="Select your preferred navigation mode on canvas based on your primary
           pointer device"
         // @ts-ignore
@@ -123,7 +123,7 @@ function KeyboardNavigationModeInternal({
     <div className="preferences-content-wrapper">
       <PreferenceSelect
         iconName="panning.svg"
-        title="Keyboard Navigation Mode"
+        title="Keyboard Tree Navigation"
         subtitle="Select your preferred method of using the keyboard to navigate from parent to child, and vice-versa"
         // @ts-ignore
         options={options}

web/src/context/ModalContexts.ts

@@ -10,7 +10,6 @@ export enum OpenModal {
   ProjectSettings,
   InviteMembers,
   ProjectMigrated,
-  ProjectExported,
   Preferences,
   ProfileEditForm,
 }
@@ -47,10 +46,6 @@ export type ModalState =
       id: OpenModal.ProjectMigrated
       cellId: CellIdString
     }
-  | {
-      id: OpenModal.ProjectExported
-      projectName: string
-    }
   | {
       id: OpenModal.Preferences
     }

web/src/hooks/useFileDownloaded.ts

@@ -6,7 +6,7 @@ export default function useFileDownloaded() {
   const subscribeToEvent = async () => {
     if (window.require) {
       const { ipcRenderer } = window.require('electron')
-      ipcRenderer.once('exportDownloaded', () => {
+      ipcRenderer.on('exportDownloaded', () => {
         setFileDownloaded(true)
       })
     }

web/src/redux/ephemeral/local-preferences/reducer.ts

@@ -25,7 +25,7 @@ const defaultState = {
   // default to trackpad navigation
   navigation: getLocalItem(NAV_KEY) || TRACKPAD,
   // default to modal keyboard navigation
-  keyboardNavigation: getLocalItem(KEYBOARD_NAV_KEY) || MODAL,
+  keyboardNavigation: getLocalItem(KEYBOARD_NAV_KEY) || COORDINATES,
 }
 
 export default function (state = defaultState, action) {

web/src/routes/GlobalModals.tsx

@@ -228,30 +228,6 @@ const GlobalModals: React.FC<GlobalModalsProps> = ({
           </>
         }
       />
-
-      {/* Export Successful Modal */}
-      <Modal
-        active={modalState.id === OpenModal.ProjectExported}
-        onClose={setModalToNone}
-      >
-        <ModalContent
-          heading="Exporting"
-          icon="export.svg"
-          content={
-            <>
-              You just exported the{' '}
-              <b>
-                {modalState.id === OpenModal.ProjectExported &&
-                  modalState.projectName}
-              </b>{' '}
-              project data. You can use that file to transfer the project to a
-              different owner, or archive as a backup.
-            </>
-          }
-          primaryButton="Got it"
-          primaryButtonAction={setModalToNone}
-        />
-      </Modal>
     </>
   )
 }

web/src/utils.ts

@@ -23,3 +23,14 @@ export function cellIdFromString(str: string): CellId {
   const [dnahashstring, agentpubkeyhashstring] = str.split(CELL_ID_DIVIDER)
   return [hashFromString(dnahashstring), hashFromString(agentpubkeyhashstring)]
 }
+
+export function getCurrentDateFormatted() {
+  const now = new Date()
+
+  const year = now.getFullYear()
+  // getMonth() returns a zero-based month, so +1 to get the correct month number
+  const month = (now.getMonth() + 1).toString().padStart(2, '0')
+  const day = now.getDate().toString().padStart(2, '0')
+
+  return `${year}-${month}-${day}`
+}