ryan/lifetracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix "await params" warning and stupidly disable HydrationWarning

Browse Source
This commit is contained in:
Ryan Pandya 2024-12-03 10:57:51 -08:00
parent d0c07fd8b8
commit 57faa14f0c
4 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/web/app/dashboard/day/[dateQuery]/page.tsx
View File

@ -5,17 +5,14 @@ import DayView from "@/components/dashboard/days/DayView";
import spacetime from "spacetime"; import spacetime from "spacetime";
import { useTimezone } from "@lifetracker/shared-react/hooks/timezones"; import { useTimezone } from "@lifetracker/shared-react/hooks/timezones";
export default async function DayPage({ export default async function DayPage({ params }: { params: { dateQuery: string }; }) {
params, const { dateQuery } = await params;
}: {
params: { dateQuery: string };
}) {
let day; let day;
const tzName = await api.users.getTimezone(); const tzName = await api.users.getTimezone();
console.log(`Displaying ${spacetime.now(tzName).format()} in ${tzName}.`); console.log(`Displaying ${spacetime.now(tzName).format("yyyy-MM-dd")} in ${tzName}.`);
try { try {
day = await api.days.get({ day = await api.days.get({
dateQuery: spacetime(params.dateQuery, tzName).format(), dateQuery: spacetime(dateQuery, tzName).format("yyyy-MM-dd"),
timezone: tzName, timezone: tzName,
}); });
} catch (e) { } catch (e) {

2
apps/web/app/layout.tsx
View File

@ -52,7 +52,7 @@ export default async function RootLayout({
}>) { }>) {
const session = await getServerAuthSession(); const session = await getServerAuthSession();
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<body className={inter.className}> <body className={inter.className}>
<Providers <Providers
session={session} session={session}

2
apps/web/components/dashboard/days/DayView.tsx
View File

@ -13,7 +13,7 @@ import { cn } from "@/lib/utils";
import { ArrowLeftSquare, ArrowRightSquare } from "lucide-react"; import { ArrowLeftSquare, ArrowRightSquare } from "lucide-react";
import { UTCDate, utc } from "@date-fns/utc"; import { UTCDate, utc } from "@date-fns/utc";
import spacetime from "spacetime"; import spacetime from "spacetime";
import EditableHour from "@/components/hours/EditableHour"; import EditableHour from "@/components/dashboard/hours/EditableHour";
export default async function DayView({ export default async function DayView({
day, day,

33
apps/web/components/hours/EditableHour.tsx → apps/web/components/dashboard/hours/EditableHour.tsx
View File

@ -5,14 +5,17 @@ import { toast } from "@/components/ui/use-toast";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useUpdateHour } from "@lifetracker/shared-react/hooks/days"; import { useUpdateHour } from "@lifetracker/shared-react/hooks/days";
import { EditableText } from "../dashboard/EditableText"; import { EditableText } from "@/components/dashboard/EditableText";
import { format } from "date-fns"; import { format } from "date-fns";
import { TZDate } from "@date-fns/tz"; import { TZDate } from "@date-fns/tz";
import { ZHour } from "@lifetracker/shared/types/days"; import { ZHour } from "@lifetracker/shared/types/days";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
function selectNext(time: number) {
document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-code")[0].focus();
}
function EditMode({ function EditCode({
originalText, originalText,
hour, hour,
onSubmit onSubmit
@ -32,7 +35,14 @@ function EditMode({
return; return;
} }
if (newCode == "") { if (newCode == "") {
newCode = null; if (originalText == null) {
// Set value to previous hour's value
newCode = document.getElementById("hour-" + (hour.time - 1).toString())?.getElementsByClassName("edit-hour-code")[0].value;
console.log(newCode);
}
else {
newCode = null;
}
} }
// console.log(hour); // console.log(hour);
onSubmit({ onSubmit({
@ -40,19 +50,30 @@ function EditMode({
time: hour.time, time: hour.time,
code: newCode, code: newCode,
}) })
document.getElementById("hour-" + (hour.time + 1).toString())?.getElementsByClassName("edit-hour-code")[0].focus(); selectNext(hour.time + 1);
}; };
return ( return (
<input <input
className="w-8 border-b-2 text-center edit-hour-code" className="w-8 border-b-2 text-center edit-hour-code"
style={{
background: hour.background, color: hour.foreground, fontFamily: "inherit",
}}
ref={ref} ref={ref}
value={originalText} defaultValue={originalText}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter") { if (e.key === "Enter") {
e.preventDefault(); e.preventDefault();
submit(); submit();
} }
if (e.key == "ArrowDown") {
e.preventDefault();
selectNext(hour.time + 1);
}
if (e.key == "ArrowUp") {
e.preventDefault();
selectNext(hour.time - 1);
}
}} }}
onClick={(e) => { onClick={(e) => {
const range = document.createRange(); const range = document.createRange();
@ -117,7 +138,7 @@ export default function EditableHour({
{hour.datetime} {hour.datetime}
</span> </span>
<div className="flex justify-center"> <div className="flex justify-center">
<EditMode <EditCode
originalText={hour.categoryCode} originalText={hour.categoryCode}
hour={hour} hour={hour}
onSubmit={updateHour} onSubmit={updateHour}