persist personal-information changes and reload (#117)

Author: Tibor Szakmany

packages/cmsui/routes/personal-information.tsx

@@ -1,13 +1,17 @@
 import {
+  redirect,
   RouterContextProvider,
+  useFetcher,
   useLoaderData,
+  type ActionFunctionArgs,
   type LoaderFunctionArgs,
 } from 'react-router';
 import { requireAuthCookie } from '@plone/react-router';
 import {
   ploneClientContext,
   ploneUserContext,
 } from '@plone/aurora/app/middleware.server';
+import { Button } from '@plone/components/quanta';
 import { useAppForm } from '../components/Form/Form';
 
 export async function loader({
@@ -21,15 +25,60 @@ export async function loader({
   return { user, userschema };
 }
 
+export async function action({
+  request,
+  context,
+}: ActionFunctionArgs<RouterContextProvider>) {
+  await requireAuthCookie(request);
+
+  const data = await request.json();
+  const cli = context.get(ploneClientContext);
+  const user = context.get(ploneUserContext);
+
+  if (user?.id) {
+    await cli.updateUser({ id: user.id, data });
+  }
+
+  return redirect('/@@personal-information');
+}
+
+type LoaderData = Awaited<ReturnType<typeof loader>>;
+
 export default function PersonalInformation() {
   const { user, userschema } = useLoaderData<typeof loader>();
+  // reload persisted values
+  return (
+    <PersonalInformationForm
+      key={JSON.stringify(user)}
+      user={user}
+      userschema={userschema}
+    />
+  );
+}
+
+function PersonalInformationForm({
+  user,
+  userschema,
+}: {
+  user: LoaderData['user'];
+  userschema: LoaderData['userschema'];
+}) {
   const properties = userschema.properties as Record<string, any>;
+  const fetcher = useFetcher();
 
   const form = useAppForm({
     defaultValues: (user ?? {}) as Record<string, unknown>,
     onSubmit: async ({ value }) => {
-      // eslint-disable-next-line no-console
-      console.log('personal-information submit (not wired yet)', value);
+      // skip `portrait`
+      const data: Record<string, string> = {};
+      userschema.fieldsets.forEach((fieldset) =>
+        fieldset.fields.forEach((field) => {
+          if (field === 'portrait') return;
+          const v = (value as Record<string, unknown>)[field];
+          if (typeof v === 'string' && v !== '') data[field] = v;
+        }),
+      );
+      fetcher.submit(data, { method: 'post', encType: 'application/json' });
     },
   });
 
@@ -59,6 +108,14 @@ export default function PersonalInformation() {
             ))}
           </div>
         ))}
+        <Button
+          type="submit"
+          variant="primary"
+          accent
+          onPress={() => form.handleSubmit()}
+        >
+          Save
+        </Button>
       </form>
     </>
   );