Add volunteerTeamWishesSet in store

src/pages/TeamWishes/TeamWishes.tsx

@@ -0,0 +1,93 @@
+import { FC, memo, useCallback, useEffect, useState } from "react"
+import { RouteComponentProps } from "react-router-dom"
+import { useSelector, shallowEqual, useDispatch } from "react-redux"
+
+import { AppState, AppThunk } from "../../store"
+import {
+    fetchVolunteerTeamWishesSet,
+    fetchVolunteerTeamWishesSetIfNeed,
+} from "../../store/volunteerTeamWishesSet"
+import { VolunteerTeamWishes } from "../../services/volunteers"
+import { selectUserJwtToken } from "../../store/auth"
+
+export type Props = RouteComponentProps
+
+let prevWishes: VolunteerTeamWishes | undefined
+
+const HomePage: FC<Props> = (): JSX.Element => {
+    const dispatch = useDispatch()
+    const jwtToken = useSelector(selectUserJwtToken)
+
+    const wishesForm = useSelector((state: AppState) => {
+        const wishes = state.volunteerTeamWishesSet?.entity
+        if (wishes) {
+            prevWishes = wishes
+            return wishes
+        }
+        return prevWishes
+    }, shallowEqual)
+
+    const [teamWishes, setTeamWishes] = useState(wishesForm?.teamWishes.join(",") || "")
+    const [teamWishComment, setTeamWishComment] = useState(wishesForm?.teamWishComment || "")
+
+    useEffect(() => {
+        setTeamWishes(wishesForm?.teamWishes.join(",") || "")
+        setTeamWishComment(wishesForm?.teamWishComment || "")
+    }, [wishesForm])
+
+    const onTeamWishesChanged = (e: React.ChangeEvent<HTMLInputElement>) =>
+        setTeamWishes(e.target.value)
+    const onTeamWishCommentChanged = (e: React.ChangeEvent<HTMLInputElement>) =>
+        setTeamWishComment(e.target.value)
+
+    const onSubmit = useCallback(
+        (event: React.SyntheticEvent): void => {
+            event.preventDefault()
+            if (!wishesForm) {
+                console.error("NO FORM WISHES RECEIVED")
+                return // Form should not even appear if this happens
+            }
+            dispatch(
+                fetchVolunteerTeamWishesSet(jwtToken, 0, {
+                    id: wishesForm.id,
+                    teamWishes: (teamWishes || "").split(","),
+                    teamWishComment,
+                })
+            )
+        },
+        [dispatch, jwtToken, wishesForm, teamWishes, teamWishComment]
+    )
+
+    if (jwtToken === undefined) return <p>Loading...</p>
+
+    if (jwtToken) {
+        return (
+            <form>
+                <input
+                    type="text"
+                    id="teamWishes"
+                    required
+                    value={teamWishes}
+                    onChange={onTeamWishesChanged}
+                />
+                <br />
+                <input
+                    type="text"
+                    id="teamWishComment"
+                    required
+                    value={teamWishComment}
+                    onChange={onTeamWishCommentChanged}
+                />
+                <button type="button" onClick={onSubmit}>
+                    Envoyer
+                </button>
+            </form>
+        )
+    }
+    return <div>Besoin d&apos;être identifié</div>
+}
+
+// Fetch server-side data here
+export const loadData = (): AppThunk[] => [fetchVolunteerTeamWishesSetIfNeed()]
+
+export default memo(HomePage)

src/pages/TeamWishes/index.tsx

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

src/pages/TeamWishes/styles.module.scss

@@ -0,0 +1 @@
+@import "../../theme/mixins";