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/components/settings/SettingsLayout.js | 80 ------ src/components/settings/SettingsLayout.jsx | 80 ++++++ .../settings/navigation/SettingsNavigation.js | 169 ----------- .../settings/navigation/SettingsNavigation.jsx | 193 +++++++++++++ .../settings/recipes/RecipesDashboard.js | 304 -------------------- .../settings/recipes/RecipesDashboard.jsx | 309 +++++++++++++++++++++ .../settings/services/EditServiceForm.js | 2 +- src/components/settings/services/ServiceError.js | 2 +- .../settings/services/ServicesDashboard.js | 5 +- src/components/settings/user/EditUserForm.js | 2 +- 10 files changed, 587 insertions(+), 559 deletions(-) delete mode 100644 src/components/settings/SettingsLayout.js create mode 100644 src/components/settings/SettingsLayout.jsx delete mode 100644 src/components/settings/navigation/SettingsNavigation.js create mode 100644 src/components/settings/navigation/SettingsNavigation.jsx delete mode 100644 src/components/settings/recipes/RecipesDashboard.js create mode 100644 src/components/settings/recipes/RecipesDashboard.jsx (limited to 'src/components/settings') diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js deleted file mode 100644 index d70f471d5..000000000 --- a/src/components/settings/SettingsLayout.js +++ /dev/null @@ -1,80 +0,0 @@ -import { Component } from 'react'; -import PropTypes from 'prop-types'; -import { observer } from 'mobx-react'; -import { defineMessages, injectIntl } from 'react-intl'; - -import { mdiClose } from '@mdi/js'; -import ErrorBoundary from '../util/ErrorBoundary'; -import { oneOrManyChildElements } from '../../prop-types'; -import Appear from '../ui/effects/Appear'; -import Icon from '../ui/icon'; - -const messages = defineMessages({ - closeSettings: { - id: 'settings.app.closeSettings', - defaultMessage: 'Close settings', - }, -}); - -class SettingsLayout extends Component { - static propTypes = { - navigation: PropTypes.element.isRequired, - children: oneOrManyChildElements.isRequired, - closeSettings: PropTypes.func.isRequired, - }; - - componentDidMount() { - document.addEventListener('keydown', this.handleKeyDown.bind(this), false); - } - - componentWillUnmount() { - document.removeEventListener( - 'keydown', - // eslint-disable-next-line unicorn/no-invalid-remove-event-listener - this.handleKeyDown.bind(this), - false, - ); - } - - handleKeyDown(e) { - if (e.keyCode === 27) { - // escape key - this.props.closeSettings(); - } - } - - render() { - const { navigation, children, closeSettings } = this.props; - - const { intl } = this.props; - - return ( - -
- - -
- - - - ); - } -} - -export default injectIntl(observer(SettingsLayout)); diff --git a/src/components/settings/SettingsLayout.jsx b/src/components/settings/SettingsLayout.jsx new file mode 100644 index 000000000..dea4bb387 --- /dev/null +++ b/src/components/settings/SettingsLayout.jsx @@ -0,0 +1,80 @@ +import { Component } from 'react'; +import PropTypes from 'prop-types'; +import { observer } from 'mobx-react'; +import { defineMessages, injectIntl } from 'react-intl'; + +import { mdiClose } from '@mdi/js'; +import { Outlet } from 'react-router-dom'; +import ErrorBoundary from '../util/ErrorBoundary'; +import Appear from '../ui/effects/Appear'; +import Icon from '../ui/icon'; + +const messages = defineMessages({ + closeSettings: { + id: 'settings.app.closeSettings', + defaultMessage: 'Close settings', + }, +}); + +class SettingsLayout extends Component { + static propTypes = { + navigation: PropTypes.element.isRequired, + closeSettings: PropTypes.func.isRequired, + }; + + componentDidMount() { + document.addEventListener('keydown', this.handleKeyDown.bind(this), false); + } + + componentWillUnmount() { + document.removeEventListener( + 'keydown', + // eslint-disable-next-line unicorn/no-invalid-remove-event-listener + this.handleKeyDown.bind(this), + false, + ); + } + + handleKeyDown(e) { + if (e.keyCode === 27) { + // escape key + this.props.closeSettings(); + } + } + + render() { + const { navigation, closeSettings } = this.props; + + const { intl } = this.props; + + return ( + +
+ + +
+ + + + ); + } +} + +export default injectIntl(observer(SettingsLayout)); diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js deleted file mode 100644 index ad1cef1e4..000000000 --- a/src/components/settings/navigation/SettingsNavigation.js +++ /dev/null @@ -1,169 +0,0 @@ -import { Component } from 'react'; -import PropTypes from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; -import { inject, observer } from 'mobx-react'; -import { RouterStore } from 'mobx-react-router'; - -import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config'; -import Link from '../../ui/Link'; -import UIStore from '../../../stores/UIStore'; -import SettingsStore from '../../../stores/SettingsStore'; -import UserStore from '../../../stores/UserStore'; -import globalMessages from '../../../i18n/globalMessages'; - -const messages = defineMessages({ - availableServices: { - id: 'settings.navigation.availableServices', - defaultMessage: 'Available services', - }, - yourServices: { - id: 'settings.navigation.yourServices', - defaultMessage: 'Your services', - }, - yourWorkspaces: { - id: 'settings.navigation.yourWorkspaces', - defaultMessage: 'Your workspaces', - }, - account: { - id: 'settings.navigation.account', - defaultMessage: 'Account', - }, - team: { - id: 'settings.navigation.team', - defaultMessage: 'Manage Team', - }, - supportFerdium: { - id: 'settings.navigation.supportFerdium', - defaultMessage: 'About Ferdium', - }, - logout: { - id: 'settings.navigation.logout', - defaultMessage: 'Logout', - }, -}); - -class SettingsNavigation extends Component { - static propTypes = { - stores: PropTypes.shape({ - ui: PropTypes.instanceOf(UIStore).isRequired, - user: PropTypes.instanceOf(UserStore).isRequired, - settings: PropTypes.instanceOf(SettingsStore).isRequired, - router: PropTypes.instanceOf(RouterStore).isRequired, - }).isRequired, - actions: PropTypes.shape({ - settings: PropTypes.instanceOf(SettingsStore).isRequired, - }).isRequired, - serviceCount: PropTypes.number.isRequired, - workspaceCount: PropTypes.number.isRequired, - }; - - handleLogout() { - const isUsingWithoutAccount = - this.props.stores.settings.app.server === LOCAL_SERVER; - - // Remove current auth token - localStorage.removeItem('authToken'); - - if (isUsingWithoutAccount) { - // Reset server back to Ferdium API - this.props.actions.settings.update({ - type: 'app', - data: { - server: LIVE_FERDIUM_API, - }, - }); - } - this.props.stores.user.isLoggingOut = true; - - this.props.stores.router.push('/auth/welcome'); - - // Reload Ferdium, otherwise many settings won't sync correctly with the server - // after logging into another account - window.location.reload(); - } - - render() { - const { serviceCount, workspaceCount, stores } = this.props; - const { intl } = this.props; - const isUsingWithoutAccount = stores.settings.app.server === LOCAL_SERVER; - const isUsingFranzServer = stores.settings.app.server === LIVE_FRANZ_API; - - return ( -
- - {intl.formatMessage(messages.availableServices)} - - - {intl.formatMessage(messages.yourServices)}{' '} - {serviceCount} - - - {intl.formatMessage(messages.yourWorkspaces)}{' '} - {workspaceCount} - - {!isUsingWithoutAccount && ( - - {intl.formatMessage(messages.account)} - - )} - {isUsingFranzServer && ( - - {intl.formatMessage(messages.team)} - - )} - - {intl.formatMessage(globalMessages.settings)} - {stores.settings.app.automaticUpdates && (stores.ui.showServicesUpdatedInfoBar || - (stores.app.updateStatus === stores.app.updateStatusTypes.AVAILABLE || - stores.app.updateStatus === stores.app.updateStatusTypes.DOWNLOADED)) && ( - • - )} - - - {intl.formatMessage(messages.supportFerdium)} - - - -
- ); - } -} - -export default injectIntl(inject('stores', 'actions')(observer(SettingsNavigation))); diff --git a/src/components/settings/navigation/SettingsNavigation.jsx b/src/components/settings/navigation/SettingsNavigation.jsx new file mode 100644 index 000000000..bbbe8d888 --- /dev/null +++ b/src/components/settings/navigation/SettingsNavigation.jsx @@ -0,0 +1,193 @@ +import { Component } from 'react'; +import PropTypes from 'prop-types'; +import { defineMessages, injectIntl } from 'react-intl'; +import { inject, observer } from 'mobx-react'; +import { RouterStore } from '@superwf/mobx-react-router'; + +import { NavLink } from 'react-router-dom'; +import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config'; +import UIStore from '../../../stores/UIStore'; +import SettingsStore from '../../../stores/SettingsStore'; +import UserStore from '../../../stores/UserStore'; +import globalMessages from '../../../i18n/globalMessages'; + +const messages = defineMessages({ + availableServices: { + id: 'settings.navigation.availableServices', + defaultMessage: 'Available services', + }, + yourServices: { + id: 'settings.navigation.yourServices', + defaultMessage: 'Your services', + }, + yourWorkspaces: { + id: 'settings.navigation.yourWorkspaces', + defaultMessage: 'Your workspaces', + }, + account: { + id: 'settings.navigation.account', + defaultMessage: 'Account', + }, + team: { + id: 'settings.navigation.team', + defaultMessage: 'Manage Team', + }, + supportFerdium: { + id: 'settings.navigation.supportFerdium', + defaultMessage: 'About Ferdium', + }, + logout: { + id: 'settings.navigation.logout', + defaultMessage: 'Logout', + }, +}); + +class SettingsNavigation extends Component { + static propTypes = { + stores: PropTypes.shape({ + ui: PropTypes.instanceOf(UIStore).isRequired, + user: PropTypes.instanceOf(UserStore).isRequired, + settings: PropTypes.instanceOf(SettingsStore).isRequired, + router: PropTypes.instanceOf(RouterStore).isRequired, + }).isRequired, + actions: PropTypes.shape({ + settings: PropTypes.instanceOf(SettingsStore).isRequired, + }).isRequired, + serviceCount: PropTypes.number.isRequired, + workspaceCount: PropTypes.number.isRequired, + }; + + handleLogout() { + const isUsingWithoutAccount = + this.props.stores.settings.app.server === LOCAL_SERVER; + + // Remove current auth token + localStorage.removeItem('authToken'); + + if (isUsingWithoutAccount) { + // Reset server back to Ferdium API + this.props.actions.settings.update({ + type: 'app', + data: { + server: LIVE_FERDIUM_API, + }, + }); + } + this.props.stores.user.isLoggingOut = true; + + this.props.stores.router.push('/auth/welcome'); + + // Reload Ferdium, otherwise many settings won't sync correctly with the server + // after logging into another account + window.location.reload(); + } + + render() { + const { serviceCount, workspaceCount, stores } = this.props; + const { intl } = this.props; + const isUsingWithoutAccount = stores.settings.app.server === LOCAL_SERVER; + const isUsingFranzServer = stores.settings.app.server === LIVE_FRANZ_API; + + return ( +
+ + isActive + ? 'settings-navigation__link is-active' + : 'settings-navigation__link' + } + > + {intl.formatMessage(messages.availableServices)} + + + isActive + ? 'settings-navigation__link is-active' + : 'settings-navigation__link' + } + > + {intl.formatMessage(messages.yourServices)}{' '} + {serviceCount} + + + isActive + ? 'settings-navigation__link is-active' + : 'settings-navigation__link' + } + > + {intl.formatMessage(messages.yourWorkspaces)}{' '} + {workspaceCount} + + {!isUsingWithoutAccount && ( + + isActive + ? 'settings-navigation__link is-active' + : 'settings-navigation__link' + } + > + {intl.formatMessage(messages.account)} + + )} + {isUsingFranzServer && ( + + isActive + ? 'settings-navigation__link is-active' + : 'settings-navigation__link' + } + > + {intl.formatMessage(messages.team)} + + )} + + isActive + ? 'settings-navigation__link is-active' + : 'settings-navigation__link' + } + > + {intl.formatMessage(globalMessages.settings)} + {stores.settings.app.automaticUpdates && + (stores.ui.showServicesUpdatedInfoBar || + stores.app.updateStatus === + stores.app.updateStatusTypes.AVAILABLE || + stores.app.updateStatus === + stores.app.updateStatusTypes.DOWNLOADED) && ( + • + )} + + + isActive + ? 'settings-navigation__link is-active' + : 'settings-navigation__link' + } + > + {intl.formatMessage(messages.supportFerdium)} + + + +
+ ); + } +} + +export default injectIntl(inject('stores', 'actions')(observer(SettingsNavigation))); diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js deleted file mode 100644 index c05144117..000000000 --- a/src/components/settings/recipes/RecipesDashboard.js +++ /dev/null @@ -1,304 +0,0 @@ -import { Component } from 'react'; -import PropTypes from 'prop-types'; -import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; -import { defineMessages, injectIntl } from 'react-intl'; -import { Link } from 'react-router'; - -import injectSheet from 'react-jss'; - -import { mdiOpenInNew } from '@mdi/js'; -import Button from '../../ui/button'; -import Input from '../../ui/input/index'; -import { H1, H2, H3 } from '../../ui/headline'; -import SearchInput from '../../ui/SearchInput'; -import Infobox from '../../ui/Infobox'; -import RecipeItem from './RecipeItem'; -import Loader from '../../ui/Loader'; -import Appear from '../../ui/effects/Appear'; -import { FERDIUM_SERVICE_REQUEST } from '../../../config'; -import RecipePreview from '../../../models/RecipePreview'; -import Icon from '../../ui/icon'; - -const messages = defineMessages({ - headline: { - id: 'settings.recipes.headline', - defaultMessage: 'Available services', - }, - searchService: { - id: 'settings.searchService', - defaultMessage: 'Search service', - }, - ferdiumPicksRecipes: { - id: 'settings.recipes.ferdiumPicks', - defaultMessage: 'Ferdium Picks', - }, - allRecipes: { - id: 'settings.recipes.all', - defaultMessage: 'All services', - }, - customRecipes: { - id: 'settings.recipes.custom', - defaultMessage: 'Custom Services', - }, - nothingFound: { - id: 'settings.recipes.nothingFound', - defaultMessage: - 'Sorry, but no service matched your search term - but you can still probably add it using the "Custom Website" option. Please note that the website might show more services that have been added to Ferdium since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdium.', - }, - servicesSuccessfulAddedInfo: { - id: 'settings.recipes.servicesSuccessfulAddedInfo', - defaultMessage: 'Service successfully added', - }, - missingService: { - id: 'settings.recipes.missingService', - defaultMessage: 'Missing a service?', - }, - customRecipeIntro: { - id: 'settings.recipes.customService.intro', - defaultMessage: - 'To add a custom service, copy the service recipe folder inside:', - }, - openFolder: { - id: 'settings.recipes.customService.openFolder', - defaultMessage: 'Open folder', - }, - openDevDocs: { - id: 'settings.recipes.customService.openDevDocs', - defaultMessage: 'Developer Documentation', - }, - headlineCustomRecipes: { - id: 'settings.recipes.customService.headline.customRecipes', - defaultMessage: 'Custom 3rd Party Recipes', - }, - headlineCommunityRecipes: { - id: 'settings.recipes.customService.headline.communityRecipes', - defaultMessage: 'Community 3rd Party Recipes', - }, - headlineDevRecipes: { - id: 'settings.recipes.customService.headline.devRecipes', - defaultMessage: 'Your Development Service Recipes', - }, -}); - -const styles = { - devRecipeIntroContainer: { - textAlign: 'center', - width: '100%', - height: 'auto', - margin: [40, 0], - }, - path: { - marginTop: 20, - - '& > div': { - fontFamily: - 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace', - }, - }, - actionContainer: { - '& button': { - margin: [0, 10], - }, - }, - devRecipeList: { - marginTop: 20, - height: 'auto', - }, - proBadge: { - marginLeft: '10px !important', - }, -}; - -class RecipesDashboard extends Component { - static propTypes = { - recipes: MobxPropTypes.arrayOrObservableArray.isRequired, - customWebsiteRecipe: PropTypes.instanceOf(RecipePreview).isRequired, - isLoading: PropTypes.bool.isRequired, - hasLoadedRecipes: PropTypes.bool.isRequired, - showAddServiceInterface: PropTypes.func.isRequired, - searchRecipes: PropTypes.func.isRequired, - resetSearch: PropTypes.func.isRequired, - serviceStatus: MobxPropTypes.arrayOrObservableArray.isRequired, - searchNeedle: PropTypes.string, - recipeFilter: PropTypes.string, - recipeDirectory: PropTypes.string.isRequired, - openRecipeDirectory: PropTypes.func.isRequired, - openDevDocs: PropTypes.func.isRequired, - classes: PropTypes.object.isRequired, - }; - - static defaultProps = { - searchNeedle: '', - recipeFilter: 'all', - }; - - render() { - const { - recipes, - customWebsiteRecipe, - isLoading, - hasLoadedRecipes, - showAddServiceInterface, - searchRecipes, - resetSearch, - serviceStatus, - searchNeedle, - recipeFilter, - recipeDirectory, - openRecipeDirectory, - openDevDocs, - classes, - } = this.props; - const { intl } = this.props; - - const communityRecipes = recipes.filter(r => !r.isDevRecipe); - const devRecipes = recipes.filter(r => r.isDevRecipe); - - return ( -
-
-

{intl.formatMessage(messages.headline)}

-
-
- {serviceStatus.length > 0 && serviceStatus.includes('created') && ( - - - {intl.formatMessage(messages.servicesSuccessfulAddedInfo)} - - - )} - searchRecipes(e)} - onReset={() => resetSearch()} - autoFocus - throttle - /> -
- resetSearch()} - > - {intl.formatMessage(messages.ferdiumPicksRecipes)} - - resetSearch()} - > - {intl.formatMessage(messages.allRecipes)} - - resetSearch()} - > - {intl.formatMessage(messages.customRecipes)} - - - {intl.formatMessage(messages.missingService)}{' '} - - -
- {/* )} */} - {isLoading ? ( - - ) : ( - <> - {recipeFilter === 'dev' && ( - <> -

{intl.formatMessage(messages.headlineCustomRecipes)}

-
-

{intl.formatMessage(messages.customRecipeIntro)}

- -
-
-
- - )} - {recipeFilter === 'dev' && communityRecipes.length > 0 && ( -

{intl.formatMessage(messages.headlineCommunityRecipes)}

- )} -
- {communityRecipes.map(recipe => ( - - showAddServiceInterface({ recipeId: recipe.id }) - } - /> - ))} -
- {hasLoadedRecipes && recipes.length === 0 && recipeFilter !== 'dev' && ( -
- {customWebsiteRecipe && customWebsiteRecipe.id && ( - - showAddServiceInterface({ - recipeId: customWebsiteRecipe.id, - }) - } - /> - )} -

- {intl.formatMessage(messages.nothingFound)} -

-
- )} - {recipeFilter === 'dev' && devRecipes.length > 0 && ( -
-

{intl.formatMessage(messages.headlineDevRecipes)}

-
- {devRecipes.map(recipe => ( - - showAddServiceInterface({ recipeId: recipe.id }) - } - /> - ))} -
-
- )} - - )} -
-
- ); - } -} - -export default injectIntl( - injectSheet(styles, { injectTheme: true })(observer(RecipesDashboard)), -); diff --git a/src/components/settings/recipes/RecipesDashboard.jsx b/src/components/settings/recipes/RecipesDashboard.jsx new file mode 100644 index 000000000..589b97ecd --- /dev/null +++ b/src/components/settings/recipes/RecipesDashboard.jsx @@ -0,0 +1,309 @@ +import { Component } from 'react'; +import PropTypes from 'prop-types'; +import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; +import { defineMessages, injectIntl } from 'react-intl'; +import { NavLink } from 'react-router-dom'; + +import injectSheet from 'react-jss'; + +import { mdiOpenInNew } from '@mdi/js'; +import Button from '../../ui/button'; +import Input from '../../ui/input/index'; +import { H1, H2, H3 } from '../../ui/headline'; +import SearchInput from '../../ui/SearchInput'; +import Infobox from '../../ui/Infobox'; +import RecipeItem from './RecipeItem'; +import Loader from '../../ui/Loader'; +import Appear from '../../ui/effects/Appear'; +import { FERDIUM_SERVICE_REQUEST } from '../../../config'; +import RecipePreview from '../../../models/RecipePreview'; +import Icon from '../../ui/icon'; + +const messages = defineMessages({ + headline: { + id: 'settings.recipes.headline', + defaultMessage: 'Available services', + }, + searchService: { + id: 'settings.searchService', + defaultMessage: 'Search service', + }, + ferdiumPicksRecipes: { + id: 'settings.recipes.ferdiumPicks', + defaultMessage: 'Ferdium Picks', + }, + allRecipes: { + id: 'settings.recipes.all', + defaultMessage: 'All services', + }, + customRecipes: { + id: 'settings.recipes.custom', + defaultMessage: 'Custom Services', + }, + nothingFound: { + id: 'settings.recipes.nothingFound', + defaultMessage: + 'Sorry, but no service matched your search term - but you can still probably add it using the "Custom Website" option. Please note that the website might show more services that have been added to Ferdium since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdium.', + }, + servicesSuccessfulAddedInfo: { + id: 'settings.recipes.servicesSuccessfulAddedInfo', + defaultMessage: 'Service successfully added', + }, + missingService: { + id: 'settings.recipes.missingService', + defaultMessage: 'Missing a service?', + }, + customRecipeIntro: { + id: 'settings.recipes.customService.intro', + defaultMessage: + 'To add a custom service, copy the service recipe folder inside:', + }, + openFolder: { + id: 'settings.recipes.customService.openFolder', + defaultMessage: 'Open folder', + }, + openDevDocs: { + id: 'settings.recipes.customService.openDevDocs', + defaultMessage: 'Developer Documentation', + }, + headlineCustomRecipes: { + id: 'settings.recipes.customService.headline.customRecipes', + defaultMessage: 'Custom 3rd Party Recipes', + }, + headlineCommunityRecipes: { + id: 'settings.recipes.customService.headline.communityRecipes', + defaultMessage: 'Community 3rd Party Recipes', + }, + headlineDevRecipes: { + id: 'settings.recipes.customService.headline.devRecipes', + defaultMessage: 'Your Development Service Recipes', + }, +}); + +const styles = { + devRecipeIntroContainer: { + textAlign: 'center', + width: '100%', + height: 'auto', + margin: [40, 0], + }, + path: { + marginTop: 20, + + '& > div': { + fontFamily: + 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace', + }, + }, + actionContainer: { + '& button': { + margin: [0, 10], + }, + }, + devRecipeList: { + marginTop: 20, + height: 'auto', + }, + proBadge: { + marginLeft: '10px !important', + }, +}; + +class RecipesDashboard extends Component { + static propTypes = { + recipes: MobxPropTypes.arrayOrObservableArray.isRequired, + customWebsiteRecipe: PropTypes.instanceOf(RecipePreview).isRequired, + isLoading: PropTypes.bool.isRequired, + hasLoadedRecipes: PropTypes.bool.isRequired, + showAddServiceInterface: PropTypes.func.isRequired, + searchRecipes: PropTypes.func.isRequired, + resetSearch: PropTypes.func.isRequired, + serviceStatus: MobxPropTypes.arrayOrObservableArray.isRequired, + searchNeedle: PropTypes.string, + recipeFilter: PropTypes.string, + recipeDirectory: PropTypes.string.isRequired, + openRecipeDirectory: PropTypes.func.isRequired, + openDevDocs: PropTypes.func.isRequired, + classes: PropTypes.object.isRequired, + }; + + static defaultProps = { + searchNeedle: '', + recipeFilter: 'all', + }; + + render() { + const { + recipes, + customWebsiteRecipe, + isLoading, + hasLoadedRecipes, + showAddServiceInterface, + searchRecipes, + resetSearch, + serviceStatus, + searchNeedle, + recipeFilter, + recipeDirectory, + openRecipeDirectory, + openDevDocs, + classes, + } = this.props; + const { intl } = this.props; + + const communityRecipes = recipes.filter(r => !r.isDevRecipe); + const devRecipes = recipes.filter(r => r.isDevRecipe); + + return ( +
+
+

{intl.formatMessage(messages.headline)}

+
+
+ {serviceStatus.length > 0 && serviceStatus.includes('created') && ( + + + {intl.formatMessage(messages.servicesSuccessfulAddedInfo)} + + + )} + searchRecipes(e)} + onReset={() => resetSearch()} + autoFocus + throttle + /> +
+ + recipeFilter === 'featured' ? 'badge badge--primary' : 'badge' + } + onClick={() => resetSearch()} + > + {intl.formatMessage(messages.ferdiumPicksRecipes)} + + + isActive && recipeFilter === 'all' ? 'badge badge--primary' : 'badge' + } + onClick={() => resetSearch()} + > + {intl.formatMessage(messages.allRecipes)} + + + isActive && !searchNeedle ? 'badge badge--primary' : 'badge' + } + onClick={() => resetSearch()} + > + {intl.formatMessage(messages.customRecipes)} + + + {intl.formatMessage(messages.missingService)}{' '} + + +
+ {/* )} */} + {isLoading ? ( + + ) : ( + <> + {recipeFilter === 'dev' && ( + <> +

{intl.formatMessage(messages.headlineCustomRecipes)}

+
+

{intl.formatMessage(messages.customRecipeIntro)}

+ +
+
+
+ + )} + {recipeFilter === 'dev' && communityRecipes.length > 0 && ( +

{intl.formatMessage(messages.headlineCommunityRecipes)}

+ )} +
+ {communityRecipes.map(recipe => ( + + showAddServiceInterface({ recipeId: recipe.id }) + } + /> + ))} +
+ {hasLoadedRecipes && + recipes.length === 0 && + recipeFilter !== 'dev' && ( +
+ {customWebsiteRecipe && customWebsiteRecipe.id && ( + + showAddServiceInterface({ + recipeId: customWebsiteRecipe.id, + }) + } + /> + )} +

+ {intl.formatMessage(messages.nothingFound)} +

+
+ )} + {recipeFilter === 'dev' && devRecipes.length > 0 && ( +
+

{intl.formatMessage(messages.headlineDevRecipes)}

+
+ {devRecipes.map(recipe => ( + + showAddServiceInterface({ recipeId: recipe.id }) + } + /> + ))} +
+
+ )} + + )} +
+
+ ); + } +} + +export default injectIntl( + injectSheet(styles, { injectTheme: true })(observer(RecipesDashboard)), +); diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index f69d86726..73136529a 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js @@ -1,7 +1,7 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import { observer } from 'mobx-react'; -import { Link } from 'react-router'; +import { Link } from 'react-router-dom'; import { defineMessages, injectIntl } from 'react-intl'; import normalizeUrl from 'normalize-url'; diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js index 991817175..fdcdb54c9 100644 --- a/src/components/settings/services/ServiceError.js +++ b/src/components/settings/services/ServiceError.js @@ -1,6 +1,6 @@ import { Component } from 'react'; import { observer } from 'mobx-react'; -import { Link } from 'react-router'; +import { Link } from 'react-router-dom'; import { defineMessages, injectIntl } from 'react-intl'; import Infobox from '../../ui/Infobox'; diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js index c5bb1433c..ac1c30ecb 100644 --- a/src/components/settings/services/ServicesDashboard.js +++ b/src/components/settings/services/ServicesDashboard.js @@ -1,7 +1,7 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; -import { Link } from 'react-router'; +import { Link } from 'react-router-dom'; import { defineMessages, injectIntl } from 'react-intl'; import SearchInput from '../../ui/SearchInput'; @@ -27,8 +27,7 @@ const messages = defineMessages({ }, noServiceFound: { id: 'settings.services.nothingFound', - defaultMessage: - 'Sorry, but no service matched your search term.', + defaultMessage: 'Sorry, but no service matched your search term.', }, discoverServices: { id: 'settings.services.discoverServices', diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js index 436a6b76b..c2773a47d 100644 --- a/src/components/settings/user/EditUserForm.js +++ b/src/components/settings/user/EditUserForm.js @@ -2,7 +2,7 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; import { defineMessages, injectIntl } from 'react-intl'; -import { Link } from 'react-router'; +import { Link } from 'react-router-dom'; import Input from '../../ui/input/index'; import Form from '../../../lib/Form'; -- cgit v1.2.3-70-g09d2