teams filtered and sorted

src/components/Teams/TeamList.tsx

@@ -2,10 +2,10 @@ import React, { memo } from "react"
 import { useSelector } from "react-redux"
 import styles from "./styles.module.scss"
 import TeamItem from "./TeamItem"
-import { selectTeamList } from "../../store/teamList"
+import { selectSortedActiveTeams } from "../../store/teamList"
 
 const TeamList: React.FC = (): JSX.Element | null => {
-    const teams = useSelector(selectTeamList)
+    const teams = useSelector(selectSortedActiveTeams)
     if (!teams || teams.length === 0) return null
 
     return (

src/components/VolunteerBoard/TeamWishesForm/TeamWishesForm.tsx

@@ -5,7 +5,7 @@ import set from "lodash/set"
 import classnames from "classnames"
 import styles from "./styles.module.scss"
 import { useUserTeamWishes } from "../teamWishes.utils"
-import { fetchTeamListIfNeed, selectTeamList } from "../../../store/teamList"
+import { fetchTeamListIfNeed, selectSortedActiveTeams } from "../../../store/teamList"
 import useSelection from "../useSelection"
 import { fetchVolunteerTeamWishesSetIfNeed } from "../../../store/volunteerTeamWishesSet"
 import FormButton from "../../Form/FormButton/FormButton"
@@ -15,7 +15,7 @@ type Props = {
 }
 
 const TeamWishesForm: FC<Props> = ({ afterSubmit }): JSX.Element | null => {
-    const teams = useSelector(selectTeamList)
+    const teams = useSelector(selectSortedActiveTeams)
     const { selection, setSelection, toggleToSelection, isInSelection } = useSelection()
     const commentRef = useRef<HTMLTextAreaElement | null>(null)
     const [userWishes, saveWishes] = useUserTeamWishes()

src/pages/Volunteers/Volunteers.tsx

@@ -0,0 +1,29 @@
+import { FC, memo } from "react"
+import { RouteComponentProps } from "react-router-dom"
+import { useSelector } from "react-redux"
+
+import { AppThunk } from "../../store"
+import { selectUserJwtToken } from "../../store/auth"
+import Page from "../../components/Page/Page"
+import { fetchVolunteerListIfNeed } from "../../store/volunteerList"
+
+export type Props = RouteComponentProps
+
+const BoardPage: FC<Props> = (): JSX.Element => {
+    const jwtToken = useSelector(selectUserJwtToken)
+
+    if (jwtToken === undefined) return <p>Loading...</p>
+    if (jwtToken) {
+        return (
+            <Page>
+                <div>Liste des bénévoles</div>
+            </Page>
+        )
+    }
+    return <div>Besoin d'être identifié</div>
+}
+
+// Fetch server-side data here
+export const loadData = (): AppThunk[] => [fetchVolunteerListIfNeed()]
+
+export default memo(BoardPage)

src/pages/Volunteers/index.tsx

@@ -0,0 +1,16 @@
+import loadable from "@loadable/component"
+
+import { Loading, ErrorBoundary } from "../../components"
+import { Props, loadData } from "./Volunteers"
+
+const BoardPage = loadable(() => import("./Volunteers"), {
+    fallback: <Loading />,
+})
+
+export default (props: Props): JSX.Element => (
+    <ErrorBoundary>
+        <BoardPage {...props} />
+    </ErrorBoundary>
+)
+
+export { loadData }

src/routes/index.ts

@@ -6,6 +6,7 @@ import AsyncAnnouncements, { loadData as loadAnnouncementsData } from "../pages/
 import AsyncPreRegisterPage, { loadData as loadPreRegisterPage } from "../pages/PreRegister"
 import AsyncTeams, { loadData as loadTeamsData } from "../pages/Teams"
 import AsyncBoard, { loadData as loadBoardData } from "../pages/Board"
+import AsyncVolunteers, { loadData as loadVolunteersData } from "../pages/Volunteers"
 import AsyncWish, { loadData as loadWishData } from "../pages/Wish"
 import AsyncVolunteerPage, { loadData as loadVolunteerPageData } from "../pages/VolunteerPage"
 import Login from "../pages/Login"
@@ -60,6 +61,11 @@ export default [
                 component: AsyncBoard,
                 loadData: loadBoardData,
             },
+            {
+                path: "/benevoles",
+                component: AsyncVolunteers,
+                loadData: loadVolunteersData,
+            },
             {
                 path: "/annonces",
                 component: AsyncAnnouncements,

src/services/teams.ts

@@ -14,6 +14,10 @@ export class Team {
     during = ""
 
     after = ""
+
+    status = ""
+
+    order = 0
 }
 
 export const translationTeam: { [k in keyof Team]: string } = {
@@ -25,6 +29,8 @@ export const translationTeam: { [k in keyof Team]: string } = {
     before: "avant",
     during: "pendant",
     after: "après",
+    status: "statut",
+    order: "ordre",
 }
 
 export const elementName = "Team"

src/store/teamList.ts

@@ -1,4 +1,5 @@
 import { PayloadAction, createSlice, createEntityAdapter, createSelector } from "@reduxjs/toolkit"
+import get from "lodash/get"
 
 import { StateRequest, toastError, elementListFetch } from "./utils"
 import { Team } from "../services/teams"
@@ -57,3 +58,9 @@ export const selectTeamList = createSelector(
         return ids.map((id) => entities[id])
     }
 )
+
+export const selectSortedActiveTeams = createSelector(selectTeamList, (teams) =>
+    [...teams.filter((team) => get(team, "status") === "active")].sort(
+        (a, b) => get(a, "order", 0) - get(b, "order", 0)
+    )
+)