Laster ned midlertidig lagret data

Author: igorweber

components/ActivitySelector.tsx

@@ -3,51 +3,50 @@ import { ChangeEvent, Dispatch, SetStateAction, useEffect, useState } from "reac
 import { Button, Heading, Modal, Panel, TextField } from "@navikt/ds-react";
 import { addDays, format } from "date-fns";
 import Spacer from "./Spacer";
+import { ActivityType, SavedDates } from "../models/Data";
 
 export type ActivitySelectorProps = {
   startDate: Date;
   endDate: Date;
-  savedDates: {
-    [key: number]: { type: string, hours: number };
-  };
-  setSavedDates: Dispatch<SetStateAction<{ [p: number]: { type: string, hours: number } }>>;
+  savedDates: SavedDates;
+  setSavedDates: Dispatch<SetStateAction<{ [p: number]: { type: ActivityType | null, hours: number | null } }>>;
 }
 
 export default function ActivitySelector(props: ActivitySelectorProps) {
 
   const [open, setOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-  const [selectedType, setSelectedType] = useState<string>('');
-  const [selectedHours, setSelectedHours] = useState<string | null>(null);
+  const [selectedType, setSelectedType] = useState<ActivityType | null>(null);
+  const [selectedHours, setSelectedHours] = useState<number | null>(null);
   const { startDate, savedDates, setSavedDates } = props;
 
   useEffect(() => {
     Modal.setAppElement("#__next");
   }, []);
 
   const dateSelected = (date: Date) => {
-    setSelectedType(savedDates[date.getTime()]?.type || '');
-    setSelectedHours(savedDates[date.getTime()]?.hours.toString());
+    setSelectedType(savedDates[date.getTime()]?.type);
+    setSelectedHours(savedDates[date.getTime()]?.hours);
     setSelectedDate(date);
     setOpen(true);
   }
 
-  const dateTypeSelected = (type: string) => {
+  const dateTypeSelected = (type: ActivityType | null) => {
     setSelectedType(type);
-    setSelectedHours("0");
+    setSelectedHours(0);
   }
 
   const updateHours = (event: ChangeEvent<HTMLInputElement>) => {
-    setSelectedHours(event.target.value);
+    setSelectedHours(Number.parseFloat(event.target.value));
   }
 
   const saveDate = () => {
     if (selectedDate == null) {
       return;
     }
 
-    const hoursNUmber = Number(selectedHours);
-    if (isNaN(+hoursNUmber) || hoursNUmber < 0 || hoursNUmber > 24) {
+    const hoursNumber = Number(selectedHours);
+    if (isNaN(+hoursNumber) || hoursNumber < 0 || hoursNumber > 24) {
       return;
     }
 
@@ -56,7 +55,7 @@ export default function ActivitySelector(props: ActivitySelectorProps) {
 
     // Delete object if its type is empty
     // Else save
-    if (selectedType == '') {
+    if (selectedType == null) {
       const state = { ...savedDates };
       delete state[key];
       setSavedDates(state);
@@ -65,7 +64,7 @@ export default function ActivitySelector(props: ActivitySelectorProps) {
         ...savedDates,
         [key]: {
           type: selectedType,
-          hours: hoursNUmber
+          hours: hoursNumber
         }
       });
     }
@@ -81,13 +80,13 @@ export default function ActivitySelector(props: ActivitySelectorProps) {
     const currentData = savedDates[currentDate.getTime()];
 
     let addClass = styles.none;
-    if (currentData?.type == 'work') addClass = styles.work;
-    else if (currentData?.type == 'illness') addClass = styles.illness;
-    else if (currentData?.type == 'measures') addClass = styles.measures;
-    else if (currentData?.type == 'vacation') addClass = styles.vacation;
+    if (currentData?.type == ActivityType.WORK) addClass = styles.work;
+    else if (currentData?.type == ActivityType.ILLNESS) addClass = styles.illness;
+    else if (currentData?.type == ActivityType.MEASURES) addClass = styles.measures;
+    else if (currentData?.type == ActivityType.VACATION) addClass = styles.vacation;
 
     let hours = <></>;
-    if (currentData?.type == 'work') {
+    if (currentData?.type == ActivityType.WORK) {
       hours = <div className={styles.workHours}>{currentData.hours}t</div>;
     }
 
@@ -118,10 +117,10 @@ export default function ActivitySelector(props: ActivitySelectorProps) {
   for (const key in savedDates) {
     const currentData = savedDates[key];
 
-    if (currentData.type == 'work') workHours += currentData.hours;
-    else if (currentData.type == 'illness') illnessDays += 1;
-    else if (currentData.type == 'measures') measuresDays += 1;
-    else if (currentData.type == 'vacation') vacationDays += 1;
+    if (currentData.type == ActivityType.WORK) workHours += (currentData.hours || 0);
+    else if (currentData.type == ActivityType.ILLNESS) illnessDays += 1;
+    else if (currentData.type == ActivityType.MEASURES) measuresDays += 1;
+    else if (currentData.type == ActivityType.VACATION) vacationDays += 1;
   }
 
   let summaryWork = <></>
@@ -201,42 +200,42 @@ export default function ActivitySelector(props: ActivitySelectorProps) {
             <div>
               <button
                 type="button"
-                className={styles.activityTypeButton + ' ' + styles.work + ' ' + ((selectedType == 'work') ? styles.selected : '')}
-                onClick={() => dateTypeSelected('work')}>
+                className={styles.activityTypeButton + ' ' + styles.work + ' ' + ((selectedType == ActivityType.WORK) ? styles.selected : '')}
+                onClick={() => dateTypeSelected(ActivityType.WORK)}>
                 Arbeid
               </button>
               {
-                (selectedType == 'work') ? hoursInput : ''
+                (selectedType == ActivityType.WORK) ? hoursInput : ''
               }
             </div>
             <div>
               <button
                 type="button"
-                className={styles.activityTypeButton + ' ' + styles.illness + ' ' + ((selectedType == 'illness') ? styles.selected : '')}
-                onClick={() => dateTypeSelected('illness')}>
+                className={styles.activityTypeButton + ' ' + styles.illness + ' ' + ((selectedType == ActivityType.ILLNESS) ? styles.selected : '')}
+                onClick={() => dateTypeSelected(ActivityType.ILLNESS)}>
                 Syk
               </button>
             </div>
             <div>
               <button
                 type="button"
-                className={styles.activityTypeButton + ' ' + styles.measures + ' ' + ((selectedType == 'measures') ? styles.selected : '')}
-                onClick={() => dateTypeSelected('measures')}>
+                className={styles.activityTypeButton + ' ' + styles.measures + ' ' + ((selectedType == ActivityType.MEASURES) ? styles.selected : '')}
+                onClick={() => dateTypeSelected(ActivityType.MEASURES)}>
                 Tiltak
               </button>
             </div>
             <div>
               <button
-                className={styles.activityTypeButton + ' ' + styles.vacation + ' ' + ((selectedType == 'vacation') ? styles.selected : '')}
-                onClick={() => dateTypeSelected('vacation')}>
+                className={styles.activityTypeButton + ' ' + styles.vacation + ' ' + ((selectedType == ActivityType.VACATION) ? styles.selected : '')}
+                onClick={() => dateTypeSelected(ActivityType.VACATION)}>
                 Fravær/ferie
               </button>
             </div>
             <div>
               <button
                 type="button"
-                className={styles.activityTypeButton + ' ' + styles.none + ' ' + ((selectedType == '') ? styles.selected : '')}
-                onClick={() => dateTypeSelected('')}>
+                className={styles.activityTypeButton + ' ' + styles.none + ' ' + ((selectedType == null) ? styles.selected : '')}
+                onClick={() => dateTypeSelected(null)}>
                 Ingenting
               </button>
             </div>

models/Data.ts

@@ -0,0 +1,42 @@
+export type Data = {
+  id: string;
+  questionWork: boolean | null;
+  questionMeasures: boolean | null;
+  questionIllness: boolean | null;
+  questionVacation: boolean | null;
+  days: Day[];
+  questionProceed: boolean | null;
+}
+
+export type Day = {
+  date: Date;
+  type: ActivityType;
+  hours: number | null;
+}
+
+export type LoadedData = {
+  id: string;
+  questionWork: boolean | null;
+  questionMeasures: boolean | null;
+  questionIllness: boolean | null;
+  questionVacation: boolean | null;
+  days: LoadedDay[];
+  questionProceed: boolean | null;
+}
+
+export type LoadedDay = {
+  date: string;
+  type: string;
+  hours: number | null;
+}
+
+export enum ActivityType {
+  WORK,
+  ILLNESS,
+  MEASURES,
+  VACATION
+}
+
+export type SavedDates = {
+  [key: number]: { type: ActivityType, hours: number | null };
+}

src/pages/form.tsx

@@ -9,6 +9,12 @@ import Receipt from "../../components/Receipt";
 import CancelButton from "../../components/CancelButton";
 import { format, getISOWeek } from "date-fns";
 import { Dispatch, FormEventHandler, SetStateAction, useState } from "react";
+import { ActivityType, Data, Day, LoadedData, SavedDates } from "../../models/Data";
+
+type InitialState = {
+  currentId: string;
+  loadedData: LoadedData;
+}
 
 export type CommonFormProps = {
   startDate: Date;
@@ -21,10 +27,8 @@ export type CommonFormProps = {
   setQuestionIllness: Dispatch<SetStateAction<boolean | null>>;
   questionVacation: boolean | null;
   setQuestionVacation: Dispatch<SetStateAction<boolean | null>>;
-  savedDates: {
-    [key: number]: { type: string, hours: number };
-  };
-  setSavedDates: Dispatch<SetStateAction<{ [p: number]: { type: string, hours: number } }>>;
+  savedDates: SavedDates;
+  setSavedDates: Dispatch<SetStateAction<SavedDates>>;
   questionProceed: boolean | null;
   setQuestionProceed: Dispatch<SetStateAction<boolean | null>>;
   questionConsent: boolean;
@@ -36,30 +40,69 @@ export type CommonFormProps = {
   error: string;
 }
 
-export default function Page() {
+export async function getServerSideProps() {
+  // TODO: Get ID from the earliest meldekort and set it as currentId
+  const currentId = "5";
+
+  // Default values for initial state
+  let loadedData: LoadedData = {
+    id: currentId,
+    questionWork: null,
+    questionMeasures: null,
+    questionIllness: null,
+    questionVacation: null,
+    days: [],
+    questionProceed: null
+  }
 
-  // JavaScript Dates are internally in UTC
-  // We have to add time (12:00) so as the date itself is not changed when converted from/to CET
-  const startDate = new Date(2022, 11, 5, 12, 0);
-  const endDate = new Date(2022, 11, 18, 12, 0);
+  const response = await fetch(process.env.DP_RAPP_API_URL + '/api/v1/get/' + currentId);
+  if (response.ok) {
+    loadedData = await response.json();
+  }
 
-  const startDateStr = format(startDate, "dd.MM.yy");
-  const endDateStr = format(endDate, "dd.MM.yy");
+  return {
+    props: {
+      currentId,
+      loadedData
+    },
+  };
+}
 
-  const maxStep = 4;
+export default function Page(props: InitialState) {
 
+  // Service variables
+  const maxStep = 4;
   const [currentStep, setCurrentStep] = useState<number>(1);
   const [showLoader, setShowLoader] = useState<boolean>(false);
   const [showReceipt, setShowReceipt] = useState<boolean>(false);
-  const [questionWork, setQuestionWork] = useState<boolean | null>(null);
-  const [questionMeasures, setQuestionMeasures] = useState<boolean | null>(null);
-  const [questionIllness, setQuestionIllness] = useState<boolean | null>(null);
-  const [questionVacation, setQuestionVacation] = useState<boolean | null>(null);
-  const [savedDates, setSavedDates] = useState<{ [key: number]: { type: string, hours: number } }>({});
-  const [questionProceed, setQuestionProceed] = useState<boolean | null>(null);
-  const [questionConsent, setQuestionConsent] = useState<boolean>(false);
   const [error, setError] = useState<string>('');
 
+  const { currentId, loadedData } = props;
+
+  // Use loaded data as initial state
+  const loadedSavedDates: SavedDates = {}
+  loadedData?.days.forEach((day) => {
+    // @ts-ignore
+    loadedSavedDates[Date.parse(day.date + " 12:00:00")] = { type: ActivityType[day.type], hours: day.hours }
+  });
+
+  const [questionWork, setQuestionWork] = useState<boolean | null>(loadedData.questionWork);
+  const [questionMeasures, setQuestionMeasures] = useState<boolean | null>(loadedData.questionMeasures);
+  const [questionIllness, setQuestionIllness] = useState<boolean | null>(loadedData.questionIllness);
+  const [questionVacation, setQuestionVacation] = useState<boolean | null>(loadedData.questionVacation);
+  const [savedDates, setSavedDates] = useState<SavedDates>(loadedSavedDates);
+  const [questionProceed, setQuestionProceed] = useState<boolean | null>(loadedData.questionProceed);
+  const [questionConsent, setQuestionConsent] = useState<boolean>(false); // Always false initially, user must check it every time
+
+  // TODO: Get dates from the earliest meldekort and use these dates
+  // JavaScript Dates are internally in UTC
+  // We have to add time (12:00) so as the date itself is not changed when converted from/to CET
+  const startDate = new Date(2022, 11, 5, 12, 0);
+  const endDate = new Date(2022, 11, 18, 12, 0);
+
+  const startDateStr = format(startDate, "dd.MM.yy");
+  const endDateStr = format(endDate, "dd.MM.yy");
+
   const prevStep = () => {
     if (currentStep > 1) {
       setCurrentStep(currentStep - 1);
@@ -80,7 +123,7 @@ export default function Page() {
     setShowLoader(true);
 
     // Prepare dates
-    const days = [];
+    const days: Day[] = [];
     for (const key in savedDates) {
       days.push({
         date: new Date(+key),
@@ -90,7 +133,8 @@ export default function Page() {
     }
 
     // Collect data in one object
-    const data = {
+    const data: Data = {
+      id: currentId,
       questionWork,
       questionMeasures,
       questionIllness,