From 58c542bc5e06649de1df8133c683f6b09291155c Mon Sep 17 00:00:00 2001
From: Harry Wolff <hswolff@gmail.com>
Date: Thu, 30 Jul 2020 22:48:38 -0400
Subject: [PATCH] Add react-query and use it to make data requests

---
 components/AddItemForm.tsx | 56 +++++++++++++++++++++++++++++++++++++
 components/content.tsx     | 32 +--------------------
 components/sign-in.tsx     | 19 +++++++------
 hooks/api-hooks.ts         | 28 +++++++++++++++++++
 package.json               |  1 +
 pages/api/items.ts         | 57 ++++++++++++++++++++++++++++++++++++++
 pages/index.tsx            |  7 ++++-
 yarn.lock                  | 12 ++++++++
 8 files changed, 171 insertions(+), 41 deletions(-)
 create mode 100644 components/AddItemForm.tsx
 create mode 100644 hooks/api-hooks.ts
 create mode 100644 pages/api/items.ts

diff --git a/components/AddItemForm.tsx b/components/AddItemForm.tsx
new file mode 100644
index 0000000..d3710e3
--- /dev/null
+++ b/components/AddItemForm.tsx
@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { useSession } from 'next-auth/client';
+import { useAddItem, useClearItems } from 'hooks/api-hooks';
+
+export default function AddItemForm() {
+  const [session] = useSession();
+
+  const [title, setTitle] = useState('');
+  const [mutate] = useAddItem();
+  const [clearItems] = useClearItems();
+
+  const submitForm = (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    mutate({
+      title,
+      description: `Thank you ${session.user.name} for the idea!`,
+    });
+    setTitle('');
+  };
+
+  if (!session) {
+    return null;
+  }
+
+  return (
+    <form
+      className="flex flex-col mx-auto max-w-sm border border-gray-400 rounded p-2"
+      onSubmit={submitForm}
+    >
+      <input
+        type="text"
+        className="border"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+      />
+      <div className="flex flex-row  mt-2">
+        <button
+          className={`${buttonStyles} flex-grow`}
+          type="submit"
+          onClick={submitForm}
+        >
+          Add
+        </button>
+        <button
+          type="button"
+          className={`${buttonStyles} ml-2`}
+          onClick={clearItems}
+        >
+          X
+        </button>
+      </div>
+    </form>
+  );
+}
+
+const buttonStyles = 'p-1 border bg-gray-400 shadow-sm';
diff --git a/components/content.tsx b/components/content.tsx
index e1c81ab..ccb688c 100644
--- a/components/content.tsx
+++ b/components/content.tsx
@@ -1,33 +1,3 @@
-import faker from 'faker';
-
-faker.seed(1);
-
-function generateItem() {
-  return {
-    _id: faker.random.uuid(),
-    title: faker.lorem.words(),
-    description: faker.lorem.paragraph(),
-    created: faker.date.past().toUTCString(),
-    updated: faker.date.past().toUTCString(),
-    category: faker.random.arrayElement(['Tutorial', 'Opinion', 'Vlog']),
-    createdBy: faker.random.uuid(),
-    status: faker.random.arrayElement([
-      'open',
-      'accepted',
-      'declined',
-      'completed',
-    ]),
-    votes: faker.random.number(100),
-    // votes: {
-    //   up: [],
-    //   down: [],
-    // },
-  };
-}
-
-// @ts-expect-error
-const items = [...Array(10).keys()].map((i) => generateItem());
-
 function Item({ item }) {
   return (
     <div className="border border-gray-400 rounded-md shadow my-8 p-4 flex flex-col sm:flex-row hover:border-gray-500 ease-linear transition duration-150">
@@ -49,7 +19,7 @@ function Item({ item }) {
   );
 }
 
-export default function Content() {
+export default function Content({ items }) {
   return (
     <ul className="container mx-auto my-2 max-w-6xl">
       {items.map((item) => (
diff --git a/components/sign-in.tsx b/components/sign-in.tsx
index dd9a11f..96844e1 100644
--- a/components/sign-in.tsx
+++ b/components/sign-in.tsx
@@ -21,18 +21,19 @@ function ExampleSession({ session }) {
 }
 
 export default function SignIn() {
-  const [session, loading] = useSession();
+  const [session] = useSession();
 
   return (
-    <div>
+    <div className="max-w-xs mx-auto m-6 pb-2 border-b flex justify-between">
       {/* <ExampleSession session={session} /> */}
-      {session ? `Welcome ${session.user.name}` : null}
-      <br />
-      {session ? (
-        <button onClick={signout}>Sign out</button>
-      ) : (
-        <button onClick={() => signin('github')}>Sign in</button>
-      )}
+      <div>{session ? `Welcome ${session.user.name}` : null}</div>
+      <div>
+        {session ? (
+          <button onClick={signout}>Sign out</button>
+        ) : (
+          <button onClick={() => signin('github')}>Sign in</button>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/hooks/api-hooks.ts b/hooks/api-hooks.ts
new file mode 100644
index 0000000..f1a4e2f
--- /dev/null
+++ b/hooks/api-hooks.ts
@@ -0,0 +1,28 @@
+import { useQuery, useMutation, queryCache } from 'react-query';
+
+export function useItems() {
+  return useQuery('items', () => fetch('/api/items').then((res) => res.json()));
+}
+
+const addItem = (body) => {
+  return fetch('/api/items', {
+    method: 'POST',
+    body: JSON.stringify(body),
+  });
+};
+
+export function useAddItem() {
+  return useMutation(addItem, {
+    onSuccess() {
+      queryCache.invalidateQueries('items');
+    },
+  });
+}
+
+export function useClearItems() {
+  return useMutation(() => fetch('/api/items', { method: 'DELETE' }), {
+    onSuccess() {
+      queryCache.invalidateQueries('items');
+    },
+  });
+}
diff --git a/package.json b/package.json
index bb1ee76..c416594 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "postcss-preset-env": "^6.7.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-query": "^2.5.7-tsnext.1",
     "tailwindcss": "^1.6.0"
   },
   "devDependencies": {
diff --git a/pages/api/items.ts b/pages/api/items.ts
new file mode 100644
index 0000000..fcb8dfc
--- /dev/null
+++ b/pages/api/items.ts
@@ -0,0 +1,57 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import faker from 'faker';
+
+faker.seed(1);
+
+function generateItem({ title = null, description = null } = {}) {
+  return {
+    _id: faker.random.uuid(),
+    title: title ?? faker.lorem.words(),
+    description: description ?? faker.lorem.paragraph(),
+    created: faker.date.past().toUTCString(),
+    updated: faker.date.past().toUTCString(),
+    category: faker.random.arrayElement(['Tutorial', 'Opinion', 'Vlog']),
+    createdBy: faker.random.uuid(),
+    status: faker.random.arrayElement([
+      'open',
+      'accepted',
+      'declined',
+      'completed',
+    ]),
+    votes: faker.random.number(100),
+    // votes: {
+    //   up: [],
+    //   down: [],
+    // },
+  };
+}
+
+let postRequests = [];
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
+  const items = postRequests
+    // @ts-expect-error
+    .concat([...Array(10).keys()])
+    .map((item) => generateItem(typeof item === 'number' ? undefined : item));
+
+  if (req.method === 'GET') {
+    return res.status(200).json(items);
+  }
+
+  if (req.method === 'DELETE') {
+    postRequests = [];
+    return res.status(200).send('deleted');
+  }
+
+  const parsedBody = JSON.parse(req.body);
+
+  postRequests.unshift(parsedBody);
+
+  // don't memory leak
+  if (postRequests.length > 9) {
+    postRequests = [];
+  }
+
+  res.status(200).send('added');
+};
diff --git a/pages/index.tsx b/pages/index.tsx
index cf569c6..b6edc38 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,8 +1,12 @@
 import Head from 'next/head';
 import SignIn from 'components/sign-in';
 import Content from 'components/content';
+import AddItemForm from 'components/AddItemForm';
+import { useItems } from 'hooks/api-hooks';
 
 export default function Home() {
+  const { data, isSuccess } = useItems();
+
   return (
     <div>
       <Head>
@@ -15,7 +19,8 @@ export default function Home() {
       </main>
 
       <SignIn />
-      <Content />
+      <AddItemForm />
+      {isSuccess && <Content items={data} />}
     </div>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index 93e5389..714628b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5757,6 +5757,13 @@ react-is@16.13.1, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-query@^2.5.7-tsnext.1:
+  version "2.5.7-tsnext.1"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-2.5.7-tsnext.1.tgz#03d3d4092302030f1c96702e13f02b786a0172a0"
+  integrity sha512-FdU3vRMM5Lm2cIhFxlfZlHY0glwKtyKLV85njdYauM5otAChfQaPwdR06VY47+jG/IAPowI8Wmo6JEgFpeWQ/g==
+  dependencies:
+    ts-toolbelt "^6.9.4"
+
 react-refresh@0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -6729,6 +6736,11 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
+ts-toolbelt@^6.9.4:
+  version "6.13.36"
+  resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-6.13.36.tgz#083e0ccaf610edf743cf6cb18714def45eb27d6d"
+  integrity sha512-TxtCLq+Hze2myCzUa31hu8cMFxYe3JpIZnCqaKvkHELEpAm81PNlaxC1UmM9cD0BqQ7XxYPIvQYBmvdnAfYzKA==
+
 tslib@^1.8.1, tslib@^1.9.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"