Added jotai (#14)

* Added jotai

* cache settings by using jotai state

* use hydrateAtom with SSR

* remove useSettings

* fix test
This commit is contained in:
Doh
2025-01-03 20:50:54 -05:00
committed by GitHub
parent e06e6260ef
commit cb02b3831c
22 changed files with 126 additions and 75 deletions

View File

@@ -11,7 +11,8 @@ import {
WishlistData,
Settings,
DataType,
DATA_DEFAULTS
DATA_DEFAULTS,
getDefaultSettings
} from '@/lib/types'
import { d2t, getNow, getNowInMilliseconds } from '@/lib/utils';
@@ -121,15 +122,7 @@ export async function addCoins(
}
export async function loadSettings(): Promise<Settings> {
const defaultSettings: Settings = {
ui: {
useNumberFormatting: true,
useGrouping: true,
},
system: {
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
}
const defaultSettings = getDefaultSettings()
try {
const data = await loadData<Settings>('settings')

View File

@@ -2,6 +2,10 @@ import './globals.css'
import { Inter } from 'next/font/google'
import { DM_Sans } from 'next/font/google'
import { Toaster } from '@/components/ui/toaster'
import { JotaiProvider } from '@/components/jotai-providers'
import { Suspense } from 'react'
import { JotaiHydrate } from '@/components/jotai-hydrate'
import { loadSettings } from './actions/data'
// Inter (clean, modern, excellent readability)
const inter = Inter({
subsets: ['latin'],
@@ -21,15 +25,22 @@ export const metadata = {
description: 'Track your habits and get rewarded',
}
export default function RootLayout({
export default async function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const initialSettings = await loadSettings()
return (
<html lang="en">
<body className={activeFont.className}>
{children}
<JotaiProvider>
<Suspense fallback="loading">
<JotaiHydrate initialSettings={initialSettings}>
{children}
</JotaiHydrate>
</Suspense>
</JotaiProvider>
<Toaster />
</body>
</html>

View File

@@ -3,11 +3,20 @@
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { useSettings } from '@/hooks/useSettings'
import { DynamicTimeNoSSR } from '@/components/DynamicTimeNoSSR'
import { useAtom } from 'jotai'
import { settingsAtom } from '@/lib/atoms'
import { Settings } from '@/lib/types'
import { saveSettings } from '../actions/data'
export default function SettingsPage() {
const { settings, updateSettings } = useSettings()
const [settings, setSettings] = useAtom(settingsAtom)
const updateSettings = async (newSettings: Settings) => {
await saveSettings(newSettings)
setSettings(newSettings)
}
if (!settings) return null
@@ -89,7 +98,7 @@ export default function SettingsPage() {
</option>
))}
</select>
<DynamicTimeNoSSR timezone={settings.system.timezone} />
<DynamicTimeNoSSR />
</div>
</div>
</CardContent>