Fetch field definition data via AP

src/frontend/src/components/forms/ApiForm.tsx

@@ -1,5 +1,13 @@
 import { Modal } from '@mantine/core';
+import { Center, Loader, Stack, Text } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { useQuery } from '@tanstack/react-query';
+import { AxiosResponse } from 'axios';
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { useMemo } from 'react';
+
+import { api } from '../../App';
 
 /* Definition of the ApiForm field component.
  * - The 'name' attribute *must* be provided
@@ -18,6 +26,16 @@ export type ApiFormField = {
   errors?: string[];
 };
 
+/**
+ * Extract a list of field definitions from an API response.
+ * @param response : The API response to extract the field definitions from.
+ * @returns A list of field definitions.
+ */
+function extractFieldDefinitions(response: AxiosResponse): ApiFormField[] {
+  // TODO: [];
+  return [];
+}
+
 /**
  * An ApiForm component is a modal form which is rendered dynamically,
  * based on an API endpoint.
@@ -29,7 +47,9 @@ export type ApiFormField = {
  * @param onFormError : A callback function to call when the form is submitted with errors.
  */
 export function ApiForm({
+  name,
   url,
+  pk,
   title,
   fields,
   opened,
@@ -37,7 +57,9 @@ export function ApiForm({
   onFormSuccess,
   onFormError
 }: {
+  name: string;
   url: string;
+  pk?: number;
   title: string;
   fields: ApiFormField[];
   opened: boolean;
@@ -48,9 +70,47 @@ export function ApiForm({
   // Form state
   const form = useForm({});
 
+  // Form field definitions (via API)
+  const [fieldDefinitions, setFieldDefinitions] = useState<ApiFormField[]>([]);
+
+  const fetchFieldDefinitions = async () => {};
+
+  const definitionQuery = useQuery({
+    enabled: opened && !!url,
+    queryKey: ['form-definition', name, url, pk, fields],
+    queryFn: async () => {
+      let _url = url;
+
+      if (pk && pk > 0) {
+        _url += `${pk}/`;
+      }
+      console.log('Fetching form definition from API:', _url);
+
+      return api
+        .options(_url)
+        .then((response) => {
+          console.log('response:', response);
+          setFieldDefinitions(extractFieldDefinitions(response));
+          return response;
+        })
+        .catch((error) => {
+          console.error('error:', error);
+          setFieldDefinitions([]);
+        });
+    }
+  });
+
   return (
     <Modal opened={opened} onClose={onClose} title={title}>
-      Form data goes here
+      <Stack>
+        <Center>
+          {definitionQuery.isFetching && <Loader />}
+          Hello world
+          {definitionQuery.isSuccess && <Text>Success!</Text>}
+          {definitionQuery.isError && <Text>Error!</Text>}
+          {definitionQuery.isLoading && <Text>Loading...</Text>}
+        </Center>
+      </Stack>
     </Modal>
   );
 }

src/frontend/src/pages/Index/Home.tsx

@@ -3,13 +3,22 @@ import { Group } from '@mantine/core';
 import { Button } from '@mantine/core';
 import { useState } from 'react';
 
-import { ApiForm } from '../../components/forms/ApiForm';
+import { ApiForm, ApiFormField } from '../../components/forms/ApiForm';
 import { PlaceholderPill } from '../../components/items/Placeholder';
 import { StylishText } from '../../components/items/StylishText';
 
 export default function Home() {
   const [formOpened, setFormOpened] = useState(false);
 
+  const fields: ApiFormField[] = [
+    {
+      name: 'name'
+    },
+    {
+      name: 'description'
+    }
+  ];
+
   return (
     <>
       <Group>
@@ -19,7 +28,9 @@ export default function Home() {
         <PlaceholderPill />
       </Group>
       <ApiForm
+        name="part-edit"
         url="/part/1/"
+        fields={fields}
         title="Edit Part"
         opened={formOpened}
         onClose={() => setFormOpened(false)}