🎨 - fix: improved naming and layout

Xaohs · svenvandescheur · commit 2a5e6382ed80 · 2024-07-26T12:38:31.000+02:00
diff --git a/frontend/src/lib/api/config.ts b/frontend/src/lib/api/config.ts
@@ -11,7 +11,7 @@ export type ArchiveConfiguration = {
  * const archiveConfig = await getArchiveConfig();
  * console.log(archiveConfig);
  */
-export async function getArchiveConfig(): Promise<ArchiveConfiguration> {
+export async function getArchiveConfiguration(): Promise<ArchiveConfiguration> {
   const response = await request("GET", "/archive-config");
   const promise: Promise<ArchiveConfiguration> = response.json();
   return promise;
@@ -26,7 +26,7 @@ export async function getArchiveConfig(): Promise<ArchiveConfiguration> {
  * await patchArchiveConfig(archiveConfig);
  * console.log("Archive configuration updated");
  */
-export async function patchArchiveConfig(
+export async function patchArchiveConfiguration(
   archiveConfig: ArchiveConfiguration,
 ): Promise<void> {
   const response = await request(
diff --git a/frontend/src/pages/settings/Settings.tsx b/frontend/src/pages/settings/Settings.tsx
@@ -1,11 +1,9 @@
 import {
   Body,
-  Card,
-  CardBaseTemplate,
-  Column,
+  BodyBaseTemplate,
+  Button,
   Form,
   FormField,
-  Grid,
   H2,
   Modal,
   P,
@@ -62,7 +60,7 @@ export function SettingsPage({ children, ...props }: SettingsPageProps) {
   };
 
   return (
-    <CardBaseTemplate>
+    <BodyBaseTemplate>
       <Modal
         title={"Instellingen opgeslagen"}
         open={modalOpenState}
@@ -71,27 +69,20 @@ export function SettingsPage({ children, ...props }: SettingsPageProps) {
       >
         <Body>
           <P>De instellingen zijn succesvol opgeslagen.</P>
+          <Button onClick={() => setModalOpenState(false)}>Sluiten</Button>
         </Body>
       </Modal>
-      <Body>
-        <Grid>
-          <Column span={12}>
-            <H2>Instellingen</H2>
-            <P>
-              Hier kun je instellingen aanpassen die van invloed zijn op de
-              applicatie.
-            </P>
-            <br />
-          </Column>
-        </Grid>
-        <Card>
-          <Form
-            fields={verkorteProcedureFormFields}
-            validateOnChange={true}
-            onSubmit={handleSubmitPatchArchiveConfig}
-          />
-        </Card>
-      </Body>
-    </CardBaseTemplate>
+      <H2>Instellingen</H2>
+      <P>
+        Hier kun je instellingen aanpassen die van invloed zijn op de
+        applicatie.
+      </P>
+      <br />
+      <Form
+        fields={verkorteProcedureFormFields}
+        validateOnChange={true}
+        onSubmit={handleSubmitPatchArchiveConfig}
+      />
+    </BodyBaseTemplate>
   );
 }
diff --git a/frontend/src/pages/settings/settings.action.ts b/frontend/src/pages/settings/settings.action.ts
@@ -1,7 +1,10 @@
 import { ActionFunctionArgs } from "react-router-dom";
 
 import { JsonValue, TypedAction } from "../../hooks";
-import { ArchiveConfiguration, patchArchiveConfig } from "../../lib/api/config";
+import {
+  ArchiveConfiguration,
+  patchArchiveConfiguration,
+} from "../../lib/api/config";
 
 export type UpdateSettingsAction<T = JsonValue> = TypedAction<
   "PATCH-ARCHIVE-CONFIG",
@@ -26,6 +29,6 @@ export async function settingsAction({ request, params }: ActionFunctionArgs) {
 async function patchArchiveConfigAction({ request }: ActionFunctionArgs) {
   const { payload } = await request.json();
   const _payload = payload as ArchiveConfiguration;
-  await patchArchiveConfig(_payload);
+  await patchArchiveConfiguration(_payload);
   return null;
 }
diff --git a/frontend/src/pages/settings/settings.loader.ts b/frontend/src/pages/settings/settings.loader.ts
@@ -1,6 +1,9 @@
 import { ActionFunctionArgs } from "react-router-dom";
 
-import { ArchiveConfiguration, getArchiveConfig } from "../../lib/api/config";
+import {
+  ArchiveConfiguration,
+  getArchiveConfiguration,
+} from "../../lib/api/config";
 import { ZaaktypeChoice, listZaaktypeChoices } from "../../lib/api/private";
 import { loginRequired } from "../../lib/auth/loaders";
 
@@ -11,7 +14,7 @@ export type SettingsContext = {
 
 export const settingsLoader = loginRequired(
   async ({ request }: ActionFunctionArgs): Promise<SettingsContext> => {
-    const archiveConfigPromise = getArchiveConfig();
+    const archiveConfigPromise = getArchiveConfiguration();
     const zaaktypeChoicesPromise = listZaaktypeChoices();
 
     const [archiveConfig, zaaktypeChoices] = await Promise.all([
