feat: Age update adjustments (#973)

## What was done?

- Update the UI logic so that screeners update the current aprox pupil
age but we save the age at registration.

Author: JeangelLF

src/Utility.ts

@@ -196,6 +196,22 @@ export const TIME_SLOTS = [
     `${fromFormatToMinutes('20:00')}-${fromFormatToMinutes('21:00')}`,
 ];
 
+export const getApproxCurrentAge = (createdAt: string, ageAtRegistration: number) => {
+    const now = DateTime.now();
+    const created = DateTime.fromISO(createdAt);
+    const diffYears = Math.floor(now.diff(created, 'years').years);
+    return Math.floor(ageAtRegistration + diffYears);
+};
+
+export const getAgeAtRegistration = (createdAt: string, currentAge: number) => {
+    const now = DateTime.now();
+    const created = DateTime.fromISO(createdAt);
+
+    const diffYears = Math.floor(now.diff(created, 'years').years);
+
+    return Math.floor(currentAge - diffYears);
+};
+
 const Utility = {
     createToken,
     toTimerString,

src/pages/screening/pupil/PersonalDetails.tsx

@@ -76,21 +76,21 @@ const PersonalDetails = ({ pupil, refresh, form, isUpdating, updatePupil }: Pers
         setDescriptionForMatch,
         weeklyAvailability,
         setWeeklyAvailability,
-        age,
-        setAge,
+        currentAge,
+        setCurrentAge,
     } = form;
 
     const [mutationCreateLoginToken] = useMutation(CREATE_LOGIN_TOKEN_MUTATION);
     const [errors, setErrors] = useState<FormErrors>({});
 
     useEffect(() => {
         let updatedErrors = {};
-        if (!!age && age < MIN_AGE_PUPIL) {
+        if (!!currentAge && currentAge < MIN_AGE_PUPIL) {
             updatedErrors = { ...updatedErrors, age: t('registration.steps.userAge.tooYoungError', { minAge: MIN_AGE_PUPIL }) };
         }
 
         setErrors(updatedErrors);
-    }, [languages, grade, subjects, age, t]);
+    }, [languages, grade, subjects, currentAge, t]);
 
     const impersonate = async () => {
         // We need to work around the popup blocker of modern browsers, as you can only
@@ -118,7 +118,6 @@ const PersonalDetails = ({ pupil, refresh, form, isUpdating, updatePupil }: Pers
         }
     };
 
-    console.log(errors);
     return (
         <>
             <div className="flex w-full justify-between mb-10">
@@ -169,8 +168,8 @@ const PersonalDetails = ({ pupil, refresh, form, isUpdating, updatePupil }: Pers
                     <Label>Alter</Label>
                     <Input
                         className="w-full max-w-40"
-                        value={age || ''}
-                        onChangeText={(e) => setAge(Number(e.replace(/\D/g, '').substring(0, 2)))}
+                        value={currentAge || ''}
+                        onChangeText={(e) => setCurrentAge(Number(e.replace(/\D/g, '').substring(0, 2)))}
                         errorMessage={errors.age}
                         errorMessageClassName="hidden"
                         min={MIN_AGE_PUPIL}

src/pages/screening/pupil/PupilDetail.tsx

@@ -125,7 +125,7 @@ const PupilDetail = ({ pupil, refresh }: PupilDetailProps) => {
                     <span className="font-bold">Registiert</span>: {formatDate(pupil.createdAt, DateTime.DATE_MED)}
                 </Typography>
                 <Typography>
-                    <span className="font-bold">Alter</span>: {getEstimatedAgeRange()}
+                    <span className="font-bold">Alter bei der Registrierung</span>: {!pupil.age ? 'Alter unbekannt' : pupil.age}
                 </Typography>
                 <Typography>
                     <span className="font-bold">Aktiv</span>:{' '}

src/pages/screening/pupil/useUpdatePupil.ts

@@ -2,6 +2,7 @@ import { CheckedState } from '@/components/Checkbox';
 import { gql } from '@/gql';
 import { Gender_Enum as Gender, ExternalSchoolSearch } from '@/gql/graphql';
 import { PupilForScreening } from '@/types';
+import { getAgeAtRegistration, getApproxCurrentAge } from '@/Utility';
 import { useMutation } from '@apollo/client';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -31,7 +32,7 @@ export const useUpdatePupil = (pupil: PupilForScreening) => {
     const [weeklyAvailability, setWeeklyAvailability] = useState(pupil.calendarPreferences?.weeklyAvailability);
     const [canHaveMatches, setCanHaveMatches] = useState(pupil.isPupil);
     const [canParticipateInCourses, setCanParticipateInCourses] = useState(pupil.isParticipant);
-    const [age, setAge] = useState(pupil.age);
+    const [currentAge, setCurrentAge] = useState(pupil.age ? getApproxCurrentAge(pupil.createdAt, pupil.age) : undefined);
 
     const updatePupil = async () => {
         try {
@@ -54,7 +55,7 @@ export const useUpdatePupil = (pupil: PupilForScreening) => {
                         descriptionForMatch,
                         descriptionForScreening,
                         isPupil: canHaveMatches,
-                        age,
+                        age: pupil.age !== currentAge && currentAge ? getAgeAtRegistration(pupil.createdAt, currentAge) : pupil.age,
                         isParticipant: canParticipateInCourses,
                         calendarPreferences: weeklyAvailability
                             ? {
@@ -67,7 +68,7 @@ export const useUpdatePupil = (pupil: PupilForScreening) => {
             });
             toast.success(t('changesWereSaved'));
         } catch (error) {
-            toast.success(t('error'));
+            toast.error(t('error'));
         }
     };
 
@@ -101,8 +102,8 @@ export const useUpdatePupil = (pupil: PupilForScreening) => {
             setCanHaveMatches,
             canParticipateInCourses,
             setCanParticipateInCourses,
-            setAge,
-            age,
+            setCurrentAge,
+            currentAge,
         },
     };
 };