diff --git a/resources/scripts/components/dashboard/search/SearchModal.tsx b/resources/scripts/components/dashboard/search/SearchModal.tsx index af6f6fcca..9c2a4eb9c 100644 --- a/resources/scripts/components/dashboard/search/SearchModal.tsx +++ b/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(); @@ -91,10 +105,9 @@ export default ({ ...props }: Props) => {
{ servers.map(server => ( - props.onDismissed()} >
@@ -112,7 +125,7 @@ export default ({ ...props }: Props) => { {server.node}
- + )) }
diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx index 48d3e6db6..9e10e8e7a 100644 --- a/resources/scripts/routers/ServerRouter.tsx +++ b/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,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 ( - -
-
- Console - - File Manager - - - Databases - - - Schedules - - - Users - - - Backups - - - Settings - -
+ {!server ? +
+
- - - - {!server ? -
- -
- : - - - - ( - - - - )} - exact - /> - - - - - - - - } -
+ : + <> + +
+
+ Console + + File Manager + + + Databases + + + Schedules + + + Users + + + Backups + + + Settings + +
+
+
+ + + + + + ( + + + + )} + exact + /> + + + + + + + + + + } ); };