diff --git a/src/Pages/Team/partials/TeamForm.tsx b/src/Pages/Team/partials/TeamForm.tsx index a720dcf..8be3c10 100644 --- a/src/Pages/Team/partials/TeamForm.tsx +++ b/src/Pages/Team/partials/TeamForm.tsx @@ -38,8 +38,6 @@ const TeamForm = (props: TeamFormProps) => { } setData(response?.data?.data); setTeamId(''); - //setData(hardcodedData.data); - //setTeamId(''); }) .catch(error => { const toastMessage = `${ @@ -214,14 +212,3 @@ const TeamForm = (props: TeamFormProps) => { }; export default TeamForm; -/** - *
- {data?.participants?.map(member => ( -
- {member.name} - -
))} -
- */ diff --git a/src/assets/ManagerIcon.tsx b/src/assets/ManagerIcon.tsx new file mode 100644 index 0000000..fd4cf8d --- /dev/null +++ b/src/assets/ManagerIcon.tsx @@ -0,0 +1,25 @@ +import React, { FC } from 'react'; +import { IconProps } from './types'; + +const PersonIcon: FC = ({ + width = '16', + height = '16', + ...restProps +}) => { + return ( + + + + ); +}; + +export default PersonIcon; diff --git a/src/assets/Person.svg b/src/assets/Person.svg deleted file mode 100644 index adc284d..0000000 --- a/src/assets/Person.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/assets/PersonIcon.tsx b/src/assets/PersonIcon.tsx new file mode 100644 index 0000000..352a268 --- /dev/null +++ b/src/assets/PersonIcon.tsx @@ -0,0 +1,32 @@ +import React, { FC, MouseEventHandler, useState } from 'react'; +import { IconProps } from './types'; + +const PersonIcon: FC = ({ + width = '24', + height = '24', + onClick, + ...restProps +}) => { + const [isHovered, setIsHovered] = useState(false); + + return ( + } + onMouseEnter={() => setIsHovered(true)} // Set isHovered to true on hover + onMouseLeave={() => setIsHovered(false)} + style={{ cursor: 'pointer' }} + > + + + ); +}; + +export default PersonIcon; diff --git a/src/assets/close.svg b/src/assets/close.svg deleted file mode 100644 index 5c60218..0000000 --- a/src/assets/close.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/assets/person_filled.svg b/src/assets/person_filled.svg deleted file mode 100644 index b5c4874..0000000 --- a/src/assets/person_filled.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/MembersDetails/UseAuthHook.tsx b/src/components/MembersDetails/UseAuthHook.tsx new file mode 100644 index 0000000..aa42c22 --- /dev/null +++ b/src/components/MembersDetails/UseAuthHook.tsx @@ -0,0 +1,11 @@ +import { useState, useEffect } from 'react'; +export const useAuthData = () => { + const [userRole, setUserRole] = useState(''); + + useEffect(() => { + const userData = JSON.parse(localStorage.getItem('user-data') || '{}'); + setUserRole(userData?.roles || []); + }, []); + + return userRole; +}; diff --git a/src/components/MembersDetails/index.tsx b/src/components/MembersDetails/index.tsx index d6d0ec1..b7b1cf5 100644 --- a/src/components/MembersDetails/index.tsx +++ b/src/components/MembersDetails/index.tsx @@ -3,12 +3,13 @@ import { useState, useEffect } from 'react'; import { Avatar, Typography, Tag } from '@navi/web-ui/lib/primitives'; import styles from './Members.module.scss'; -import person_logo from '@src/assets/person_filled.svg'; -import person_logo_colored from '@src/assets/person.svg'; -import remove_logo from '@src/assets/close.svg'; import { toast } from '@navi/web-ui/lib/primitives/Toast'; import { ApiService } from '@src/services/api'; import { ModalDialog } from '@navi/web-ui/lib/primitives'; +import { useAuthData } from './UseAuthHook'; +import PersonIcon from '@src/assets/PersonIcon'; +import ManagerIcon from '@src/assets/ManagerIcon'; +import { CloseIcon } from '@navi/web-ui/lib/icons'; import { REMOVE_TEAM_MEMBER, @@ -24,28 +25,34 @@ const MembersDetails = (props: any) => { const [showRemoveButton, setShowRemoveButton] = useState(false); const [open, setOpen] = useState(false); + const fetchSingleTeamData = teamId => { + const fetchTeamDataEndpoint = FETCH_SINGLE_TEAM_DATA(teamId); + ApiService.get(fetchTeamDataEndpoint) + .then(response => { + if (response.status === 200) { + const updatedData = response?.data?.data; + setData(updatedData); + } else { + toast.error(response.data.error.message); + } + }) + .catch(error => { + const toastMessage = `${ + error?.response?.data?.error?.message + ? `${error?.response?.data?.error?.message},` + : '' + }`; + toast.error(toastMessage); + }); + }; + const handleRemoveUser = (teamId, slackUserId) => { const endpoint = REMOVE_TEAM_MEMBER(teamId, slackUserId); - ApiService.delete(endpoint) .then(response => { if (response.status === 200) { toast.success(response.data.data); - /// - const fetchTeamDataEndpoint = FETCH_SINGLE_TEAM_DATA(teamId); - ApiService.get(fetchTeamDataEndpoint) - .then(response => { - const updatedData = response?.data?.data; - setData(updatedData); - }) - .catch(error => { - const toastMessage = `${ - error?.response?.data?.error?.message - ? `${error?.response?.data?.error?.message},` - : '' - }`; - toast.error(toastMessage); - }); + fetchSingleTeamData(teamId); } else { toast.error(response.data.error.message); } @@ -58,26 +65,14 @@ const MembersDetails = (props: any) => { }; const handleMakeManager = (teamId, slackUserId) => { + setOpen(false); const endpoint = MAKE_MANAGER(teamId, slackUserId); ApiService.patch(endpoint, {}) .then(response => { if (response.status === 200) { toast.success(response.data.data); - const fetchTeamDataEndpoint = FETCH_SINGLE_TEAM_DATA(teamId); - ApiService.get(fetchTeamDataEndpoint) - .then(response => { - const updatedData = response?.data?.data; - setData(updatedData); - }) - .catch(error => { - const toastMessage = `${ - error?.response?.data?.error?.message - ? `${error?.response?.data?.error?.message},` - : '' - }`; - toast.error(toastMessage); - }); + fetchSingleTeamData(teamId); } else { toast.error(response.data.error.message); } @@ -90,7 +85,8 @@ const MembersDetails = (props: any) => { }; const userData = JSON.parse(localStorage.getItem('user-data') || '{}'); - const userRoles = userData.roles || []; + const userRoles = useAuthData(); + console.log('userRoles', userRoles); const managerEmail = data?.participants?.find( participant => participant.id === data.managerId, @@ -154,11 +150,7 @@ const MembersDetails = (props: any) => { {showRemoveButton && !(participant.email === managerEmail) && ( <> - person_logo setOpen(true)} - /> + setOpen(true)} /> { { label: 'Change Manager', onClick: function noRefCheck() { - handleMakeManager(data.id, participant.id), - setOpen(false); + handleMakeManager(data.id, participant.id); }, }, ]} @@ -201,26 +192,19 @@ const MembersDetails = (props: any) => { /> )} - {participant.email === managerEmail && ( - person_logo_colored - )} + {participant.email === managerEmail && } {showRemoveButton && !(participant.email === managerEmail) && ( <>      - Remove handleRemoveUser(data.id, participant.id) } /> -          +           )} {participant.email === managerEmail && (