users api

hopefourie-nyt · Apr 13, 2022 · b97fbb6 · b97fbb6
1 parent 76edacc
commit b97fbb6
Show file tree

Hide file tree

Showing 13 changed files with 242 additions and 28 deletions.
diff --git a/components/date.js → components/date.tsx b/components/date.js → components/date.tsx
diff --git a/components/layout.js → components/layout.tsx b/components/layout.js → components/layout.tsx
@@ -1,16 +1,22 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from './layout.module.css'
-import utilStyles from '../styles/utils.module.css'
-import Link from 'next/link'
+import React from 'react'
+import Head from "next/head";
+import Image from "next/image";
+import styles from "./layout.module.css";
+import utilStyles from "../styles/utils.module.css";
+import Link from "next/link";
 
-const name = '[Your Name]'
-export const siteTitle = 'Next.js Sample Website'
+const name = "[Your Name]";
+export const siteTitle = "Next.js Sample Website";
 
-export default function Layout({ children, home }) {
+type Props = {
+  children: React.ReactNode;
+  home?: boolean;
+};
+
+export default function Layout({ children, home }: Props) {
   return (
     <div className={styles.container}>
-      <Head>
+      <Head >
         <link rel="icon" href="/favicon.ico" />
         <meta
           name="description"
@@ -69,5 +75,5 @@ export default function Layout({ children, home }) {
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,12 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "remark": "^14.0.1",
-    "remark-html": "^15.0.0"
+    "remark-html": "^15.0.0",
+    "swr": "^1.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.23",
+    "@types/react": "^18.0.3",
+    "typescript": "^4.6.3"
   }
 }
diff --git a/pages/_app.js → pages/_app.tsx b/pages/_app.js → pages/_app.tsx
diff --git a/pages/api/hello.js b/pages/api/hello.js
diff --git a/pages/api/users.tsx b/pages/api/users.tsx
@@ -0,0 +1,6 @@
+const users = [{ id: 1 }, { id: 2 }, { id: 3 }]
+
+export default function handler(req, res) {
+  // Get data from your database
+  res.status(200).json(users)
+}
diff --git a/pages/api/users/[id].tsx b/pages/api/users/[id].tsx
@@ -0,0 +1,20 @@
+export default function userHandler(req, res) {
+    const {
+      query: { id, name },
+      method,
+    } = req
+
+    switch (method) {
+      case 'GET':
+        // Get data from your database
+        res.status(200).json({ id, name: `User ${id}` })
+        break
+      case 'PUT':
+        // Update or create data in your database
+        res.status(200).json({ id, name: name || `User ${id}` })
+        break
+      default:
+        res.setHeader('Allow', ['GET', 'PUT'])
+        res.status(405).end(`Method ${method} Not Allowed`)
+    }
+  }
diff --git a/pages/index.js → pages/index.tsx b/pages/index.js → pages/index.tsx
@@ -1,20 +1,28 @@
-import Head from 'next/head'
-import Layout, { siteTitle } from '../components/layout'
-import utilStyles from '../styles/utils.module.css'
-import { getSortedPostsData } from '../lib/posts'
-import Link from 'next/link'
-import Date from '../components/date'
+import Head from "next/head";
+import Layout, { siteTitle } from "../components/layout";
+import utilStyles from "../styles/utils.module.css";
+import { getSortedPostsData } from "../lib/posts";
+import Link from "next/link";
+import Date from "../components/date";
+import useSwr from 'swr'
+
+
+const fetcher = (url) => fetch(url).then((res) => res.json()) 
 
 export default function Home({ allPostsData }) {
+  const { data, error } = useSwr('/api/users', fetcher)
+
+  if (error) return <div>Failed to load users</div>
+  if (!data) return <div>Loading...</div>
   return (
-    <Layout home>
+    <Layout>
       <Head>
         <title>{siteTitle}</title>
       </Head>
       <section className={utilStyles.headingMd}>
         <p>[Your Self Introduction]</p>
         <p>
-          (This is a sample website - you’ll be building a site like this in{' '}
+          (This is a sample website - you’ll be building a site like this in{" "}
           <a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
         </p>
       </section>
@@ -33,16 +41,26 @@ export default function Home({ allPostsData }) {
             </li>
           ))}
         </ul>
+        <h2 className={utilStyles.headingLg}>Users</h2>
+        <ul>
+          {data.map((user) => (
+            <li key={user.id}>
+              <Link href="/users/[id]" as={`/users/${user.id}`}>
+                <a>{`User ${user.id}`}</a>
+              </Link>
+            </li>
+          ))}
+        </ul>
       </section>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps() {
-  const allPostsData = getSortedPostsData()
+  const allPostsData = getSortedPostsData();
   return {
     props: {
-      allPostsData
-    }
-  }
+      allPostsData,
+    },
+  };
 }
diff --git a/pages/posts/[id].js → pages/posts/[id].tsx b/pages/posts/[id].js → pages/posts/[id].tsx
diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx
@@ -0,0 +1,17 @@
+import { useRouter } from 'next/router'
+import useSwr from 'swr'
+
+const fetcher = (url) => fetch(url).then((res) => res.json())
+
+export default function User() {
+  const router = useRouter()
+  const { data, error } = useSwr(
+    router.query.id ? `/api/users/${router.query.id}` : null,
+    fetcher
+  )
+
+  if (error) return <div>Failed to load user</div>
+  if (!data) return <div>Loading...</div>
+
+  return <div>{data.name}</div>
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}