✅

jgravois · Jun 1, 2024 · 8eac51b · 8eac51b
1 parent adf2f74
commit 8eac51b
Show file tree

Hide file tree

Showing 12 changed files with 65 additions and 134 deletions.
diff --git a/README.md b/README.md
@@ -1,16 +1,16 @@
 ## setup
 
-  ```sh
-  npm install
-  npm run setup
+```sh
+npm install
+npm run setup
 ```
 
 ## development
 
-  ```sh
-  npm run dev
-  open http://localhost:3000
-  ```
+```sh
+npm run dev
+open http://localhost:3000
+```
 
 This starts the app in development mode, rebuilding assets on file changes.
 

diff --git a/app/models/reservation.server.ts b/app/models/reservation.server.ts
@@ -8,7 +8,7 @@ export function getReservation({
 }: Pick<Reservation, "id"> & {
   userId: User["id"];
 }) {
-  userId
+  userId;
   return prisma.reservation.findFirst({
     select: { id: true, start: true, end: true, court: true, user: true },
     where: { id },
@@ -23,7 +23,7 @@ export function getReservations() {
       start: true,
       end: true,
       court: true,
-      openPlay: true
+      openPlay: true,
     },
   });
 }

diff --git a/app/models/user.server.ts b/app/models/user.server.ts
@@ -20,12 +20,11 @@ export async function createUser(email: User["email"], stytchId: string) {
   return prisma.user.create({
     data: {
       email,
-      stytchId
+      stytchId,
     },
   });
 }
 
 export async function deleteUserByEmail(email: User["email"]) {
   return prisma.user.delete({ where: { email } });
 }
-
diff --git a/app/routes/HeaderLeft.tsx b/app/routes/HeaderLeft.tsx
@@ -0,0 +1,30 @@
+import { Link } from "@remix-run/react";
+
+export const HeaderLeft = () => (
+  <div className="header_left">
+    <Link to="/" className="h1">
+      Court dibs
+    </Link>
+    <h2 className="h2">Call dibs on one of our sportsball courts</h2>
+    <div className="header_illustration">
+      <div className="header_icon header_icon___pickleball">
+        <img
+          alt="pball"
+          src="https://cdn.glitch.global/5f00a93b-ae9c-4d9a-b9cf-472487408ff8/pickleball-solid.svg?v=1714837585684"
+        />
+      </div>
+      <div className="header_icon header_icon___tennis">
+        <img
+          alt="tennis racquet"
+          src="https://cdn.glitch.global/5f00a93b-ae9c-4d9a-b9cf-472487408ff8/tennis-ball-solid.svg?v=1714837585529"
+        />
+      </div>
+      <div className="header_icon header_icon___basketball">
+        <img
+          alt="bball"
+          src="https://cdn.glitch.global/5f00a93b-ae9c-4d9a-b9cf-472487408ff8/basketball-solid.svg?v=1714837585367"
+        />
+      </div>
+    </div>
+  </div>
+);
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -6,6 +6,7 @@ import { getReservations } from "~/models/reservation.server";
 import { getSession } from "~/session.server";
 import { useOptionalUser } from "~/utils";
 
+import { HeaderLeft } from "./HeaderLeft";
 import { ReservationList, Rez } from "./ReservationList";
 
 export const meta: MetaFunction = () => [{ title: "Court dibs" }];
@@ -31,23 +32,7 @@ export default function Index() {
     <>
       <header className="header">
         <div className="header_content">
-          <div className="header_left">
-            <Link to="/" className="h1">
-              Court dibs
-            </Link>
-            <h2 className="h2">Call dibs on one of our sportsball courts</h2>
-            <div className="header_illustration">
-              <div className="header_icon header_icon___pickleball">
-                <img src="https://cdn.glitch.global/5f00a93b-ae9c-4d9a-b9cf-472487408ff8/pickleball-solid.svg?v=1714837585684" />
-              </div>
-              <div className="header_icon header_icon___tennis">
-                <img src="https://cdn.glitch.global/5f00a93b-ae9c-4d9a-b9cf-472487408ff8/tennis-ball-solid.svg?v=1714837585529" />
-              </div>
-              <div className="header_icon header_icon___basketball">
-                <img src="https://cdn.glitch.global/5f00a93b-ae9c-4d9a-b9cf-472487408ff8/basketball-solid.svg?v=1714837585367" />
-              </div>
-            </div>
-          </div>
+          <HeaderLeft />
           <div className="header_right">
             {user ? (
               <>

diff --git a/app/routes/magic.tsx b/app/routes/magic.tsx
@@ -1,5 +1,6 @@
 import type { MetaFunction } from "@remix-run/node";
-import { Link } from "@remix-run/react";
+
+import { HeaderLeft } from "./HeaderLeft";
 
 export const meta: MetaFunction = () => [{ title: "Magic" }];
 
@@ -8,23 +9,7 @@ export default function Magic() {
     <>
       <header className="header">
         <div className="header_content">
-          <div className="header_left">
-            <Link to="/" className="h1">
-              Court dibs
-            </Link>
-            <h2 className="h2">Call dibs on one of our sportsball courts</h2>
-            <div className="header_illustration">
-              <div className="header_icon header_icon___pickleball">
-                <img src="https://cdn.glitch.global/5f00a93b-ae9c-4d9a-b9cf-472487408ff8/pickleball-solid.svg?v=1714837585684" />
-              </div>
-              <div className="header_icon header_icon___tennis">
-                <img src="https://cdn.glitch.global/5f00a93b-ae9c-4d9a-b9cf-472487408ff8/tennis-ball-solid.svg?v=1714837585529" />
-              </div>
-              <div className="header_icon header_icon___basketball">
-                <img src="https://cdn.glitch.global/5f00a93b-ae9c-4d9a-b9cf-472487408ff8/basketball-solid.svg?v=1714837585367" />
-              </div>
-            </div>
-          </div>
+          <HeaderLeft />
           <div className="header_right"></div>
         </div>
       </header>

diff --git a/app/routes/reservations.tsx b/app/routes/reservations.tsx
diff --git a/app/routes/start.tsx b/app/routes/start.tsx
@@ -1,13 +1,15 @@
 import { Loader } from "@googlemaps/js-api-loader";
 import type { ActionFunctionArgs, MetaFunction } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
-import { Link, Form, useActionData, useSearchParams } from "@remix-run/react";
+import { Form, useActionData, useSearchParams } from "@remix-run/react";
 import { useEffect, useRef } from "react";
 import invariant from "tiny-invariant";
 
 import { createUser, getUserByEmail } from "~/models/user.server";
 import { validateCoordinates, validateEmail } from "~/utils";
 
+import { HeaderLeft } from "./HeaderLeft";
+
 const HALF = "AIzaSyBI_vhCo";
 const OTHER_HALF = "hiRS0dvt5Yk7sAJ-978T_mUwd8";
 
@@ -141,23 +143,7 @@ export default function Start() {
     <>
       <header className="header">
         <div className="header_content">
-          <div className="header_left">
-            <Link to="/" className="h1">
-              Court dibs
-            </Link>
-            <h2 className="h2">Call dibs on one of our sportsball courts</h2>
-            <div className="header_illustration">
-              <div className="header_icon header_icon___pickleball">
-                <img src="https://cdn.glitch.global/5f00a93b-ae9c-4d9a-b9cf-472487408ff8/pickleball-solid.svg?v=1714837585684" />
-              </div>
-              <div className="header_icon header_icon___tennis">
-                <img src="https://cdn.glitch.global/5f00a93b-ae9c-4d9a-b9cf-472487408ff8/tennis-ball-solid.svg?v=1714837585529" />
-              </div>
-              <div className="header_icon header_icon___basketball">
-                <img src="https://cdn.glitch.global/5f00a93b-ae9c-4d9a-b9cf-472487408ff8/basketball-solid.svg?v=1714837585367" />
-              </div>
-            </div>
-          </div>
+          <HeaderLeft />
           <div className="header_right"></div>
         </div>
       </header>

diff --git a/app/utils.ts b/app/utils.ts
@@ -78,7 +78,7 @@ export function validateEmail(email: unknown): email is string {
 }
 
 const HOA_BOUNDARY = {
-  "coordinates": [
+  coordinates: [
     [
       [-117.68496384123713, 33.48204151023167],
       [-117.68388255720208, 33.48203351752436],
@@ -88,11 +88,11 @@ const HOA_BOUNDARY = {
       [-117.67842443970255, 33.48174668927008],
       [-117.67732407755909, 33.48353464046207],
       [-117.68435950172221, 33.48353464046207],
-      [-117.68496384123713, 33.48204151023167]
-    ]
+      [-117.68496384123713, 33.48204151023167],
+    ],
   ],
-  "type": "Polygon"
-}
+  type: "Polygon",
+};
 
 export const validateCoordinates = (coordinates: [number, number]) =>
-  contains(HOA_BOUNDARY as GeoJSON, { type: 'Point', coordinates });
+  contains(HOA_BOUNDARY as GeoJSON, { type: "Point", coordinates });
diff --git a/cypress/e2e/smoke.cy.ts b/cypress/e2e/smoke.cy.ts
@@ -29,10 +29,12 @@ describe("smoke tests", () => {
     cy.visit({
       url: "/reservations/new",
       qs: {
-        "day": "2024-04-24"
-      }
+        day: "2024-04-24",
+      },
     });
-    cy.findByRole("combobox", { name: /What time are you starting?/i }).select('8:00 am');
-    cy.findByRole("button", { name: /Save/i }).click();
+    cy.findByRole("combobox", { name: /What time are you starting?/i }).select(
+      "8:00 am",
+    );
+    cy.findByRole("button", { name: /Reserve/i }).click();
   });
 });
diff --git a/cypress/support/create-user.ts b/cypress/support/create-user.ts
@@ -6,7 +6,7 @@
 
 import { installGlobals } from "@remix-run/node";
 import { parse } from "cookie";
-import { v4 as uuid } from 'uuid';
+import { v4 as uuid } from "uuid";
 
 import { createUser } from "~/models/user.server";
 import { createUserSession } from "~/session.server";

diff --git a/prisma/seed.ts b/prisma/seed.ts
@@ -11,14 +11,12 @@ async function seed() {
   await prisma.user.deleteMany().catch(() => {
     // no worries if records dont exist yet
   });
-  await prisma.reservation.deleteMany()
-
+  await prisma.reservation.deleteMany();
 
   const user = await prisma.user.create({
     data: {
       email,
-      stytchId: 'user-test-56e85954-ddf4-49eb-be5e-3901b0267f62'
-
+      stytchId: "user-test-56e85954-ddf4-49eb-be5e-3901b0267f62",
     },
   });
 
@@ -28,7 +26,7 @@ async function seed() {
       start: tomorrow,
       end: addMinutes(tomorrow, 30),
       userId: user.id,
-      court: 'pb' // 'pb' | 'bball' | '10s'
+      court: "pb", // 'pb' | 'bball' | '10s'
     },
   });