create team assignment page

src/components/TeamAssignment/TeamAssignment.tsx

@@ -0,0 +1,14 @@
+import { FC, memo } from "react"
+import ContentTitle from "../ui/Content/ContentTitle"
+import withUserConnected from "../../utils/withUserConnected"
+import { fetchTeamListIfNeed } from "../../store/teamList"
+
+const TeamAssignment: FC = (): JSX.Element => (
+    <>
+        <ContentTitle title="Affectation aux équipes" />
+    </>
+)
+
+export default memo(withUserConnected(TeamAssignment))
+
+export const fetchFor = [fetchTeamListIfNeed]

src/components/TeamAssignment/styles.module.scss

@@ -0,0 +1,7 @@
+@import "../../theme/variables";
+@import "../../theme/mixins";
+
+.title {
+    padding-bottom: 10px;
+    font-weight: bold;
+}

src/components/index.ts

@@ -12,6 +12,7 @@ import ParticipationDetailsForm, {
     fetchFor as fetchForParticipationDetailsForm,
 } from "./VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm"
 import PreRegisterForm from "./PreRegisterForm"
+import TeamAssignment, { fetchFor as fetchForTeamAssignment } from "./TeamAssignment/TeamAssignment"
 import TeamWishesForm, {
     fetchFor as fetchForTeamWishesForm,
 } from "./VolunteerBoard/TeamWishesForm/TeamWishesForm"
@@ -35,6 +36,8 @@ export {
     ParticipationDetailsForm,
     fetchForParticipationDetailsForm,
     PreRegisterForm,
+    TeamAssignment,
+    fetchForTeamAssignment,
     TeamWishesForm,
     fetchForTeamWishesForm,
     VolunteerInfo,

src/pages/TeamAssignment/TeamAssignmentPage.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/ui/Page/Page"
+import { TeamAssignment, fetchForTeamAssignment } from "../../components"
+
+export type Props = RouteComponentProps
+
+const TeamAssignmentPage: FC<Props> = (): JSX.Element => {
+    const jwtToken = useSelector(selectUserJwtToken)
+
+    if (jwtToken === undefined) return <p>Loading...</p>
+    if (jwtToken) {
+        return (
+            <Page>
+                <TeamAssignment />
+            </Page>
+        )
+    }
+    return <div>Besoin d'être identifié</div>
+}
+
+// Fetch server-side data here
+export const loadData = (): AppThunk[] => [...fetchForTeamAssignment.map((f) => f())]
+
+export default memo(TeamAssignmentPage)

src/pages/TeamAssignment/index.tsx

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

src/routes/index.ts

@@ -3,6 +3,7 @@ import { RouteConfig } from "react-router-config"
 import App from "../app"
 import AsyncHome, { loadData as loadHomeData } from "../pages/Home"
 import AsyncAnnouncements, { loadData as loadAnnouncementsData } from "../pages/Announcements"
+import AsyncTeamAssignment, { loadData as loadTeamAssignmentData } from "../pages/TeamAssignment"
 import AsyncPreRegisterPage, { loadData as loadPreRegisterPage } from "../pages/PreRegister"
 import AsyncTeams, { loadData as loadTeamsData } from "../pages/Teams"
 import AsyncBoard, { loadData as loadBoardData } from "../pages/Board"
@@ -84,6 +85,11 @@ export default [
                 component: AsyncAnnouncements,
                 loadData: loadAnnouncementsData,
             },
+            {
+                path: "/team-assign-e26as",
+                component: AsyncTeamAssignment,
+                loadData: loadTeamAssignmentData,
+            },
             {
                 component: NotFound,
             },