diff --git a/src/components/Dashboard/Profile/sections/VolunteerAgents/AccordionVolunteer.tsx b/src/components/Dashboard/Profile/sections/VolunteerAgents/AccordionVolunteer.tsx index 4d0abe30..75a5ee01 100644 --- a/src/components/Dashboard/Profile/sections/VolunteerAgents/AccordionVolunteer.tsx +++ b/src/components/Dashboard/Profile/sections/VolunteerAgents/AccordionVolunteer.tsx @@ -32,7 +32,7 @@ export const AccordionVolunteer = ({ const router = useRouter(); const handleGoToProfile = () => { - router.push(`/${i18n.language}/dashboard/volunteers/${volunteer.id}`); + router.push(`/${i18n.language}/dashboard/volunteers/${volunteer.volunteerId}`); }; const engagementStatusLabels = createEngagementStatusLabelMap(t); @@ -44,11 +44,8 @@ export const AccordionVolunteer = ({ {volunteer?.name} - - + + ); @@ -56,7 +53,7 @@ export const AccordionVolunteer = ({ { +type Props = { agentId: Id }; + +export const VolunteerAgents = ({ agentId }: Props) => { const { t } = useTranslation(); - const { selectedTabIndex, setSelectedTabIndex, tabCounts } = useTabTransitions([]); + const queryKey = ["agent-volunteers", String(agentId)]; + + const { data, isLoading } = useGetQuery({ + queryKey, + apiPath: `${apiPathAgent}/${agentId}/volunteer-linked`, + staleTime: cacheTTL, + enabled: !!agentId, + }); + + const volunteers = useMemo(() => data ?? [], [data]); + + const { mutate: updateStatus } = useUpdateOpportunityVolunteerStatus(queryKey); + const { mutate: deleteLink } = useDeleteOpportunityVolunteer(queryKey); + + const { selectedTabIndex, setSelectedTabIndex, currentTabStatus, tabCounts, visibleItems, setItemStatus } = + useTabTransitions(volunteers); const tabs = TAB_STATUS_ORDER.map((key, index) => ({ label: t(`dashboard.volunteerProfile.opportunitiesSec.tabs.${key}`), count: tabCounts[index], })); + const handleMatch = (m2mId: number) => { + setItemStatus(m2mId, OpportunityVolunteerStatusType.MATCHED); + updateStatus({ m2mId, status: OpportunityVolunteerStatusType.MATCHED }); + }; + + const handleNotAMatch = (m2mId: number) => { + setItemStatus(m2mId, ITEM_STATUS_REMOVED); + deleteLink({ m2mId }); + }; + + const handleMarkAsActive = (m2mId: number) => { + setItemStatus(m2mId, OpportunityVolunteerStatusType.ACTIVE); + updateStatus({ m2mId, status: OpportunityVolunteerStatusType.ACTIVE }); + }; + + const handleMarkAsPast = (m2mId: number) => { + setItemStatus(m2mId, OpportunityVolunteerStatusType.PAST); + updateStatus({ m2mId, status: OpportunityVolunteerStatusType.PAST }); + }; + + if (isLoading) { + return ; + } + return ( - + - {t("dashboard.volunteerProfile.opportunitiesSec.emptyState")} + {visibleItems.length === 0 ? ( + {t("dashboard.volunteerProfile.opportunitiesSec.emptyState")} + ) : ( + visibleItems.map((volunteer) => ( + handleMatch(volunteer.id)} + onNotAMatch={() => handleNotAMatch(volunteer.id)} + onMarkAsActive={() => handleMarkAsActive(volunteer.id)} + onMarkAsPast={() => handleMarkAsPast(volunteer.id)} + /> + )) + )} ); }; diff --git a/src/components/Dashboard/Profile/sections/VolunteerAgents/types.ts b/src/components/Dashboard/Profile/sections/VolunteerAgents/types.ts index e4f01299..43d930dd 100644 --- a/src/components/Dashboard/Profile/sections/VolunteerAgents/types.ts +++ b/src/components/Dashboard/Profile/sections/VolunteerAgents/types.ts @@ -1,6 +1,5 @@ import { - ApiVolunteerGetList, - OpportunityVolunteerStatusType, + ApiVolunteerOpportunityGet, VolunteerStateEngagementType, VolunteerStateMatchType, VolunteerStateTypeType, @@ -8,9 +7,7 @@ import { import { TFunction } from "i18next"; -export type MappedVolunteerAgent = ApiVolunteerGetList & { - status: OpportunityVolunteerStatusType; -}; +export type MappedVolunteerAgent = ApiVolunteerOpportunityGet; export const createEngagementStatusLabelMap = (t: TFunction): Record => ({ [VolunteerStateEngagementType.NEW]: t("dashboard.volunteers.filters.engagement.new"), diff --git a/src/hooks/useAgentProfileSections.tsx b/src/hooks/useAgentProfileSections.tsx index ae6c0d2e..96001b37 100644 --- a/src/hooks/useAgentProfileSections.tsx +++ b/src/hooks/useAgentProfileSections.tsx @@ -60,7 +60,7 @@ export const useAgentProfileSections = (agent: ApiAgentProfileGet | undefined) = { iconName: IconName.UserCheck, title: t("dashboard.volunteers.volunteers"), - subComponent: , + subComponent: , }, { iconName: IconName.ShootingStar,