diff options
author | 2022-07-07 09:31:50 +0200 | |
---|---|---|
committer | 2022-07-07 09:31:50 +0200 | |
commit | 71c52373f81cace664047edd19d9d289f45a4dff (patch) | |
tree | 69b3f1d45a8b3f1ceab9497ea3c96e9dc18e3166 /src/containers/settings | |
parent | 6.0.0-nightly.91 [skip ci] (diff) | |
download | ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.tar.gz ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.tar.zst ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.zip |
chore: Mobx & React-Router upgrade (#406)
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/containers/settings')
-rw-r--r-- | src/containers/settings/EditServiceScreen.tsx | 30 | ||||
-rw-r--r-- | src/containers/settings/RecipesScreen.tsx | 17 | ||||
-rw-r--r-- | src/containers/settings/SettingsWindow.tsx | 19 |
3 files changed, 29 insertions, 37 deletions
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'; | |||
2 | import { inject, observer } from 'mobx-react'; | 2 | import { inject, observer } from 'mobx-react'; |
3 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl } from 'react-intl'; |
4 | 4 | ||
5 | import { RouterStore } from 'mobx-react-router'; | 5 | import { Params } from 'react-router-dom'; |
6 | import { StoresProps } from '../../@types/ferdium-components.types'; | 6 | import { StoresProps } from '../../@types/ferdium-components.types'; |
7 | import { IRecipe } from '../../models/Recipe'; | 7 | import { IRecipe } from '../../models/Recipe'; |
8 | import Service from '../../models/Service'; | 8 | import Service from '../../models/Service'; |
@@ -22,6 +22,7 @@ import { SPELLCHECKER_LOCALES } from '../../i18n/languages'; | |||
22 | 22 | ||
23 | import globalMessages from '../../i18n/globalMessages'; | 23 | import globalMessages from '../../i18n/globalMessages'; |
24 | import { DEFAULT_APP_SETTINGS, DEFAULT_SERVICE_SETTINGS } from '../../config'; | 24 | import { DEFAULT_APP_SETTINGS, DEFAULT_SERVICE_SETTINGS } from '../../config'; |
25 | import withParams from '../../components/util/WithParams'; | ||
25 | 26 | ||
26 | const messages = defineMessages({ | 27 | const messages = defineMessages({ |
27 | name: { | 28 | name: { |
@@ -119,14 +120,13 @@ const messages = defineMessages({ | |||
119 | }); | 120 | }); |
120 | 121 | ||
121 | interface EditServicesScreenProps extends StoresProps { | 122 | interface EditServicesScreenProps extends StoresProps { |
122 | router: RouterStore; | ||
123 | intl: any; | 123 | intl: any; |
124 | params: Params; | ||
124 | } | 125 | } |
125 | 126 | ||
126 | class EditServiceScreen extends Component<EditServicesScreenProps> { | 127 | class EditServiceScreen extends Component<EditServicesScreenProps> { |
127 | onSubmit(data: any) { | 128 | onSubmit(data: any) { |
128 | // @ts-ignore TODO: This is actually there and we don't have a correct type right now. | 129 | const { action } = this.props.params; |
129 | const { action } = this.props.router.params; | ||
130 | const { recipes, services } = this.props.stores; | 130 | const { recipes, services } = this.props.stores; |
131 | const { createService, updateService } = this.props.actions.service; | 131 | const { createService, updateService } = this.props.actions.service; |
132 | data.darkReaderSettings = { | 132 | data.darkReaderSettings = { |
@@ -151,10 +151,9 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
151 | prepareForm(recipe: IRecipe, service: Service | null, proxy: any): Form { | 151 | prepareForm(recipe: IRecipe, service: Service | null, proxy: any): Form { |
152 | const { intl } = this.props; | 152 | const { intl } = this.props; |
153 | 153 | ||
154 | const { stores, router } = this.props; | 154 | const { stores } = this.props; |
155 | 155 | ||
156 | // @ts-ignore TODO: This is actually there and we don't have a correct type right now. | 156 | const { action } = stores.router.pathValue; |
157 | const { action } = router.params; | ||
158 | 157 | ||
159 | let defaultSpellcheckerLanguage = | 158 | let defaultSpellcheckerLanguage = |
160 | SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage]; | 159 | SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage]; |
@@ -389,8 +388,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
389 | 388 | ||
390 | deleteService(): void { | 389 | deleteService(): void { |
391 | const { deleteService } = this.props.actions.service; | 390 | const { deleteService } = this.props.actions.service; |
392 | // @ts-ignore TODO: This is actually there and we don't have a correct type right now. | 391 | const { action } = this.props.params; |
393 | const { action } = this.props.router.params; | ||
394 | 392 | ||
395 | if (action === 'edit') { | 393 | if (action === 'edit') { |
396 | const { activeSettings: service } = this.props.stores.services; | 394 | const { activeSettings: service } = this.props.stores.services; |
@@ -403,8 +401,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
403 | 401 | ||
404 | openRecipeFile(file: any): void { | 402 | openRecipeFile(file: any): void { |
405 | const { openRecipeFile } = this.props.actions.service; | 403 | const { openRecipeFile } = this.props.actions.service; |
406 | // @ts-ignore TODO: This is actually there and we don't have a correct type right now. | 404 | const { action } = this.props.params; |
407 | const { action } = this.props.router.params; | ||
408 | 405 | ||
409 | if (action === 'edit') { | 406 | if (action === 'edit') { |
410 | const { activeSettings: service } = this.props.stores.services; | 407 | const { activeSettings: service } = this.props.stores.services; |
@@ -417,9 +414,7 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
417 | 414 | ||
418 | render(): ReactElement { | 415 | render(): ReactElement { |
419 | const { recipes, services, user } = this.props.stores; | 416 | const { recipes, services, user } = this.props.stores; |
420 | 417 | const { action } = this.props.params; | |
421 | // @ts-ignore TODO: This is actually there and we don't have a correct type right now. | ||
422 | const { action } = this.props.router.params; | ||
423 | 418 | ||
424 | let recipe: null | IRecipe = null; | 419 | let recipe: null | IRecipe = null; |
425 | let service: null | Service = null; | 420 | let service: null | Service = null; |
@@ -427,7 +422,6 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
427 | 422 | ||
428 | if (action === 'add') { | 423 | if (action === 'add') { |
429 | recipe = recipes.active; | 424 | recipe = recipes.active; |
430 | |||
431 | // TODO: render error message when recipe is `null` | 425 | // TODO: render error message when recipe is `null` |
432 | if (!recipe) { | 426 | if (!recipe) { |
433 | return <ServiceError />; | 427 | return <ServiceError />; |
@@ -475,6 +469,8 @@ class EditServiceScreen extends Component<EditServicesScreenProps> { | |||
475 | } | 469 | } |
476 | } | 470 | } |
477 | 471 | ||
478 | export default injectIntl<'intl', EditServicesScreenProps>( | 472 | export default withParams( |
479 | inject('stores', 'actions')(observer(EditServiceScreen)), | 473 | injectIntl<'intl', EditServicesScreenProps>( |
474 | inject('stores', 'actions')(observer(EditServiceScreen)), | ||
475 | ), | ||
480 | ); | 476 | ); |
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'; | |||
3 | import { autorun, IReactionDisposer } from 'mobx'; | 3 | import { autorun, IReactionDisposer } from 'mobx'; |
4 | import { inject, observer } from 'mobx-react'; | 4 | import { inject, observer } from 'mobx-react'; |
5 | 5 | ||
6 | import { Params } from 'react-router-dom'; | ||
6 | import Recipe from '../../models/Recipe'; | 7 | import Recipe from '../../models/Recipe'; |
7 | import { StoresProps } from '../../@types/ferdium-components.types'; | 8 | import { StoresProps } from '../../@types/ferdium-components.types'; |
8 | import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard'; | 9 | import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard'; |
@@ -13,11 +14,10 @@ import { asarRecipesPath } from '../../helpers/asar-helpers'; | |||
13 | import { communityRecipesStore } from '../../features/communityRecipes'; | 14 | import { communityRecipesStore } from '../../features/communityRecipes'; |
14 | import RecipePreview from '../../models/RecipePreview'; | 15 | import RecipePreview from '../../models/RecipePreview'; |
15 | import { openPath } from '../../helpers/url-helpers'; | 16 | import { openPath } from '../../helpers/url-helpers'; |
17 | import withParams from '../../components/util/WithParams'; | ||
16 | 18 | ||
17 | interface RecipesScreenProps extends StoresProps { | 19 | interface RecipesScreenProps extends StoresProps { |
18 | params: { | 20 | params: Params; |
19 | filter?: string | null; | ||
20 | }; | ||
21 | } | 21 | } |
22 | 22 | ||
23 | class RecipesScreen extends Component<RecipesScreenProps> { | 23 | class RecipesScreen extends Component<RecipesScreenProps> { |
@@ -36,8 +36,6 @@ class RecipesScreen extends Component<RecipesScreenProps> { | |||
36 | constructor(props: RecipesScreenProps) { | 36 | constructor(props: RecipesScreenProps) { |
37 | super(props); | 37 | super(props); |
38 | 38 | ||
39 | this.props.params.filter = this.props.params.filter || null; | ||
40 | |||
41 | this.customRecipes = readJsonSync(asarRecipesPath('all.json')); | 39 | this.customRecipes = readJsonSync(asarRecipesPath('all.json')); |
42 | } | 40 | } |
43 | 41 | ||
@@ -104,7 +102,7 @@ class RecipesScreen extends Component<RecipesScreenProps> { | |||
104 | } | 102 | } |
105 | 103 | ||
106 | resetSearch(): void { | 104 | resetSearch(): void { |
107 | this.setState({ needle: null }); | 105 | this.setState({ needle: null, currentFilter: 'featured' }); |
108 | } | 106 | } |
109 | 107 | ||
110 | render(): ReactElement { | 108 | render(): ReactElement { |
@@ -112,7 +110,8 @@ class RecipesScreen extends Component<RecipesScreenProps> { | |||
112 | 110 | ||
113 | const { app: appActions, service: serviceActions } = this.props.actions; | 111 | const { app: appActions, service: serviceActions } = this.props.actions; |
114 | 112 | ||
115 | const { filter } = this.props.params; | 113 | const filter = this.state.currentFilter; |
114 | |||
116 | let recipeFilter; | 115 | let recipeFilter; |
117 | 116 | ||
118 | if (filter === 'all') { | 117 | if (filter === 'all') { |
@@ -125,7 +124,7 @@ class RecipesScreen extends Component<RecipesScreenProps> { | |||
125 | } else { | 124 | } else { |
126 | recipeFilter = recipePreviews.featured; | 125 | recipeFilter = recipePreviews.featured; |
127 | } | 126 | } |
128 | recipeFilter = recipeFilter.sort(this._sortByName); | 127 | recipeFilter = [...recipeFilter].sort(this._sortByName); |
129 | 128 | ||
130 | const { needle } = this.state; | 129 | const { needle } = this.state; |
131 | const allRecipes = | 130 | const allRecipes = |
@@ -185,4 +184,4 @@ class RecipesScreen extends Component<RecipesScreenProps> { | |||
185 | } | 184 | } |
186 | } | 185 | } |
187 | 186 | ||
188 | export default inject('stores', 'actions')(observer(RecipesScreen)); | 187 | 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 @@ | |||
1 | import { Component, ReactNode, ReactPortal } from 'react'; | 1 | import { inject, observer } from 'mobx-react'; |
2 | import { Component, ReactPortal } from 'react'; | ||
2 | import ReactDOM from 'react-dom'; | 3 | import ReactDOM from 'react-dom'; |
3 | import { observer, inject } from 'mobx-react'; | 4 | import { Outlet } from 'react-router-dom'; |
4 | 5 | ||
5 | import { StoresProps } from '../../@types/ferdium-components.types'; | 6 | import { StoresProps } from '../../@types/ferdium-components.types'; |
6 | import Layout from '../../components/settings/SettingsLayout'; | ||
7 | import Navigation from '../../components/settings/navigation/SettingsNavigation'; | 7 | import Navigation from '../../components/settings/navigation/SettingsNavigation'; |
8 | import Layout from '../../components/settings/SettingsLayout'; | ||
8 | import ErrorBoundary from '../../components/util/ErrorBoundary'; | 9 | import ErrorBoundary from '../../components/util/ErrorBoundary'; |
9 | import { workspaceStore } from '../../features/workspaces'; | 10 | import { workspaceStore } from '../../features/workspaces'; |
10 | 11 | ||
11 | interface SettingsContainerProps extends StoresProps { | 12 | class SettingsContainer extends Component<StoresProps> { |
12 | children: ReactNode; | ||
13 | } | ||
14 | |||
15 | class SettingsContainer extends Component<SettingsContainerProps> { | ||
16 | portalRoot: any; | 13 | portalRoot: any; |
17 | 14 | ||
18 | el: HTMLDivElement; | 15 | el: HTMLDivElement; |
19 | 16 | ||
20 | constructor(props: SettingsContainerProps) { | 17 | constructor(props: StoresProps) { |
21 | super(props); | 18 | super(props); |
22 | 19 | ||
23 | this.portalRoot = document.querySelector('#portalContainer'); | 20 | this.portalRoot = document.querySelector('#portalContainer'); |
@@ -33,7 +30,7 @@ class SettingsContainer extends Component<SettingsContainerProps> { | |||
33 | } | 30 | } |
34 | 31 | ||
35 | render(): ReactPortal { | 32 | render(): ReactPortal { |
36 | const { children, stores } = this.props; | 33 | const { stores } = this.props; |
37 | const { closeSettings } = this.props.actions.ui; | 34 | const { closeSettings } = this.props.actions.ui; |
38 | 35 | ||
39 | const navigation = ( | 36 | const navigation = ( |
@@ -46,7 +43,7 @@ class SettingsContainer extends Component<SettingsContainerProps> { | |||
46 | return ReactDOM.createPortal( | 43 | return ReactDOM.createPortal( |
47 | <ErrorBoundary> | 44 | <ErrorBoundary> |
48 | <Layout navigation={navigation} closeSettings={closeSettings}> | 45 | <Layout navigation={navigation} closeSettings={closeSettings}> |
49 | {children} | 46 | <Outlet /> |
50 | </Layout> | 47 | </Layout> |
51 | </ErrorBoundary>, | 48 | </ErrorBoundary>, |
52 | this.el, | 49 | this.el, |