From 817a2bf8ae292a5f4c4fd434d3775928f4e43b98 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 3 Oct 2021 16:24:23 -0700
Subject: [PATCH] Use grid and server SWR for settings box

---
 .../scripts/components/admin/AdminBox.tsx     | 46 +++++++++----------
 .../admin/servers/ServerSettingsContainer.tsx | 20 +++-----
 .../servers/settings/BaseSettingsBox.tsx      | 43 +++++------------
 3 files changed, 39 insertions(+), 70 deletions(-)

diff --git a/resources/scripts/components/admin/AdminBox.tsx b/resources/scripts/components/admin/AdminBox.tsx
index d7e570690..847fc7076 100644
--- a/resources/scripts/components/admin/AdminBox.tsx
+++ b/resources/scripts/components/admin/AdminBox.tsx
@@ -1,11 +1,12 @@
-import React, { memo } from 'react';
+import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import tw from 'twin.macro';
-import isEqual from 'react-fast-compare';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 
 interface Props {
     icon?: IconProp;
+    isLoading?: boolean;
     title: string | React.ReactNode;
     className?: string;
     padding?: boolean;
@@ -13,28 +14,23 @@ interface Props {
     button?: React.ReactNode;
 }
 
-const AdminBox = ({ icon, title, className, padding, children, button }: Props) => {
-    if (padding === undefined) {
-        padding = true;
-    }
-
-    return (
-        <div css={tw`rounded shadow-md bg-neutral-700`} className={className}>
-            <div css={tw`flex flex-row bg-neutral-900 rounded-t px-4 py-3 border-b border-black`}>
-                {typeof title === 'string' ?
-                    <p css={tw`text-sm uppercase`}>
-                        {icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
-                    </p>
-                    :
-                    title
-                }
-                {button}
-            </div>
-            <div css={padding ? tw`px-4 py-3` : undefined}>
-                {children}
-            </div>
+const AdminBox = ({ icon, title, className, isLoading, children, button }: Props) => (
+    <div css={tw`relative rounded shadow-md bg-neutral-700`} className={className}>
+        <SpinnerOverlay visible={isLoading || false}/>
+        <div css={tw`flex flex-row bg-neutral-900 rounded-t px-4 lg:px-6 py-3 lg:py-4 border-b border-black`}>
+            {typeof title === 'string' ?
+                <p css={tw`text-sm uppercase`}>
+                    {icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
+                </p>
+                :
+                title
+            }
+            {button}
         </div>
-    );
-};
+        <div css={tw`p-4 lg:p-6`}>
+            {children}
+        </div>
+    </div>
+);
 
-export default memo(AdminBox, isEqual);
+export default AdminBox;
diff --git a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
index 2d6de477c..bc8d9ce4f 100644
--- a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
@@ -4,7 +4,7 @@ import ServerDeleteButton from '@/components/admin/servers/ServerDeleteButton';
 import Label from '@/components/elements/Label';
 import Select from '@/components/elements/Select';
 import SelectField, { AsyncSelectField, Option } from '@/components/elements/SelectField';
-import { faBalanceScale, faCogs, faConciergeBell, faNetworkWired } from '@fortawesome/free-solid-svg-icons';
+import { faBalanceScale, faConciergeBell, faNetworkWired } from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import { useHistory } from 'react-router-dom';
@@ -258,24 +258,16 @@ export default function ServerSettingsContainer2 ({ server }: { server: Server }
                 <Form>
                     <div css={tw`grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-8 mb-16`}>
                         <div css={tw`flex flex-col`}>
-                            <div css={tw`flex mb-6`}>
-                                <BaseSettingsBox server={server}/>
+                            <div css={tw`mb-6 lg:mb-10`}>
+                                <BaseSettingsBox/>
                             </div>
-
-                            <div css={tw`flex mb-6`}>
+                            <div css={tw`mb-6 lg:mb-10`}>
                                 <ServerFeatureContainer/>
                             </div>
-
-                            <div css={tw`flex`}>
-                                <ServerAllocationsContainer server={server}/>
-                            </div>
+                            <ServerAllocationsContainer server={server}/>
                         </div>
-
                         <div css={tw`flex flex-col`}>
-                            <div css={tw`flex mb-6`}>
-                                <ServerResourceContainer/>
-                            </div>
-
+                            <ServerResourceContainer css={tw`mb-6`}/>
                             <div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6`}>
                                 <div css={tw`flex flex-row`}>
                                     <ServerDeleteButton
diff --git a/resources/scripts/components/admin/servers/settings/BaseSettingsBox.tsx b/resources/scripts/components/admin/servers/settings/BaseSettingsBox.tsx
index 3e8459951..edca72b63 100644
--- a/resources/scripts/components/admin/servers/settings/BaseSettingsBox.tsx
+++ b/resources/scripts/components/admin/servers/settings/BaseSettingsBox.tsx
@@ -1,43 +1,24 @@
-import { Server } from '@/api/admin/servers/getServers';
+import React from 'react';
+import tw from 'twin.macro';
 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';
+import getServerDetails from '@/api/swr/admin/getServerDetails';
 
-export default ({ server }: { server?: Server }) => {
+export default () => {
+    const { data: server } = getServerDetails();
     const { isSubmitting } = useFormikContext();
 
+    if (!server) return null;
+
     return (
-        <AdminBox icon={faCogs} title={'Settings'} css={tw`relative w-full`}>
-            <SpinnerOverlay visible={isSubmitting}/>
-            <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
-                <div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
-                    <Field
-                        id={'name'}
-                        name={'name'}
-                        label={'Server Name'}
-                        type={'text'}
-                    />
-                </div>
-
-                <div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
-                    <Field
-                        id={'externalId'}
-                        name={'externalId'}
-                        label={'External Identifier'}
-                        type={'text'}
-                    />
-                </div>
-            </div>
-
-            <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
-                <div css={tw`mb-6 w-full md:w-1/2 md:flex md:flex-col md:pr-4 md:mb-0`}>
-                    <OwnerSelect selected={server?.relations.user || null}/>
-                </div>
+        <AdminBox icon={faCogs} title={'Settings'} isLoading={isSubmitting}>
+            <div css={tw`grid grid-cols-1 xl:grid-cols-2 gap-4 lg:gap-6`}>
+                <Field id={'name'} name={'name'} label={'Server Name'} type={'text'}/>
+                <Field id={'externalId'} name={'externalId'} label={'External Identifier'} type={'text'}/>
+                <OwnerSelect selected={server.relations.user || null}/>
             </div>
         </AdminBox>
     );