From 220a8ac1006f7407b9fa036aa6c9d65f8b6ddf43 Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Thu, 7 Apr 2022 22:04:07 +0200
Subject: [PATCH] create team assignment page

---
 .../TeamAssignment/TeamAssignment.tsx         | 14 +++++++++
 .../TeamAssignment/styles.module.scss         |  7 +++++
 src/components/index.ts                       |  3 ++
 .../TeamAssignment/TeamAssignmentPage.tsx     | 29 +++++++++++++++++++
 src/pages/TeamAssignment/index.tsx            | 16 ++++++++++
 src/routes/index.ts                           |  6 ++++
 6 files changed, 75 insertions(+)
 create mode 100644 src/components/TeamAssignment/TeamAssignment.tsx
 create mode 100755 src/components/TeamAssignment/styles.module.scss
 create mode 100644 src/pages/TeamAssignment/TeamAssignmentPage.tsx
 create mode 100755 src/pages/TeamAssignment/index.tsx

diff --git a/src/components/TeamAssignment/TeamAssignment.tsx b/src/components/TeamAssignment/TeamAssignment.tsx
new file mode 100644
index 0000000..5d6d5fc
--- /dev/null
+++ b/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]
diff --git a/src/components/TeamAssignment/styles.module.scss b/src/components/TeamAssignment/styles.module.scss
new file mode 100755
index 0000000..2fd66b4
--- /dev/null
+++ b/src/components/TeamAssignment/styles.module.scss
@@ -0,0 +1,7 @@
+@import "../../theme/variables";
+@import "../../theme/mixins";
+
+.title {
+    padding-bottom: 10px;
+    font-weight: bold;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 4368455..8392574 100755
--- a/src/components/index.ts
+++ b/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,
diff --git a/src/pages/TeamAssignment/TeamAssignmentPage.tsx b/src/pages/TeamAssignment/TeamAssignmentPage.tsx
new file mode 100644
index 0000000..21c25c5
--- /dev/null
+++ b/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)
diff --git a/src/pages/TeamAssignment/index.tsx b/src/pages/TeamAssignment/index.tsx
new file mode 100755
index 0000000..d7313cb
--- /dev/null
+++ b/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 }
diff --git a/src/routes/index.ts b/src/routes/index.ts
index b72a123..24dba71 100755
--- a/src/routes/index.ts
+++ b/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,
             },