First commit

.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next
+out
+
+# production
+build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

csr/.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

csr/README.md

@@ -0,0 +1,30 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on ZEIT Now
+
+The easiest way to deploy your Next.js app is to use the [ZEIT Now Platform](https://zeit.co/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

csr/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "csr",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "bootstrap": "^4.4.1",
+    "next": "9.3.6",
+    "react": "16.13.1",
+    "react-bootstrap": "^1.0.1",
+    "react-dom": "16.13.1",
+    "react-query": "^1.2.9"
+  }
+}

csr/pages/_app.js

@@ -0,0 +1,3 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+
+export default ({ Component, pageProps }) => <Component {...pageProps} />;

csr/pages/api/pokemon.js

@@ -0,0 +1,20 @@
+import pokemon from "../../pokemon.json";
+
+export default (req, res) => {
+  if (!req.query.name) {
+    res.statusCode = 400;
+    res.end("Must have a name");
+  } else {
+    const found = pokemon.filter(
+      ({ name: { english } }) => english === req.query.name
+    );
+    if (found.length === 0) {
+      res.statusCode = 404;
+      res.end(`Pokemon ${req.query.name} not found`);
+    } else {
+      res.statusCode = 200;
+      res.setHeader("Content-Type", "application/json");
+      res.end(JSON.stringify(found[0]));
+    }
+  }
+};

csr/pages/api/search.js

@@ -0,0 +1,14 @@
+import pokemon from "../../pokemon.json";
+
+export default (req, res) => {
+  const filter = req.query.q ? new RegExp(req.query.q, "i") : /.*/;
+  res.statusCode = 200;
+  res.setHeader("Content-Type", "application/json");
+  res.end(
+    JSON.stringify(
+      pokemon
+        .filter(({ name: { english } }) => english.match(filter))
+        .slice(0, 10)
+    )
+  );
+};

csr/pages/index.js

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import Head from "next/head";
+import Link from "next/link";
+import { Container, FormControl, Row, Col, Card } from "react-bootstrap";
+import axios from "axios";
+import { useQuery } from "react-query";
+
+const getPokemon = async (key, q) => {
+  const { data } = await axios.get(`/api/search?q=${escape(q)}`);
+  return data.map((pokemon) => ({
+    ...pokemon,
+    image: `/pokemon/${pokemon.name.english
+      .toLowerCase()
+      .replace(" ", "-")}.jpg`,
+  }));
+};
+
+const Home = () => {
+  const [query, setQuery] = useState("");
+  const { data } = useQuery(["q", query], getPokemon);
+
+  return (
+    <div className="container">
+      <Head>
+        <title>Pokemon!</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <Container>
+        <FormControl
+          placeholder="Search"
+          aria-label="Search"
+          value={query}
+          onChange={(evt) => setQuery(evt.target.value)}
+        />
+        {data && (
+          <Row>
+            {data.map(({ id, name, type, image }) => (
+              <Col xs={4} key={id} style={{ padding: 5 }}>
+                <Link href={`/pokemon/${name.english}`}>
+                  <Card>
+                    <Card.Img
+                      variant="top"
+                      src={image}
+                      style={{ maxHeight: 300 }}
+                    />
+                    <Card.Body>
+                      <Card.Title>{name.english}</Card.Title>
+                      <Card.Subtitle>{type.join(", ")}</Card.Subtitle>
+                    </Card.Body>
+                  </Card>
+                </Link>
+              </Col>
+            ))}
+          </Row>
+        )}
+      </Container>
+    </div>
+  );
+};
+
+export default Home;

csr/pages/pokemon/[name].js

@@ -0,0 +1,49 @@
+import { useRouter } from "next/router";
+import axios from "axios";
+import { useQuery } from "react-query";
+import Head from "next/head";
+import { Container, Row, Col } from "react-bootstrap";
+
+const getPokemon = async (key, name) => {
+  const { data } = await axios.get(`/api/pokemon?name=${escape(name)}`);
+  return data;
+};
+
+export default () => {
+  const router = useRouter();
+  const { data } = useQuery(["name", router.query.name], getPokemon);
+  return (
+    <div>
+      <Head>
+        <title>{(data && data.name.english) || "Pokemon"}</title>
+      </Head>
+      <Container>
+        {data && (
+          <>
+            <h1>{data.name.english}</h1>
+            <Row>
+              <Col xs={4}>
+                <img
+                  src={`/pokemon/${data.name.english
+                    .toLowerCase()
+                    .replace(" ", "-")}.jpg`}
+                  style={{
+                    width: "100%",
+                  }}
+                />
+              </Col>
+              <Col xs={8}>
+                {Object.entries(data.base).map(([key, value]) => (
+                  <Row key={key}>
+                    <Col xs={2}>{key}</Col>
+                    <Col xs={10}>{value}</Col>
+                  </Row>
+                ))}
+              </Col>
+            </Row>
+          </>
+        )}
+      </Container>
+    </div>
+  );
+};