diff --git a/src/Pages/TeamRevamp/TeamList/TeamList.module.scss b/src/Pages/TeamRevamp/TeamList/TeamList.module.scss index 3c1d66a..be31dea 100644 --- a/src/Pages/TeamRevamp/TeamList/TeamList.module.scss +++ b/src/Pages/TeamRevamp/TeamList/TeamList.module.scss @@ -54,3 +54,6 @@ margin-top: 12px; color: var(--navi-color-gray-c3); } +.add-icon { + margin-left: 3px; +} diff --git a/src/Pages/TeamRevamp/TeamList/index.tsx b/src/Pages/TeamRevamp/TeamList/index.tsx index 3309df4..f0e38e2 100644 --- a/src/Pages/TeamRevamp/TeamList/index.tsx +++ b/src/Pages/TeamRevamp/TeamList/index.tsx @@ -11,20 +11,29 @@ import { useAuthData } from '@src/services/hooks/useAuth'; import CreateTeam from '@src/Pages/TeamRevamp/partials/CreateTeam/CreateTeam'; import SearchInput from './SearchInput'; import styles from './TeamList.module.scss'; +import SelectedPersonIcon from '@src/assets/SelectedPersonIcon'; type Options = { label: string; value: number; - count: number; + additionalData: { + count: number; + isSelected: boolean; + }; }; -const CustomTeamOptions = (option: Options, selected: boolean): JSX.Element => { + +const CustomTeamOptions = (option: Options): JSX.Element => { return (
{option.label}
-
{option.count}
+
{option.additionalData.count}
- + {option.additionalData.isSelected ? ( + + ) : ( + + )}
@@ -38,9 +47,9 @@ const TeamList: React.FC = () => { const defaultTeam = useSelector( (state: RootState) => state.team1.teams.data[0], ); + const [team, setTeam] = useState(); const newTeam = useSelector((state: RootState) => state.team1.teams.newTeam); const [input, setInput] = useState(''); - const [team, setTeam] = useState(); const scroll = useRef(false); const scrollintoView = (event: string): void => { @@ -52,11 +61,15 @@ const TeamList: React.FC = () => { }, 0); } }; + const options = Array.isArray(teamList) ? teamList.map(item => ({ label: item.name, value: item.id, - count: item.slackUserIds?.length, + additionalData: { + count: item.slackUserIds?.length, + isSelected: item.id === team?.value, + }, })) : []; @@ -96,13 +109,10 @@ const TeamList: React.FC = () => { const createHandler = (): void => { dispatch(setModalOpen(true)); }; - const fetchDetails = (val: string): void => { - dispatch(fetchTeamDetails(val)); - }; const handleSelectionChange = (event): void => { setTeam(event); - fetchDetails(event.value.toString()); + dispatch(fetchTeamDetails(event.value.toString())); scroll.current = false; }; @@ -113,7 +123,13 @@ const TeamList: React.FC = () => { {Role.includes('Admin') && (