sort volunteers alphabetically in team assign

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) => {

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

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

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)))
+)