assigners can assign volunteer to a team

src/components/TeamAssignment/TeamWithCandidates.tsx

@@ -5,6 +5,7 @@ import classnames from "classnames"
 import { selectVolunteerList } from "../../store/volunteerList"
 import { selectTeamList } from "../../store/teamList"
 import styles from "./styles.module.scss"
+import { useTeamAssign } from "./teamAssign.utils"
 
 const selectTeamsWithVolunteersCandidates = createSelector(
     selectVolunteerList,
@@ -37,7 +38,13 @@ type PropsDaysDisplay = {
 
 const DaysDisplay: FC<PropsDaysDisplay> = ({ dayWishes }): JSX.Element => (
     <span className={styles.daysDisplay}>
-        {dayWishes.map((day) => (day === "S" || day === "D" ? <strong>{day}</strong> : day))}
+        {dayWishes.map((day) =>
+            day === "S" || day === "D" ? (
+                <strong key={day}>{day}</strong>
+            ) : (
+                <span key={day}>{day}</span>
+            )
+        )}
     </span>
 )
 
@@ -48,10 +55,14 @@ type Props = {
 const TeamWithCandidates: FC<Props> = ({ teamId }): JSX.Element | null => {
     const teams = useSelector(selectTeamsWithVolunteersCandidates)
     const team = teams.find((t) => t.id === teamId)
+    const [, saveTeam] = useTeamAssign()
 
-    const onTeamSelected = useCallback((volunteerId, selectedTeamId) => {
-        console.log("select ", volunteerId, selectedTeamId)
-    }, [])
+    const onTeamSelected = useCallback(
+        (volunteerId, selectedTeamId) => {
+            saveTeam(volunteerId, selectedTeamId)
+        },
+        [saveTeam]
+    )
 
     if (!team) return null
 

src/components/TeamAssignment/teamAssign.utils.ts

@@ -0,0 +1,27 @@
+import { shallowEqual, useSelector } from "react-redux"
+import { useCallback } from "react"
+import { selectUserJwtToken } from "../../store/auth"
+import { AppState } from "../../store"
+import useAction from "../../utils/useAction"
+import { fetchVolunteerTeamAssignSet } from "../../store/volunteerTeamAssignSet"
+
+export const useTeamAssign = (): [any, any] => {
+    const save = useAction(fetchVolunteerTeamAssignSet)
+    const jwtToken = useSelector(selectUserJwtToken)
+    const teamSet = useSelector(
+        (state: AppState) => state.volunteerTeamAssignSet?.entity,
+        shallowEqual
+    )
+
+    const saveWishes = useCallback(
+        (volunteerId, teamId) => {
+            save(jwtToken, 0, {
+                volunteer: volunteerId,
+                team: teamId,
+            })
+        },
+        [save, jwtToken]
+    )
+
+    return [teamSet, saveWishes]
+}