From 1b1a1f32305b5e9713896546daddb375bedebc93 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 6 Sep 2020 13:10:30 +0200 Subject: [PATCH] Created component decorator that resets selected server and used it on Settings --- src/common/Home.tsx | 9 ++------- src/common/services/provideServices.ts | 2 ++ src/servers/CreateServer.tsx | 9 ++------- src/servers/helpers/withoutSelectedServer.tsx | 15 +++++++++++++++ src/servers/services/provideServices.ts | 2 ++ src/settings/services/provideServices.ts | 3 +++ 6 files changed, 26 insertions(+), 14 deletions(-) create mode 100644 src/servers/helpers/withoutSelectedServer.tsx diff --git a/src/common/Home.tsx b/src/common/Home.tsx index 252e1d62..a099c057 100644 --- a/src/common/Home.tsx +++ b/src/common/Home.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { isEmpty, values } from 'ramda'; import { Link } from 'react-router-dom'; import ServersListGroup from '../servers/ServersListGroup'; @@ -6,18 +6,13 @@ import './Home.scss'; import { ServersMap } from '../servers/data'; export interface HomeProps { - resetSelectedServer: Function; servers: ServersMap; } -const Home = ({ resetSelectedServer, servers }: HomeProps) => { +const Home = ({ servers }: HomeProps) => { const serversList = values(servers); const hasServers = !isEmpty(serversList); - useEffect(() => { - resetSelectedServer(); - }, []); - return (

Welcome to Shlink

diff --git a/src/common/services/provideServices.ts b/src/common/services/provideServices.ts index a4aa397f..fb63fde7 100644 --- a/src/common/services/provideServices.ts +++ b/src/common/services/provideServices.ts @@ -7,6 +7,7 @@ import AsideMenu from '../AsideMenu'; import ErrorHandler from '../ErrorHandler'; import ShlinkVersions from '../ShlinkVersions'; import { ConnectDecorator } from '../../container/types'; +import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer'; const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => { bottle.constant('window', (global as any).window); @@ -19,6 +20,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: bottle.decorator('MainHeader', withRouter); bottle.serviceFactory('Home', () => Home); + bottle.decorator('Home', withoutSelectedServer); bottle.decorator('Home', connect([ 'servers' ], [ 'resetSelectedServer' ])); bottle.serviceFactory( diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx index de171ac3..acc880fa 100644 --- a/src/servers/CreateServer.tsx +++ b/src/servers/CreateServer.tsx @@ -1,4 +1,4 @@ -import React, { FC, useEffect } from 'react'; +import React, { FC } from 'react'; import { v4 as uuid } from 'uuid'; import { RouterProps } from 'react-router'; import classNames from 'classnames'; @@ -13,7 +13,6 @@ const SHOW_IMPORT_MSG_TIME = 4000; interface CreateServerProps extends RouterProps { createServer: (server: ServerWithId) => void; - resetSelectedServer: Function; } const Result: FC<{ type: 'success' | 'error' }> = ({ children, type }) => ( @@ -32,7 +31,7 @@ const Result: FC<{ type: 'success' | 'error' }> = ({ children, type }) => ( ); const CreateServer = (ImportServersBtn: FC, useStateFlagTimeout: StateFlagTimeout) => ( - { createServer, history: { push }, resetSelectedServer }: CreateServerProps, + { createServer, history: { push } }: CreateServerProps, ) => { const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME); const [ errorImporting, setErrorImporting ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME); @@ -43,10 +42,6 @@ const CreateServer = (ImportServersBtn: FC, useStateFlagT push(`/server/${id}/list-short-urls/1`); }; - useEffect(() => { - resetSelectedServer(); - }, []); - return ( diff --git a/src/servers/helpers/withoutSelectedServer.tsx b/src/servers/helpers/withoutSelectedServer.tsx new file mode 100644 index 00000000..1331bf5a --- /dev/null +++ b/src/servers/helpers/withoutSelectedServer.tsx @@ -0,0 +1,15 @@ +import React, { FC, useEffect } from 'react'; + +interface WithoutSelectedServerProps { + resetSelectedServer: Function; +} + +export function withoutSelectedServer(WrappedComponent: FC) { + return (props: WithoutSelectedServerProps & T) => { + useEffect(() => { + props.resetSelectedServer(); + }, []); + + return ; + }; +} diff --git a/src/servers/services/provideServices.ts b/src/servers/services/provideServices.ts index b71bab9c..b9961f86 100644 --- a/src/servers/services/provideServices.ts +++ b/src/servers/services/provideServices.ts @@ -12,12 +12,14 @@ import { fetchServers } from '../reducers/remoteServers'; import ForServerVersion from '../helpers/ForServerVersion'; import { ServerError } from '../helpers/ServerError'; import { ConnectDecorator } from '../../container/types'; +import { withoutSelectedServer } from '../helpers/withoutSelectedServer'; import ServersImporter from './ServersImporter'; import ServersExporter from './ServersExporter'; const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => { // Components bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useStateFlagTimeout'); + bottle.decorator('CreateServer', withoutSelectedServer); bottle.decorator('CreateServer', connect([ 'selectedServer' ], [ 'createServer', 'resetSelectedServer' ])); bottle.serviceFactory('EditServer', EditServer, 'ServerError'); diff --git a/src/settings/services/provideServices.ts b/src/settings/services/provideServices.ts index ed8bb7d0..6db2052d 100644 --- a/src/settings/services/provideServices.ts +++ b/src/settings/services/provideServices.ts @@ -3,10 +3,13 @@ import RealTimeUpdates from '../RealTimeUpdates'; import Settings from '../Settings'; import { setRealTimeUpdates } from '../reducers/settings'; import { ConnectDecorator } from '../../container/types'; +import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer'; const provideServices = (bottle: Bottle, connect: ConnectDecorator) => { // Components bottle.serviceFactory('Settings', Settings, 'RealTimeUpdates'); + bottle.decorator('Settings', withoutSelectedServer); + bottle.decorator('Settings', connect(null, [ 'resetSelectedServer' ])); // Services bottle.serviceFactory('RealTimeUpdates', () => RealTimeUpdates);