first commit

common/resources/client/admin/settings/requests/update-admin-settings.ts

@@ -0,0 +1,100 @@
+import {useMutation} from '@tanstack/react-query';
+import {UseFormReturn} from 'react-hook-form';
+import {diff} from 'deep-object-diff';
+import dot from 'dot-object';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {toast} from '@common/ui/toast/toast';
+import {apiClient, queryClient} from '@common/http/query-client';
+import {AdminSettings} from '@common/admin/settings/admin-settings';
+import {onFormQueryError} from '@common/errors/on-form-query-error';
+import {useAdminSettings} from '@common/admin/settings/requests/use-admin-settings';
+import {message} from '@common/i18n/message';
+
+interface Response extends BackendResponse {}
+
+export interface AdminSettingsWithFiles {
+  files?: Record<string, File>;
+  client?: Partial<AdminSettings['client']>;
+  server?: Partial<AdminSettings['server']>;
+}
+
+export function useUpdateAdminSettings(
+  form: UseFormReturn<AdminSettingsWithFiles>,
+) {
+  const {data: original} = useAdminSettings();
+
+  return useMutation({
+    mutationFn: (props: AdminSettingsWithFiles) => {
+      //need to convert these to json, otherwise only single key from object would be sent due to diffing
+      if (props.client?.cookie_notice?.button) {
+        props.client.cookie_notice.button = JSON.stringify(
+          props.client.cookie_notice.button,
+        ) as any;
+      }
+      if (props.client?.registration?.policies) {
+        props.client.registration.policies = JSON.stringify(
+          props.client.registration.policies,
+        ) as any;
+      }
+      if ((props.client as any)?.artistPage?.tabs) {
+        (props.client as any).artistPage.tabs = JSON.stringify(
+          (props.client as any).artistPage.tabs,
+        ) as any;
+      }
+      if ((props.client as any)?.title_page?.sections) {
+        (props.client as any).title_page.sections = JSON.stringify(
+          (props.client as any).title_page.sections,
+        ) as any;
+      }
+      if ((props.client as any)?.incoming_email) {
+        (props.client as any).incoming_email = JSON.stringify(
+          (props.client as any).incoming_email,
+        ) as any;
+      }
+      if ((props.client as any)?.publish?.default_credentials) {
+        (props.client as any).publish.default_credentials = JSON.stringify(
+          (props.client as any).publish.default_credentials,
+        ) as any;
+      }
+
+      const client = props.client ? diff(original!.client, props.client) : null;
+      const server = props.server ? diff(original!.server, props.server) : null;
+      return updateAdminSettings({
+        client,
+        server,
+        files: props.files,
+      } as AdminSettings);
+    },
+    onSuccess: () => {
+      toast(message('Settings updated'), {
+        position: 'bottom-right',
+      });
+      queryClient.invalidateQueries({queryKey: ['fetchAdminSettings']});
+    },
+    onError: r => onFormQueryError(r, form),
+  });
+}
+
+function updateAdminSettings({
+  client,
+  server,
+  files,
+}: AdminSettingsWithFiles): Promise<Response> {
+  const formData = new FormData();
+  if (client) {
+    formData.set('client', JSON.stringify(dot.dot(client)));
+  }
+  if (server) {
+    formData.set('server', JSON.stringify(dot.dot(server)));
+  }
+  Object.entries(files || {}).forEach(([key, file]) => {
+    formData.set(key, file);
+  });
+  return apiClient
+    .post('settings', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+    .then(r => r.data);
+}

common/resources/client/admin/settings/requests/use-admin-settings.ts

@@ -0,0 +1,21 @@
+import {useQuery} from '@tanstack/react-query';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {AdminSettings} from '../admin-settings';
+import {apiClient} from '@common/http/query-client';
+
+export interface FetchAdminSettingsResponse
+  extends BackendResponse,
+    AdminSettings {}
+
+export function useAdminSettings() {
+  return useQuery({
+    queryKey: ['fetchAdminSettings'],
+    queryFn: () => fetchAdminSettings(),
+    // prevent automatic re-fetching so diffing with previous settings work properly
+    staleTime: Infinity,
+  });
+}
+
+function fetchAdminSettings(): Promise<FetchAdminSettingsResponse> {
+  return apiClient.get('settings').then(response => response.data);
+}