feat: migrate app to use server components

jpedroh · Dec 12, 2022 · 56f1401 · 56f1401 · vercel · Dec 12, 2022
1 parent 3ca0b46
commit 56f1401
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 93 deletions.
diff --git a/packages/front/app/head.tsx b/packages/front/app/head.tsx
@@ -0,0 +1,9 @@
+export default function Head() {
+  return (
+    <>
+      <title>Mach</title>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <link rel="icon" href="/favicon.ico" />
+    </>
+  )
+}
diff --git a/packages/front/app/layout.tsx b/packages/front/app/layout.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import '../src/index.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <head />
+      <body>
+        {children}
+      </body>
+    </html>
+  )
+}
diff --git a/packages/front/pages/index.tsx → packages/front/app/page.tsx b/packages/front/pages/index.tsx → packages/front/app/page.tsx
diff --git a/packages/front/app/search/page.tsx b/packages/front/app/search/page.tsx
@@ -0,0 +1,41 @@
+import Link from 'next/link'
+import React from 'react'
+import FlightsTable from '../../src/components/FlightsTable'
+import Lead from '../../src/components/Lead'
+import GeneralLayout from '../../src/layouts/GeneralLayout'
+import { fetchFlights } from '../../src/services/fetch-flights'
+
+const getLeadMessage = (count: number) => {
+    return count === 1
+        ? 'There is a single result for your search.'
+        : `There are ${count} results for your search.`
+}
+
+export default async function Search({
+    searchParams,
+}: {
+    searchParams?: { [key: string]: string | string[] | undefined };
+}) {
+
+    const flights = (await fetchFlights(searchParams as any))
+
+    if (flights.length === 0) {
+        return <GeneralLayout>
+            <Lead>
+                There are no results for your search.{" "}
+                <Link href="/">Click here</Link> to make a new search.
+            </Lead>
+        </GeneralLayout>
+    }
+
+    return (
+        <GeneralLayout>
+            <Lead>
+                {getLeadMessage(flights.length)}{' '}
+                <Link href="/">Click here</Link> to make a new search.
+            </Lead>
+
+            <FlightsTable items={flights} />
+        </GeneralLayout>
+    )
+}
diff --git a/packages/front/next.config.js b/packages/front/next.config.js
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    experimental: {
+        appDir: true,
+    },
+}
+
+module.exports = nextConfig
diff --git a/packages/front/pages/_app.tsx b/packages/front/pages/_app.tsx
diff --git a/packages/front/pages/search.tsx b/packages/front/pages/search.tsx
diff --git a/packages/front/src/components/FlightsTable/index.tsx b/packages/front/src/components/FlightsTable/index.tsx
@@ -1,25 +1,21 @@
-import { FC } from 'react'
-import InfiniteScroll from 'react-infinite-scroll-component'
-import styles from './index.module.css'
+"use client"
+
 import Flight from '@mach/common'
+import { FC, useState } from 'react'
 import Button from '../Button'
+import FlightModal from '../FlightModal'
+import styles from './index.module.css'
 
 type Props = {
   items: Flight[]
-  next: () => void
-  count: number
-  onButtonClick: (flight: Flight) => void
 }
 
-const FlightsTable: FC<Props> = ({ items, next, count, onButtonClick }) => {
+const FlightsTable: FC<Props> = ({ items }) => {
+  const [flight, setFlight] = useState<Flight>();
+  const showModal = flight !== undefined;
+
   return (
     <div>
-      <InfiniteScroll
-        dataLength={items.length}
-        next={next}
-        hasMore={items.length < count}
-        loader={<span className={styles.loading}>Loading...</span>}
-      >
         <table className={styles.table}>
           <thead>
             <tr>
@@ -42,16 +38,20 @@ const FlightsTable: FC<Props> = ({ items, next, count, onButtonClick }) => {
                 <td className="grid justify-items-center">
                   <Button
                     variant={'primary'}
-                    onClick={() => onButtonClick(flight)}
+                    onClick={() => setFlight(flight)}
                   >
                     View Details
                   </Button>
                 </td>
               </tr>
             ))}
           </tbody>
-        </table>
-      </InfiniteScroll>
+      </table>
+      <FlightModal
+        flight={flight!}
+        show={showModal}
+        onClose={() => setFlight(undefined)}
+      />
     </div>
   )
 }

diff --git a/packages/front/src/components/SearchFlightsForm/index.tsx b/packages/front/src/components/SearchFlightsForm/index.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { ChangeEventHandler, FC, FormEventHandler, useState } from 'react'
 import Button from '../Button'
 import FormInput from '../FormInput'

diff --git a/packages/front/src/services/fetch-flights.ts b/packages/front/src/services/fetch-flights.ts
@@ -11,9 +11,18 @@ type FlightsResponse = {
   count: number;
 };
 
-export function fetchFlights(query: FlightsQuery) {
+export function fetchFlights(params: FlightsQuery) {
+  const query: Record<string, string> = {};
+
+  if (params?.departureIcao) {
+    query.departureIcao = params?.departureIcao!.toString().toUpperCase();
+  }
+  if (params?.arrivalIcao) {
+    query.arrivalIcao = params?.arrivalIcao!.toString().toUpperCase();
+  }
+
   return http<FlightsResponse>({
     url: "https://mach-api-production.up.railway.app/flights",
-    query: { limit: Number.MAX_SAFE_INTEGER, ...query },
-  });
+    query: { ...query, limit: 15000 },
+  }).then((data) => data.items);
 }
diff --git a/packages/front/tsconfig.json b/packages/front/tsconfig.json
@@ -19,10 +19,16 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": [
-    "src"
+    "src",
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"