Add TeamList ui component and teamList selectors

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

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)

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)

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 {
+}

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>

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 />,
 })
 

src/pages/Teams/styles.module.scss

@@ -5,5 +5,5 @@
 }
 
 .teamsContent {
-    @include page-content-wrapper(600px);
+    @include page-content-wrapper(700px);
 }

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])
+    }
+)