refactor: Finish refactoring to app 🎉

vercel · Nov 12, 2022 · 30669ad · 30669ad
1 parent 0e1c923
commit 30669ad
Show file tree

Hide file tree

Showing 16 changed files with 200 additions and 265 deletions.
diff --git a/app/item/page.js b/app/item/page.js
@@ -6,11 +6,12 @@ import fetchData from '../../lib/fetch-data';
 import { transform } from '../../lib/get-item';
 
 export default async function ItemPage({ searchParams }) {
-  const id = searchParams['id'];
+  const { id } = searchParams;
   if (!id) {
     notFound();
   }
 
   const data = await fetchData(`item/${id}`);
-  return <Item story={transform(data)} />;
+  const story = transform(data);
+  return <Item story={story} />;
 }
diff --git a/app/layout.js b/app/layout.js
@@ -1,16 +1,17 @@
-import '../components/meta.css';
 import Header from '../components/header';
+
 import '../styles/globals.css';
+import styles from '../styles/RootLayout.module.css';
 
 export default function RootLayout({ children }) {
   return (
     <html>
       <body>
-        <main className="main">
+        <main className={styles.main}>
           <Header />
-          <div className="page">{children}</div>
+          <div className={styles.page}>{children}</div>
         </main>
       </body>
     </html>
   );
-}
+}
diff --git a/app/loading.js b/app/loading.js
@@ -1,11 +1,5 @@
+import Skeletons from '../components/skeletons';
+
 export default function Loading() {
-  return (
-    <div>
-      {Array(30)
-        .fill(0)
-        .map((_, index) => (
-          <div key={index} className="item-skeleton" />
-        ))}
-    </div>
-  );
-}
+  return <Skeletons />;
+}
diff --git a/app/page.js b/app/page.js
@@ -11,11 +11,12 @@ import { transform } from '../lib/get-item';
 
 async function StoryWithData({ id }) {
   const data = await fetchData(`item/${id}`);
-  return <Story {...transform(data)} />;
+  const story = transform(data);
+  return <Story {...story} />;
 }
 
 export default async function RSCPage() {
-  const storyIds = await fetchData('topstories', 2000);
+  const storyIds = await fetchData('topstories');
 
   return (
     <>

diff --git a/components/error-placeholder.js b/components/error-placeholder.js
@@ -1,7 +1,11 @@
+import { useEffect } from "react";
+
 export default function ErrorPlaceholder({ error }) {
-  if (process.env.NODE_ENV === 'development') {
+  useEffect(() => {
+    // Log the error to an error reporting service
     console.error(error);
-  }
+  }, [error]);
+
   return (
     <span>{`Application error: a server-side exception has occurred`}</span>
   );

diff --git a/components/item.js b/components/item.js
@@ -13,8 +13,7 @@ async function Comments({ story }) {
     return <div className={styles.loading}>No Comments</div>;
   }
 
-  const data = await fetchData(`comments/${story.id}`);
-  const comments = await getComments(data.comments);
+  const comments = await getComments(story.comments);
 
   return (
     <div className={styles.comments}>

diff --git a/components/meta.css b/components/meta.css
diff --git a/components/server-info.js b/components/server-info.js
@@ -1,6 +1,8 @@
+import styles from './server-info.module.css';
+
 export default function ServerInfo() {
   return (
-    <div style={{ textAlign: 'center', fontSize: 14, paddingBottom: 20 }}>
+    <div className={styles['server-info']}>
       Rendered at {new Date().toTimeString()} with Vercel.
     </div>
   );

diff --git a/components/server-info.module.css b/components/server-info.module.css
@@ -0,0 +1,5 @@
+.server-info {
+  text-align: center;
+  font-size: 14px;
+  padding-bottom: 20px;
+}
diff --git a/components/skeletons.js b/components/skeletons.js
@@ -4,11 +4,9 @@ export default function Skeletons({ count = 30 }) {
   // Generating {count = 30} skeletons to match the size of the list.
   return (
     <div>
-      {Array(count)
-        .fill(0)
-        .map((_, index) => (
-          <Skeleton key={index} />
-        ))}
+      {Array.from({ length: count }).map((_, index) => (
+        <Skeleton key={index} />
+      ))}
     </div>
   );
 }

diff --git a/components/story.js b/components/story.js
@@ -4,6 +4,8 @@ import { useState } from 'react';
 
 import timeAgo from '../lib/time-ago';
 
+import styles from './story.module.css';
+
 export default function Story({
   id,
   title,
@@ -18,7 +20,7 @@ export default function Story({
 
   return (
     <div style={{ margin: '5px 0' }}>
-      <div className="title">
+      <div className={styles.title}>
         <span
           style={{
             cursor: 'pointer',
@@ -32,12 +34,12 @@ export default function Story({
         </span>
         <a href={url}>{title}</a>
         {url && (
-          <span className="source">
+          <span className={styles.source}>
             <a href={`http://${host}`}>{host.replace(/^www\./, '')}</a>
           </span>
         )}
       </div>
-      <div className="meta">
+      <div className={styles.meta}>
         {score} {plural(score, 'point')} by{' '}
         <a href={`/user?id=${user}`}>{user}</a>{' '}
         <a href={`/item?id=${id}`}>

diff --git a/components/story.module.css b/components/story.module.css
@@ -0,0 +1,33 @@
+.title {
+  font-size: 15px;
+  margin-bottom: 3px;
+}
+
+.title > a {
+  color: #000;
+  text-decoration: none;
+}
+
+.title > a:visited {
+  color: #828282;
+}
+
+.meta {
+  font-size: 12px;
+}
+.source {
+  font-size: 12px;
+  display: inline-block;
+  margin-left: 5px;
+}
+
+.source a,
+.meta a {
+  color: #828282;
+  text-decoration: none;
+}
+
+.source a:hover,
+.meta a:hover {
+  text-decoration: underline;
+}
diff --git a/package.json b/package.json
@@ -6,8 +6,8 @@
   },
   "dependencies": {
     "ms": "2.1.3",
-    "next": "^13.0.3-canary.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "next": "^13.0.3",
+    "react": "^18.3.0-next-",
+    "react-dom": "^18.3.0-next-"
   }
 }
diff --git a/styles/RootLayout.module.css b/styles/RootLayout.module.css
@@ -0,0 +1,18 @@
+.main {
+  width: 85%;
+  margin: auto;
+  padding: 10px 0 0 0;
+}
+
+.page {
+  color: #828282;
+  background: #fff;
+  padding: 3px 10px;
+}
+
+@media (max-width: 750px) {
+  .main {
+    padding: 0;
+    width: auto;
+  }
+}
diff --git a/styles/globals.css b/styles/globals.css
@@ -12,57 +12,14 @@ body {
   box-sizing: border-box;
   color: #333;
   -webkit-font-smoothing: antialiased;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  background: #eee;
 }
 
-h1 {
-  font-size: 2em;
-}
-
-h2 {
-  font-size: 1.4em;
-  margin-top: 2em;
-}
-
-.container {
-  font-size: 20px;
-  text-align: center;
-}
-
-small {
-  font-size: 0.8em;
-}
-
-p {
-  margin: 10px;
-}
-
-section {
-  display: block;
-  margin: 5px 0;
-  text-underline-position: from-font;
-}
-
-section a {
-  color: #1386ff;
-}
-
-.main {
-  width: 85%;
-  margin: auto;
-  padding: 10px 0 0 0;
-}
-
-.page {
-  color: #828282;
-  background: #fff;
-  padding: 3px 10px;
-}
-
-@media (max-width: 750px) {
-  .main {
-    padding: 0;
-    width: auto;
-  }
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }