Skip to content

Commit

Permalink
refactor(SalaryCalculator): move calculator business logic out to parent
Browse files Browse the repository at this point in the history
  • Loading branch information
mathiazom committed Aug 23, 2024
1 parent 87a1fa4 commit 1281484
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 72 deletions.
2 changes: 1 addition & 1 deletion src/components/forms/radioButtonGroup/RadioButtonGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styles from "src/components/forms/radioButtonGroup/radioButtonGroup.modul
import { RadioButton } from "./components/RadioButton";
import textStyles from "src/components/text/text.module.css";

interface IOption {
export interface IOption {
id: string;
label: string;
disabled?: boolean;
Expand Down
81 changes: 66 additions & 15 deletions src/salaryAndBenefits/SalaryAndBenefits.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,86 @@
"use client"
"use client";

import styles from "./salaryAndBenefits.module.css";
import Text from "src/components/text/Text";
import SalaryCalculator from "./components/salaryCalculator/SalaryCalculator";
import SalaryCalculator, {
Degree,
} 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 SalaryCalculatorFormState {
examinationYear: number;
selectedDegree: Degree;
}

const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
const currentYear = new Date().getFullYear();
const minExaminationYear = maxExperience(currentYear);
const maxExaminationYear = currentYear - 1;

const [formState, setFormState] = useState<SalaryCalculatorFormState>({
examinationYear: currentYear,
selectedDegree: "bachelor",
});
const [salary, setSalary] = useState<number | null>(null);

const handleSalaryUpdate = (newSalary: number) => {
setSalary(newSalary);
const updateSelectedDegree = (newDegree: Degree) => {
setFormState((prevState) => ({
...prevState,
selectedDegree: newDegree,
}));
};

const updateExaminationYear = (newYear: number) => {
setFormState((prevState) => ({
...prevState,
examinationYear: newYear,
}));
};

const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
setSalary(
calculateSalary(
currentYear,
formState.examinationYear,
formState.selectedDegree,
),
);
};

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
// TODO: should also take in degree state (this requires changes to IOption of RadioButtonGroup)
examinationYear={formState.examinationYear}
minExaminationYear={minExaminationYear}
maxExaminationYear={maxExaminationYear}
onDegreeChanged={updateSelectedDegree}
onExaminationYearChanged={updateExaminationYear}
onSubmit={handleSubmit}
/>
)}
{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}>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,77 +1,63 @@
"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 {
IOption,
RadioButtonGroup,
} from "src/components/forms/radioButtonGroup/RadioButtonGroup";
import Button from "src/components/buttons/Button";

interface FormState {
examinationYear: number
selectedDegree: "bachelor" | "master",
}

interface IOption {
id: string;
label: string;
disabled?: boolean;
currentSelected: boolean;
}
export type Degree = "bachelor" | "master";

const options: IOption[] = [
{ id: "bachelor", label: "Bachelor", currentSelected: false, disabled: false },
{ id: "master", label: "Master", currentSelected: true, disabled: false },
const degreeOptions: IOption[] = [
{
id: "bachelor",
label: "Bachelor",
currentSelected: true,
disabled: false,
},
{ id: "master", label: "Master", currentSelected: false, 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);
};
examinationYear: number;
minExaminationYear: number;
maxExaminationYear: number;
onDegreeChanged: (degree: Degree) => void;
onExaminationYearChanged: (examinationYear: number) => void;
onSubmit: (event: React.FormEvent) => void;
}

export default function SalaryCalculator({
examinationYear,
minExaminationYear,
maxExaminationYear,
onDegreeChanged,
onExaminationYearChanged,
onSubmit,
}: SalaryCalculatorProps) {
return (
<form aria-label="salary calculator" className={styles.calculator} onSubmit={handleSubmit}>
<form
aria-label="salary calculator"
className={styles.calculator}
onSubmit={onSubmit}
>
<RadioButtonGroup
id="degree-group"
label="Choose your degree"
options={options}
onValueChange={(value) => updateSelectedDegree(value.id)}
options={degreeOptions}
onValueChange={(value) =>
(value.id === "bachelor" || value.id === "master") &&
onDegreeChanged(value.id)
}
/>
<InputField
label="year"
name="examinationYear"
type="number"
max={thisYear-1}
min={maxExperience(thisYear)}
value={formState.examinationYear}
onChange={(_name, value) => updateExaminationYear(typeof value === "string" ? parseInt(value) : value)}
max={maxExaminationYear}
min={minExaminationYear}
value={examinationYear}
onChange={(_name, value) => onExaminationYearChanged(parseInt(value))}
required
/>
<Button type="secondary" size="small">
Expand Down

0 comments on commit 1281484

Please sign in to comment.