Moved logic to salaryandbenefits

src/salaryAndBenefits/SalaryAndBenefits.tsx

@@ -1,35 +1,78 @@
-"use client"
+"use client";
 
 import styles from "./salaryAndBenefits.module.css";
 import Text from "src/components/text/Text";
 import SalaryCalculator from "./components/salaryCalculator/SalaryCalculator";
 import { useState } from "react";
-import { calculatePension } from "./utils/calculateSalary";
+import {
+  calculatePension,
+  calculateSalary,
+  maxExperience,
+} from "./utils/calculateSalary";
 import { SalaryAndBenefitsPage } from "studio/lib/payloads/salaryAndBenefits";
 import { RichText } from "src/components/richText/RichText";
 
 interface SalaryAndBenefitsProps {
   salaryAndBenefits: SalaryAndBenefitsPage;
 }
 
-const SalaryAndBenefits = ({salaryAndBenefits}: SalaryAndBenefitsProps) => {
+interface FormState {
+  examinationYear: number;
+  selectedDegree: "bachelor" | "master";
+}
+
+const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
   const [salary, setSalary] = useState<number | null>(null);
+  const thisYear = new Date().getFullYear();
+  const [formState, setFormState] = useState<FormState>({
+    examinationYear: thisYear-1,
+    selectedDegree: "master",
+  });
+
+  const updateSelectedDegree = (newDegree: "bachelor" | "master") => {
+    setFormState((prevState) => ({
+      ...prevState,
+      selectedDegree: newDegree,
+    }));
+  };
 
-  const handleSalaryUpdate = (newSalary: number) => {
+  const updateExaminationYear = (newYear: number) => {
+    setFormState((prevState) => ({
+      ...prevState,
+      examinationYear: newYear,
+    }));
+  };
+
+  const handleSalaryUpdate = () => {
+    const newSalary = calculateSalary(
+      thisYear,
+      formState.examinationYear,
+      formState.selectedDegree
+    );
     setSalary(newSalary);
   };
-  
+
   return (
     <div className={styles.wrapper}>
       <Text type="h1">{salaryAndBenefits.basicTitle}</Text>
-      {salaryAndBenefits.showSalaryCalculator && 
-      <SalaryCalculator onSalaryUpdate={handleSalaryUpdate} /> }
-      {salary !== null ?  
-      <div aria-live="polite"> 
-      <Text> Du vil få en årlig lønn på {salary}</Text>
-      <Text>
-        Du vil få en årlig pensjon på omtrent {calculatePension(salary)}
-      </Text></div> : null }
+      {salaryAndBenefits.showSalaryCalculator && (
+        <SalaryCalculator
+          formState={formState}
+          onUpdateSelectedDegree={updateSelectedDegree}
+          onUpdateExaminationYear={updateExaminationYear}
+          onSubmit={handleSalaryUpdate}
+          thisYear={thisYear}
+          maxExperience={maxExperience}
+        />
+      )}
+      {salary !== null ? (
+        <div aria-live="polite">
+          <Text> Du vil få en årlig lønn på {salary}</Text>
+          <Text>
+            Du vil få en årlig pensjon på omtrent {calculatePension(salary)}
+          </Text>
+        </div>
+      ) : null}
       <div className={styles.benefits}>
         {salaryAndBenefits.benefits.map((benefit) => (
           <div key={benefit._key} className={styles.benefitWrapper}>

src/salaryAndBenefits/components/salaryCalculator/SalaryCalculator.tsx

@@ -1,17 +1,8 @@
-"use client";
-
-import { useState } from "react";
 import styles from "./salaryCalculator.module.css";
 import InputField from "src/components/forms/inputField/InputField";
 import { RadioButtonGroup } from "src/components/forms/radioButtonGroup/RadioButtonGroup";
-import { calculateSalary, maxExperience } from "src/salaryAndBenefits/utils/calculateSalary";
 import Button from "src/components/buttons/Button";
 
-  interface FormState {
-    examinationYear: number
-    selectedDegree: "bachelor" | "master",
-  }
-
 interface IOption {
   id: string;
   label: string;
@@ -20,58 +11,64 @@ interface IOption {
 }
 
 const options: IOption[] = [
-  { id: "bachelor", label: "Bachelor", currentSelected: false, disabled: false },
+  {
+    id: "bachelor",
+    label: "Bachelor",
+    currentSelected: false,
+    disabled: false,
+  },
   { id: "master", label: "Master", currentSelected: true, disabled: false },
 ];
 
 interface SalaryCalculatorProps {
-    onSalaryUpdate: (salary: number) => void;
-  }
-
-export default function SalaryCalculator({ onSalaryUpdate }: SalaryCalculatorProps) {
-  const thisYear = new Date().getFullYear();
-
-  const [formState, setFormState] = useState<FormState>({
-    examinationYear: thisYear,
-    selectedDegree: "master",
-  });
-
-  const updateSelectedDegree = (newDegree: string) => {
-    setFormState((prevState) => ({
-      ...prevState,
-      selectedDegree: newDegree as "bachelor" | "master",
-    }));
-  };
-
-  const updateExaminationYear = (newYear: number) => {
-    setFormState((prevState) => ({
-      ...prevState,
-      examinationYear: newYear,
-    }));
-  };
-
- const handleSubmit = (event: React.FormEvent) => {
-    event.preventDefault();
-    const salary = calculateSalary(thisYear, formState.examinationYear, formState.selectedDegree);
-    onSalaryUpdate(salary);
+  formState: {
+    examinationYear: number;
+    selectedDegree: "bachelor" | "master";
   };
+  onUpdateSelectedDegree: (newDegree: "bachelor" | "master") => void;
+  onUpdateExaminationYear: (newYear: number) => void;
+  onSubmit: () => void;
+  thisYear: number;
+  maxExperience: (year: number) => number;
+}
 
+export default function SalaryCalculator({
+  formState,
+  onUpdateSelectedDegree,
+  onUpdateExaminationYear,
+  onSubmit,
+  thisYear,
+  maxExperience,
+}: SalaryCalculatorProps) {
   return (
-    <form aria-label="salary calculator" className={styles.calculator} onSubmit={handleSubmit}>
+    <form
+      aria-label="salary calculator"
+      className={styles.calculator}
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+    >
       <RadioButtonGroup
         id="degree-group"
         label="Choose your degree"
         options={options}
-        onValueChange={(value) => updateSelectedDegree(value.id)}
+        onValueChange={(value) =>
+          onUpdateSelectedDegree(value.id as "bachelor" | "master")
+        }
       />
       <InputField
         label="year"
         name="examinationYear"
         type="number"
-        max={thisYear-1}
-        min={maxExperience(thisYear)} 
+        max={thisYear - 1}
+        min={maxExperience(thisYear)}
         value={formState.examinationYear}
-        onChange={(_name, value) => updateExaminationYear(typeof value === "string" ? parseInt(value) : value)}
+        onChange={(_name, value) =>
+          onUpdateExaminationYear(
+            typeof value === "string" ? parseInt(value) : value
+          )
+        }
         required
       />
       <Button type="secondary" size="small">