diff --git a/src/components/TeamAssignment/TeamWithCandidates.tsx b/src/components/TeamAssignment/TeamWithCandidates.tsx index 645d2a4..5e3fe89 100644 --- a/src/components/TeamAssignment/TeamWithCandidates.tsx +++ b/src/components/TeamAssignment/TeamWithCandidates.tsx @@ -2,14 +2,14 @@ import { FC, memo, useCallback } from "react" import { useSelector } from "react-redux" import { createSelector } from "@reduxjs/toolkit" import classnames from "classnames" -import { selectVolunteerList } from "../../store/volunteerList" +import { selectVolunteerListAlphaSorted } from "../../store/volunteerList" import { selectTeamList } from "../../store/teamList" import styles from "./styles.module.scss" import { useTeamAssign } from "./teamAssign.utils" import TeamMembers from "../TeamMembers/TeamMembers" const selectTeamsWithVolunteersCandidates = createSelector( - selectVolunteerList, + selectVolunteerListAlphaSorted, selectTeamList, (volunteers, teams) => teams.map(({ id, name }: any) => { diff --git a/src/components/TeamAssignment/VolunteersWithTeamWishes.tsx b/src/components/TeamAssignment/VolunteersWithTeamWishes.tsx index 9b05123..37b2f23 100644 --- a/src/components/TeamAssignment/VolunteersWithTeamWishes.tsx +++ b/src/components/TeamAssignment/VolunteersWithTeamWishes.tsx @@ -1,11 +1,11 @@ import { FC, memo } from "react" import { useSelector } from "react-redux" import { createSelector } from "@reduxjs/toolkit" -import { selectVolunteerList } from "../../store/volunteerList" +import { selectVolunteerListAlphaSorted } from "../../store/volunteerList" import { selectTeamList } from "../../store/teamList" const selectVolunteersWithTeamWishes = createSelector( - selectVolunteerList, + selectVolunteerListAlphaSorted, selectTeamList, (volunteers, teams) => volunteers diff --git a/src/components/TeamMembers/TeamMembers.tsx b/src/components/TeamMembers/TeamMembers.tsx index 13b9123..a822c15 100644 --- a/src/components/TeamMembers/TeamMembers.tsx +++ b/src/components/TeamMembers/TeamMembers.tsx @@ -2,7 +2,7 @@ import { FC } from "react" import { createSelector } from "@reduxjs/toolkit" import { useSelector } from "react-redux" import classnames from "classnames" -import { selectVolunteerList } from "../../store/volunteerList" +import { selectVolunteerListAlphaSorted } from "../../store/volunteerList" import { selectTeamList } from "../../store/teamList" import styles from "./styles.module.scss" import { Volunteer } from "../../services/volunteers" @@ -14,7 +14,7 @@ interface ExtendedVolunteer extends Volunteer { } const selectVolunteersWithTeam = createSelector( - selectVolunteerList, + selectVolunteerListAlphaSorted, selectTeamList, (volunteers, teams): ExtendedVolunteer[] => volunteers diff --git a/src/store/volunteerList.ts b/src/store/volunteerList.ts index 9f8be70..b99633c 100644 --- a/src/store/volunteerList.ts +++ b/src/store/volunteerList.ts @@ -60,3 +60,9 @@ export const selectVolunteerList = createSelector( return ids.map((id) => entities[id]) as Volunteer[] } ) + +const fullName = (volunteer: Volunteer) => `${volunteer.firstname} ${volunteer.lastname}` + +export const selectVolunteerListAlphaSorted = createSelector(selectVolunteerList, (volunteer) => + [...volunteer].sort((vA, vB) => fullName(vA).localeCompare(fullName(vB))) +)