From 71c52373f81cace664047edd19d9d289f45a4dff Mon Sep 17 00:00:00 2001 From: Ricardo Cino Date: Thu, 7 Jul 2022 09:31:50 +0200 Subject: chore: Mobx & React-Router upgrade (#406) Co-authored-by: Vijay A --- src/containers/settings/EditServiceScreen.tsx | 30 ++++++++++++--------------- src/containers/settings/RecipesScreen.tsx | 17 +++++++-------- src/containers/settings/SettingsWindow.tsx | 19 +++++++---------- 3 files changed, 29 insertions(+), 37 deletions(-) (limited to 'src/containers/settings') 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 { 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 { 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 { 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 { 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 { 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 { if (action === 'add') { recipe = recipes.active; - // TODO: render error message when recipe is `null` if (!recipe) { return ; @@ -475,6 +469,8 @@ class EditServiceScreen extends Component { } } -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 { @@ -36,8 +36,6 @@ class RecipesScreen extends Component { 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 { } resetSearch(): void { - this.setState({ needle: null }); + this.setState({ needle: null, currentFilter: 'featured' }); } render(): ReactElement { @@ -112,7 +110,8 @@ class RecipesScreen extends Component { 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 { } 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 { } } -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 { +class SettingsContainer extends Component { 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 { } 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 { return ReactDOM.createPortal( - {children} + , this.el, -- cgit v1.2.3-70-g09d2