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

Turns out I needed to change the ThemeProvider code, delete React Developer Tools, and Privacy Extension. Now hydration and weird installHook.js.map errors are gone

Browse Source
This commit is contained in:
Ryan Pandya 2024-12-03 11:21:13 -08:00
parent 57faa14f0c
commit e532719905
3 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,18 +4,20 @@ import { TRPCError } from "@trpc/server";
import DayView from "@/components/dashboard/days/DayView";
import spacetime from "spacetime";
import { useTimezone } from "@lifetracker/shared-react/hooks/timezones";
import { date } from "drizzle-orm/pg-core";
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("yyyy-MM-dd")} in ${tzName}.`);
// console.log(`(dashboard/day/[dateQuery]/page.tsx) Loading ${spacetime.now(tzName).format("yyyy-MM-dd")} in ${tzName}.`);
try {
day = await api.days.get({
dateQuery: spacetime(dateQuery, tzName).format("yyyy-MM-dd"),
timezone: tzName,
});
} catch (e) {
console.log("DATEQ", params);
if (e instanceof TRPCError) {
if (e.code == "NOT_FOUND") {
notFound();

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" suppressHydrationWarning>
<html lang="en">
<body className={inter.className}>
<Providers
session={session}

17
apps/web/components/theme-provider.tsx
View File

@ -1,11 +1,18 @@
"use client";
'use client'
import type { ThemeProviderProps } from "next-themes/dist/types";
import * as React from "react";
import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
import * as React from 'react'
const NextThemesProvider = dynamic(
() => import('next-themes').then((e) => e.ThemeProvider),
{
ssr: false,
}
)
import { useTheme } from 'next-themes'
import { type ThemeProviderProps } from 'next-themes/dist/types'
import dynamic from 'next/dynamic'
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
export function useToggleTheme() {