Post and put recipient

Author: magnurh-cx

packages/bygger-backend/src/routers/api/recipients/index.ts

@@ -5,5 +5,7 @@ const recipientsRouter = Router();
 
 recipientsRouter.get('/', recipients.getAll);
 recipientsRouter.get('/:recipientId', recipients.get);
+recipientsRouter.post('/', recipients.post);
+recipientsRouter.put('/:recipientId', recipients.put);
 
 export default recipientsRouter;

packages/bygger-backend/src/routers/api/recipients/recipients.ts

@@ -20,8 +20,29 @@ const get: RequestHandler = async (req, res, next) => {
   }
 };
 
+const post: RequestHandler = async (req, res, next) => {
+  try {
+    const recipient = await recipientService.post(req.body);
+    res.json(recipient);
+  } catch (error) {
+    next(error);
+  }
+};
+
+const put: RequestHandler = async (req, res, next) => {
+  const { recipientId } = req.params;
+  try {
+    const recipient = await recipientService.put(recipientId, req.body);
+    res.json(recipient);
+  } catch (error) {
+    next(error);
+  }
+};
+
 const recipients = {
   getAll,
   get,
+  post,
+  put,
 };
 export default recipients;

packages/bygger-backend/src/services/RecipientService.ts

@@ -23,4 +23,22 @@ export class RecipientService {
     });
     return response.data as Recipient;
   }
+
+  async post(recipient: Recipient): Promise<Recipient> {
+    const response = await fetchWithErrorHandling(`${this.formsApiUrl}${this.recipientsUrl}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(recipient),
+    });
+    return response.data as Recipient;
+  }
+
+  async put(recipientId: string, recipient: Recipient): Promise<Recipient> {
+    const response = await fetchWithErrorHandling(`${this.formsApiUrl}${this.recipientsUrl}/${recipientId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(recipient),
+    });
+    return response.data as Recipient;
+  }
 }

packages/bygger/src/context/recipients/RecipientsContext.tsx

@@ -7,12 +7,14 @@ interface RecipientsContextValues {
   recipients: Recipient[];
   newRecipient?: Partial<Recipient>;
   addNewRecipient: () => void;
+  saveRecipient: (recipient: Recipient) => Promise<Recipient | undefined>;
 }
 
 const defaultContextValue = {
   isReady: false,
   recipients: [],
   addNewRecipient: () => {},
+  saveRecipient: (_recipient) => Promise.reject(),
 };
 
 interface RecipientState {
@@ -38,6 +40,31 @@ const RecipientsProvider = ({ children }: { children: ReactNode }) => {
     }
   }, [recipientState.isReady, loadRecipients]);
 
+  const saveRecipient = async (changedRecipient: Recipient) => {
+    if (changedRecipient.recipientId === 'new') {
+      const { recipientId, ...newRecipient } = changedRecipient;
+      const recipient = await recipientsApi.post(newRecipient);
+      console.log('Result', recipient);
+      if (recipient) {
+        setRecipientState((state) => ({ ...state, recipients: [...state.recipients, recipient], new: undefined }));
+      }
+      return recipient;
+    }
+
+    const recipient = await recipientsApi.put(changedRecipient);
+    if (recipient) {
+      setRecipientState((state) => {
+        const indexOfExisting = state.recipients.findIndex(
+          (existing) => existing.recipientId === recipient.recipientId,
+        );
+        const newRecipients = [...state.recipients];
+        newRecipients[indexOfExisting] = recipient;
+        return { ...state, recipients: newRecipients };
+      });
+    }
+    return recipient;
+  };
+
   const addNewRecipient = () => {
     if (recipientState.new === undefined) {
       setRecipientState((state) => ({ ...state, new: { recipientId: 'new' } }));
@@ -49,6 +76,7 @@ const RecipientsProvider = ({ children }: { children: ReactNode }) => {
     recipients: recipientState.recipients,
     newRecipient: recipientState.new,
     addNewRecipient,
+    saveRecipient,
   };
   return <RecipientsContext.Provider value={value}>{children}</RecipientsContext.Provider>;
 };

packages/bygger/src/hooks/useFormsApi.ts

@@ -16,8 +16,29 @@ const useFormsApi = () => {
     }
   };
 
+  const postRecipient = async (recipient: Recipient): Promise<Recipient | undefined> => {
+    try {
+      return await http.post<Recipient>('/api/recipients', recipient);
+    } catch (error) {
+      const message = (error as Error)?.message;
+      feedbackEmit.error(`Feil ved oppretting av ny mottaker. ${message}`);
+    }
+  };
+
+  const putRecipient = async (recipient: Recipient): Promise<Recipient | undefined> => {
+    const { recipientId, ...updatedRecipient } = recipient;
+    try {
+      return await http.put<Recipient>(`/api/recipients/${recipientId}`, updatedRecipient);
+    } catch (error) {
+      const message = (error as Error)?.message;
+      feedbackEmit.error(`Feil ved oppdatering av mottaker. ${message}`);
+    }
+  };
+
   const recipientsApi = {
     getAll: getAllRecipients,
+    post: postRecipient,
+    put: putRecipient,
   };
 
   return {

packages/bygger/src/recipients/RecipientButtonRow.tsx

@@ -3,6 +3,7 @@ import { Button, HStack, Table, TextField } from '@navikt/ds-react';
 import { makeStyles } from '@navikt/skjemadigitalisering-shared-components';
 import { Recipient } from '@navikt/skjemadigitalisering-shared-domain';
 import { useState } from 'react';
+import { useRecipients } from '../context/recipients/RecipientsContext';
 
 const useStyles = makeStyles({
   editRow: {
@@ -22,8 +23,10 @@ const useStyles = makeStyles({
 type ViewState = 'display' | 'editing';
 
 const RecipientRow = ({ recipient }: { recipient: Partial<Recipient> }) => {
+  const { saveRecipient } = useRecipients();
   const { recipientId } = recipient;
   const [viewState, setViewState] = useState<ViewState>(recipientId === 'new' ? 'editing' : 'display');
+  const [isSaving, setIsSaving] = useState<boolean>(false);
   const [value, setValue] = useState(recipient);
   const styles = useStyles();
 
@@ -69,7 +72,7 @@ const RecipientRow = ({ recipient }: { recipient: Partial<Recipient> }) => {
               label="Enhetsnavn"
               hideLabel
               size="small"
-              value={value.name}
+              defaultValue={value.name}
               onChange={(event) => updateValueProperty('name', event.currentTarget.value)}
             />
           </Table.DataCell>
@@ -78,7 +81,7 @@ const RecipientRow = ({ recipient }: { recipient: Partial<Recipient> }) => {
               label="Postboksadresse"
               hideLabel
               size="small"
-              value={value.poBoxAddress}
+              defaultValue={value.poBoxAddress}
               onChange={(event) => updateValueProperty('poBoxAddress', event.currentTarget.value)}
             />
           </Table.DataCell>
@@ -87,7 +90,7 @@ const RecipientRow = ({ recipient }: { recipient: Partial<Recipient> }) => {
               label="Postnr."
               hideLabel
               size="small"
-              value={value.postalCode}
+              defaultValue={value.postalCode}
               onChange={(event) => updateValueProperty('postalCode', event.currentTarget.value)}
             />
           </Table.DataCell>
@@ -96,7 +99,7 @@ const RecipientRow = ({ recipient }: { recipient: Partial<Recipient> }) => {
               label="Poststed"
               hideLabel
               size="small"
-              value={value.postalName}
+              defaultValue={value.postalName}
               onChange={(event) => updateValueProperty('postalName', event.currentTarget.value)}
             />
           </Table.DataCell>
@@ -106,9 +109,14 @@ const RecipientRow = ({ recipient }: { recipient: Partial<Recipient> }) => {
             <HStack gap="4" justify="end">
               <Button
                 size="small"
-                onClick={() => {
+                loading={isSaving}
+                onClick={async () => {
                   console.log(value);
-                  setViewState('display');
+                  setIsSaving(true);
+                  // FIXME
+                  const result = await saveRecipient(value as Recipient);
+                  setIsSaving(false);
+                  if (result) setViewState('display');
                 }}
               >
                 Lagre