migrate modals to typescript

actualbudget · Jul 10, 2024 · 0e0bd37 · 0e0bd37
1 parent 259e84c
commit 0e0bd37
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 18 deletions.
diff --git a/packages/desktop-client/src/components/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx
@@ -30,7 +30,7 @@ export type ModalProps = {
   title?: ReactNode;
   isCurrent?: boolean;
   isHidden?: boolean;
-  children: ReactNode | (() => ReactNode);
+  children?: ReactNode | (() => ReactNode);
   size?: { width?: CSSProperties['width']; height?: CSSProperties['height'] };
   padding?: CSSProperties['padding'];
   showHeader?: boolean;

diff --git a/.../src/components/manager/ManagementApp.jsx → .../src/components/manager/ManagementApp.tsx b/.../src/components/manager/ManagementApp.jsx → .../src/components/manager/ManagementApp.tsx
@@ -47,7 +47,7 @@ function Version() {
   );
 }
 
-export function ManagementApp({ isLoading }) {
+export function ManagementApp({ isLoading }: { isLoading: boolean }) {
   const files = useSelector(state => state.budgets.allFiles);
   const userData = useSelector(state => state.user.data);
   const managerHasInitialized = useSelector(
@@ -91,7 +91,7 @@ export function ManagementApp({ isLoading }) {
     }
 
     fetchData();
-  }, []);
+  });
 
   if (!managerHasInitialized) {
     return null;

diff --git a/...-client/src/components/manager/Modals.jsx → ...-client/src/components/manager/Modals.tsx b/...-client/src/components/manager/Modals.jsx → ...-client/src/components/manager/Modals.tsx
@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 
 import { useActions } from '../../hooks/useActions';
 import { View } from '../common/View';
+import { type CommonModalProps } from '../Modals';
 import { CreateEncryptionKeyModal } from '../modals/CreateEncryptionKeyModal';
 import { FixEncryptionKeyModal } from '../modals/FixEncryptionKeyModal';
 import { LoadBackup } from '../modals/LoadBackup';
@@ -19,10 +20,10 @@ export function Modals() {
   const actions = useActions();
 
   const stack = modalStack.map(({ name, options = {} }, idx) => {
-    const modalProps = {
+    const modalProps: CommonModalProps = {
       onClose: actions.popModal,
-      onPush: actions.pushModal,
       onBack: actions.popModal,
+      showBack: false,
       isCurrent: idx === modalStack.length - 1,
       isHidden,
       stackIndex: idx,
@@ -41,25 +42,17 @@ export function Modals() {
       case 'import':
         return <Import key={name} modalProps={modalProps} actions={actions} />;
       case 'import-ynab4':
-        return (
-          <ImportYNAB4 key={name} modalProps={modalProps} actions={actions} />
-        );
+        return <ImportYNAB4 key={name} modalProps={modalProps} />;
       case 'import-ynab5':
-        return (
-          <ImportYNAB5 key={name} modalProps={modalProps} actions={actions} />
-        );
+        return <ImportYNAB5 key={name} modalProps={modalProps} />;
       case 'import-actual':
-        return (
-          <ImportActual key={name} modalProps={modalProps} actions={actions} />
-        );
+        return <ImportActual key={name} modalProps={modalProps} />;
       case 'load-backup': {
         return (
           <LoadBackup
             budgetId={options.budgetId}
-            modalProps={{
-              ...modalProps,
-              onClose: actions.popModal,
-            }}
+            watchUpdates={false}
+            modalProps={modalProps}
             backupDisabled={true}
             actions={actions}
           />