perf: rewrite home page to server side component (#12)

app/Loading.tsx

@@ -1,4 +1,4 @@
-import './Loading.css';
+import './loading.css';
 
 const Loading = () => (
   <>

app/api.ts

@@ -1,7 +1,11 @@
-export const fetchManufacturers = () => {
+export async function getManufacturers(page = 1) {
   const domain = 'https://vpic.nhtsa.dot.gov';
   const endpoint = 'getallmanufacturers';
-  const args = 'format=json&page=1';
+  const args = `format=json&page=${page}`;
   const url = `${domain}/api/vehicles/${endpoint}?${args}`;
-  return fetch(url).then(data => data.json());
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error('Failed to fetch data')
+  }
+  return res.json();
 };

app/components/Table.tsx

@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
 
-import Loading from '../Loading';
 import { getFlagByCountryName } from '../helpers/getEmojiFlagByISO'
 // import { toLamaCase } from './toLamaCase';
 
@@ -10,11 +9,9 @@ import './Helpers.css';
 
 interface TableProps {
   manufacturers: Array<any> | null;
-  isLoading: boolean;
-  isError: boolean;
 }
 
-const Table = ({ manufacturers, isLoading, isError }: TableProps) => (
+const Table = ({ manufacturers }: TableProps) => (
   <table className="table">
     <thead>
       <tr>
@@ -37,14 +34,6 @@ const Table = ({ manufacturers, isLoading, isError }: TableProps) => (
           </td>
         </tr>
       )) }
-      { isLoading || isError && (
-        <tr>
-          <td colSpan={3}>
-            { isLoading && (<Loading />) }
-            { isError && (<h3>Error!</h3>) }
-          </td>
-        </tr>
-      ) }
     </tbody>
   </table>
 );

app/error.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error
+  reset: () => void
+}) {
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button onClick={() => reset()}>Try again</button>
+    </div>
+  )
+}

app/not-found.tsx

@@ -0,0 +1,13 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <p>
+        View <Link href="/">main page</Link>
+      </p>
+    </div>
+  )
+}

app/page.tsx

@@ -1,31 +1,18 @@
-"use client";
-import { useEffect, useState } from 'react';
+// import { useEffect, useState } from 'react';
 
 import Table from './components/Table';
-import { fetchManufacturers } from './api';
+import { getManufacturers } from './api';
 
 import './components/Grid.css';
 
-const Home = () => {
-  const [isLoading, setIsLoading]= useState(true);
-  const [isError, setIsError]= useState(false);
-  const [manufacturers, setManufacturers]= useState(null);
-  useEffect(() => {
-    // setIsLoading(true);
-    fetchManufacturers().then(data => {
-      console.log(data);
-      setManufacturers(data.Results);
-      setIsLoading(false);
-    }).catch((error) => {
-      setIsError(true);
-    })
-  }, []);
+const HomePage = async () => {
+  const manufacturers = await getManufacturers().then(data => data.Results);
 
   return (
     <main className="container">
-      <Table manufacturers={manufacturers} isLoading={isLoading} isError={isError} />
+      <Table manufacturers={manufacturers} />
     </main>
   );
 }
 
-export default Home;
+export default HomePage;

tsconfig.json

@@ -27,12 +27,12 @@
     ]
   },
   "include": [
-    "src",
     "app/page.tsx",
     "app/manufacturers/[id]/page.tsx",
     "app/components",
     "app/helpers",
     "app/api.ts",
+    "app/**/*.tsx",
     ".next/types/**/*.ts"
   ],
   "references": [