fix: store state on create slack group checkbox

frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/MainBoardCard.tsx

@@ -43,6 +43,7 @@ const MainBoardCard = React.memo(({ team }: MainBoardCardInterface) => {
   const {
     handleAddTeam,
     handleRemoveTeam,
+    handleSlackToggle,
     createBoardData: { board },
     setCreateBoardData,
     canAdd,
@@ -153,10 +154,9 @@ const MainBoardCard = React.memo(({ team }: MainBoardCardInterface) => {
       </MainContainer>
       <SubBoardList dividedBoards={board.dividedBoards} setBoard={setCreateBoardData} />
       <Box>
-        {/* onClick={slackEnableHandler} */}
         <Checkbox
-          // checked={board.slackEnable}
-          shouldUseForm
+          handleChange={handleSlackToggle}
+          checked={board.slackEnable}
           id="slackEnable"
           label="Create Slack group for each sub-team"
           size="16"

frontend/src/components/Primitives/Checkbox.tsx

@@ -3,7 +3,6 @@ import React, { Dispatch, useState } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { styled } from '@stitches/react';
 
-import { useFormContext } from 'react-hook-form';
 import Flex from './Flex';
 import Text from './Text';
 import Icon from '../icons/Icon';
@@ -69,8 +68,7 @@ const Checkbox: React.FC<{
   disabled?: boolean;
   size: '12' | '16';
   setCheckedTerms?: Dispatch<React.SetStateAction<boolean>> | null;
-  handleChange?: (value: string) => void;
-  shouldUseForm?: boolean;
+  handleChange?: ((value: string) => void) | (() => void);
   handleSelectAll?: () => void;
   hasSelectAll?: boolean;
 }> = ({
@@ -81,7 +79,6 @@ const Checkbox: React.FC<{
   checked,
   disabled,
   handleChange,
-  shouldUseForm,
   setCheckedTerms,
   handleSelectAll,
   hasSelectAll,
@@ -92,13 +89,10 @@ const Checkbox: React.FC<{
     disabled: false,
     handleChange: undefined,
     setCheckedTerms: null,
-    shouldUseForm: false,
     handleSelectAll: undefined,
     hasSelectAll: false,
   };
 
-  const formContext = useFormContext();
-
   const [currentCheckValue, setCurrentCheckValue] = useState<boolean | undefined | 'indeterminate'>(
     checked,
   );
@@ -107,10 +101,6 @@ const Checkbox: React.FC<{
     if (handleSelectAll) handleSelectAll();
     setCurrentCheckValue(isChecked);
     if (setCheckedTerms != null) setCheckedTerms(!!isChecked);
-
-    if (shouldUseForm) {
-      formContext.setValue('slackEnable', !!isChecked);
-    }
   };
   const checkValue = hasSelectAll ? checked : currentCheckValue;
 

frontend/src/hooks/useCreateBoard.tsx

@@ -218,11 +218,22 @@ const useCreateBoard = (team?: Team) => {
     }));
   };
 
+  const handleSlackToggle = () => {
+    setCreateBoardData((prev) => ({
+      ...prev,
+      board: {
+        ...prev.board,
+        slackEnable: !prev.board.slackEnable,
+      },
+    }));
+  };
+
   return {
     createBoardData,
     setCreateBoardData,
     handleAddTeam,
     handleRemoveTeam,
+    handleSlackToggle,
     canAdd,
     canReduce,
     generateSubBoard,

frontend/src/pages/boards/newSplitBoard.tsx

@@ -109,19 +109,16 @@ const NewSplitBoard: NextPage = () => {
   /**
    * React Hook Form
    */
-  const methods = useForm<{ text: string; team: string; maxVotes?: number; slackEnable?: boolean }>(
-    {
-      mode: 'onBlur',
-      reValidateMode: 'onBlur',
-      defaultValues: {
-        text: '',
-        maxVotes: boardState.board.maxVotes,
-        slackEnable: false,
-        team: undefined,
-      },
-      resolver: joiResolver(SchemaCreateBoard),
+  const methods = useForm<{ text: string; team: string; maxVotes?: number }>({
+    mode: 'onBlur',
+    reValidateMode: 'onBlur',
+    defaultValues: {
+      text: '',
+      maxVotes: boardState.board.maxVotes,
+      team: undefined,
     },
-  );
+    resolver: joiResolver(SchemaCreateBoard),
+  });
 
   const mainBoardName = useWatch({
     control: methods.control,
@@ -153,7 +150,7 @@ const NewSplitBoard: NextPage = () => {
    * @param title Board Title
    * @param maxVotes Maxium number of votes allowed
    */
-  const saveBoard = (title: string, team: string, maxVotes?: number, slackEnable?: boolean) => {
+  const saveBoard = (title: string, team: string, maxVotes?: number) => {
     const responsibles: string[] = [];
     const newDividedBoards: CreateBoardDto[] = boardState.board.dividedBoards.map((subBoard) => {
       const newSubBoard: CreateBoardDto = { ...subBoard, users: [], dividedBoards: [] };
@@ -182,7 +179,6 @@ const NewSplitBoard: NextPage = () => {
       title,
       dividedBoards: newDividedBoards,
       maxVotes,
-      slackEnable,
       maxUsers: boardState.count.maxUsersCount,
       team,
       responsibles,
@@ -257,8 +253,8 @@ const NewSplitBoard: NextPage = () => {
                 direction="column"
                 onSubmit={
                   !haveError
-                    ? methods.handleSubmit(({ text, team, maxVotes, slackEnable }) => {
-                        saveBoard(text, team, maxVotes, slackEnable);
+                    ? methods.handleSubmit(({ text, team, maxVotes }) => {
+                        saveBoard(text, team, maxVotes);
                       })
                     : undefined
                 }