diff --git a/src/components/Teams/TeamList.tsx b/src/components/Teams/TeamList.tsx index cc50310..cf4ab3a 100644 --- a/src/components/Teams/TeamList.tsx +++ b/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 ( diff --git a/src/components/VolunteerBoard/TeamWishesForm/TeamWishesForm.tsx b/src/components/VolunteerBoard/TeamWishesForm/TeamWishesForm.tsx index 65b5912..03c2242 100644 --- a/src/components/VolunteerBoard/TeamWishesForm/TeamWishesForm.tsx +++ b/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 = ({ afterSubmit }): JSX.Element | null => { - const teams = useSelector(selectTeamList) + const teams = useSelector(selectSortedActiveTeams) const { selection, setSelection, toggleToSelection, isInSelection } = useSelection() const commentRef = useRef(null) const [userWishes, saveWishes] = useUserTeamWishes() diff --git a/src/pages/Volunteers/Volunteers.tsx b/src/pages/Volunteers/Volunteers.tsx new file mode 100644 index 0000000..3791e7d --- /dev/null +++ b/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 = (): JSX.Element => { + const jwtToken = useSelector(selectUserJwtToken) + + if (jwtToken === undefined) return

Loading...

+ if (jwtToken) { + return ( + +
Liste des bénévoles
+
+ ) + } + return
Besoin d'être identifié
+} + +// Fetch server-side data here +export const loadData = (): AppThunk[] => [fetchVolunteerListIfNeed()] + +export default memo(BoardPage) diff --git a/src/pages/Volunteers/index.tsx b/src/pages/Volunteers/index.tsx new file mode 100755 index 0000000..7bee178 --- /dev/null +++ b/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: , +}) + +export default (props: Props): JSX.Element => ( + + + +) + +export { loadData } diff --git a/src/routes/index.ts b/src/routes/index.ts index 3888761..9699fa0 100755 --- a/src/routes/index.ts +++ b/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, diff --git a/src/services/teams.ts b/src/services/teams.ts index cfb19d3..cd88b75 100644 --- a/src/services/teams.ts +++ b/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" diff --git a/src/store/teamList.ts b/src/store/teamList.ts index 34cd079..17b096a 100644 --- a/src/store/teamList.ts +++ b/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) + ) +)