refactor: cleanup JSX / errors

City-of-Helsinki · Feb 11, 2025 · 4be1195 · 4be1195
1 parent 24a6070
commit 4be1195
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 35 deletions.
diff --git a/apps/ui/components/application/ApplicantTypeSelector.tsx b/apps/ui/components/application/ApplicantTypeSelector.tsx
@@ -15,8 +15,10 @@ const Label = styled.p`
 export function ApplicantTypeSelector(): JSX.Element {
   const { t } = useTranslation();
 
-  const { control, getFieldState } =
-    useFormContext<ApplicationPage3FormValues>();
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<ApplicationPage3FormValues>();
   const {
     field: { value, onChange },
   } = useController({
@@ -34,7 +36,7 @@ export function ApplicantTypeSelector(): JSX.Element {
       (id === ApplicantTypeChoice.Association &&
         value === ApplicantTypeChoice.Community)
   );
-  const { error } = getFieldState("applicantType");
+  const error = errors.applicantType;
 
   const errorText = error?.message
     ? t(`application:validation.${error.message}`)

diff --git a/apps/ui/components/application/TimeSelector.tsx b/apps/ui/components/application/TimeSelector.tsx
@@ -167,32 +167,30 @@ function Day({
   return (
     <div>
       <CalendarHead>{head}</CalendarHead>
-      {cells.map((cell, cellIndex) => {
-        return (
-          <TimeSelectionButton
-            key={cell.key}
-            $state={cell.state}
-            $firstRow={cellIndex === 0}
-            type="button"
-            onMouseDown={(evt) => handleMouseDown(cell, evt)}
-            onMouseUp={() => setPainting(false)}
-            onKeyDown={() =>
-              setCellValue(cell, priority === cell.state ? false : priority)
+      {cells.map((cell, cellIndex) => (
+        <TimeSelectionButton
+          key={cell.key}
+          $state={cell.state}
+          $firstRow={cellIndex === 0}
+          type="button"
+          onMouseDown={(evt) => handleMouseDown(cell, evt)}
+          onMouseUp={() => setPainting(false)}
+          onKeyDown={() =>
+            setCellValue(cell, priority === cell.state ? false : priority)
+          }
+          onMouseEnter={() => {
+            if (painting) {
+              setCellValue(cell, paintState);
             }
-            onMouseEnter={() => {
-              if (painting) {
-                setCellValue(cell, paintState);
-              }
-            }}
-            role="option"
-            aria-label={constructAriaLabel(t, cell, labelHead)}
-            aria-selected={cell.state > 100}
-            data-testid={`time-selector__button--${cell.key}`}
-          >
-            {cell.label}
-          </TimeSelectionButton>
-        );
-      })}
+          }}
+          role="option"
+          aria-label={constructAriaLabel(t, cell, labelHead)}
+          aria-selected={cell.state > 100}
+          data-testid={`time-selector__button--${cell.key}`}
+        >
+          {cell.label}
+        </TimeSelectionButton>
+      ))}
     </div>
   );
 }
@@ -335,9 +333,9 @@ export function TimeSelector({
   >(false); // toggle value true = set, false = clear: ;
   const [painting, setPainting] = useState(false); // is painting 'on'
 
-  const cellTypes = CELL_TYPES.map((cell) => ({
-    ...cell,
-    label: t(cell.label),
+  const cellTypes = CELL_TYPES.map(({ type, label }) => ({
+    type,
+    label: t(label),
   }));
 
   const { setValue, watch } = useFormContext<ApplicationPage2FormValues>();
@@ -527,13 +525,13 @@ function OptionSelector({
 
 function ErrorMessage({ index }: { index: number }): JSX.Element | null {
   const { t } = useTranslation();
-  const { getFieldState } = useFormContext<ApplicationPage2FormValues>();
   const fieldName = `applicationSections.${index}.suitableTimeRanges` as const;
-  const suitableTimeErrors = getFieldState(fieldName)?.error;
-  if (suitableTimeErrors == null) {
+  const { getFieldState } = useFormContext<ApplicationPage2FormValues>();
+  const state = getFieldState(fieldName);
+  if (!state.invalid) {
     return null;
   }
-  const errorMsg = suitableTimeErrors.message;
+  const errorMsg = state.error?.message;
   const msg = errorMsg
     ? t(`application:validation.calendar.${errorMsg}`)
     : t("errors:general_error");