fix: regular board change tab (#1122)

Author: nunocaseiro

frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/RadioGroupParticipants/index.tsx

@@ -11,10 +11,14 @@ import { useSetRecoilState } from 'recoil';
 import { FormStyled } from './styles';
 
 type RadioGroupParticipantsProps = {
+  optionSelected: string;
   handleSelection: (value: string) => void;
 };
 
-const RadioGroupParticipants = ({ handleSelection }: RadioGroupParticipantsProps) => {
+const RadioGroupParticipants = ({
+  optionSelected,
+  handleSelection,
+}: RadioGroupParticipantsProps) => {
   const setSelectedTeam = useSetRecoilState(createBoardTeam);
 
   const handleSelect = (value: string) => {
@@ -30,6 +34,7 @@ const RadioGroupParticipants = ({ handleSelection }: RadioGroupParticipantsProps
           defaultValue="team"
           aria-label="View density"
           onValueChange={handleSelect}
+          value={optionSelected}
         >
           <Flex>
             <RadioGroupItem value="team" id="selectTeam">

frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/SelectParticipants/index.tsx

@@ -33,12 +33,19 @@ const SelectParticipants = () => {
   useEffect(() => {
     const updateCheckedUser = usersList.map((user) => ({
       ...user,
-      isChecked: user._id === session?.user.id,
+      isChecked: user._id === session?.user.id || user.isChecked,
     }));
 
     const users = updateCheckedUser.flatMap((user) =>
-      user._id === session?.user.id
-        ? [{ role: BoardUserRoles.RESPONSIBLE, user: user._id, votesCount: 0 }]
+      user.isChecked
+        ? [
+            {
+              role:
+                user._id === session?.user.id ? BoardUserRoles.RESPONSIBLE : BoardUserRoles.MEMBER,
+              user: user._id,
+              votesCount: 0,
+            },
+          ]
         : [],
     );
     setUsersList(updateCheckedUser);
@@ -48,8 +55,6 @@ const SelectParticipants = () => {
       users,
       board: { ...prev.board, team: null },
     }));
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/index.tsx

@@ -1,19 +1,22 @@
 import Flex from '@/components/Primitives/Flex';
-import { useState } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import SelectTeam from '@/components/CreateBoard/RegularBoard/SelectTeam';
 import SelectParticipants from './SelectParticipants';
 import RadioGroupParticipants from './RadioGroupParticipants';
 
-const ParticipantsTab = () => {
-  const [optionSelected, setOptionSelected] = useState('team');
+type Props = { optionSelected: string; setOptionSelected: Dispatch<SetStateAction<string>> };
 
+const ParticipantsTab = ({ optionSelected, setOptionSelected }: Props) => {
   const handleChangeOption = (value: string) => {
     setOptionSelected(value);
   };
 
   return (
     <Flex direction="column" css={{ width: '100%', mb: '$20', height: '$300' }} gap="24">
-      <RadioGroupParticipants handleSelection={handleChangeOption} />
+      <RadioGroupParticipants
+        optionSelected={optionSelected}
+        handleSelection={handleChangeOption}
+      />
       {optionSelected === 'team' ? <SelectTeam /> : <SelectParticipants />}
     </Flex>
   );

frontend/src/components/CreateBoard/RegularBoard/SettingsTabs/index.tsx

@@ -11,11 +11,15 @@ import ParticipantsTab from '../ParticipantsTab';
 import BoardConfigurations from '../../Configurations/BoardConfigurations';
 
 const SettingsTabs = () => {
+  const [optionSelected, setOptionSelected] = useState('team');
+
   const tabList: TabList[] = [
     {
       value: 'participants',
       label: 'Participants',
-      content: <ParticipantsTab />,
+      content: (
+        <ParticipantsTab optionSelected={optionSelected} setOptionSelected={setOptionSelected} />
+      ),
     },
     {
       value: 'config',