Correctly reset server state when the URL is changed
This commit is contained in:
Dane Everitt
parent
b9239594ca
commit
fc31d6347e
2 changed files with 81 additions and 60 deletions
|
|
@ -11,6 +11,7 @@ import { Server } from '@/api/server/getServer';
|
|||
import { ApplicationStore } from '@/state';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import { Link } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
|
||||
type Props = RequiredModalProps;
|
||||
|
||||
|
|
@ -18,6 +19,19 @@ interface Values {
|
|||
term: string;
|
||||
}
|
||||
|
||||
const ServerResult = styled(Link)`
|
||||
${tw`flex items-center bg-neutral-900 p-4 rounded border-l-4 border-neutral-900 no-underline`};
|
||||
transition: all 250ms linear;
|
||||
|
||||
&:hover {
|
||||
${tw`shadow border-cyan-500`};
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
${tw`mb-2`};
|
||||
}
|
||||
`;
|
||||
|
||||
const SearchWatcher = () => {
|
||||
const { values, submitForm } = useFormikContext<Values>();
|
||||
|
||||
|
|
@ -91,10 +105,9 @@ export default ({ ...props }: Props) => {
|
|||
<div className={'mt-6'}>
|
||||
{
|
||||
servers.map(server => (
|
||||
<Link
|
||||
<ServerResult
|
||||
key={server.uuid}
|
||||
to={`/server/${server.id}`}
|
||||
className={'flex items-center block bg-neutral-900 p-4 rounded border-l-4 border-neutral-900 no-underline hover:shadow hover:border-cyan-500 transition-colors duration-250'}
|
||||
onClick={() => props.onDismissed()}
|
||||
>
|
||||
<div>
|
||||
|
|
@ -112,7 +125,7 @@ export default ({ ...props }: Props) => {
|
|||
{server.node}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</ServerResult>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
|
|||
import NavigationBar from '@/components/NavigationBar';
|
||||
import ServerConsole from '@/components/server/ServerConsole';
|
||||
import TransitionRouter from '@/TransitionRouter';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import WebsocketHandler from '@/components/server/WebsocketHandler';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
|
||||
|
|
@ -17,74 +16,83 @@ import ScheduleEditContainer from '@/components/server/schedules/ScheduleEditCon
|
|||
import UsersContainer from '@/components/server/users/UsersContainer';
|
||||
import Can from '@/components/elements/Can';
|
||||
import BackupContainer from '@/components/server/backups/BackupContainer';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
|
||||
const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
|
||||
const server = ServerContext.useStoreState(state => state.server.data);
|
||||
const getServer = ServerContext.useStoreActions(actions => actions.server.getServer);
|
||||
const clearServerState = ServerContext.useStoreActions(actions => actions.clearServerState);
|
||||
|
||||
if (!server) {
|
||||
getServer(match.params.id);
|
||||
}
|
||||
useEffect(() => () => {
|
||||
clearServerState();
|
||||
}, []);
|
||||
|
||||
useEffect(() => () => clearServerState(), [ clearServerState ]);
|
||||
useEffect(() => {
|
||||
getServer(match.params.id);
|
||||
|
||||
return () => {
|
||||
clearServerState();
|
||||
};
|
||||
}, [ match.params.id ]);
|
||||
|
||||
return (
|
||||
<React.Fragment key={'server-router'}>
|
||||
<NavigationBar/>
|
||||
<CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
|
||||
<div id={'sub-navigation'}>
|
||||
<div className={'items'}>
|
||||
<NavLink to={`${match.url}`} exact>Console</NavLink>
|
||||
<Can action={'file.*'}>
|
||||
<NavLink to={`${match.url}/files`}>File Manager</NavLink>
|
||||
</Can>
|
||||
<Can action={'database.*'}>
|
||||
<NavLink to={`${match.url}/databases`}>Databases</NavLink>
|
||||
</Can>
|
||||
<Can action={'schedule.*'}>
|
||||
<NavLink to={`${match.url}/schedules`}>Schedules</NavLink>
|
||||
</Can>
|
||||
<Can action={'user.*'}>
|
||||
<NavLink to={`${match.url}/users`}>Users</NavLink>
|
||||
</Can>
|
||||
<Can action={'backup.*'}>
|
||||
<NavLink to={`${match.url}/backups`}>Backups</NavLink>
|
||||
</Can>
|
||||
<Can action={[ 'settings.*', 'file.sftp' ]} matchAny={true}>
|
||||
<NavLink to={`${match.url}/settings`}>Settings</NavLink>
|
||||
</Can>
|
||||
</div>
|
||||
{!server ?
|
||||
<div className={'flex justify-center m-20'}>
|
||||
<Spinner size={'large'}/>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
<WebsocketHandler/>
|
||||
<TransitionRouter>
|
||||
{!server ?
|
||||
<div className={'flex justify-center m-20'}>
|
||||
<Spinner size={'large'}/>
|
||||
</div>
|
||||
:
|
||||
<Switch location={location}>
|
||||
<Route path={`${match.path}`} component={ServerConsole} exact/>
|
||||
<Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
|
||||
<Route
|
||||
path={`${match.path}/files/:action(edit|new)`}
|
||||
render={props => (
|
||||
<SuspenseSpinner>
|
||||
<FileEditContainer {...props as any}/>
|
||||
</SuspenseSpinner>
|
||||
)}
|
||||
exact
|
||||
/>
|
||||
<Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
|
||||
<Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/>
|
||||
<Route path={`${match.path}/schedules/:id`} component={ScheduleEditContainer} exact/>
|
||||
<Route path={`${match.path}/users`} component={UsersContainer} exact/>
|
||||
<Route path={`${match.path}/backups`} component={BackupContainer} exact/>
|
||||
<Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
|
||||
</Switch>
|
||||
}
|
||||
</TransitionRouter>
|
||||
:
|
||||
<>
|
||||
<CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
|
||||
<div id={'sub-navigation'}>
|
||||
<div className={'items'}>
|
||||
<NavLink to={`${match.url}`} exact>Console</NavLink>
|
||||
<Can action={'file.*'}>
|
||||
<NavLink to={`${match.url}/files`}>File Manager</NavLink>
|
||||
</Can>
|
||||
<Can action={'database.*'}>
|
||||
<NavLink to={`${match.url}/databases`}>Databases</NavLink>
|
||||
</Can>
|
||||
<Can action={'schedule.*'}>
|
||||
<NavLink to={`${match.url}/schedules`}>Schedules</NavLink>
|
||||
</Can>
|
||||
<Can action={'user.*'}>
|
||||
<NavLink to={`${match.url}/users`}>Users</NavLink>
|
||||
</Can>
|
||||
<Can action={'backup.*'}>
|
||||
<NavLink to={`${match.url}/backups`}>Backups</NavLink>
|
||||
</Can>
|
||||
<Can action={[ 'settings.*', 'file.sftp' ]} matchAny={true}>
|
||||
<NavLink to={`${match.url}/settings`}>Settings</NavLink>
|
||||
</Can>
|
||||
</div>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
<WebsocketHandler/>
|
||||
<TransitionRouter>
|
||||
<Switch location={location}>
|
||||
<Route path={`${match.path}`} component={ServerConsole} exact/>
|
||||
<Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
|
||||
<Route
|
||||
path={`${match.path}/files/:action(edit|new)`}
|
||||
render={props => (
|
||||
<SuspenseSpinner>
|
||||
<FileEditContainer {...props as any}/>
|
||||
</SuspenseSpinner>
|
||||
)}
|
||||
exact
|
||||
/>
|
||||
<Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
|
||||
<Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/>
|
||||
<Route path={`${match.path}/schedules/:id`} component={ScheduleEditContainer} exact/>
|
||||
<Route path={`${match.path}/users`} component={UsersContainer} exact/>
|
||||
<Route path={`${match.path}/backups`} component={BackupContainer} exact/>
|
||||
<Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
|
||||
</Switch>
|
||||
</TransitionRouter>
|
||||
</>
|
||||
}
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue