Add redirects to dashboard and enhance task category access control

Author: freddymu

next.config.mjs

@@ -4,6 +4,15 @@ import { withPayload } from '@payloadcms/next/withPayload'
 const nextConfig = {
   // Your Next.js config here
   output: 'standalone',
+  redirects: async () => {
+    return [
+      {
+        source: '/',
+        destination: '/dashboard',
+        permanent: false,
+      },
+    ]
+  },
 }
 
 export default withPayload(nextConfig)

src/app/(my-app)/dashboard/page.tsx

@@ -1,22 +1,17 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
 import { Sidebar } from '@/components/Sidebar'
 import { TaskList } from '@/components/TaskList'
 import { AddTaskForm } from '@/components/AddTaskForm'
 import { OnboardingTips } from '@/components/OnboardingTips'
 import { addTask, getTasks } from '@/lib/client/api'
 import type { Category, Task } from '@/lib/types'
 import { ProtectedRoute } from '@/components/ProtectedRoute'
-import { useAuth } from '@/context/AuthContext'
 
 export default function DashboardPage() {
   const [selectedCategory, setSelectedCategory] = useState<Category | null>(null)
   const [tasks, setTasks] = useState<Task[]>([])
-  const [hashtag, setHashtag] = useState('')
-  const { user, logout } = useAuth()
 
   useEffect(() => {
     fetchTasks()
@@ -44,13 +39,6 @@ export default function DashboardPage() {
     }
   }
 
-  const filteredTasks = tasks
-    .filter((task) => selectedCategory?.id === 'all' || task.categoryId === selectedCategory?.id)
-    .filter(
-      (task) =>
-        !hashtag || task.hashtags.some((h) => h.toLowerCase().includes(hashtag.toLowerCase())),
-    )
-
   return (
     <ProtectedRoute>
       <div className="flex h-screen bg-gray-100">
@@ -63,22 +51,12 @@ export default function DashboardPage() {
         <main className="flex-1 p-8 overflow-auto">
           <div className="max-w-4xl mx-auto">
             <div className="mb-8 flex items-center justify-between">
-              <h1 className="text-2xl font-bold">{selectedCategory?.name || 'All Tasks'}</h1>
+              <h1 className="text-2xl font-bold">{selectedCategory?.name ?? 'All Tasks'}</h1>
               <div className="flex items-center space-x-4">
                 <AddTaskForm onAddTask={handleAddTask} selectedCategory={selectedCategory} />
               </div>
             </div>
 
-            <div className="mb-4">
-              <Input
-                type="text"
-                placeholder="Filter by hashtag"
-                value={hashtag}
-                onChange={(e) => setHashtag(e.target.value)}
-                className="w-full"
-              />
-            </div>
-
             <TaskList tasks={tasks} onTasksChange={fetchTasks} />
           </div>
         </main>

src/collections/Categories.ts

@@ -5,6 +5,27 @@ const Categories: CollectionConfig = {
   admin: {
     useAsTitle: 'name',
   },
+  access: {
+    read: ({ req }) => {
+      if (!req.user) {
+        return false
+      }
+
+      if (req.user.role === 'user') {
+        return {
+          user: {
+            equals: req.user.id,
+          },
+        }
+      }
+
+      if (req.user.role === 'admin') {
+        return true
+      }
+
+      return false
+    },
+  },
   fields: [
     {
       name: 'name',

src/collections/Tasks.ts

@@ -1,4 +1,5 @@
 import type { CollectionConfig } from 'payload'
+import mongoose from 'mongoose'
 
 const Tasks: CollectionConfig = {
   slug: 'tasks',
@@ -49,6 +50,37 @@ const Tasks: CollectionConfig = {
       },
     ],
   },
+  endpoints: [
+    {
+      path: '/categories-count',
+      method: 'get',
+      handler: async (req) => {
+        if (!req.user) {
+          throw new Error('You must be logged in to view tasks')
+        }
+
+        const taskCollection = req.payload.db.collections.tasks
+
+        // aggregate the count of tasks for each category using mongodb
+        const result = await taskCollection.aggregate([
+          {
+            $match: {
+              user: new mongoose.Types.ObjectId(req.user.id),
+              category: { $ne: null },
+            },
+          },
+          {
+            $group: {
+              _id: '$category',
+              count: { $sum: 1 },
+            },
+          },
+        ])
+
+        return Response.json({ stats: result.map((r) => ({ category: r._id, count: r.count })) })
+      },
+    },
+  ],
   fields: [
     {
       name: 'title',

src/components/Sidebar.tsx

@@ -5,35 +5,52 @@ import { Search, Plus, Check, X, Pencil, Trash } from 'lucide-react'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { UserProfile } from './UserProfile'
-import { getCategories, addCategory, updateCategory, deleteCategory } from '@/lib/client/api'
+import {
+  getCategories,
+  addCategory,
+  updateCategory,
+  deleteCategory,
+  getTaskCategoryCount,
+} from '@/lib/client/api'
 import type { Category, Task } from '@/lib/types'
-import { useAuth } from '@/context/AuthContext'
 
 interface SidebarProps {
   onSelectCategory: (category: Category) => void
   selectedCategory: Category | null
   tasks: Task[]
 }
 
-export function Sidebar({ onSelectCategory, selectedCategory, tasks }: SidebarProps) {
+export function Sidebar({ onSelectCategory, selectedCategory, tasks }: Readonly<SidebarProps>) {
   const [categories, setCategories] = useState<Category[]>([])
   const [searchTerm, setSearchTerm] = useState('')
   const [newCategory, setNewCategory] = useState('')
-  const [editingId, setEditingId] = useState<string | null>(null)
   const [editingName, setEditingName] = useState('')
   const [isLoading, setIsLoading] = useState(true)
   const [editingCategoryId, setEditingCategoryId] = useState<string | null>(null)
-  const { user } = useAuth()
+  const [stats, setStats] = useState<{ category: string; count: number }[]>([])
 
   useEffect(() => {
     fetchCategories()
+    fetchTasksCount()
   }, [])
 
+  useEffect(() => {
+    fetchTasksCount()
+  }, [tasks])
+
+  const fetchTasksCount = async () => {
+    const fetchedTasks = await getTaskCategoryCount()
+    setStats(fetchedTasks.stats)
+  }
+
   const fetchCategories = async () => {
     setIsLoading(true)
     try {
       const fetchedCategories = await getCategories()
       setCategories(fetchedCategories)
+      if (fetchedCategories.length > 0) {
+        onSelectCategory(fetchedCategories[0])
+      }
     } catch (error) {
       console.error('Failed to fetch categories:', error)
     } finally {
@@ -76,11 +93,11 @@ export function Sidebar({ onSelectCategory, selectedCategory, tasks }: SidebarPr
     if (categoryId === 'all') {
       return tasks.length
     }
-    return tasks.filter((task) => task.categoryId === categoryId).length
+    return stats.find((stat) => stat.category === categoryId)?.count ?? 0
   }
 
   return (
-    <div className="w-64 border-r h-screen flex flex-col bg-white">
+    <div className="w-80 border-r h-screen flex flex-col bg-white">
       <UserProfile />
 
       <div className="p-4">

src/context/AuthContext.tsx

@@ -44,7 +44,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     setIsLoading(true)
     try {
       const loggedInUser = await loginUser({ email, password })
-      setUser(loggedInUser)
+      setUser(loggedInUser.user)
       router.push('/dashboard')
     } catch (error) {
       console.error('Login error:', error)

src/lib/client/api.ts

@@ -102,6 +102,15 @@ export async function deleteCategory(id: string): Promise<void> {
 }
 
 // Task-related functions
+export async function getTaskCategoryCount(): Promise<{
+  stats: { category: string; count: number }[]
+}> {
+  const response = await fetch(`${API_URL}/tasks/categories-count`, {
+    credentials: 'include',
+  })
+  return handleResponse(response)
+}
+
 export async function getTasks(category: string): Promise<Task[]> {
   const response = await fetch(`${API_URL}/tasks?where[category][equals]=${category}`, {
     credentials: 'include',

src/lib/types.ts

@@ -21,11 +21,10 @@ export interface Task {
   title: string
   description?: string
   completed: boolean
-  categoryId?: string
+  category?: string
   hashtags: string[]
   dueDate?: string
   reminder?: string
   steps: Step[]
   notes: Note[]
 }
-