From 020b75b72ed98139f8b63913d4641421099e97f4 Mon Sep 17 00:00:00 2001 From: Ryan Pandya Date: Wed, 4 Dec 2024 12:20:32 -0800 Subject: [PATCH] Frontend updates to Day and Month views --- apps/web/app/dashboard/layout.tsx | 4 +- .../app/dashboard/timeline/[view]/page.tsx | 42 +------ .../web/components/dashboard/days/DayView.tsx | 9 +- .../dashboard/hours/EditableHour.tsx | 42 ++++--- .../dashboard/hours/EditableHourCode.tsx | 8 +- .../dashboard/hours/EditableHourComment.tsx | 3 +- .../dashboard/sidebar/ModileSidebar.tsx | 12 +- .../components/dashboard/sidebar/Sidebar.tsx | 7 +- .../dashboard/timelines/MonthView.tsx | 115 ++++++++++++------ packages/shared/utils/days.ts | 2 +- 10 files changed, 135 insertions(+), 109 deletions(-) diff --git a/apps/web/app/dashboard/layout.tsx b/apps/web/app/dashboard/layout.tsx index fb67b43..4323119 100644 --- a/apps/web/app/dashboard/layout.tsx +++ b/apps/web/app/dashboard/layout.tsx @@ -4,7 +4,7 @@ import Sidebar from "@/components/dashboard/sidebar/Sidebar"; import DemoModeBanner from "@/components/DemoModeBanner"; import { Separator } from "@/components/ui/separator"; import ValidAccountCheck from "@/components/utils/ValidAccountCheck"; - +import { cn } from "@/lib/utils"; import serverConfig from "@lifetracker/shared/config"; export default async function Dashboard({ @@ -29,7 +29,7 @@ export default async function Dashboard({ {modal} -
{children}
+
{children}
diff --git a/apps/web/app/dashboard/timeline/[view]/page.tsx b/apps/web/app/dashboard/timeline/[view]/page.tsx index 872942e..c12fd90 100644 --- a/apps/web/app/dashboard/timeline/[view]/page.tsx +++ b/apps/web/app/dashboard/timeline/[view]/page.tsx @@ -6,6 +6,7 @@ import { EditableHourCode } from "@/components/dashboard/hours/EditableHourCode" import { useUpdateHour } from "@lifetracker/shared-react/hooks/days"; import { useToast } from "@/components/ui/use-toast"; import { getHourFromTime } from "@lifetracker/shared/utils/hours"; +import MonthView from "@/components/dashboard/timelines/MonthView"; async function fetchDays(view: string, dateQuery: string) { const timezone = await api.users.getTimezone(); @@ -16,7 +17,7 @@ async function fetchDays(view: string, dateQuery: string) { const days = []; for (let i = 0; i < 20; i++) { const dayDate = firstDay.add(i, "day").format("iso-short"); - console.log(dayDate); + // console.log(dayDate); const dayRes = await api.days.get({ dateQuery: dayDate, timezone: timezone, @@ -33,44 +34,7 @@ export default async function TimelinePage({ params }: { params: { view: string, return ( <> -
-
Date
- {Array.from({ length: 24 }, (_, i) => ( -
- {getHourFromTime(i, "twelves")} -
- ))} -
- {days.map((day, index) => ( -
-
- {spacetime(day.date).format("{iso-month}/{date-pad}")} -
- {day.hours.map((hour, i) => ( - - //
- // {hour.categoryCode ?? "_"} - //
- ))} -
- - ))} + ); } \ No newline at end of file diff --git a/apps/web/components/dashboard/days/DayView.tsx b/apps/web/components/dashboard/days/DayView.tsx index aab1b10..4cb8959 100644 --- a/apps/web/components/dashboard/days/DayView.tsx +++ b/apps/web/components/dashboard/days/DayView.tsx @@ -26,7 +26,7 @@ export default async function DayView({ return (
-
+
- + {spacetime(day.date).format("{day}, {month} {date}, {year}")} + + {spacetime(day.date).format("{day-short}, {month-short} {date}, {year}")} +
-
+
diff --git a/apps/web/components/dashboard/hours/EditableHour.tsx b/apps/web/components/dashboard/hours/EditableHour.tsx index 7b4cf7e..14de2bf 100644 --- a/apps/web/components/dashboard/hours/EditableHour.tsx +++ b/apps/web/components/dashboard/hours/EditableHour.tsx @@ -10,7 +10,7 @@ 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 { MessageCircle } from "lucide-react"; +import { MessageCircle, Pencil } from "lucide-react"; import { ButtonWithTooltip } from "@/components/ui/button"; import { EditableHourCode } from "./EditableHourCode"; import { EditableHourComment } from "./EditableHourComment"; @@ -27,22 +27,23 @@ export default function EditableHour({ i: number, className?: string; }) { - const router = useRouter(); - const currentPath = usePathname(); const [hour, setHour] = useState(initialHour); const { mutate: updateHour, isPending } = useUpdateHour({ onSuccess: (res, req, meta) => { const { categoryCode: oldCode, comment: oldComment } = hour; const newHour = { - categoryCode: req.code, + categoryCode: parseInt(req.code!), comment: oldComment, ...res, }; console.log(res); setHour(newHour); - toast({ - description: "Hour updated!", - }); + // Only show toast if client screen is larger than mobile + if (window.innerWidth > 640) { + toast({ + description: "Hour updated!", + }); + } }, }); const tzOffset = spacetime().offset() / 60; @@ -64,28 +65,29 @@ export default function EditableHour({ } return (
640 ? "50px 100px 1fr 50px" : "50px 100px 1fr", // Known issue: This won't work if the screen is resized, only on reload }} > - {isActiveHour(hour) && "--> "} + {/* {isActiveHour(hour) && "--> "} */} {hour.datetime}
- + -
+ +
+ {hour.categoryName} +
+ +
{ console.log("Pushed edit") }} > - +
diff --git a/apps/web/components/dashboard/hours/EditableHourCode.tsx b/apps/web/components/dashboard/hours/EditableHourCode.tsx index 77436b9..1791f2a 100644 --- a/apps/web/components/dashboard/hours/EditableHourCode.tsx +++ b/apps/web/components/dashboard/hours/EditableHourCode.tsx @@ -1,8 +1,10 @@ "use client"; -import { or } from "drizzle-orm"; import { useEffect, useRef } from "react"; +import { + cn +} from "@/lib/utils"; function selectHourCode(time: number) { document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-code")[0].focus(); } @@ -11,6 +13,7 @@ function selectHourComment(time: number) { } export function EditableHourCode({ + className = "", originalText, hour, onSubmit, @@ -50,6 +53,7 @@ export function EditableHourCode({ dayId: hour.dayId, code: newCode ?? "", comment: hour.comment, + i: i }) selectHourCode(i + 1); }; @@ -62,7 +66,7 @@ export function EditableHourCode({
    } - path="/dashboard/bookmarks" + logo={} + path="/dashboard/day/today" /> - } path="/dashboard/search" /> - } path="/dashboard/lists" /> - } path="/dashboard/tags" /> + } path="/dashboard/categories" /> + } path="/dashboard/habits" /> + } path="/analytics" />
); diff --git a/apps/web/components/dashboard/sidebar/Sidebar.tsx b/apps/web/components/dashboard/sidebar/Sidebar.tsx index 786b020..f163e16 100644 --- a/apps/web/components/dashboard/sidebar/Sidebar.tsx +++ b/apps/web/components/dashboard/sidebar/Sidebar.tsx @@ -3,7 +3,7 @@ import SidebarItem from "@/components/shared/sidebar/SidebarItem"; import { Separator } from "@/components/ui/separator"; import { api } from "@/server/api/client"; import { getServerAuthSession } from "@/server/auth"; -import { Archive, Calendar, Home, Search, Tag } from "lucide-react"; +import { Archive, Calendar, CheckCheck, Home, Search, Tag } from "lucide-react"; import serverConfig from "@lifetracker/shared/config"; import AllLists from "./AllLists"; @@ -43,6 +43,11 @@ export default async function Sidebar() { path: "/dashboard/timeline/month", }, ...searchItem, + { + name: "Habits", + icon: , + path: "/dashboard/habits", + }, { name: "Categories", icon: , diff --git a/apps/web/components/dashboard/timelines/MonthView.tsx b/apps/web/components/dashboard/timelines/MonthView.tsx index f0c6acf..cdcda22 100644 --- a/apps/web/components/dashboard/timelines/MonthView.tsx +++ b/apps/web/components/dashboard/timelines/MonthView.tsx @@ -1,57 +1,96 @@ +'use client'; + import { redirect } from "next/navigation"; import { Separator } from "@/components/ui/separator"; -import { getServerAuthSession } from "@/server/auth"; import { ZDay } from "@lifetracker/shared/types/days"; -import EditableDayComment from "./EditableDayComment"; -import { MoodStars } from "./MoodStars"; +import { EditableHourCode } from "../hours/EditableHourCode"; +import { getHourFromTime } from "@lifetracker/shared/utils/hours"; import Link from "next/link"; import { cn } from "@/lib/utils"; import { ArrowLeftSquare, ArrowRightSquare } from "lucide-react"; import spacetime from "spacetime"; import EditableHour from "@/components/dashboard/hours/EditableHour"; +import { useUpdateHour } from "@lifetracker/shared-react/hooks/days"; +import { useState } from "react"; -export default async function MonthView({ - dateRange, +export default function MonthView({ + days: initialDays, }: { - dateRange: string[]; + days: ZDay[]; }) { - const session = await getServerAuthSession(); - if (!session) { - redirect("/"); + + // Hacky, but it works + // Remove "container" class from parent div + const parent = document.querySelector(".container"); + if (parent) { + parent.classList.remove("container"); } + const [days, setDays] = useState(initialDays); + const { mutate: updateHour, isPending } = useUpdateHour({ + onSuccess: (res, req, meta) => { + const hourDay = days.find(day => day.date === req.date); + // Replace the relevant hour within hourDay + hourDay.hours[req.i] = res; + // Place the new hourDay within the days array + setDays([...days]); + }, + }); return ( -
-
-
- -
- -
- - - {spacetime().format("{day}, {month} {date}, {year}")} - - -
- -
- -
+ <> +
+
DATE
+
DAY
+ {Array.from({ length: 24 }, (_, i) => ( +
+ {getHourFromTime(i, "all")} +
+ ))}
+ { + days.map((day, index) => ( +
+
0 ? "bg-white text-black" : "" + )}> + {spacetime(day.date).format("{iso-month}/{date-pad}")} +
+
0 ? "bg-white text-black" : "" + )}> + {spacetime(day.date).format("{day-short}")} +
+ {day.hours.map((hour, i) => ( + + //
+ // {hour.categoryCode ?? "_"} + //
+ ))} +
- -
+ )) + } + ); } diff --git a/packages/shared/utils/days.ts b/packages/shared/utils/days.ts index f597773..60c7f8c 100644 --- a/packages/shared/utils/days.ts +++ b/packages/shared/utils/days.ts @@ -24,7 +24,7 @@ export function dateFromInput(input: { dateQuery: string, timezone: string }) { throw new Error("Invalid dateQuery"); } } - console.log(`dateFromInput(${input.dateQuery}, ${input.timezone}) = ${t}`); + // console.log(`dateFromInput(${input.dateQuery}, ${input.timezone}) = ${t}`); return t; }