Adds redux list add example

src/components/AddEnvie/__tests__/AddEnvie.tsx

@@ -0,0 +1,20 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+
+import AddEnvie from "../index"
+
+describe("<AddEnvie />", () => {
+    it("renders", () => {
+        const dispatch = jest.fn()
+        const tree = render(
+            <MemoryRouter>
+                <AddEnvie dispatch={dispatch} />
+            </MemoryRouter>
+        ).container.firstChild
+
+        expect(tree).toMatchSnapshot()
+    })
+})

src/components/AddEnvie/__tests__/__snapshots__/AddEnvie.tsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AddEnvie /> renders 1`] = `
+<section
+  class="EnvieList"
+>
+  <h2>
+    Ajouter une nouvelle envie
+  </h2>
+  <form>
+    <label
+      for="postDomaine"
+    >
+      Domaine:
+      <input
+        id="postDomaine"
+        name="postDomaine"
+        type="text"
+        value=""
+      />
+    </label>
+    <label
+      for="postEnvies"
+    >
+      Envies:
+      <textarea
+        id="postEnvies"
+        name="postEnvies"
+      />
+    </label>
+    <label
+      for="postPrecisions"
+    >
+      Precisions:
+      <textarea
+        id="postPrecisions"
+        name="postPrecisions"
+      />
+    </label>
+    <label
+      for="postEquipes"
+    >
+      Equipes:
+      <input
+        id="postEquipes"
+        name="postEquipes"
+        type="text"
+        value=""
+      />
+    </label>
+    <label
+      for="postDateAjout"
+    >
+      DateAjout:
+      <input
+        id="postDateAjout"
+        name="postDateAjout"
+        type="date"
+        value=""
+      />
+    </label>
+    <button
+      type="button"
+    >
+      Save Post
+    </button>
+  </form>
+</section>
+`;

src/components/AddEnvie/index.tsx

@@ -0,0 +1,117 @@
+import React, { useState, memo } from "react"
+import { toast } from "react-toastify"
+
+import { AppDispatch } from "../../store"
+
+import { postEnvie } from "../../store/envieAdd"
+import styles from "./styles.module.scss"
+
+interface Props {
+    dispatch: AppDispatch
+}
+
+const AddEnvie = ({ dispatch }: Props) => {
+    const [domaine, setDomaine] = useState("")
+    const [envies, setEnvies] = useState("")
+    const [precisions, setPrecisions] = useState("")
+    const [equipes, setEquipes] = useState([""])
+    const [dateAjout, setDateAjout] = useState("")
+
+    const onDomaineChanged = (e: React.ChangeEvent<HTMLInputElement>) => setDomaine(e.target.value)
+    const onEnviesChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => setEnvies(e.target.value)
+    const onPrecisionsChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+        setPrecisions(e.target.value)
+    const onEquipesChanged = (e: React.ChangeEvent<HTMLInputElement>) =>
+        setEquipes(e.target.value.split(/, ?/))
+    const onDateAjoutChanged = (e: React.ChangeEvent<HTMLInputElement>) =>
+        setDateAjout(e.target.value)
+
+    const onSavePostClicked = () => {
+        if (domaine && envies) {
+            dispatch(
+                postEnvie({
+                    domaine,
+                    envies,
+                    precisions,
+                    equipes,
+                    dateAjout,
+                })
+            )
+
+            setDomaine("")
+            setEnvies("")
+            setPrecisions("")
+            setEquipes([""])
+            setDateAjout("")
+        } else {
+            toast.warning("Il faut au moins préciser un domaine et l'envie", {
+                position: "top-center",
+                autoClose: 6000,
+                hideProgressBar: true,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+            })
+        }
+    }
+    return (
+        <section className={styles.EnvieList}>
+            <h2>Ajouter une nouvelle envie</h2>
+            <form>
+                <label htmlFor="postDomaine">
+                    Domaine:
+                    <input
+                        type="text"
+                        id="postDomaine"
+                        name="postDomaine"
+                        value={domaine}
+                        onChange={onDomaineChanged}
+                    />
+                </label>
+                <label htmlFor="postEnvies">
+                    Envies:
+                    <textarea
+                        id="postEnvies"
+                        name="postEnvies"
+                        value={envies}
+                        onChange={onEnviesChanged}
+                    />
+                </label>
+                <label htmlFor="postPrecisions">
+                    Precisions:
+                    <textarea
+                        id="postPrecisions"
+                        name="postPrecisions"
+                        value={precisions}
+                        onChange={onPrecisionsChanged}
+                    />
+                </label>
+                <label htmlFor="postEquipes">
+                    Equipes:
+                    <input
+                        type="text"
+                        id="postEquipes"
+                        name="postEquipes"
+                        value={equipes.join(", ")}
+                        onChange={onEquipesChanged}
+                    />
+                </label>
+                <label htmlFor="postDateAjout">
+                    DateAjout:
+                    <input
+                        type="date"
+                        id="postDateAjout"
+                        name="postDateAjout"
+                        value={dateAjout}
+                        onChange={onDateAjoutChanged}
+                    />
+                </label>
+                <button type="button" onClick={onSavePostClicked}>
+                    Save Post
+                </button>
+            </form>
+        </section>
+    )
+}
+export default memo(AddEnvie)

src/components/AddEnvie/styles.module.scss

@@ -0,0 +1,17 @@
+@import "../../theme/variables";
+
+.jav-game-list {
+    color: $color-white;
+
+    ul {
+        padding-left: 17px;
+
+        li {
+            margin-bottom: 0.5em;
+        }
+    }
+
+    a {
+        color: $color-white;
+    }
+}

src/components/index.ts

@@ -3,5 +3,6 @@ import JeuxJavList from "./JeuxJavList"
 import Info from "./Info"
 import ErrorBoundary from "./ErrorBoundary"
 import Loading from "./Loading"
+import AddEnvie from "./AddEnvie"
 
-export { List, JeuxJavList, Info, ErrorBoundary, Loading }
+export { List, JeuxJavList, Info, ErrorBoundary, Loading, AddEnvie }