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.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') && (
}
+ startAdornment={
+
+ }
onClick={createHandler}
variant="primary"
className={styles['create-team-btn']}
@@ -135,6 +151,7 @@ const TeamList: React.FC = () => {
= ({
+ width = '24',
+ height = '24',
+ onClick,
+ ...restProps
+}) => {
+ return (
+
+ );
+};
+
+export default PersonIcon;