chore: Mobx & React-Router upgrade (#406)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>

5 files changed, 39 insertions, 54 deletions

diff --git a/src/containers/auth/AuthLayoutContainer.tsx b/src/containers/auth/AuthLayoutContainer.tsx
index 1f2753a66..8d31cfb48 100644
--- a/src/containers/auth/AuthLayoutContainer.tsx
+++ b/src/containers/auth/AuthLayoutContainer.tsx
@@ -1,20 +1,17 @@
-import { Component, ReactElement, ReactNode } from 'react';
+import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
+import { Outlet } from 'react-router-dom';
 
-import { Location } from 'mobx-react-router';
 import { StoresProps } from '../../@types/ferdium-components.types';
 import AuthLayout from '../../components/auth/AuthLayout';
 import AppLoader from '../../components/ui/AppLoader';
 
-interface AuthLayoutContainerProps extends StoresProps {
-  location: Location;
-  children: ReactNode;
-}
+interface AuthLayoutContainerProps extends StoresProps {}
 
 class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
   render(): ReactElement {
-    const { stores, actions, children, location } = this.props;
+    const { stores, actions } = this.props;
     const { app, features, globalError, user } = stores;
 
     const isLoadingBaseFeatures =
@@ -42,7 +39,7 @@ class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
       <ThemeProvider theme={stores.ui.theme}>
         <AuthLayout
           error={globalError.response}
-          pathname={location.pathname}
+          pathname={stores.router.location.pathname}
           isOnline={app.isOnline}
           isAPIHealthy={!app.healthCheckRequest.isError}
           retryHealthCheck={actions.app.healthCheck}
@@ -53,7 +50,7 @@ class AuthLayoutContainer extends Component<AuthLayoutContainerProps> {
             app.updateStatus === app.updateStatusTypes.DOWNLOADED
           }
         >
-          {children}
+          <Outlet />
         </AuthLayout>
       </ThemeProvider>
     );
diff --git a/src/containers/layout/AppLayoutContainer.tsx b/src/containers/layout/AppLayoutContainer.tsx
index 984ea8b68..a4857a426 100644
--- a/src/containers/layout/AppLayoutContainer.tsx
+++ b/src/containers/layout/AppLayoutContainer.tsx
@@ -1,19 +1,17 @@
-import { Children, Component, ReactElement, ReactNode } from 'react';
+import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
+import { Outlet } from 'react-router-dom';
 
 import { StoresProps } from '../../@types/ferdium-components.types';
 import AppLayout from '../../components/layout/AppLayout';
 import Sidebar from '../../components/layout/Sidebar';
 import Services from '../../components/services/content/Services';
 import AppLoader from '../../components/ui/AppLoader';
-
 import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
 import { workspaceStore } from '../../features/workspaces';
 
-interface AppLayoutContainerProps extends StoresProps {
-  children: ReactNode;
-}
+interface AppLayoutContainerProps extends StoresProps {}
 
 class AppLayoutContainer extends Component<AppLayoutContainerProps> {
   render(): ReactElement {
@@ -62,8 +60,6 @@ class AppLayoutContainer extends Component<AppLayoutContainerProps> {
 
     const { openSettings, closeSettings } = this.props.actions.ui;
 
-    const { children } = this.props;
-
     const isLoadingFeatures =
       features.featuresRequest.isExecuting &&
       !features.featuresRequest.wasExecuted;
@@ -162,7 +158,7 @@ class AppLayoutContainer extends Component<AppLayoutContainerProps> {
           retryRequiredRequests={retryRequiredRequests}
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
         >
-          {Children.count(children) > 0 ? children : null}
+          <Outlet />
         </AppLayout>
       </ThemeProvider>
     );
diff --git a/src/containers/settings/EditServiceScreen.tsx b/src/containers/settings/EditServiceScreen.tsx
index f8532a7b4..ba8f374c3 100644
--- a/src/containers/settings/EditServiceScreen.tsx
+++ b/src/containers/settings/EditServiceScreen.tsx
@@ -2,7 +2,7 @@ import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { RouterStore } from 'mobx-react-router';
+import { Params } from 'react-router-dom';
 import { StoresProps } from '../../@types/ferdium-components.types';
 import { IRecipe } from '../../models/Recipe';
 import Service from '../../models/Service';
@@ -22,6 +22,7 @@ import { SPELLCHECKER_LOCALES } from '../../i18n/languages';
 
 import globalMessages from '../../i18n/globalMessages';
 import { DEFAULT_APP_SETTINGS, DEFAULT_SERVICE_SETTINGS } from '../../config';
+import withParams from '../../components/util/WithParams';
 
 const messages = defineMessages({
   name: {
@@ -119,14 +120,13 @@ const messages = defineMessages({
 });
 
 interface EditServicesScreenProps extends StoresProps {
-  router: RouterStore;
   intl: any;
+  params: Params;
 }
 
 class EditServiceScreen extends Component<EditServicesScreenProps> {
   onSubmit(data: any) {
-    // @ts-ignore TODO: This is actually there and we don't have a correct type right now.
-    const { action } = this.props.router.params;
+    const { action } = this.props.params;
     const { recipes, services } = this.props.stores;
     const { createService, updateService } = this.props.actions.service;
     data.darkReaderSettings = {
@@ -151,10 +151,9 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
   prepareForm(recipe: IRecipe, service: Service | null, proxy: any): Form {
     const { intl } = this.props;
 
-    const { stores, router } = this.props;
+    const { stores } = this.props;
 
-    // @ts-ignore TODO: This is actually there and we don't have a correct type right now.
-    const { action } = router.params;
+    const { action } = stores.router.pathValue;
 
     let defaultSpellcheckerLanguage =
       SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage];
@@ -389,8 +388,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
 
   deleteService(): void {
     const { deleteService } = this.props.actions.service;
-    // @ts-ignore TODO: This is actually there and we don't have a correct type right now.
-    const { action } = this.props.router.params;
+    const { action } = this.props.params;
 
     if (action === 'edit') {
       const { activeSettings: service } = this.props.stores.services;
@@ -403,8 +401,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
 
   openRecipeFile(file: any): void {
     const { openRecipeFile } = this.props.actions.service;
-    // @ts-ignore TODO: This is actually there and we don't have a correct type right now.
-    const { action } = this.props.router.params;
+    const { action } = this.props.params;
 
     if (action === 'edit') {
       const { activeSettings: service } = this.props.stores.services;
@@ -417,9 +414,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
 
   render(): ReactElement {
     const { recipes, services, user } = this.props.stores;
-
-    // @ts-ignore TODO: This is actually there and we don't have a correct type right now.
-    const { action } = this.props.router.params;
+    const { action } = this.props.params;
 
     let recipe: null | IRecipe = null;
     let service: null | Service = null;
@@ -427,7 +422,6 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
 
     if (action === 'add') {
       recipe = recipes.active;
-
       // TODO: render error message when recipe is `null`
       if (!recipe) {
         return <ServiceError />;
@@ -475,6 +469,8 @@ class EditServiceScreen extends Component<EditServicesScreenProps> {
   }
 }
 
-export default injectIntl<'intl', EditServicesScreenProps>(
-  inject('stores', 'actions')(observer(EditServiceScreen)),
+export default withParams(
+  injectIntl<'intl', EditServicesScreenProps>(
+    inject('stores', 'actions')(observer(EditServiceScreen)),
+  ),
 );
diff --git a/src/containers/settings/RecipesScreen.tsx b/src/containers/settings/RecipesScreen.tsx
index bc7fa9ba0..fffdd39fa 100644
--- a/src/containers/settings/RecipesScreen.tsx
+++ b/src/containers/settings/RecipesScreen.tsx
@@ -3,6 +3,7 @@ import { Component, ReactElement } from 'react';
 import { autorun, IReactionDisposer } from 'mobx';
 import { inject, observer } from 'mobx-react';
 
+import { Params } from 'react-router-dom';
 import Recipe from '../../models/Recipe';
 import { StoresProps } from '../../@types/ferdium-components.types';
 import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard';
@@ -13,11 +14,10 @@ import { asarRecipesPath } from '../../helpers/asar-helpers';
 import { communityRecipesStore } from '../../features/communityRecipes';
 import RecipePreview from '../../models/RecipePreview';
 import { openPath } from '../../helpers/url-helpers';
+import withParams from '../../components/util/WithParams';
 
 interface RecipesScreenProps extends StoresProps {
-  params: {
-    filter?: string | null;
-  };
+  params: Params;
 }
 
 class RecipesScreen extends Component<RecipesScreenProps> {
@@ -36,8 +36,6 @@ class RecipesScreen extends Component<RecipesScreenProps> {
   constructor(props: RecipesScreenProps) {
     super(props);
 
-    this.props.params.filter = this.props.params.filter || null;
-
     this.customRecipes = readJsonSync(asarRecipesPath('all.json'));
   }
 
@@ -104,7 +102,7 @@ class RecipesScreen extends Component<RecipesScreenProps> {
   }
 
   resetSearch(): void {
-    this.setState({ needle: null });
+    this.setState({ needle: null, currentFilter: 'featured' });
   }
 
   render(): ReactElement {
@@ -112,7 +110,8 @@ class RecipesScreen extends Component<RecipesScreenProps> {
 
     const { app: appActions, service: serviceActions } = this.props.actions;
 
-    const { filter } = this.props.params;
+    const filter = this.state.currentFilter;
+
     let recipeFilter;
 
     if (filter === 'all') {
@@ -125,7 +124,7 @@ class RecipesScreen extends Component<RecipesScreenProps> {
     } else {
       recipeFilter = recipePreviews.featured;
     }
-    recipeFilter = recipeFilter.sort(this._sortByName);
+    recipeFilter = [...recipeFilter].sort(this._sortByName);
 
     const { needle } = this.state;
     const allRecipes =
@@ -185,4 +184,4 @@ class RecipesScreen extends Component<RecipesScreenProps> {
   }
 }
 
-export default inject('stores', 'actions')(observer(RecipesScreen));
+export default withParams(inject('stores', 'actions')(observer(RecipesScreen)));
diff --git a/src/containers/settings/SettingsWindow.tsx b/src/containers/settings/SettingsWindow.tsx
index 2192a6f69..93bb08c7c 100644
--- a/src/containers/settings/SettingsWindow.tsx
+++ b/src/containers/settings/SettingsWindow.tsx
@@ -1,23 +1,20 @@
-import { Component, ReactNode, ReactPortal } from 'react';
+import { inject, observer } from 'mobx-react';
+import { Component, ReactPortal } from 'react';
 import ReactDOM from 'react-dom';
-import { observer, inject } from 'mobx-react';
+import { Outlet } from 'react-router-dom';
 
 import { StoresProps } from '../../@types/ferdium-components.types';
-import Layout from '../../components/settings/SettingsLayout';
 import Navigation from '../../components/settings/navigation/SettingsNavigation';
+import Layout from '../../components/settings/SettingsLayout';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 import { workspaceStore } from '../../features/workspaces';
 
-interface SettingsContainerProps extends StoresProps {
-  children: ReactNode;
-}
-
-class SettingsContainer extends Component<SettingsContainerProps> {
+class SettingsContainer extends Component<StoresProps> {
   portalRoot: any;
 
   el: HTMLDivElement;
 
-  constructor(props: SettingsContainerProps) {
+  constructor(props: StoresProps) {
     super(props);
 
     this.portalRoot = document.querySelector('#portalContainer');
@@ -33,7 +30,7 @@ class SettingsContainer extends Component<SettingsContainerProps> {
   }
 
   render(): ReactPortal {
-    const { children, stores } = this.props;
+    const { stores } = this.props;
     const { closeSettings } = this.props.actions.ui;
 
     const navigation = (
@@ -46,7 +43,7 @@ class SettingsContainer extends Component<SettingsContainerProps> {
     return ReactDOM.createPortal(
       <ErrorBoundary>
         <Layout navigation={navigation} closeSettings={closeSettings}>
-          {children}
+          <Outlet />
         </Layout>
       </ErrorBoundary>,
       this.el,