Admin settings config #282

fixed the issue with the flickering of the UI and properly resetting the state of the config after saving to get rid of any previous changes in hidden elements
hoarder-app · Jul 12, 2024 · d368e30 · d368e30
1 parent 7b490be
commit d368e30
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 17 deletions.
diff --git a/apps/web/app/dashboard/admin/dynamicConfig.tsx b/apps/web/app/dashboard/admin/dynamicConfig.tsx
@@ -12,10 +12,10 @@ import {
 } from "@hoarder/db/config/config";
 import { ConfigTypes } from "@hoarder/db/config/configValue";
 
-function useConfigValues(
-  refreshKey: number,
-): Record<ConfigSectionName, Record<ConfigKeys, ConfigTypes>> | undefined {
-  const { data, error } = api.admin.getConfig.useQuery(refreshKey);
+function useConfigValues():
+  | Record<ConfigSectionName, Record<ConfigKeys, ConfigTypes>>
+  | undefined {
+  const { data, error } = api.admin.getConfig.useQuery();
   if (error) {
     throw error;
   }
@@ -24,8 +24,7 @@ function useConfigValues(
 }
 
 export function DynamicConfig() {
-  const [refreshKey, setRefreshKey] = React.useState(0);
-  const configValues = useConfigValues(refreshKey);
+  const configValues = useConfigValues();
 
   if (!configValues) {
     return null;
@@ -39,9 +38,6 @@ export function DynamicConfig() {
             key={configSectionName}
             config={configValues[configSectionName]}
             configSectionName={configSectionName}
-            onSave={() => {
-              setRefreshKey((prevRefreshKey) => prevRefreshKey + 1);
-            }}
           />
         );
       })}

diff --git a/apps/web/app/dashboard/admin/dynamicConfigTab.tsx b/apps/web/app/dashboard/admin/dynamicConfigTab.tsx
@@ -45,11 +45,9 @@ import {
 } from "@hoarder/db/config/configValue";
 
 export function DynamicConfigTab<T extends ConfigSectionName>({
-  onSave,
   configSectionName,
   config,
 }: {
-  onSave: () => void;
   configSectionName: T;
   config?: Record<ConfigKeys, ConfigTypes>;
 }) {
@@ -59,13 +57,39 @@ export function DynamicConfigTab<T extends ConfigSectionName>({
     resolver: zodResolver(configSchema),
   });
 
+  /**
+   * @param values the current values of the form
+   * @returns the new config values where all the hidden elements get reset to the default value to have the correct state again
+   */
+  function resetUnusedConfigValues(values: Record<ConfigKeys, ConfigTypes>) {
+    const updatedValues: Record<ConfigKeys, ConfigTypes> = {} as Record<
+      ConfigKeys,
+      ConfigTypes
+    >;
+    Object.values(serverConfig[configSectionName]).forEach((configValue) => {
+      if (
+        !configValue.shouldRender(values) &&
+        values[configValue.key] !== configValue.defaultValue
+      ) {
+        // Element is hidden --> reset to the default value
+        updatedValues[configValue.key] = configValue.defaultValue;
+      } else {
+        updatedValues[configValue.key] = values[configValue.key];
+      }
+    });
+    return updatedValues;
+  }
+
   const { mutate: storeConfig } = api.admin.storeConfig.useMutation({
     onSuccess: () => {
       toast({
         description: "Config updated!",
       });
-      form.reset(form.getValues());
-      onSave();
+      form.reset(
+        resetUnusedConfigValues(
+          form.getValues() as Record<ConfigKeys, ConfigTypes>,
+        ),
+      );
     },
     onError: (error) => {
       toast({
@@ -91,10 +115,10 @@ export function DynamicConfigTab<T extends ConfigSectionName>({
         </div>
         <Form {...form}>
           <form
-            onSubmit={form.handleSubmit(async (value) => {
+            onSubmit={form.handleSubmit(async (values) => {
               storeConfig({
                 configSectionName,
-                values: value as Record<ConfigKeys, ConfigTypes>,
+                values: values as Record<ConfigKeys, ConfigTypes>,
               });
             })}
           >

diff --git a/packages/db/config/config.ts b/packages/db/config/config.ts
@@ -93,7 +93,7 @@ export const serverConfig: ServerConfig = {
       validator: z.boolean(),
       dependsOn: [ConfigKeys.CRAWLER_STORE_SCREENSHOT],
       renderIf: (value) => {
-        return !!value;
+        return !value;
       },
     }),
     [ConfigKeys.CRAWLER_FULL_PAGE_ARCHIVE]: new ConfigValue({

diff --git a/packages/trpc/routers/admin.ts b/packages/trpc/routers/admin.ts
@@ -143,7 +143,6 @@ export const adminAppRouter = router({
     await Promise.all(bookmarkIds.map((b) => triggerSearchReindex(b.id)));
   }),
   getConfig: adminProcedure
-    .input(z.number())
     .output(
       z.record(
         z.string(),