✨ - feat: pr fixes

Xaohs · svenvandescheur · commit 1ff47443962f · 2024-07-26T12:38:31.000+02:00
diff --git a/frontend/src/lib/api/config.ts b/frontend/src/lib/api/config.ts
@@ -1,35 +1,33 @@
 import { request } from "./request";
 
-export type GetArchiveConfigReturn = {
+export type ArchiveConfiguration = {
   zaaktypesShortProcess: string[]; // List of zaaktypes that should use the short process
 };
 /**
  * API call to get the archive configuration
- * @returns {Promise<GetArchiveConfigReturn>} The archive configuration
+ * @returns {Promise<ArchiveConfiguration>} The archive configuration
  * @throws {Error} If the request fails
  * @example
  * const archiveConfig = await getArchiveConfig();
  * console.log(archiveConfig);
  */
-export async function getArchiveConfig(): Promise<GetArchiveConfigReturn> {
+export async function getArchiveConfig(): Promise<ArchiveConfiguration> {
   const response = await request("GET", "/archive-config");
-  const promise: Promise<GetArchiveConfigReturn> = response.json();
+  const promise: Promise<ArchiveConfiguration> = response.json();
   return promise;
 }
 
-export type PatchArchiveConfigPayload = GetArchiveConfigReturn;
-export type PatchArchiveConfigReturn = void;
 /**
  * API call to PATCH the archive configuration
- * @param {PatchArchiveConfigPayload} archiveConfig The archive configuration
- * @returns {Promise<PatchArchiveConfigReturn>} The archive configuration
+ * @param {ArchiveConfiguration } archiveConfig The archive configuration
+ * @returns {Promise<void>} The archive configuration
  * @throws {Error} If the request fails
  * @example
  * await patchArchiveConfig(archiveConfig);
  * console.log("Archive configuration updated");
  */
 export async function patchArchiveConfig(
-  archiveConfig: PatchArchiveConfigPayload,
+  archiveConfig: ArchiveConfiguration,
 ): Promise<void> {
   const response = await request(
     "PATCH",
diff --git a/frontend/src/pages/settings/Settings.css b/frontend/src/pages/settings/Settings.css
@@ -1,11 +1,3 @@
 .SettingsPage {
   /* Rules here. */
 }
-
-.mykn-body {
-  width: 100%;
-}
-
-.mykn-card {
-  padding: 20px;
-}
diff --git a/frontend/src/pages/settings/Settings.stories.tsx b/frontend/src/pages/settings/Settings.stories.tsx
@@ -12,8 +12,21 @@ const meta: Meta<typeof SettingsPage> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const FIXTURE = {
+  zaaktypesShortProcess: ["1", "2", "3"],
+  zaaktypeChoices: [
+    { value: 1, label: "Zaaktype 1" },
+    { value: 2, label: "Zaaktype 2" },
+    { value: 3, label: "Zaaktype 3" },
+  ],
+};
+
 export const settingsPage: Story = {
-  args: {
-    children: "The quick brown fox jumps over the lazy dog.",
+  parameters: {
+    reactRouterDecorator: {
+      route: {
+        loader: async () => FIXTURE,
+      },
+    },
   },
 };
diff --git a/frontend/src/pages/settings/Settings.tsx b/frontend/src/pages/settings/Settings.tsx
@@ -1,21 +1,21 @@
 import {
-  BaseTemplate,
   Body,
+  Card,
+  CardBaseTemplate,
   Column,
   Form,
   FormField,
   Grid,
-  H1,
+  H2,
   Modal,
   P,
   SerializedFormData,
 } from "@maykin-ui/admin-ui";
-import { FormEvent, Fragment, useState } from "react";
+import { FormEvent, useState } from "react";
 import { useLoaderData } from "react-router-dom";
 
 import { useSubmitAction } from "../../hooks";
 import "./Settings.css";
-import { SettingsSection, SettingsSectionProps } from "./components";
 import { UpdateSettingsAction } from "./settings.action";
 import { SettingsContext } from "./settings.loader";
 
@@ -61,23 +61,8 @@ export function SettingsPage({ children, ...props }: SettingsPageProps) {
     setModalOpenState(true);
   };
 
-  const settingsArray: SettingsSectionProps[] = [
-    {
-      settingTitle: "Verkorte procedure",
-      settingDescription:
-        "Pas hier de zaaktypes aan die in aanmerking komen voor de verkorte procedure.",
-      children: (
-        <Form
-          fields={verkorteProcedureFormFields}
-          validateOnChange={true}
-          onSubmit={handleSubmitPatchArchiveConfig}
-        />
-      ),
-    },
-  ];
-
   return (
-    <BaseTemplate>
+    <CardBaseTemplate>
       <Modal
         title={"Instellingen opgeslagen"}
         open={modalOpenState}
@@ -91,25 +76,22 @@ export function SettingsPage({ children, ...props }: SettingsPageProps) {
       <Body>
         <Grid>
           <Column span={12}>
-            <H1>Instellingen</H1>
+            <H2>Instellingen</H2>
             <P>
               Hier kun je instellingen aanpassen die van invloed zijn op de
               applicatie.
             </P>
             <br />
-            <br />
           </Column>
         </Grid>
-        <Grid cols={4}>
-          {settingsArray.map((setting, index) => (
-            <Fragment key={index}>
-              <SettingsSection {...setting} />
-              {/* TODO: Can add a Separator here once we have more setting entries. Currently we don't have a Separator component. For example: */}
-              {/* {index < settingsArray.length - 1 && <Separator />} */}
-            </Fragment>
-          ))}
-        </Grid>
+        <Card>
+          <Form
+            fields={verkorteProcedureFormFields}
+            validateOnChange={true}
+            onSubmit={handleSubmitPatchArchiveConfig}
+          />
+        </Card>
       </Body>
-    </BaseTemplate>
+    </CardBaseTemplate>
   );
 }
diff --git a/frontend/src/pages/settings/components/SettingsSection.tsx b/frontend/src/pages/settings/components/SettingsSection.tsx
diff --git a/frontend/src/pages/settings/components/index.ts b/frontend/src/pages/settings/components/index.ts
diff --git a/frontend/src/pages/settings/index.ts b/frontend/src/pages/settings/index.ts
@@ -1,4 +1,3 @@
-export * from "./components";
 export * from "./Settings";
 export * from "./settings.action";
 export * from "./settings.loader";
diff --git a/frontend/src/pages/settings/settings.action.ts b/frontend/src/pages/settings/settings.action.ts
@@ -1,10 +1,7 @@
 import { ActionFunctionArgs } from "react-router-dom";
 
 import { JsonValue, TypedAction } from "../../hooks";
-import {
-  PatchArchiveConfigPayload,
-  patchArchiveConfig,
-} from "../../lib/api/config";
+import { ArchiveConfiguration, patchArchiveConfig } from "../../lib/api/config";
 
 export type UpdateSettingsAction<T = JsonValue> = TypedAction<
   "PATCH-ARCHIVE-CONFIG",
@@ -28,7 +25,7 @@ export async function settingsAction({ request, params }: ActionFunctionArgs) {
 
 async function patchArchiveConfigAction({ request }: ActionFunctionArgs) {
   const { payload } = await request.json();
-  const _payload = payload as PatchArchiveConfigPayload;
+  const _payload = payload as ArchiveConfiguration;
   await patchArchiveConfig(_payload);
   return null;
 }
diff --git a/frontend/src/pages/settings/settings.loader.ts b/frontend/src/pages/settings/settings.loader.ts
@@ -1,11 +1,11 @@
 import { ActionFunctionArgs } from "react-router-dom";
 
-import { GetArchiveConfigReturn, getArchiveConfig } from "../../lib/api/config";
+import { ArchiveConfiguration, getArchiveConfig } from "../../lib/api/config";
 import { ZaaktypeChoice, listZaaktypeChoices } from "../../lib/api/private";
 import { loginRequired } from "../../lib/auth/loaders";
 
 export type SettingsContext = {
-  zaaktypesShortProcess: GetArchiveConfigReturn["zaaktypesShortProcess"];
+  zaaktypesShortProcess: ArchiveConfiguration["zaaktypesShortProcess"];
   zaaktypeChoices: ZaaktypeChoice[];
 };
 
