From 48e920d9d89ec9fe70e80853c80b1f6c58cb8362 Mon Sep 17 00:00:00 2001
From: Anthony Li <antli@seas.upenn.edu>
Date: Fri, 29 Dec 2023 22:18:09 -0800
Subject: [PATCH] Fix timezones and add routing hack

---
 app/assignments/page.tsx     | 19 ++++++++++++-------
 app/menu.tsx                 | 13 ++++++++++---
 components/FormattedDate.tsx |  2 +-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/app/assignments/page.tsx b/app/assignments/page.tsx
index 13f801d..e002fb3 100644
--- a/app/assignments/page.tsx
+++ b/app/assignments/page.tsx
@@ -1,7 +1,8 @@
 import { allHomework, allAssessments } from 'contentlayer/generated'
 import { Card } from '@/components/Card'
 import Link from 'next/link'
-import { FormattedDate } from '@/components/FormattedDate'
+import { FormattedDate, defaultTimezone } from '@/components/FormattedDate'
+import { toDate } from 'date-fns-tz'
 
 type Assignment = {
     title: string
@@ -16,18 +17,22 @@ type Assignment = {
     sortDate: Date
 }
 
+export function parseDate(str: string) {
+    return toDate(str, { timeZone: defaultTimezone })
+}
+
 export const formattedHomework: Assignment[] = allHomework.map(hw => {
-    const due = new Date(hw.dueDate)
+    const due = parseDate(hw.dueDate)
 
     return {
         title: hw.title,
         href: `/assignments/hw/${hw.slug}`,
         isReleased: hw.isReleased,
-        releaseDate: hw.releaseDate && new Date(hw.releaseDate),
+        releaseDate: hw.releaseDate && parseDate(hw.releaseDate),
         dates: [
             ...(hw.auxiliaryDates ?? []).map(aux => ({
                 name: aux.name,
-                date: new Date(aux.date),
+                date: parseDate(aux.date),
                 specifyTime: true,
             })),
             {
@@ -36,18 +41,18 @@ export const formattedHomework: Assignment[] = allHomework.map(hw => {
                 specifyTime: true,
             }
         ],
-        sortDate: new Date(hw.dueDate),
+        sortDate: parseDate(hw.dueDate),
     }
 })
 
 export const formattedAssessments = allAssessments.map(a => {
-    const date = new Date(a.assessmentDate)
+    const date = parseDate(a.assessmentDate)
 
     return {
         title: a.title,
         href: `/assignments/assessment/${a.slug}`,
         isReleased: a.isReleased,
-        releaseDate: a.releaseDate && new Date(a.releaseDate),
+        releaseDate: a.releaseDate && parseDate(a.releaseDate),
         dates: [
             {
                 name: "Scheduled",
diff --git a/app/menu.tsx b/app/menu.tsx
index 9b1b9e8..04e0a03 100644
--- a/app/menu.tsx
+++ b/app/menu.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import Link from "next/link"
-import { usePathname } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import { ReactNode, createContext, useContext, useEffect, useState } from "react"
 
 export type MenuItemProps = {
@@ -58,7 +58,6 @@ export function MenuContextProvider({ children }: { children: ReactNode }) {
     return <MenuContext.Provider value={{
         activeItem: activeState.pathname === pathname ? activeState.item : null,
         setActiveItem(item) {
-            console.log({ item, pathname })
             setActiveState({ item, pathname })
         }
     }}>
@@ -88,6 +87,7 @@ export function MenuItemActivator({ item }: MenuItemActivatorProps) {
 
 function MenuItem({ id, title, icon, href }: MenuItemProps) {
     const context = useMenuContext()
+    const router = useRouter()
     const isActive = id === context.activeItem
 
     let className = "block px-3 py-2 rounded-xl group relative bg-opacity-0"
@@ -100,7 +100,14 @@ function MenuItem({ id, title, icon, href }: MenuItemProps) {
     let containerClassName = "flex gap-3 transition-[margin-left] justify-center text-center md:text-left"
     if (!isActive) containerClassName += " md:group-hover:ml-1"
 
-    return <Link className={className} href={href}>
+    return <Link className={className} href={href} onClick={e => {
+        if (href === "/") {
+            // HACK: For some reason navigating to / forces a full refresh
+            // So we just intercept it and do it ourselves instead
+            router.push("/")
+            e.preventDefault()
+        }
+    }}>
         <div className={containerClassName}>
             <div className="w-4">{icon}</div>
             <div className="md:grow line-clamp-1 overflow-hidden overflow-ellipsis">{title}</div>
diff --git a/components/FormattedDate.tsx b/components/FormattedDate.tsx
index 8ddae19..6ef40ba 100644
--- a/components/FormattedDate.tsx
+++ b/components/FormattedDate.tsx
@@ -10,7 +10,7 @@ export type FormattedDateProps = {
     format: string
 }
 
-const defaultTimezone = "America/New_York"
+export const defaultTimezone = "America/New_York"
 
 export function FormattedDate({ date, format: formatStr }: FormattedDateProps) {
     const [value, setValue] = useState(formatInTimeZone(date, defaultTimezone, formatStr, {