feat: Integrate NuqsAdapter for improved state management and query handling

This commit is contained in:
Dries Augustyns
2026-02-06 09:01:25 +01:00
parent 0d4b694208
commit 0cf0a26a97
2 changed files with 17 additions and 14 deletions
+3
View File
@@ -5,6 +5,7 @@ import React, {useEffect} from 'react';
import {Toaster} from 'sonner'; import {Toaster} from 'sonner';
import {SWRConfig} from 'swr'; import {SWRConfig} from 'swr';
import {DefaultSeo} from 'next-seo'; import {DefaultSeo} from 'next-seo';
import {NuqsAdapter} from 'nuqs/adapters/next/pages';
import {Loader} from '@plunk/ui'; import {Loader} from '@plunk/ui';
import {ActiveProjectProvider} from '../lib/contexts/ActiveProjectProvider'; import {ActiveProjectProvider} from '../lib/contexts/ActiveProjectProvider';
import {useProjects} from '../lib/hooks/useProject'; import {useProjects} from '../lib/hooks/useProject';
@@ -103,6 +104,7 @@ function ProjectGuard({children}: {children: React.ReactNode}) {
*/ */
export default function WithProviders(props: AppProps) { export default function WithProviders(props: AppProps) {
return ( return (
<NuqsAdapter>
<SWRConfig <SWRConfig
value={{ value={{
fetcher: (url: string) => network.fetch('GET', url), fetcher: (url: string) => network.fetch('GET', url),
@@ -114,6 +116,7 @@ export default function WithProviders(props: AppProps) {
<Root {...props} /> <Root {...props} />
</ActiveProjectProvider> </ActiveProjectProvider>
</SWRConfig> </SWRConfig>
</NuqsAdapter>
); );
} }
+3 -3
View File
@@ -14,7 +14,7 @@ import {DashboardLayout} from '../../components/DashboardLayout';
import {ActivityFeed} from '../../components/ActivityFeed'; import {ActivityFeed} from '../../components/ActivityFeed';
import {Eye, MousePointerClick, Send, Zap} from 'lucide-react'; import {Eye, MousePointerClick, Send, Zap} from 'lucide-react';
import {NextSeo} from 'next-seo'; import {NextSeo} from 'next-seo';
import {useState} from 'react'; import {useQueryState, parseAsString} from 'nuqs';
import useSWR from 'swr'; import useSWR from 'swr';
interface ActivityStats { interface ActivityStats {
@@ -28,8 +28,8 @@ interface ActivityStats {
} }
export default function ActivityPage() { export default function ActivityPage() {
const [typeFilter, setTypeFilter] = useState<string>('ALL'); const [typeFilter, setTypeFilter] = useQueryState('type', parseAsString.withDefault('ALL'));
const [dateRange, setDateRange] = useState<string>('30'); const [dateRange, setDateRange] = useQueryState('days', parseAsString.withDefault('30'));
// Fetch activity stats // Fetch activity stats
const {data: stats} = useSWR<ActivityStats>(`/activity/stats`, { const {data: stats} = useSWR<ActivityStats>(`/activity/stats`, {