From 0d6c3e08f070dd41807a2d8d01f649d9beb10783 Mon Sep 17 00:00:00 2001
From: john gravois <jagravois@gmail.com>
Date: Sat, 1 Jun 2024 11:38:49 -0700
Subject: [PATCH] pass through the start time

---
 app/routes/ReservationList.tsx  | 35 +++++++++++++--------------------
 app/routes/reservations.new.tsx | 30 ++++++++++------------------
 app/styles.css                  | 20 +++----------------
 3 files changed, 27 insertions(+), 58 deletions(-)

diff --git a/app/routes/ReservationList.tsx b/app/routes/ReservationList.tsx
index 0750288..3af1ffa 100644
--- a/app/routes/ReservationList.tsx
+++ b/app/routes/ReservationList.tsx
@@ -1,5 +1,5 @@
 import type { User } from "@prisma/client";
-import { Link, useNavigate } from "@remix-run/react";
+import { useNavigate } from "@remix-run/react";
 import cn from "classnames";
 import {
   addDays,
@@ -38,17 +38,14 @@ const rezTimes = [...Array(12).keys()].map((v: number) => v + 8);
 
 type CourtType = "pb" | "bball" | "10s";
 
-const isOverlapping = (r: Rez, date: Date, hour: number) => {
-  return (
-    areIntervalsOverlapping(
-      { start: r.start, end: r.end },
-      {
-        start: addHours(date, hour),
-        end: addHours(date, hour + 0.01),
-      },
-    ) && !r.openPlay
+const isOverlapping = (r: Rez, date: Date, hour: number) =>
+  areIntervalsOverlapping(
+    { start: r.start, end: r.end },
+    {
+      start: addHours(date, hour),
+      end: addHours(date, hour + 0.01),
+    },
   );
-};
 
 const Guts = ({
   reservations,
@@ -105,7 +102,9 @@ const Guts = ({
                   ? navigate(
                       `/reservations/new?day=${date
                         .toISOString()
-                        .slice(0, 10)}`,
+                        .slice(0, 10)}&start=${
+                        String(num).padStart(2, "0") + ":00"
+                      }`,
                     )
                   : undefined
               }
@@ -122,7 +121,9 @@ const Guts = ({
                   ? navigate(
                       `/reservations/new?day=${date
                         .toISOString()
-                        .slice(0, 10)}`,
+                        .slice(0, 10)}&start=${
+                        String(num).padStart(2, "0") + ":30"
+                      }`,
                     )
                   : console.log("cant touch this")
               }
@@ -215,14 +216,6 @@ export const ReservationList = ({
           </a>
         </div>
       </nav>
-      {user ? (
-        <Link
-          to={`/reservations/new?day=${date.toISOString().slice(0, 10)}`}
-          className="text-blue-500"
-        >
-          +
-        </Link>
-      ) : null}
       <main className="main">
         <TimeSlots
           reservations={existingReservations.filter((r) => r.court === "pb")}
diff --git a/app/routes/reservations.new.tsx b/app/routes/reservations.new.tsx
index 83aebfc..91be2d3 100644
--- a/app/routes/reservations.new.tsx
+++ b/app/routes/reservations.new.tsx
@@ -55,7 +55,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 export default function NewReservationPage() {
   const [params] = useSearchParams();
   const actionData = useActionData<typeof action>();
-  const startTimeRef = useRef<HTMLSelectElement>(null);
+
+  const startTimeRef = useRef<HTMLInputElement>(null);
   const startDateRef = useRef<HTMLInputElement>(null);
   const courtRef = useRef<HTMLFieldSetElement>(null);
   const durationRef = useRef<HTMLFieldSetElement>(null);
@@ -73,31 +74,14 @@ export default function NewReservationPage() {
           <div className="newRes_stack">
             <label className="newRes_label" htmlFor="startTime">
               <span>What time are you starting?</span>
+              <p>{params.get("start")}</p>
             </label>
-            <select
-              className="newRes_select"
-              name="startTime"
-              id="startTime"
-              ref={startTimeRef}
-            >
-              <option value="08:00">8:00 am</option>
-              <option value="09:00">9:00 am</option>
-              <option value="10:00">10:00 am</option>
-              <option value="11:00">11:00 am</option>
-              <option value="12:00">12:00 pm</option>
-              <option value="13:00">1:00 pm</option>
-              <option value="14:00">2:00 pm</option>
-              <option value="15:00">3:00 pm</option>
-              <option value="16:00">4:00 pm</option>
-              <option value="17:00">5:00 pm</option>
-              <option value="18:00">6:00 pm</option>
-            </select>
           </div>
           <fieldset>
             <label className="newRes_checkbox" htmlFor="openPlay">
               <div className="newRes_bold">Are neighbors welcome to join?</div>
               <input type="checkbox" id="openPlay" name="openPlay" />
-              <span className="newRes_box newRes_box___check"></span>
+              <span className="newRes_box"></span>
             </label>
           </fieldset>
         </div>
@@ -179,6 +163,12 @@ export default function NewReservationPage() {
               params.get("day") ?? startOfToday().toISOString().slice(0, 10)
             }
           />
+          <input
+            name="startTime"
+            type="text"
+            ref={startTimeRef}
+            defaultValue={params.get("start") ?? "08:00"}
+          />
         </div>
 
         {actionData?.errors?.start ? (
diff --git a/app/styles.css b/app/styles.css
index 89d3d68..175619d 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -473,21 +473,6 @@ body {
   font-weight: bold;
 }
 
-.newRes_select {
-  background-color: transparent;
-  border: 1px solid var(--dark);
-  border-radius: 10px;
-  color: var(--dark);
-  cursor: pointer;
-  max-width: 300px;
-  padding: 10px 15px;
-}
-
-.newRes_select:hover,
-.newRes_select:focus {
-  background-color: var(--mid-light);
-}
-
 .newRes_button {
   background-color: var(--dark);
   border-radius: 10px;
@@ -570,8 +555,9 @@ body {
   background-color: var(--mid-light);
 }
 
-.newRes_box___check {
-  top: 12px;
+input:checked ~ .newRes_box:before {
+  content: "✔️";
+  margin-left: 3px;
 }
 
 .newRes_radio:hover input ~ .newRes_checkmark {