refactor: convert AppLayout to typescript

SpecialAro · Oct 25, 2022 · 4906216 · 4906216
1 parent 4ff68b9
commit 4906216
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 44 deletions.
diff --git a/src/components/layout/AppLayout.jsx → src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.jsx → src/components/layout/AppLayout.tsx
@@ -1,9 +1,8 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar/renderer';
-import injectSheet from 'react-jss';
+import injectSheet, { WithStylesProps } from 'react-jss';
 import { ipcRenderer } from 'electron';
 
 import { mdiFlash, mdiPowerPlug } from '@mdi/js';
@@ -16,15 +15,15 @@ import ErrorBoundary from '../util/ErrorBoundary';
 import { updateVersionParse } from '../../helpers/update-helpers';
 
 // import globalMessages from '../../i18n/globalMessages';
-
-import { isWindows, isMac } from '../../environment';
+import { isMac, isWindows } from '../../environment';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 import { workspaceStore } from '../../features/workspaces';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import Todos from '../../features/todos/containers/TodosScreen';
 import Icon from '../ui/icon';
 
 import LockedScreen from '../../containers/auth/LockedScreen';
+import SettingsStore from '../../stores/SettingsStore';
 
 const messages = defineMessages({
   servicesUpdated: {
@@ -77,24 +76,30 @@ const toggleFullScreen = () => {
   ipcRenderer.send('window.toolbar-double-clicked');
 };
 
-class AppLayout extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    settings: PropTypes.object.isRequired,
-    isFullScreen: PropTypes.bool.isRequired,
-    sidebar: PropTypes.element.isRequired,
-    workspacesDrawer: PropTypes.element.isRequired,
-    services: PropTypes.element.isRequired,
-    showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
-    appUpdateIsDownloaded: PropTypes.bool.isRequired,
-    authRequestFailed: PropTypes.bool.isRequired,
-    installAppUpdate: PropTypes.func.isRequired,
-    showRequiredRequestsError: PropTypes.bool.isRequired,
-    areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
-    retryRequiredRequests: PropTypes.func.isRequired,
-    areRequiredRequestsLoading: PropTypes.bool.isRequired,
-  };
+interface IProps extends WrappedComponentProps, WithStylesProps<typeof styles> {
+  settings: SettingsStore;
+  updateVersion: string;
+  isFullScreen: boolean;
+  sidebar: React.ReactElement;
+  workspacesDrawer: React.ReactElement;
+  services: React.ReactElement;
+  showServicesUpdatedInfoBar: boolean;
+  appUpdateIsDownloaded: boolean;
+  authRequestFailed: boolean;
+  installAppUpdate: () => void;
+  showRequiredRequestsError: boolean;
+  areRequiredRequestsSuccessful: boolean;
+  retryRequiredRequests: () => void;
+  areRequiredRequestsLoading: boolean;
+}
+
+interface IState {
+  shouldShowAppUpdateInfoBar: boolean;
+  shouldShowServicesUpdatedInfoBar: boolean;
+}
 
+@observer
+class AppLayout extends Component<IProps, IState> {
   constructor(props) {
     super(props);
 
@@ -222,5 +227,5 @@ class AppLayout extends Component {
 }
 
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(AppLayout)),
+  injectSheet(styles, { injectTheme: true })(AppLayout),
 );
diff --git a/src/containers/auth/LockedScreen.tsx b/src/containers/auth/LockedScreen.tsx
@@ -4,8 +4,17 @@ import { StoresProps } from '../../@types/ferdium-components.types';
 import Locked from '../../components/auth/Locked';
 
 import { hash } from '../../helpers/password-helpers';
+import { Actions } from '../../actions/lib/actions';
+import { RealStores } from '../../stores';
 
-class LockedScreen extends Component<StoresProps> {
+interface IProps {
+  actions?: Actions;
+  stores?: RealStores;
+}
+
+@inject('stores', 'actions')
+@observer
+class LockedScreen extends Component<IProps> {
   state = {
     error: false,
   };
@@ -20,13 +29,13 @@ class LockedScreen extends Component<StoresProps> {
   onSubmit(values: any): void {
     const { password } = values;
 
-    let correctPassword = this.props.stores.settings.all.app.lockedPassword;
+    let correctPassword = this.props.stores!.settings.all.app.lockedPassword;
     if (!correctPassword) {
       correctPassword = '';
     }
 
     if (hash(String(password)) === String(correctPassword)) {
-      this.props.actions.settings.update({
+      this.props.actions!.settings.update({
         type: 'app',
         data: {
           locked: false,
@@ -42,7 +51,7 @@ class LockedScreen extends Component<StoresProps> {
   }
 
   unlock(): void {
-    this.props.actions.settings.update({
+    this.props.actions!.settings.update({
       type: 'app',
       data: {
         locked: false,
@@ -52,7 +61,7 @@ class LockedScreen extends Component<StoresProps> {
 
   render(): ReactElement {
     const { stores } = this.props;
-    const { useTouchIdToUnlock } = this.props.stores.settings.all.app;
+    const { useTouchIdToUnlock } = this.props.stores!.settings.all.app;
 
     return (
       <div className="auth">
@@ -61,7 +70,7 @@ class LockedScreen extends Component<StoresProps> {
             onSubmit={this.onSubmit}
             unlock={this.unlock}
             useTouchIdToUnlock={useTouchIdToUnlock}
-            isSubmitting={stores.user.loginRequest.isExecuting}
+            isSubmitting={stores!.user.loginRequest.isExecuting}
             error={this.state.error || {}}
           />
         </div>
@@ -70,4 +79,4 @@ class LockedScreen extends Component<StoresProps> {
   }
 }
 
-export default inject('stores', 'actions')(observer(LockedScreen));
+export default LockedScreen;
diff --git a/src/containers/layout/AppLayoutContainer.tsx b/src/containers/layout/AppLayoutContainer.tsx
@@ -15,17 +15,8 @@ interface AppLayoutContainerProps extends StoresProps {}
 
 class AppLayoutContainer extends Component<AppLayoutContainerProps> {
   render(): ReactElement {
-    const {
-      app,
-      features,
-      services,
-      ui,
-      settings,
-      globalError,
-      requests,
-      user,
-      router,
-    } = this.props.stores;
+    const { app, features, services, ui, settings, requests, user, router } =
+      this.props.stores;
 
     /* HOTFIX for:
       [mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[bound ]' TypeError: Cannot read properties of null (reading 'push')
@@ -142,7 +133,6 @@ class AppLayoutContainer extends Component<AppLayoutContainerProps> {
         <AppLayout
           settings={settings}
           isFullScreen={app.isFullScreen}
-          isOnline={app.isOnline}
           showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar}
           appUpdateIsDownloaded={
             app.updateStatus === app.updateStatusTypes.DOWNLOADED
@@ -152,7 +142,6 @@ class AppLayoutContainer extends Component<AppLayoutContainerProps> {
           workspacesDrawer={workspacesDrawer}
           services={servicesContainer}
           installAppUpdate={installUpdate}
-          globalError={globalError.error}
           showRequiredRequestsError={requests.showRequiredRequestsError}
           areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful}
           retryRequiredRequests={retryRequiredRequests}