From b5452eb7cff3ffa730ae309e19d423888460c0bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Wed, 14 Feb 2024 18:09:09 +0100
Subject: [PATCH] improve checkbox

---
 govtool/frontend/src/components/atoms/types.ts |  4 +++-
 .../components/molecules/Field/Checkbox.tsx    | 18 +++++++++++++++---
 .../organisms/ControlledField/Checkbox.tsx     |  2 +-
 .../organisms/ControlledField/types.ts         |  5 ++++-
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/govtool/frontend/src/components/atoms/types.ts b/govtool/frontend/src/components/atoms/types.ts
index 2d817f58e..7209fca2a 100644
--- a/govtool/frontend/src/components/atoms/types.ts
+++ b/govtool/frontend/src/components/atoms/types.ts
@@ -43,9 +43,11 @@ export type SpacerProps = {
   y?: number;
 };
 
-export type CheckboxProps = MUICheckboxProps & {
+export type CheckboxProps = Omit<MUICheckboxProps, "onChange" | "value"> & {
   dataTestId?: string;
   errorMessage?: string;
+  onChange: (newValue: boolean) => void;
+  value: boolean;
 };
 
 export type FormErrorMessageProps = {
diff --git a/govtool/frontend/src/components/molecules/Field/Checkbox.tsx b/govtool/frontend/src/components/molecules/Field/Checkbox.tsx
index ba462c645..26b8aabab 100644
--- a/govtool/frontend/src/components/molecules/Field/Checkbox.tsx
+++ b/govtool/frontend/src/components/molecules/Field/Checkbox.tsx
@@ -1,9 +1,9 @@
 import { Box } from "@mui/material";
 
-import { Checkbox as CheckboxBase, Typography } from "@atoms";
+import { Checkbox as CheckboxBase, FormErrorMessage, Typography } from "@atoms";
 
 import { CheckboxFieldProps } from "./types";
-import { FormErrorMessage } from "@/components/atoms/FormErrorMessage";
+import { useCallback } from "react";
 
 export const Checkbox = ({
   errorMessage,
@@ -12,18 +12,30 @@ export const Checkbox = ({
   labelStyles,
   layoutStyles,
   onChange,
+  value,
   ...rest
 }: CheckboxFieldProps) => {
+  const handleValue = useCallback(() => {
+    onChange(!value);
+  }, [value]);
+
   return (
     <Box sx={{ width: "100%", ...layoutStyles }}>
       <Box
+        onClick={handleValue}
         sx={{
           alignItems: "center",
+          cursor: "pointer",
           display: "flex",
           flexDirection: "row",
+          width: "fit-content",
         }}
       >
-        <CheckboxBase errorMessage={errorMessage} {...rest} />
+        <CheckboxBase
+          {...{ onChange, value }}
+          errorMessage={errorMessage}
+          {...rest}
+        />
         {label && (
           <Typography variant="caption" {...labelStyles}>
             {label}
diff --git a/govtool/frontend/src/components/organisms/ControlledField/Checkbox.tsx b/govtool/frontend/src/components/organisms/ControlledField/Checkbox.tsx
index 1f134c4af..cacda8f77 100644
--- a/govtool/frontend/src/components/organisms/ControlledField/Checkbox.tsx
+++ b/govtool/frontend/src/components/organisms/ControlledField/Checkbox.tsx
@@ -20,7 +20,7 @@ export const Checkbox = ({
         checked={!!field.value}
         errorMessage={errorMessage}
         name={field.name}
-        onChange={(newValue) => field.onChange(newValue)}
+        onChange={field.onChange}
         value={field.value}
         {...props}
       />
diff --git a/govtool/frontend/src/components/organisms/ControlledField/types.ts b/govtool/frontend/src/components/organisms/ControlledField/types.ts
index 2e276688b..f75c9b978 100644
--- a/govtool/frontend/src/components/organisms/ControlledField/types.ts
+++ b/govtool/frontend/src/components/organisms/ControlledField/types.ts
@@ -15,7 +15,10 @@ export type ControlledInputProps = InputFieldProps & {
   rules?: Omit<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
 };
 
-export type ControlledCheckboxProps = CheckboxFieldProps & {
+export type ControlledCheckboxProps = Omit<
+  CheckboxFieldProps,
+  "onChange" | "value"
+> & {
   control: Control<any>;
   errors: FieldErrors<any>;
   name: Path<any>;