Initial commit

src/components/ErrorBoundary/__tests__/ErrorBoundary.tsx

@@ -0,0 +1,39 @@
+/**
+ * @jest-environment jsdom
+ */
+import { ReactNode } from "react"
+import { render, screen } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+
+import ErrorBoundary from "../index"
+
+describe("<ErrorBoundary />", () => {
+    const tree = (children?: ReactNode) =>
+        render(
+            <MemoryRouter>
+                <ErrorBoundary>{children}</ErrorBoundary>
+            </MemoryRouter>
+        ).container.firstChild
+
+    it("renders nothing if no children", () => {
+        expect(tree()).toMatchSnapshot()
+    })
+
+    it("renders children if no error", () => {
+        expect(
+            tree(
+                <div>
+                    <h1>I am PeL</h1>
+                </div>
+            )
+        ).toMatchSnapshot()
+    })
+
+    it("renders error view if an error occurs", () => {
+        console.error = jest.fn()
+
+        tree(<div>{new Error()}</div>)
+
+        expect(screen.getByTestId("error-view")).toBeInTheDocument()
+    })
+})

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ErrorBoundary /> renders children if no error 1`] = `
+<div>
+  <h1>
+    I am PeL
+  </h1>
+</div>
+`;
+
+exports[`<ErrorBoundary /> renders nothing if no children 1`] = `null`;

src/components/ErrorBoundary/index.tsx

@@ -0,0 +1,45 @@
+import { ReactNode, PureComponent } from "react"
+
+interface Props {
+    children?: ReactNode
+}
+interface State {
+    error: Error | null
+    errorInfo: { componentStack: string } | null
+}
+
+class ErrorBoundary extends PureComponent<Props, State> {
+    constructor(props: Props) {
+        super(props)
+
+        this.state = { error: null, errorInfo: null }
+    }
+
+    componentDidCatch(error: Error, errorInfo: { componentStack: string }): void {
+        // Catch errors in any components below and re-render with error message
+        this.setState({ error, errorInfo })
+
+        // You can also log error messages to an error reporting service here
+    }
+
+    render(): ReactNode {
+        const { children } = this.props
+        const { errorInfo, error } = this.state
+
+        // If there's an error, render error path
+        return errorInfo ? (
+            <div data-testid="error-view">
+                <h2>Something went wrong.</h2>
+                <details style={{ whiteSpace: "pre-wrap" }}>
+                    {error && error.toString()}
+                    <br />
+                    {errorInfo.componentStack}
+                </details>
+            </div>
+        ) : (
+            children || null
+        )
+    }
+}
+
+export default ErrorBoundary

src/components/Info/__tests__/Info.tsx

@@ -0,0 +1,27 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+
+import Info from "../index"
+
+describe("<Info />", () => {
+    it("renders", () => {
+        const tree = render(
+            <MemoryRouter>
+                <Info
+                    item={{
+                        id: 1,
+                        name: "PeL",
+                        phone: "+886 0970...",
+                        email: "forceoranj@gmail.com",
+                        website: "https://www.parisestludique.fr",
+                    }}
+                />
+            </MemoryRouter>
+        ).container.firstChild
+
+        expect(tree).toMatchSnapshot()
+    })
+})

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Info /> renders 1`] = `
+<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>
+`;

src/components/Info/index.tsx

@@ -0,0 +1,22 @@
+import { memo } from "react"
+
+import { User } from "../../services/jsonPlaceholder"
+import styles from "./styles.module.scss"
+
+interface Props {
+    item: User
+}
+
+const Info = ({ item }: Props) => (
+    <div className={styles.UserCard}>
+        <h4>User Info</h4>
+        <ul>
+            <li>Name: {item.name}</li>
+            <li>Phone: {item.phone}</li>
+            <li>Email: {item.email}</li>
+            <li>Website: {item.website}</li>
+        </ul>
+    </div>
+)
+
+export default memo(Info)

src/components/Info/styles.module.scss

@@ -0,0 +1,9 @@
+.user-card {
+    ul {
+        padding-left: 17px;
+
+        li {
+            margin-bottom: 0.5em;
+        }
+    }
+}

src/components/JavGameList/__tests__/JavGameList.tsx

@@ -0,0 +1,41 @@
+/**
+ * @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",
+                            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",
+                        },
+                    ]}
+                />
+            </MemoryRouter>
+        ).container.firstChild
+
+        expect(tree).toMatchSnapshot()
+    })
+})

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<List /> renders 1`] = `
+<div
+  class="JavGameList"
+>
+  <h4>
+    JAV Games
+  </h4>
+  <ul>
+    <li>
+      <a
+        href="/UserInfo/5"
+      >
+        6 qui prend!
+      </a>
+    </li>
+  </ul>
+</div>
+`;

src/components/JavGameList/index.tsx

@@ -0,0 +1,24 @@
+import { memo } from "react"
+import { Link } from "react-router-dom"
+
+import { JavGame } from "../../services/javGames"
+import styles from "./styles.module.scss"
+
+interface Props {
+    items: JavGame[]
+}
+
+const List = ({ items }: Props) => (
+    <div className={styles.JavGameList}>
+        <h4>JAV Games</h4>
+        <ul>
+            {items.map(({ id, titre }) => (
+                <li key={id}>
+                    <Link to={`/UserInfo/${id}`}>{titre}</Link>
+                </li>
+            ))}
+        </ul>
+    </div>
+)
+
+export default memo(List)

src/components/JavGameList/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/List/__tests__/List.tsx

@@ -0,0 +1,29 @@
+/**
+ * @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: 1,
+                            name: "PeL",
+                            phone: "+886 0970...",
+                            email: "forceoranj@gmail.com",
+                            website: "https://www.parisestludique.fr",
+                        },
+                    ]}
+                />
+            </MemoryRouter>
+        ).container.firstChild
+
+        expect(tree).toMatchSnapshot()
+    })
+})

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<List /> renders 1`] = `
+<div
+  class="UserList"
+>
+  <h4>
+    User List
+  </h4>
+  <ul>
+    <li>
+      <a
+        href="/UserInfo/1"
+      >
+        PeL
+      </a>
+    </li>
+  </ul>
+</div>
+`;

src/components/List/index.tsx

@@ -0,0 +1,24 @@
+import { memo } from "react"
+import { Link } from "react-router-dom"
+
+import { User } from "../../services/jsonPlaceholder"
+import styles from "./styles.module.scss"
+
+interface Props {
+    items: User[]
+}
+
+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>
+                </li>
+            ))}
+        </ul>
+    </div>
+)
+
+export default memo(List)

src/components/List/styles.module.scss

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

src/components/Loading/__tests__/Loading.tsx

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

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Loading /> renders 1`] = `
+<div
+  class="Loading"
+>
+  <p>
+    Loading...
+  </p>
+</div>
+`;

src/components/Loading/index.tsx

@@ -0,0 +1,9 @@
+import styles from "./styles.module.scss"
+
+const Loading = (): JSX.Element => (
+    <div className={styles.Loading}>
+        <p>Loading...</p>
+    </div>
+)
+
+export default Loading

src/components/Loading/styles.module.scss

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

src/components/index.ts

@@ -0,0 +1,7 @@
+import List from "./List"
+import JavGameList from "./JavGameList"
+import Info from "./Info"
+import ErrorBoundary from "./ErrorBoundary"
+import Loading from "./Loading"
+
+export { List, JavGameList, Info, ErrorBoundary, Loading }