From c5fe7be77b1c4e03276c8cce0cb9ff8c00b3a65a Mon Sep 17 00:00:00 2001
From: Ryan Pandya <ryan@ryanpandya.com>
Date: Tue, 3 Dec 2024 21:11:22 -0800
Subject: [PATCH] Display and edit days, codes, and comments working.

---
 .../components/dashboard/hours/EditableHour.tsx    |  6 ++++--
 .../dashboard/hours/EditableHourCode.tsx           | 13 ++++++++++---
 .../dashboard/hours/EditableHourComment.tsx        | 14 ++++++++++----
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/apps/web/components/dashboard/hours/EditableHour.tsx b/apps/web/components/dashboard/hours/EditableHour.tsx
index 6e99897..7b4cf7e 100644
--- a/apps/web/components/dashboard/hours/EditableHour.tsx
+++ b/apps/web/components/dashboard/hours/EditableHour.tsx
@@ -16,7 +16,7 @@ import { EditableHourCode } from "./EditableHourCode";
 import { EditableHourComment } from "./EditableHourComment";
 import { api } from "@/lib/trpc";
 import spacetime from 'spacetime';
-import { eq } from "drizzle-orm";
+import { eq, is } from "drizzle-orm";
 
 export default function EditableHour({
     hour: initialHour,
@@ -58,7 +58,9 @@ export default function EditableHour({
 
     function isActiveHour(hour: ZHour) {
         const now = new TZDate();
-        return (hour.date == format(now, "yyyy-MM-dd")) && (((now.getHours()) + (now.getTimezoneOffset() / 60) - (parseInt(hour.time))) == 0)
+        const isCurrentHour = ((now.getHours() - localDateTime.hour()) == 0);
+        const isToday = (localDateTime.format("iso-short") == format(now, "yyyy-MM-dd"));
+        return isToday && isCurrentHour;
     }
     return (
         <div
diff --git a/apps/web/components/dashboard/hours/EditableHourCode.tsx b/apps/web/components/dashboard/hours/EditableHourCode.tsx
index d183e26..a632556 100644
--- a/apps/web/components/dashboard/hours/EditableHourCode.tsx
+++ b/apps/web/components/dashboard/hours/EditableHourCode.tsx
@@ -3,9 +3,12 @@
 import { or } from "drizzle-orm";
 import { useEffect, useRef } from "react";
 
-function selectNext(time: number) {
+function selectHourCode(time: number) {
     document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-code")[0].focus();
 }
+function selectHourComment(time: number) {
+    document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-comment")[0].focus();
+}
 
 export function EditableHourCode({
     originalText,
@@ -72,11 +75,15 @@ export function EditableHourCode({
                     }
                     if (e.key == "ArrowDown") {
                         e.preventDefault();
-                        selectNext(i + 1);
+                        selectHourCode(i + 1);
                     }
                     if (e.key == "ArrowUp") {
                         e.preventDefault();
-                        selectNext(i - 1);
+                        selectHourCode(i - 1);
+                    }
+                    if (e.key == "ArrowRight") {
+                        e.preventDefault();
+                        selectHourComment(i);
                     }
                 }}
                 onClick={(e) => {
diff --git a/apps/web/components/dashboard/hours/EditableHourComment.tsx b/apps/web/components/dashboard/hours/EditableHourComment.tsx
index 79d81b8..9eaab98 100644
--- a/apps/web/components/dashboard/hours/EditableHourComment.tsx
+++ b/apps/web/components/dashboard/hours/EditableHourComment.tsx
@@ -3,8 +3,10 @@
 import { or } from "drizzle-orm";
 import { useEffect, useRef } from "react";
 
-function selectNext(time: number) {
-    console.log(time);
+function selectHourCode(time: number) {
+    document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-code")[0].focus();
+}
+function selectHourComment(time: number) {
     document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-comment")[0].focus();
 }
 
@@ -65,11 +67,15 @@ export function EditableHourComment({
                 }
                 if (e.key == "ArrowDown") {
                     e.preventDefault();
-                    selectNext(i + 1);
+                    selectHourComment(i + 1);
                 }
                 if (e.key == "ArrowUp") {
                     e.preventDefault();
-                    selectNext(i - 1);
+                    selectHourComment(i - 1);
+                }
+                if (e.key == "ArrowLeft") {
+                    e.preventDefault();
+                    selectHourCode(i);
                 }
             }}
             onClick={(e) => {