Add listener for install start/end

Author: DaneEveritt

resources/scripts/components/server/InstallListener.tsx

@@ -0,0 +1,26 @@
+import useWebsocketEvent from '@/plugins/useWebsocketEvent';
+import { ServerContext } from '@/state/server';
+import useServer from '@/plugins/useServer';
+
+const InstallListener = () => {
+    const server = useServer();
+    const getServer = ServerContext.useStoreActions(actions => actions.server.getServer);
+    const setServer = ServerContext.useStoreActions(actions => actions.server.setServer);
+
+    // Listen for the installation completion event and then fire off a request to fetch the updated
+    // server information. This allows the server to automatically become available to the user if they
+    // just sit on the page.
+    useWebsocketEvent('install completed', () => {
+        getServer(server.uuid).catch(error => console.error(error));
+    });
+
+    // When we see the install started event immediately update the state to indicate such so that the
+    // screens automatically update.
+    useWebsocketEvent('install started', () => {
+        setServer({ ...server, isInstalling: true });
+    });
+
+    return null;
+};
+
+export default InstallListener;

resources/scripts/plugins/useServer.ts

@@ -1,9 +1,8 @@
-import { DependencyList } from 'react';
 import { ServerContext } from '@/state/server';
 import { Server } from '@/api/server/getServer';
 
-const useServer = (dependencies?: DependencyList): Server => {
-    return ServerContext.useStoreState(state => state.server.data!, [ dependencies ]);
+const useServer = (dependencies?: any[] | undefined): Server => {
+    return ServerContext.useStoreState(state => state.server.data!, dependencies);
 };
 
 export default useServer;

resources/scripts/routers/ServerRouter.tsx

@@ -25,6 +25,7 @@ import useServer from '@/plugins/useServer';
 import ScreenBlock from '@/components/screens/ScreenBlock';
 import SubNavigation from '@/components/elements/SubNavigation';
 import NetworkContainer from '@/components/server/network/NetworkContainer';
+import InstallListener from '@/components/server/InstallListener';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
     const { rootAdmin } = useStoreState(state => state.user.data!);
@@ -98,6 +99,8 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                             </div>
                         </SubNavigation>
                     </CSSTransition>
+                    <InstallListener/>
+                    <WebsocketHandler/>
                     {(installing && (!rootAdmin || (rootAdmin && !location.pathname.endsWith(`/server/${server.id}`)))) ?
                         <ScreenBlock
                             title={'Your server is installing.'}
@@ -106,7 +109,6 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                         />
                         :
                         <>
-                            <WebsocketHandler/>
                             <TransitionRouter>
                                 <Switch location={location}>
                                     <Route path={`${match.path}`} component={ServerConsole} exact/>