diff --git a/resources/scripts/api/swr/admin/getServerDetails.ts b/resources/scripts/api/swr/admin/getServerDetails.ts new file mode 100644 index 000000000..ce88110f3 --- /dev/null +++ b/resources/scripts/api/swr/admin/getServerDetails.ts @@ -0,0 +1,19 @@ +import useSWR, { SWRResponse } from 'swr'; +import http from '@/api/http'; +import { rawDataToServer, Server } from '@/api/admin/servers/getServers'; +import { useRouteMatch } from 'react-router-dom'; +import { AxiosError } from 'axios'; + +export default (): SWRResponse => { + const { params } = useRouteMatch<{ id: string }>(); + + return useSWR(`/api/application/servers/${params.id}`, async (key) => { + const { data } = await http.get(key, { + params: { + includes: [ 'allocations', 'user', 'variables' ], + }, + }); + + return rawDataToServer(data); + }, { revalidateOnMount: false, revalidateOnFocus: false }); +}; diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx index 6d73f5e66..8ed7cb666 100644 --- a/resources/scripts/components/App.tsx +++ b/resources/scripts/components/App.tsx @@ -14,6 +14,7 @@ import tw from 'twin.macro'; import { history } from '@/components/history'; import { setupInterceptors } from '@/api/interceptors'; import GlobalStyles from '@/components/GlobalStyles'; +import Spinner from '@/components/elements/Spinner'; const ChunkedAdminRouter = lazy(() => import(/* webpackChunkName: "admin" */'@/routers/AdminRouter')); @@ -81,7 +82,7 @@ const App = () => {
- Loading...
}> + }> {SiteConfiguration?.analytics && } diff --git a/resources/scripts/components/admin/AdminContentBlock.tsx b/resources/scripts/components/admin/AdminContentBlock.tsx index 5793014e4..d4317a330 100644 --- a/resources/scripts/components/admin/AdminContentBlock.tsx +++ b/resources/scripts/components/admin/AdminContentBlock.tsx @@ -15,11 +15,8 @@ const AdminContentBlock: React.FC<{ title?: string; showFlashKey?: string; class return ( // <> - {showFlashKey && - - } + {showFlashKey && } {children} - {/*

© 2015 - 2021  { const location = useLocation(); const match = useRouteMatch<{ id?: string }>(); - const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); - const [ loading, setLoading ] = useState(true); - - const server = Context.useStoreState(state => state.server); - const setServer = Context.useStoreActions(actions => actions.setServer); + const { clearFlashes, clearAndAddHttpError } = useFlash(); + const { data: server, error, isValidating, mutate } = getServerDetails(); useEffect(() => { - clearFlashes('server'); - - getServer(Number(match.params?.id), ServerIncludes) - .then(server => setServer(server)) - .catch(error => { - console.error(error); - clearAndAddHttpError({ key: 'server', error }); - }) - .then(() => setLoading(false)); + mutate(); }, []); - if (loading || server === undefined) { - return ( - - + useEffect(() => { + if (!error) { + clearFlashes('server'); + } else { + clearAndAddHttpError({ error, key: 'server' }); + } + }, [ error ]); -

+ if (!server || (error && isValidating)) { + return ( + + ; ); } return ( +

{server.name}

{server.uuid}

- - - + - - + - - - - + + + - - - + - diff --git a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx index d1c890c55..2d6de477c 100644 --- a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx +++ b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx @@ -17,45 +17,9 @@ import { Form, Formik, FormikHelpers, useFormikContext } from 'formik'; import { Context, ServerIncludes } from '@/components/admin/servers/ServerRouter'; import { ApplicationStore } from '@/state'; import { Actions, useStoreActions } from 'easy-peasy'; -import OwnerSelect from '@/components/admin/servers/OwnerSelect'; import Button from '@/components/elements/Button'; import FormikSwitch from '@/components/elements/FormikSwitch'; - -export function ServerSettingsContainer ({ server }: { server?: Server }) { - const { isSubmitting } = useFormikContext(); - - return ( - - - -
-
- -
- -
- -
-
- -
-
- -
-
- - ); -} +import BaseSettingsBox from '@/components/admin/servers/settings/BaseSettingsBox'; export function ServerFeatureContainer () { const { isSubmitting } = useFormikContext(); @@ -295,7 +259,7 @@ export default function ServerSettingsContainer2 ({ server }: { server: Server }
- +
diff --git a/resources/scripts/components/admin/servers/settings/BaseSettingsBox.tsx b/resources/scripts/components/admin/servers/settings/BaseSettingsBox.tsx new file mode 100644 index 000000000..3e8459951 --- /dev/null +++ b/resources/scripts/components/admin/servers/settings/BaseSettingsBox.tsx @@ -0,0 +1,44 @@ +import { Server } from '@/api/admin/servers/getServers'; +import { useFormikContext } from 'formik'; +import AdminBox from '@/components/admin/AdminBox'; +import { faCogs } from '@fortawesome/free-solid-svg-icons'; +import tw from 'twin.macro'; +import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; +import Field from '@/components/elements/Field'; +import OwnerSelect from '@/components/admin/servers/OwnerSelect'; +import React from 'react'; + +export default ({ server }: { server?: Server }) => { + const { isSubmitting } = useFormikContext(); + + return ( + + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ + ); +}; diff --git a/resources/scripts/state/flashes.ts b/resources/scripts/state/flashes.ts index 03374cdee..f888d07d6 100644 --- a/resources/scripts/state/flashes.ts +++ b/resources/scripts/state/flashes.ts @@ -30,6 +30,8 @@ const flashes: FlashStore = { }), clearAndAddHttpError: action((state, payload) => { + console.error(payload.error); + state.items = [ { type: 'error', title: 'Error', key: payload.key, message: httpErrorToHuman(payload.error) } ]; }),