From 9469a670d6ca583901236b7648deccee46eb52c9 Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Sat, 22 Jan 2022 00:16:20 +0100
Subject: [PATCH] Add TeamList ui component and teamList selectors

---
 src/components/Teams/TeamIntro.tsx           | 24 ++++++++++++++++++++
 src/components/Teams/TeamItem.tsx            | 19 ++++++++++++++++
 src/components/Teams/TeamList.tsx            | 20 ++++++++++++++++
 src/components/Teams/styles.module.scss      | 18 +++++++++++++++
 src/pages/Teams/{Teams.tsx => TeamsPage.tsx} |  5 ++++
 src/pages/Teams/index.tsx                    |  4 ++--
 src/pages/Teams/styles.module.scss           |  2 +-
 src/store/teamList.ts                        | 14 ++++++++++--
 8 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Teams/TeamIntro.tsx
 create mode 100644 src/components/Teams/TeamItem.tsx
 create mode 100644 src/components/Teams/TeamList.tsx
 create mode 100755 src/components/Teams/styles.module.scss
 rename src/pages/Teams/{Teams.tsx => TeamsPage.tsx} (91%)

diff --git a/src/components/Teams/TeamIntro.tsx b/src/components/Teams/TeamIntro.tsx
new file mode 100644
index 0000000..45f3d95
--- /dev/null
+++ b/src/components/Teams/TeamIntro.tsx
@@ -0,0 +1,24 @@
+import React from "react"
+
+const TeamIntro: React.FC = (): JSX.Element => (
+    <div>
+        <h1>Les Equipes</h1>
+        <p>
+            Lors de votre participation au festival en tant que bénévole, vous allez faire partie
+            d&apos;une des nombreuses équipes présentes sur le festival.
+        </p>
+        <p>
+            Afin de vous aidez dans votre choix, voici la liste et la description des équipes. Vous
+            pouvez renseigner dans votre profil les équipes qui vous intéressent et vous serez
+            affectés à l&apos;une d&apos;elle en fonction des demandes de chacun. N&apos;hésitez pas
+            à indiquer plusieurs choix pour nous faciliter la tâche.
+        </p>
+        <p>
+            Vous choisissez votre équipe pour son rôle durant le festival. Certaines d&apos;entre
+            elles demandent de la préparation en amont, voire quelques tâches après le festival.
+            N&apos;hésitez pas à vous manifester si vous souhaitez y participer.
+        </p>
+    </div>
+)
+
+export default TeamIntro
diff --git a/src/components/Teams/TeamItem.tsx b/src/components/Teams/TeamItem.tsx
new file mode 100644
index 0000000..7536451
--- /dev/null
+++ b/src/components/Teams/TeamItem.tsx
@@ -0,0 +1,19 @@
+import React, { memo } from "react"
+import styles from "./styles.module.scss"
+import { Team } from "../../services/teams"
+
+interface Props {
+    team: Team
+}
+
+const TeamItem: React.FC<Props> = ({ team }): JSX.Element => {
+    const { name, description } = team
+    return (
+        <li className={styles.teamItem}>
+            <div className={styles.teamName}>{name}</div>
+            <div className={styles.teamDescription}>{description}</div>
+        </li>
+    )
+}
+
+export default memo(TeamItem)
diff --git a/src/components/Teams/TeamList.tsx b/src/components/Teams/TeamList.tsx
new file mode 100644
index 0000000..cc50310
--- /dev/null
+++ b/src/components/Teams/TeamList.tsx
@@ -0,0 +1,20 @@
+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"
+
+const TeamList: React.FC = (): JSX.Element | null => {
+    const teams = useSelector(selectTeamList)
+    if (!teams || teams.length === 0) return null
+
+    return (
+        <ul className={styles.teamList}>
+            {teams.map((team: any) => (
+                <TeamItem team={team} key={team.id} />
+            ))}
+        </ul>
+    )
+}
+
+export default memo(TeamList)
diff --git a/src/components/Teams/styles.module.scss b/src/components/Teams/styles.module.scss
new file mode 100755
index 0000000..00c642e
--- /dev/null
+++ b/src/components/Teams/styles.module.scss
@@ -0,0 +1,18 @@
+@import "../../theme/variables";
+@import "../../theme/mixins";
+
+.teamList {
+    padding: 0;
+    list-style: none;
+}
+
+.teamItem {
+    padding: 10px 0;
+}
+
+.teamName {
+    font-weight: bold;
+}
+
+.teamDescription {
+}
diff --git a/src/pages/Teams/Teams.tsx b/src/pages/Teams/TeamsPage.tsx
similarity index 91%
rename from src/pages/Teams/Teams.tsx
rename to src/pages/Teams/TeamsPage.tsx
index 98d4dd1..f90f3b6 100644
--- a/src/pages/Teams/Teams.tsx
+++ b/src/pages/Teams/TeamsPage.tsx
@@ -7,6 +7,8 @@ import { AppState, AppThunk, EntitiesRequest } from "../../store"
 import { Team } from "../../services/teams"
 import { fetchTeamListIfNeed } from "../../store/teamList"
 import styles from "./styles.module.scss"
+import TeamList from "../../components/Teams/TeamList"
+import TeamIntro from "../../components/Teams/TeamIntro"
 
 export type Props = RouteComponentProps
 
@@ -52,6 +54,9 @@ const TeamsPage: FC<Props> = (): JSX.Element => (
     <div className={styles.teamsPage}>
         <div className={styles.teamsContent}>
             <Helmet title="TeamsPage" />
+            <TeamIntro />
+            <TeamList />
+            <hr />
             {useList((state: AppState) => state.teamList, fetchTeamListIfNeed)()}
         </div>
     </div>
diff --git a/src/pages/Teams/index.tsx b/src/pages/Teams/index.tsx
index c9f2623..9173c0a 100755
--- a/src/pages/Teams/index.tsx
+++ b/src/pages/Teams/index.tsx
@@ -1,9 +1,9 @@
 import loadable from "@loadable/component"
 
 import { Loading, ErrorBoundary } from "../../components"
-import { Props, loadData } from "./Teams"
+import { Props, loadData } from "./TeamsPage"
 
-const Teams = loadable(() => import("./Teams"), {
+const Teams = loadable(() => import("./TeamsPage"), {
     fallback: <Loading />,
 })
 
diff --git a/src/pages/Teams/styles.module.scss b/src/pages/Teams/styles.module.scss
index 31ba4c2..07959c8 100755
--- a/src/pages/Teams/styles.module.scss
+++ b/src/pages/Teams/styles.module.scss
@@ -5,5 +5,5 @@
 }
 
 .teamsContent {
-    @include page-content-wrapper(600px);
+    @include page-content-wrapper(700px);
 }
diff --git a/src/store/teamList.ts b/src/store/teamList.ts
index 254e729..8e27367 100644
--- a/src/store/teamList.ts
+++ b/src/store/teamList.ts
@@ -1,8 +1,8 @@
-import { PayloadAction, createSlice, createEntityAdapter } from "@reduxjs/toolkit"
+import { PayloadAction, createSlice, createEntityAdapter, createSelector } from "@reduxjs/toolkit"
 
 import { StateRequest, toastError, elementListFetch } from "./utils"
 import { Team, teamListGet } from "../services/teams"
-import { AppThunk, AppState } from "."
+import { AppThunk, AppState, EntitiesRequest } from "."
 
 const teamAdapter = createEntityAdapter<Team>()
 
@@ -46,3 +46,13 @@ export const fetchTeamListIfNeed = (): AppThunk => (dispatch, getState) => {
 
     return null
 }
+
+export const selectTeamListState = (state: AppState): EntitiesRequest<Team> => state.teamList
+
+export const selectTeamList = createSelector(
+    selectTeamListState,
+    ({ ids, entities, readyStatus }) => {
+        if (readyStatus !== "success") return []
+        return ids.map((id) => entities[id])
+    }
+)