Correctly reset server state when the URL is changed

resources/scripts/components/dashboard/search/SearchModal.tsx

@@ -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>

resources/scripts/routers/ServerRouter.tsx

@@ -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,21 +16,34 @@ 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/>
+            {!server ?
+                <div className={'flex justify-center m-20'}>
+                    <Spinner size={'large'}/>
+                </div>
+                :
+                <>
                     <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
                         <div id={'sub-navigation'}>
                             <div className={'items'}>
@@ -59,11 +71,6 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                     </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/>
@@ -83,8 +90,9 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                             <Route path={`${match.path}/backups`} component={BackupContainer} exact/>
                             <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
                         </Switch>
-                }
                     </TransitionRouter>
+                </>
+            }
         </React.Fragment>
     );
 };