Adds createEntityAdapter

src/components/Info/__tests__/Info.tsx

@@ -12,7 +12,7 @@ describe("<Info />", () => {
             <MemoryRouter>
                 <Info
                     item={{
-                        id: 1,
+                        membreId: 1,
                         name: "PeL",
                         phone: "+886 0970...",
                         email: "forceoranj@gmail.com",

src/components/JeuJavList/__tests__/JeuJavList.tsx

@@ -0,0 +1,53 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+
+import mockStore from "../../../utils/mockStore"
+import List from "../index"
+
+describe("<List />", () => {
+    const renderHelper = (reducer = { readyStatus: "idle" }) => {
+        const { dispatch, ProviderWithStore } = mockStore({ jeuJavList: reducer })
+        const { container } = render(
+            <ProviderWithStore>
+                <MemoryRouter>
+                    <List ids={[5]} />
+                </MemoryRouter>
+            </ProviderWithStore>
+        )
+
+        return { dispatch, firstChild: container.firstChild }
+    }
+
+    it("renders", () => {
+        const reducer = {
+            readyStatus: "success",
+            ids: [5],
+            entities: {
+                "5": {
+                    id: 5,
+                    titre: "6 qui prend!",
+                    auteur: "Wolfgang Kramer",
+                    editeur: "(uncredited) , Design Edge , B",
+                    minJoueurs: 2,
+                    maxJoueurs: 10,
+                    duree: 45,
+                    type: "Ambiance",
+                    poufpaf: "0-9-2/6-qui-prend-6-nimmt",
+                    photo: "https://cf.geekdo-images.com/thumb/img/lzczxR5cw7an7tRWeHdOrRtLyes=/fit-in/200x150/pic772547.jpg",
+                    bggPhoto: "",
+                    bggId: 432,
+                    exemplaires: 1,
+                    dispoPret: 1,
+                    nonRangee: 0,
+                    horodatage: "0000-00-00",
+                    ean: "3421272101313",
+                },
+            },
+        }
+
+        expect(renderHelper(reducer).firstChild).toMatchSnapshot()
+    })
+})

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

@@ -2,7 +2,7 @@
 
 exports[`<List /> renders 1`] = `
 <div
-  class="JeuxJavList"
+  class="JeuJavList"
 >
   <h4>
     Jeux JAV

src/components/JeuJavList/index.tsx

@@ -0,0 +1,36 @@
+import { memo } from "react"
+import { useSelector, shallowEqual } from "react-redux"
+import { EntityId } from "@reduxjs/toolkit"
+// import { Link } from "react-router-dom"
+
+import { AppState } from "../../store"
+import styles from "./styles.module.scss"
+
+interface Props {
+    ids: EntityId[]
+}
+
+const List = ({ ids }: Props) => {
+    const { entities: jeuxJav } = useSelector((state: AppState) => state.jeuJavList, shallowEqual)
+    return (
+        <div className={styles.JeuJavList}>
+            <h4>Jeux JAV</h4>
+            <ul>
+                {ids.map((id) => {
+                    const jeu = jeuxJav[id]
+                    if (!jeu) {
+                        return <li key={id}>Le jeu #{id} n&apos;existe pas</li>
+                    }
+                    const { titre, bggId } = jeu
+                    return (
+                        <li key={id}>
+                            {titre} - [{bggId}]
+                        </li>
+                    )
+                })}
+            </ul>
+        </div>
+    )
+}
+
+export default memo(List)

src/components/JeuxJavList/__tests__/JeuxJavList.tsx

@@ -1,40 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { render } from "@testing-library/react"
-import { MemoryRouter } from "react-router-dom"
-
-import List from "../index"
-
-describe("<List />", () => {
-    it("renders", () => {
-        const tree = render(
-            <MemoryRouter>
-                <List
-                    items={[
-                        {
-                            id: 5,
-                            titre: "6 qui prend!",
-                            auteur: "Wolfgang Kramer",
-                            editeur: "(uncredited) , Design Edge , B",
-                            minJoueurs: 2,
-                            maxJoueurs: 10,
-                            duree: 45,
-                            type: "Ambiance",
-                            poufpaf: "0-9-2/6-qui-prend-6-nimmt",
-                            bggId: 432,
-                            exemplaires: 1,
-                            dispoPret: 1,
-                            nonRangee: 0,
-                            ean: "3421272101313",
-                            bggPhoto:
-                                "https://cf.geekdo-images.com/thumb/img/lzczxR5cw7an7tRWeHdOrRtLyes=/fit-in/200x150/pic772547.jpg",
-                        },
-                    ]}
-                />
-            </MemoryRouter>
-        ).container.firstChild
-
-        expect(tree).toMatchSnapshot()
-    })
-})

src/components/JeuxJavList/index.tsx

@@ -1,24 +0,0 @@
-import { memo } from "react"
-// import { Link } from "react-router-dom"
-
-import { JeuxJav } from "../../services/jeuxJav"
-import styles from "./styles.module.scss"
-
-interface Props {
-    items: JeuxJav[]
-}
-
-const List = ({ items }: Props) => (
-    <div className={styles.JeuxJavList}>
-        <h4>Jeux JAV</h4>
-        <ul>
-            {items.map(({ id, titre, bggId }) => (
-                <li key={id}>
-                    {titre} - [{bggId}]
-                </li>
-            ))}
-        </ul>
-    </div>
-)
-
-export default memo(List)

src/components/List/__tests__/List.tsx

@@ -13,7 +13,7 @@ describe("<List />", () => {
                 <List
                     items={[
                         {
-                            id: 1,
+                            membreId: 1,
                             name: "PeL",
                             phone: "+886 0970...",
                             email: "forceoranj@gmail.com",

src/components/List/index.tsx

@@ -12,9 +12,9 @@ const List = ({ items }: Props) => (
     <div className={styles.UserList}>
         <h4>User List</h4>
         <ul>
-            {items.map(({ id, name }) => (
-                <li key={id}>
-                    <Link to={`/UserInfo/${id}`}>{name}</Link>
+            {items.map(({ membreId, name }) => (
+                <li key={membreId}>
+                    <Link to={`/UserInfo/${membreId}`}>{name}</Link>
                 </li>
             ))}
         </ul>

src/components/index.ts

@@ -1,8 +1,8 @@
 import List from "./List"
-import JeuxJavList from "./JeuxJavList"
+import JeuJavList from "./JeuJavList"
 import Info from "./Info"
 import ErrorBoundary from "./ErrorBoundary"
 import Loading from "./Loading"
 import AddEnvie from "./AddEnvie"
 
-export { List, JeuxJavList, Info, ErrorBoundary, Loading, AddEnvie }
+export { List, JeuJavList, Info, ErrorBoundary, Loading, AddEnvie }