From 34d1977a1177e72735dc4f6c59d84c34bafdeb76 Mon Sep 17 00:00:00 2001 From: while-basic Date: Wed, 4 Dec 2024 08:49:46 -0700 Subject: [PATCH] refactor: simplify dashboard page and fix analytics type errors --- app/dashboard/page.tsx | 194 +-------------------------------------- components/analytics.tsx | 4 +- 2 files changed, 5 insertions(+), 193 deletions(-) diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index 28fb44c..6fe4e9f 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -1,214 +1,26 @@ "use client" -import { useEffect, useState } from "react" -import { WelcomeDialog } from "@/components/welcome-dialog" import { useAuth } from "@/lib/auth-context" import { ProtectedRoute } from "@/components/auth/protected-route" -import { VisitorCounter } from "@/components/visitor-counter" -import { StatsCard } from "@/components/dashboard/stats-card" -import { AnalyticsChart } from "@/components/dashboard/analytics-chart" -import { RecentUsers } from "@/components/dashboard/recent-users" -import { createClientComponentClient } from '@supabase/auth-helpers-nextjs' -import { Users, Mail, Eye, BookOpen } from "lucide-react" +import { WelcomeDialog } from "@/components/welcome-dialog" import { withClientBoundary } from "@/components/client-wrapper" -// Move interfaces outside of component -interface PageView { - id: string - path: string - count: number - created_at: string -} - -interface UserStats { - totalUsers: number - totalEmails: number - totalViews: number - totalPosts: number - pageViews: PageView[] -} - -interface RecentUser { - id: string - email: string - created_at: string -} - -// Import User type from recent-users component -import type { User } from "@/components/dashboard/recent-users" - function DashboardPage() { const { user } = useAuth() - const [stats, setStats] = useState({ - totalUsers: 0, - totalEmails: 0, - totalViews: 0, - totalPosts: 0, - pageViews: [], - }) - const [recentUsers, setRecentUsers] = useState([]) - const [loading, setLoading] = useState(true) - const supabase = createClientComponentClient() - const [analyticsData, setAnalyticsData] = useState({ - labels: ['January', 'February', 'March', 'April', 'May', 'June'], - datasets: [ - { - label: 'Page Views', - data: [120, 190, 300, 250, 400, 380], - borderColor: 'rgb(75, 192, 192)', - backgroundColor: 'rgba(75, 192, 192, 0.5)', - }, - ], - }) - - useEffect(() => { - const fetchStats = async () => { - try { - const [ - usersResponse, - emailsResponse, - viewsResponse, - postsResponse, - monthlyViewsResponse - ] = await Promise.all([ - // Fetch users count - supabase.from('users').select('*', { count: 'exact' }), - // Fetch emails count - supabase.from('emails').select('*', { count: 'exact' }), - // Fetch total page views - supabase.from('page_views').select('*'), - // Fetch blog posts count - supabase.from('posts').select('*', { count: 'exact' }), - // Fetch monthly page views - supabase - .from('page_views') - .select('*') - .gte('created_at', new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString()) - .order('created_at', { ascending: true }) - ]) - - const totalViews = viewsResponse.data?.reduce((sum, view) => sum + (view.count || 0), 0) || 0 - - setStats({ - totalUsers: usersResponse.count || 0, - totalEmails: emailsResponse.count || 0, - totalViews, - totalPosts: postsResponse.count || 0, - pageViews: monthlyViewsResponse.data || [] - }) - - // Process analytics data - const processedData = processAnalyticsData(monthlyViewsResponse.data || []) - setAnalyticsData(processedData) - - // Fetch recent users - const { data: recentUsersData } = await supabase - .from('users') - .select('*') - .order('created_at', { ascending: false }) - .limit(5) - - setRecentUsers(recentUsersData || []) - } catch (error) { - console.error('Error fetching stats:', error) - } finally { - setLoading(false) - } - } - - fetchStats() - }, [supabase]) - - // Helper function to process analytics data - const processAnalyticsData = (views: PageView[]) => { - const monthlyData = views.reduce((acc, view) => { - const date = new Date(view.created_at) - const month = date.toLocaleString('default', { month: 'long' }) - acc[month] = (acc[month] || 0) + view.count - return acc - }, {} as Record) - - const labels = Object.keys(monthlyData) - const data = Object.values(monthlyData) - - return { - labels, - datasets: [ - { - label: 'Page Views', - data, - borderColor: 'rgb(75, 192, 192)', - backgroundColor: 'rgba(75, 192, 192, 0.5)', - }, - ], - } - } - - // Convert RecentUser to User type - const convertToUsers = (recentUsers: RecentUser[]): User[] => { - return recentUsers.map(user => ({ - id: user.id, - email: user.email, - createdAt: user.created_at - })); - }; - return (
-

Admin Dashboard

Welcome back, {user?.email}

- - {/* Stats Grid */} -
- } - /> - } - /> - } - /> - } - /> -
- - {/* Analytics Chart */} -
- -
- - {/* Bottom Grid */} -
- - -
+ {/* Dashboard content will go here */}
) } -export default withClientBoundary(DashboardPage); +export default withClientBoundary(DashboardPage) \ No newline at end of file diff --git a/components/analytics.tsx b/components/analytics.tsx index cffed3c..b711729 100644 --- a/components/analytics.tsx +++ b/components/analytics.tsx @@ -9,9 +9,9 @@ export function Analytics() { const searchParams = useSearchParams() useEffect(() => { - if (pathname) { + if (pathname && searchParams) { // Track the page view with the full URL (including search params) - const url = searchParams.size > 0 + const url = searchParams?.size > 0 ? `${pathname}?${searchParams.toString()}` : pathname