mirror of
https://github.com/ManInDark/HabitTrove.git
synced 2026-01-20 22:24:28 +01:00
Added jotai (#14)
* Added jotai * cache settings by using jotai state * use hydrateAtom with SSR * remove useSettings * fix test
This commit is contained in:
@@ -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')
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user