Skip to content

Commit

Permalink
Admin settings config #282
Browse files Browse the repository at this point in the history
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
  • Loading branch information
kamtschatka committed Jul 12, 2024
1 parent 7b490be commit d368e30
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 17 deletions.
14 changes: 5 additions & 9 deletions apps/web/app/dashboard/admin/dynamicConfig.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
Expand All @@ -39,9 +38,6 @@ export function DynamicConfig() {
key={configSectionName}
config={configValues[configSectionName]}
configSectionName={configSectionName}
onSave={() => {
setRefreshKey((prevRefreshKey) => prevRefreshKey + 1);
}}
/>
);
})}
Expand Down
36 changes: 30 additions & 6 deletions apps/web/app/dashboard/admin/dynamicConfigTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}) {
Expand All @@ -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({
Expand All @@ -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>,
});
})}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/db/config/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
1 change: 0 additions & 1 deletion packages/trpc/routers/admin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down

0 comments on commit d368e30

Please sign in to comment.