From fdad6596d2a5361311995a53bea9d9f81f479684 Mon Sep 17 00:00:00 2001
From: jogt <jotjernshaugen@gmail.com>
Date: Thu, 5 Oct 2023 13:06:59 +0200
Subject: [PATCH] feat: add option to store information in localstorage

---
 src/components/Areas/Submit/index.tsx |  4 ++-
 src/components/Main.tsx               | 37 +++++++++++++++++++++++++--
 src/components/SaveInfoPrompt.tsx     | 17 ++++++++++++
 src/form/state.ts                     |  2 ++
 4 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 src/components/SaveInfoPrompt.tsx

diff --git a/src/components/Areas/Submit/index.tsx b/src/components/Areas/Submit/index.tsx
index ccb6277..fddec6e 100644
--- a/src/components/Areas/Submit/index.tsx
+++ b/src/components/Areas/Submit/index.tsx
@@ -32,7 +32,7 @@ const selectErrorCount = (state: State): number => {
   return errors.length;
 };
 
-export const Submit = () => {
+export const Submit = (props: { onSubmit?: () => void }) => {
   const dispatch = useDispatch();
   const errorCount = useSelector(selectErrorCount);
   const isValid = errorCount === 0;
@@ -59,6 +59,7 @@ export const Submit = () => {
   const download = async () => {
     handleInteraction();
     if (isValid) {
+      props.onSubmit?.();
       dispatch(downloadFormAction());
     }
   };
@@ -66,6 +67,7 @@ export const Submit = () => {
   const send = async () => {
     handleInteraction();
     if (isValid) {
+      props.onSubmit?.();
       dispatch(emailFormAction());
     }
   };
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index 3cd8db5..a0444bc 100755
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { colors } from 'constants/colors';
 
@@ -8,8 +8,40 @@ import { BankInfo } from './Areas/Bank';
 import { ExtraInfo } from './Areas/Extra';
 import { Submit } from './Areas/Submit';
 import { UserInfo } from './Areas/User';
+import SaveInfoPrompt from './SaveInfoPrompt';
+import { useDispatch, useSelector } from 'react-redux';
+import { formDataUpdated } from '../redux/reducers/formReducer';
 
 export const Main = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const formData = localStorage.getItem('formData');
+    if (formData) {
+      dispatch(formDataUpdated(JSON.parse(formData)));
+    }
+  }, [dispatch]);
+
+  // On submit, save form data to local storage
+  const form = useSelector((state) => ({
+    fullname: state.form.fullname,
+    email: state.form.email,
+    type: state.form.type,
+    intent: state.form.intent,
+    cardDetails: state.form.cardDetails,
+    account: state.form.account,
+    committee: state.form.committee,
+  }));
+
+  const saveInfo = useSelector((state) => state.form.saveInfo || false);
+  const onFormSubmit = () => {
+    if (saveInfo) {
+      localStorage.setItem('formData', JSON.stringify(form));
+    } else {
+      localStorage.removeItem('formData');
+    }
+  };
+
   return (
     <main>
       <Area header="Personinformasjon">
@@ -25,7 +57,8 @@ export const Main = () => {
         <Attachments />
       </Area>
       <Area header="">
-        <Submit />
+        <SaveInfoPrompt />
+        <Submit onSubmit={onFormSubmit} />
       </Area>
     </main>
   );
diff --git a/src/components/SaveInfoPrompt.tsx b/src/components/SaveInfoPrompt.tsx
new file mode 100644
index 0000000..6102feb
--- /dev/null
+++ b/src/components/SaveInfoPrompt.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Checkbox } from '@dotkomonline/design-system';
+import { useDispatch } from '../redux/hooks';
+import { formDataUpdated } from '../redux/reducers/formReducer';
+import { useSelector } from 'react-redux';
+
+export default function SaveInfoPrompt() {
+  const dispatch = useDispatch();
+  const value = useSelector((state) => state.form.saveInfo || false);
+
+  return (
+    <Checkbox
+      label="Lagre informasjon til neste gang?"
+      onChange={() => dispatch(formDataUpdated({ saveInfo: !value }))}
+    />
+  );
+}
diff --git a/src/form/state.ts b/src/form/state.ts
index e7b8101..427ed3f 100644
--- a/src/form/state.ts
+++ b/src/form/state.ts
@@ -19,6 +19,7 @@ export interface IState {
   comments: string | null;
   attachments: File[];
   mode: SendMode;
+  saveInfo: boolean;
 }
 
 export const INITIAL_STATE: IState = {
@@ -34,6 +35,7 @@ export const INITIAL_STATE: IState = {
   comments: null,
   attachments: [],
   mode: 'download',
+  saveInfo: false,
 };
 
 export interface IDeserializedState {