fix: refactor config contexts

SiaFoundation · Dec 17, 2023 · 57b52da · 57b52da
1 parent 40ae671
commit 57b52da
Show file tree

Hide file tree

Showing 29 changed files with 1,035 additions and 694 deletions.
diff --git a/.changeset/lovely-moose-fix.md b/.changeset/lovely-moose-fix.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Refactor hooks used in server synced configuration features.
diff --git a/apps/hostd/components/Config/StateConnError.tsx b/apps/hostd/components/Config/StateConnError.tsx
@@ -0,0 +1,21 @@
+import { Button, Text } from '@siafoundation/design-system'
+import { Warning32 } from '@siafoundation/react-icons'
+import { useConfig } from '../../contexts/config'
+
+export function StateConnError() {
+  const { revalidateAndResetForm } = useConfig()
+  return (
+    <div className="flex flex-col gap-10 justify-center items-center h-[400px] cursor-pointer">
+      <Text>
+        <Warning32 className="scale-[200%]" />
+      </Text>
+      <div className="flex flex-col gap-3 items-center">
+        <Text color="subtle" className="text-center max-w-[500px]">
+          Error retrieving settings from daemon. Please check your connection
+          and try again.
+        </Text>
+        <Button onClick={() => revalidateAndResetForm()}>Reload</Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/hostd/components/Config/index.tsx b/apps/hostd/components/Config/index.tsx
@@ -12,6 +12,7 @@ import { HostdAuthedLayout } from '../../components/HostdAuthedLayout'
 import { AnnounceButton } from './AnnounceButton'
 import { useConfig } from '../../contexts/config'
 import { ConfigNav } from './ConfigNav'
+import { StateConnError } from './StateConnError'
 
 export function Config() {
   const { openDialog } = useDialog()
@@ -20,9 +21,10 @@ export function Config() {
     settings,
     dynDNSCheck,
     changeCount,
-    revalidateAndResetFormData,
+    revalidateAndResetForm,
     form,
     onSubmit,
+    remoteError,
   } = useConfig()
   return (
     <HostdAuthedLayout
@@ -63,7 +65,7 @@ export function Config() {
             tip="Reset all changes"
             icon="contrast"
             disabled={!changeCount}
-            onClick={revalidateAndResetFormData}
+            onClick={revalidateAndResetForm}
           >
             <Reset16 />
           </Button>
@@ -81,44 +83,48 @@ export function Config() {
       }
       openSettings={() => openDialog('settings')}
     >
-      <div className="p-6 flex flex-col gap-16 max-w-screen-xl">
-        <ConfigurationPanel
-          title="Host"
-          category="host"
-          fields={fields}
-          form={form}
-        />
-        <ConfigurationPanel
-          title="Pricing"
-          category="pricing"
-          fields={fields}
-          form={form}
-        />
-        <ConfigurationPanel
-          title="DNS"
-          category="DNS"
-          fields={fields}
-          form={form}
-        />
-        <ConfigurationPanel
-          title="Bandwidth"
-          category="bandwidth"
-          fields={fields}
-          form={form}
-        />
-        <ConfigurationPanel
-          title="Registry"
-          category="registry"
-          fields={fields}
-          form={form}
-        />
-        <ConfigurationPanel
-          title="Accounts"
-          category="RHP3"
-          fields={fields}
-          form={form}
-        />
-      </div>
+      {remoteError ? (
+        <StateConnError />
+      ) : (
+        <div className="p-6 flex flex-col gap-16 max-w-screen-xl">
+          <ConfigurationPanel
+            title="Host"
+            category="host"
+            fields={fields}
+            form={form}
+          />
+          <ConfigurationPanel
+            title="Pricing"
+            category="pricing"
+            fields={fields}
+            form={form}
+          />
+          <ConfigurationPanel
+            title="DNS"
+            category="DNS"
+            fields={fields}
+            form={form}
+          />
+          <ConfigurationPanel
+            title="Bandwidth"
+            category="bandwidth"
+            fields={fields}
+            form={form}
+          />
+          <ConfigurationPanel
+            title="Registry"
+            category="registry"
+            fields={fields}
+            form={form}
+          />
+          <ConfigurationPanel
+            title="Accounts"
+            category="RHP3"
+            fields={fields}
+            form={form}
+          />
+        </div>
+      )}
     </HostdAuthedLayout>
   )
 }