swr for servers on dash; fix whatever is going on with the spinner

Author: DaneEveritt

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -1,44 +1,34 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Server } from '@/api/server/getServer';
 import getServers from '@/api/getServers';
 import ServerRow from '@/components/dashboard/ServerRow';
 import Spinner from '@/components/elements/Spinner';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import useFlash from '@/plugins/useFlash';
-import { httpErrorToHuman } from '@/api/http';
-import FlashMessageRender from '@/components/FlashMessageRender';
 import { useStoreState } from 'easy-peasy';
 import { usePersistedState } from '@/plugins/usePersistedState';
 import Switch from '@/components/elements/Switch';
 import tw from 'twin.macro';
+import useSWR from 'swr';
+import { PaginatedResult } from '@/api/http';
 
 export default () => {
-    const { addError, clearFlashes } = useFlash();
-    const [ servers, setServers ] = useState<Server[]>([]);
-    const [ loading, setLoading ] = useState(true);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
     const { rootAdmin } = useStoreState(state => state.user.data!);
     const [ showAdmin, setShowAdmin ] = usePersistedState('show_all_servers', false);
 
-    const loadServers = () => {
-        clearFlashes();
-        setLoading(true);
-
-        getServers(undefined, showAdmin)
-            .then(data => setServers(data.items))
-            .catch(error => {
-                console.error(error);
-                addError({ message: httpErrorToHuman(error) });
-            })
-            .then(() => setLoading(false));
-    };
+    const { data: servers, error } = useSWR<PaginatedResult<Server>>(
+        [ '/api/client/servers', showAdmin ],
+        () => getServers(undefined, showAdmin)
+    );
 
     useEffect(() => {
-        loadServers();
-    }, [ showAdmin ]);
+        if (error) clearAndAddHttpError({ key: 'dashboard', error });
+        if (!error) clearFlashes('dashboard');
+    }, [ error ]);
 
     return (
-        <PageContentBlock>
-            <FlashMessageRender css={tw`mb-4`}/>
+        <PageContentBlock showFlashKey={'dashboard'}>
             {rootAdmin &&
             <div css={tw`mb-2 flex justify-end items-center`}>
                 <p css={tw`uppercase text-xs text-neutral-400 mr-2`}>
@@ -51,14 +41,12 @@ export default () => {
                 />
             </div>
             }
-            {loading ?
+            {!servers ?
                 <Spinner centered size={'large'}/>
                 :
-                servers.length > 0 ?
-                    servers.map((server, index) => (
-                        <div key={server.uuid} css={index > 0 ? tw`mt-2` : undefined}>
-                            <ServerRow server={server}/>
-                        </div>
+                servers.items.length > 0 ?
+                    servers.items.map((server, index) => (
+                        <ServerRow key={server.uuid} server={server} css={index > 0 ? tw`mt-2` : undefined}/>
                     ))
                     :
                     <p css={tw`text-center text-sm text-neutral-400`}>

resources/scripts/components/dashboard/ServerRow.tsx

@@ -8,6 +8,7 @@ import getServerResourceUsage, { ServerStats } from '@/api/server/getServerResou
 import { bytesToHuman, megabytesToHuman } from '@/helpers';
 import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
+import Spinner from '@/components/elements/Spinner';
 
 // Determines if the current value is in an alarm threshold so we can show it in red rather
 // than the more faded default style.
@@ -17,7 +18,7 @@ const isAlarmState = (current: number, limit: number): boolean => {
     return current / limitInBytes >= 0.90;
 };
 
-export default ({ server }: { server: Server }) => {
+export default ({ server, className }: { server: Server; className?: string }) => {
     const interval = useRef<number>(null);
     const [ stats, setStats ] = useState<ServerStats | null>(null);
     const [ statsError, setStatsError ] = useState(false);
@@ -54,7 +55,7 @@ export default ({ server }: { server: Server }) => {
     const memorylimit = server.limits.memory !== 0 ? megabytesToHuman(server.limits.memory) : 'Unlimited';
 
     return (
-        <GreyRowBox as={Link} to={`/server/${server.id}`}>
+        <GreyRowBox as={Link} to={`/server/${server.id}`} className={className}>
             <div className={'icon'}>
                 <FontAwesomeIcon icon={faServer}/>
             </div>
@@ -73,10 +74,10 @@ export default ({ server }: { server: Server }) => {
                     </p>
                 </div>
             </div>
-            <div css={tw`w-1/3 flex items-baseline relative`}>
+            <div css={tw`w-1/3 flex items-baseline justify-center relative`}>
                 {!stats ?
                     !statsError ?
-                        <SpinnerOverlay size={'small'} visible backgroundOpacity={0.25}/>
+                        <Spinner size={'small'}/>
                         :
                         server.isInstalling ?
                             <div css={tw`flex-1 text-center`}>
@@ -129,7 +130,6 @@ export default ({ server }: { server: Server }) => {
                                     {bytesToHuman(stats.memoryUsageInBytes)}
                                 </p>
                             </div>
-
                             <p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {memorylimit}</p>
                         </div>
                         <div css={tw`flex-1 ml-4`}>
@@ -151,7 +151,6 @@ export default ({ server }: { server: Server }) => {
                                     {bytesToHuman(stats.diskUsageInBytes)}
                                 </p>
                             </div>
-
                             <p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {disklimit}</p>
                         </div>
                     </React.Fragment>