zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: use cookie store for theme as well

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2025-10-19 21:31:53 +02:00
parent d8a297edf2
commit 87d4ec2f33
3 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/start/src/components/theme-provider.tsx
View File

@@ -1,5 +1,6 @@
import { useCookieStore } from '@/hooks/use-cookie-store';
import { mapKeys } from '@openpanel/validation'; import { mapKeys } from '@openpanel/validation';
import { ScriptOnce } from '@tanstack/react-router'; import { ScriptOnce, useRouteContext } from '@tanstack/react-router';
import { createIsomorphicFn } from '@tanstack/react-start'; import { createIsomorphicFn } from '@tanstack/react-start';
import { type ReactNode, createContext, use, useEffect, useState } from 'react'; import { type ReactNode, createContext, use, useEffect, useState } from 'react';
import { z } from 'zod'; import { z } from 'zod';
@@ -115,7 +116,10 @@ type ThemeProviderProps = {
children: ReactNode; children: ReactNode;
}; };
export function ThemeProvider({ children }: ThemeProviderProps) { export function ThemeProvider({ children }: ThemeProviderProps) {
const [userTheme, setUserTheme] = useState<UserTheme>(getStoredUserTheme); const [userTheme, setUserTheme] = useCookieStore<UserTheme>(
'ui-theme',
'system',
);
useEffect(() => { useEffect(() => {
if (userTheme !== 'system') return; if (userTheme !== 'system') return;

12
apps/start/src/hooks/use-cookie-store.tsx
View File

@@ -1,11 +1,14 @@
import { useRouteContext } from '@tanstack/react-router'; import { useRouteContext } from '@tanstack/react-router';
import { createServerFn, createServerOnlyFn } from '@tanstack/react-start'; import { createServerFn, createServerOnlyFn } from '@tanstack/react-start';
import { getCookies, setCookie } from '@tanstack/react-start/server'; import { getCookies, setCookie } from '@tanstack/react-start/server';
import { pick } from 'ramda';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import { z } from 'zod'; import { z } from 'zod';
const VALID_COOKIES = ['ui-theme', 'chartType', 'range'] as const;
const setCookieFn = createServerFn({ method: 'POST' }) const setCookieFn = createServerFn({ method: 'POST' })
.inputValidator(z.object({ key: z.string(), value: z.string() })) .inputValidator(z.object({ key: z.enum(VALID_COOKIES), value: z.string() }))
.handler(({ data: { key, value } }) => { .handler(({ data: { key, value } }) => {
setCookie(key, value); setCookie(key, value);
}); });
@@ -13,10 +16,13 @@ const setCookieFn = createServerFn({ method: 'POST' })
// Called in __root.tsx beforeLoad hook to get cookies from the server // Called in __root.tsx beforeLoad hook to get cookies from the server
// And recieved with useRouteContext in the client // And recieved with useRouteContext in the client
export const getCookiesFn = createServerFn({ method: 'GET' }).handler(() => export const getCookiesFn = createServerFn({ method: 'GET' }).handler(() =>
getCookies(), pick(VALID_COOKIES, getCookies()),
); );
export function useCookieStore<T>(key: string, defaultValue: T) { export function useCookieStore<T>(
key: (typeof VALID_COOKIES)[number],
defaultValue: T,
) {
const { cookies } = useRouteContext({ strict: false }); const { cookies } = useRouteContext({ strict: false });
const [value, setValue] = useState<T>((cookies?.[key] ?? defaultValue) as T); const [value, setValue] = useState<T>((cookies?.[key] ?? defaultValue) as T);

10
apps/start/src/routes/__root.tsx
View File

@@ -80,6 +80,11 @@ function RootDocument({ children }: { children: React.ReactNode }) {
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<head> <head>
<HeadContent /> <HeadContent />
</head>
<body className="grainy min-h-screen bg-def-100 font-sans text-base antialiased leading-normal">
<Providers>{children}</Providers>
<ThemeScriptOnce />
<Scripts />
<script <script
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: `window.$ujq=window.$ujq||[];window.uj=window.uj||new Proxy({},{get:(_,p)=>(...a)=>window.$ujq.push([p,...a])});document.head.appendChild(Object.assign(document.createElement('script'),{src:'https://cdn.userjot.com/sdk/v2/uj.js',type:'module',async:!0}));`, __html: `window.$ujq=window.$ujq||[];window.uj=window.uj||new Proxy({},{get:(_,p)=>(...a)=>window.$ujq.push([p,...a])});document.head.appendChild(Object.assign(document.createElement('script'),{src:'https://cdn.userjot.com/sdk/v2/uj.js',type:'module',async:!0}));`,
@@ -90,11 +95,6 @@ function RootDocument({ children }: { children: React.ReactNode }) {
__html: `window.uj.init('cm6thlmwr03xr13jghznx87gk', { widget: true, trigger: 'custom' });`, __html: `window.uj.init('cm6thlmwr03xr13jghznx87gk', { widget: true, trigger: 'custom' });`,
}} }}
/> />
</head>
<body className="grainy min-h-screen bg-def-100 font-sans text-base antialiased leading-normal">
<Providers>{children}</Providers>
<ThemeScriptOnce />
<Scripts />
<div className="hidden"> <div className="hidden">
<div className="text-chart-0 bg-chart-0" /> <div className="text-chart-0 bg-chart-0" />
<div className="text-chart-1 bg-chart-1" /> <div className="text-chart-1 bg-chart-1" />