diff --git a/src/components/TeamAssignment/TeamAssignment.tsx b/src/components/TeamAssignment/TeamAssignment.tsx index 5d6d5fc..4a9bff2 100644 --- a/src/components/TeamAssignment/TeamAssignment.tsx +++ b/src/components/TeamAssignment/TeamAssignment.tsx @@ -2,13 +2,16 @@ import { FC, memo } from "react" import ContentTitle from "../ui/Content/ContentTitle" import withUserConnected from "../../utils/withUserConnected" import { fetchTeamListIfNeed } from "../../store/teamList" +import { fetchVolunteerListIfNeed } from "../../store/volunteerList" +import VolunteersWithTeamWishes from "./VolunteersWithTeamWishes" const TeamAssignment: FC = (): JSX.Element => ( <> + ) export default memo(withUserConnected(TeamAssignment)) -export const fetchFor = [fetchTeamListIfNeed] +export const fetchFor = [fetchTeamListIfNeed, fetchVolunteerListIfNeed] diff --git a/src/components/TeamAssignment/VolunteersWithTeamWishes.tsx b/src/components/TeamAssignment/VolunteersWithTeamWishes.tsx new file mode 100644 index 0000000..9b05123 --- /dev/null +++ b/src/components/TeamAssignment/VolunteersWithTeamWishes.tsx @@ -0,0 +1,42 @@ +import { FC, memo } from "react" +import { useSelector } from "react-redux" +import { createSelector } from "@reduxjs/toolkit" +import { selectVolunteerList } from "../../store/volunteerList" +import { selectTeamList } from "../../store/teamList" + +const selectVolunteersWithTeamWishes = createSelector( + selectVolunteerList, + selectTeamList, + (volunteers, teams) => + volunteers + .filter((volunteer) => volunteer.teamWishes.length > 0) + .map((volunteer) => ({ + ...volunteer, + teamWishes: volunteer.teamWishes.map((wishId) => { + const matchingTeam = teams.find((team: any) => wishId === team?.id) + return matchingTeam?.name + }), + })) +) + +const VolunteersWithTeamWishes: FC = (): JSX.Element => { + const volunteers = useSelector(selectVolunteersWithTeamWishes) + + return ( +
+
Bénévoles ayant choisi des équipes ({volunteers.length}) :
+
    + {volunteers.map(({ id, lastname, firstname, teamWishes }) => ( +
  • + + {firstname} {lastname} + {" "} + : {teamWishes.join(", ")} +
  • + ))} +
+
+ ) +} + +export default memo(VolunteersWithTeamWishes) diff --git a/src/server/index.ts b/src/server/index.ts index bd5a953..7369ffb 100755 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -29,6 +29,7 @@ import { volunteerParticipationDetailsSet, volunteerTeamWishesSet, volunteerDayWishesSet, + volunteerListGet, } from "./gsheets/volunteers" import { wishListGet, wishAdd } from "./gsheets/wishes" import config from "../config" @@ -86,6 +87,7 @@ app.post("/PreVolunteerAdd", preVolunteerAdd) app.get("/PreVolunteerCountGet", preVolunteerCountGet) app.post("/VolunteerLogin", volunteerLogin) app.post("/VolunteerForgot", volunteerForgot) +app.get("/VolunteerListGet", volunteerListGet) // Secured APIs app.get("/AnnouncementListGet", secure as RequestHandler, announcementListGet) diff --git a/src/store/volunteerList.ts b/src/store/volunteerList.ts index 68e5705..b804be2 100644 --- a/src/store/volunteerList.ts +++ b/src/store/volunteerList.ts @@ -1,8 +1,8 @@ -import { PayloadAction, createSlice, createEntityAdapter } from "@reduxjs/toolkit" +import { PayloadAction, createSlice, createEntityAdapter, createSelector } from "@reduxjs/toolkit" import { StateRequest, toastError, elementListFetch } from "./utils" import { Volunteer } from "../services/volunteers" -import { AppThunk, AppState } from "." +import { AppThunk, AppState, EntitiesRequest } from "." import { volunteerListGet } from "../services/volunteersAccessors" const volunteerAdapter = createEntityAdapter() @@ -47,3 +47,14 @@ export const fetchVolunteerListIfNeed = (): AppThunk => (dispatch, getState) => return null } + +export const selectVolunteerListState = (state: AppState): EntitiesRequest => + state.volunteerList + +export const selectVolunteerList = createSelector( + selectVolunteerListState, + ({ ids, entities, readyStatus }) => { + if (readyStatus !== "success") return [] + return ids.map((id) => entities[id]) as Volunteer[] + } +)