Adds gSheet specific entity read

src/pages/MembrePage/MembrePage.tsx

@@ -0,0 +1,48 @@
+import { useEffect, memo } from "react"
+import { RouteComponentProps } from "react-router-dom"
+import { useDispatch, useSelector, shallowEqual } from "react-redux"
+import { Helmet } from "react-helmet"
+
+import { AppState, AppThunk } from "../../store"
+import { fetchMembreDataIfNeed } from "../../store/membre"
+import { MembreInfo } from "../../components"
+import styles from "./styles.module.scss"
+
+export type Props = RouteComponentProps<{ id: string }>
+
+const MembrePage = ({ match }: Props): JSX.Element => {
+    const { id: rawId } = match.params
+    const id = +rawId
+    const dispatch = useDispatch()
+    const membre = useSelector((state: AppState) => state.membre, shallowEqual)
+
+    useEffect(() => {
+        dispatch(fetchMembreDataIfNeed(id))
+    }, [dispatch, id])
+
+    const renderInfo = () => {
+        const membreInfo = membre
+
+        if (!membreInfo || membreInfo.readyStatus === "request") return <p>Loading...</p>
+
+        if (membreInfo.readyStatus === "failure" || !membreInfo.entity)
+            return <p>Oops! Failed to load data.</p>
+
+        return <MembreInfo item={membreInfo.entity} />
+    }
+
+    return (
+        <div className={styles.Membre}>
+            <Helmet title="User Info" />
+            {renderInfo()}
+        </div>
+    )
+}
+
+interface LoadDataArgs {
+    params: { id: number }
+}
+
+export const loadData = ({ params }: LoadDataArgs): AppThunk[] => [fetchMembreDataIfNeed(params.id)]
+
+export default memo(MembrePage)

src/pages/MembrePage/__tests__/MembrePage.tsx

@@ -4,27 +4,36 @@
 import { render } from "@testing-library/react"
 import { MemoryRouter } from "react-router-dom"
 
+import { fetchMembreDataIfNeed } from "../../../store/membre"
 import mockStore from "../../../utils/mockStore"
-import UserInfo from "../UserInfo"
+import MembrePage from "../MembrePage"
 
-describe("<UserInfo />", () => {
+describe("<MembrePage />", () => {
     const mockData = {
-        memberId: 1,
-        name: "PeL",
-        phone: "+886 0970...",
-        email: "forceoranj@gmail.com",
-        website: "https://www.parisestludique.fr",
+        id: 1,
+        nom: "Aupeix",
+        prenom: "Amélie",
+        mail: "pakouille.lakouille@yahoo.fr",
+        telephone: "0675650392",
+        photo: "images/membres/$taille/amélie_aupeix.jpg",
+        alimentation: "Végétarien",
+        majeur: 1,
+        privilege: 0,
+        actif: 0,
+        commentaire: "",
+        horodatage: "0000-00-00",
+        passe: "$2y$10$fSxY9AIuxSiEjwF.J3eXGubIxUPlobkyRrNIal8ASimSjNj4SR.9O",
     }
-    const { memberId } = mockData
+    const { id } = mockData
 
     const renderHelper = (reducer = {}) => {
-        const { dispatch, ProviderWithStore } = mockStore({ userData: reducer })
+        const { dispatch, ProviderWithStore } = mockStore({ membre: reducer })
         const { container } = render(
             <ProviderWithStore>
                 <MemoryRouter>
                     {/*
             @ts-expect-error */}
-                    <UserInfo match={{ params: { memberId } }} />
+                    <MembrePage match={{ params: { id } }} />
                 </MemoryRouter>
             </ProviderWithStore>
         )
@@ -32,6 +41,13 @@ describe("<UserInfo />", () => {
         return { dispatch, firstChild: container.firstChild }
     }
 
+    it("should fetch data when page loaded", () => {
+        const { dispatch } = renderHelper()
+
+        expect(dispatch).toHaveBeenCalledTimes(1)
+        expect(dispatch.mock.calls[0][0].toString()).toBe(fetchMembreDataIfNeed(id).toString())
+    })
+
     it("renders the loading status if data invalid", () => {
         expect(renderHelper().firstChild).toMatchSnapshot()
     })

src/pages/MembrePage/__tests__/__snapshots__/MembrePage.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MembrePage /> renders an error if loading failed 1`] = `
+<div
+  class="Membre"
+>
+  <p>
+    Oops! Failed to load data.
+  </p>
+</div>
+`;
+
+exports[`<MembrePage /> renders the <Info /> if loading was successful 1`] = `
+<div
+  class="Membre"
+>
+  <div
+    class="MembreCard"
+  >
+    <h4>
+      Membre Info
+    </h4>
+    <ul>
+      <li>
+        Prénom: 
+        Amélie
+      </li>
+      <li>
+        Nom: 
+        Aupeix
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`<MembrePage /> renders the loading status if data invalid 1`] = `
+<div
+  class="Membre"
+>
+  <p>
+    Oops! Failed to load data.
+  </p>
+</div>
+`;
+
+exports[`<MembrePage /> renders the loading status if requesting data 1`] = `
+<div
+  class="Membre"
+>
+  <p>
+    Loading...
+  </p>
+</div>
+`;

src/pages/MembrePage/index.tsx

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

src/pages/MembrePage/styles.module.scss

@@ -1,3 +1,3 @@
-.UserInfo {
+.Membre {
     padding: 0 15px;
 }

src/pages/UserInfo/UserInfo.tsx

@@ -1,48 +0,0 @@
-import { useEffect, memo } from "react"
-import { RouteComponentProps } from "react-router-dom"
-import { useDispatch, useSelector, shallowEqual } from "react-redux"
-import { Helmet } from "react-helmet"
-
-import { AppState, AppThunk } from "../../store"
-import { fetchUserDataIfNeed } from "../../store/userData"
-import { Info } from "../../components"
-import styles from "./styles.module.scss"
-
-export type Props = RouteComponentProps<{ memberId: string }>
-
-const UserInfo = ({ match }: Props): JSX.Element => {
-    const { memberId: rawId } = match.params
-    const id = +rawId
-    const dispatch = useDispatch()
-    const userData = useSelector((state: AppState) => state.userData, shallowEqual)
-
-    useEffect(() => {
-        dispatch(fetchUserDataIfNeed(id))
-    }, [dispatch, id])
-
-    const renderInfo = () => {
-        const userInfo = userData
-
-        if (!userInfo || userInfo.readyStatus === "request") return <p>Loading...</p>
-
-        if (userInfo.readyStatus === "failure" || !userInfo.entity)
-            return <p>Oops! Failed to load data.</p>
-
-        return <Info item={userInfo.entity} />
-    }
-
-    return (
-        <div className={styles.UserInfo}>
-            <Helmet title="User Info" />
-            {renderInfo()}
-        </div>
-    )
-}
-
-interface LoadDataArgs {
-    params: { id: number }
-}
-
-export const loadData = ({ params }: LoadDataArgs): AppThunk[] => [fetchUserDataIfNeed(params.id)]
-
-export default memo(UserInfo)

src/pages/UserInfo/__tests__/__snapshots__/UserInfo.tsx.snap

@@ -1,63 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<UserInfo /> renders an error if loading failed 1`] = `
-<div
-  class="UserInfo"
->
-  <p>
-    Oops! Failed to load data.
-  </p>
-</div>
-`;
-
-exports[`<UserInfo /> renders the <Info /> if loading was successful 1`] = `
-<div
-  class="UserInfo"
->
-  <div
-    class="UserCard"
-  >
-    <h4>
-      User Info
-    </h4>
-    <ul>
-      <li>
-        Name: 
-        PeL
-      </li>
-      <li>
-        Phone: 
-        +886 0970...
-      </li>
-      <li>
-        Email: 
-        forceoranj@gmail.com
-      </li>
-      <li>
-        Website: 
-        https://www.parisestludique.fr
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`<UserInfo /> renders the loading status if data invalid 1`] = `
-<div
-  class="UserInfo"
->
-  <p>
-    Oops! Failed to load data.
-  </p>
-</div>
-`;
-
-exports[`<UserInfo /> renders the loading status if requesting data 1`] = `
-<div
-  class="UserInfo"
->
-  <p>
-    Loading...
-  </p>
-</div>
-`;