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 { useTimezone } from "@lifetracker/shared-react/hooks/timezones";
export default async function DayPage({
params,
}: {
params: { dateQuery: string };
}) {
export default async function DayPage({ params }: { params: { dateQuery: string }; }) {
const { dateQuery } = await params;
let day;
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 {
day = await api.days.get({
dateQuery: spacetime(params.dateQuery, tzName).format(),
dateQuery: spacetime(dateQuery, tzName).format("yyyy-MM-dd"),
timezone: tzName,
});
} catch (e) {

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

@ -52,7 +52,7 @@ export default async function RootLayout({
}>) {
const session = await getServerAuthSession();
return (
<html lang="en">
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
<Providers
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 { UTCDate, utc } from "@date-fns/utc";
import spacetime from "spacetime";
import EditableHour from "@/components/hours/EditableHour";
import EditableHour from "@/components/dashboard/hours/EditableHour";
export default async function DayView({
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 { useUpdateHour } from "@lifetracker/shared-react/hooks/days";
import { EditableText } from "../dashboard/EditableText";
import { EditableText } from "@/components/dashboard/EditableText";
import { format } from "date-fns";
import { TZDate } from "@date-fns/tz";
import { ZHour } from "@lifetracker/shared/types/days";
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,
hour,
onSubmit
@ -32,7 +35,14 @@ function EditMode({
return;
}
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);
onSubmit({
@ -40,19 +50,30 @@ function EditMode({
time: hour.time,
code: newCode,
})
document.getElementById("hour-" + (hour.time + 1).toString())?.getElementsByClassName("edit-hour-code")[0].focus();
selectNext(hour.time + 1);
};
return (
<input
className="w-8 border-b-2 text-center edit-hour-code"
style={{
background: hour.background, color: hour.foreground, fontFamily: "inherit",
}}
ref={ref}
value={originalText}
defaultValue={originalText}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
submit();
}
if (e.key == "ArrowDown") {
e.preventDefault();
selectNext(hour.time + 1);
}
if (e.key == "ArrowUp") {
e.preventDefault();
selectNext(hour.time - 1);
}
}}
onClick={(e) => {
const range = document.createRange();
@ -117,7 +138,7 @@ export default function EditableHour({
{hour.datetime}
</span>
<div className="flex justify-center">
<EditMode
<EditCode
originalText={hour.categoryCode}
hour={hour}
onSubmit={updateHour}