Adds popups for successful crud operations (#12)

* fix: fix bug in comparator function

* feat(ui): add notifications to edit train log form

* feat(ui): implement admin views for training logs, animals, users

* fix(crud): fix bug in comparator func

* chore: add react-toast to deps

* feat(ui): add detail to empty data view

* fix: inconsistent padding on form headers

* feat(ui): add detailed validation messages to form

Author: kworathur

package-lock.json

@@ -16,7 +16,9 @@
     "next": "16.0.1",
     "next-auth": "^4.24.13",
     "react": "19.2.0",
-    "react-dom": "19.2.0"
+    "react-dom": "19.2.0",
+    "react-loading-skeleton": "^3.5.0",
+    "react-toastify": "^11.0.5"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",

package.json

@@ -4,7 +4,10 @@ import { TrainingLog, TrainingLogDocument } from '../models/TrainingLog';
 const findAllTrainingLogs = async (): Promise<TrainingLogDocument[]> => {
     try {
         await connectDB();
-        const logs = await TrainingLog.find({}).exec();
+        const logs = (await TrainingLog.find({}).exec()).sort((a, b) =>
+            a.date < b.date ? -1 : b.date > a.date ? 1 : 0
+        );
+        console.log('Sorted training logs ', logs);
         return logs;
     } catch (err) {
         console.error(`[ERROR]: Error encountered while creating user: ${err}`);

server/mongodb/actions/findAllTrainingLogs.ts

@@ -0,0 +1,15 @@
+import connectDB from '..';
+import { User, UserDocument } from '../models/User';
+
+const findAllUsers = async (): Promise<UserDocument[]> => {
+    try {
+        await connectDB();
+        const users = await User.find({}).exec();
+        return users;
+    } catch (err) {
+        console.error(`[ERROR]: Error while searching for users: ${err}`);
+        return [];
+    }
+};
+
+export default findAllUsers;

server/mongodb/actions/findAllUsers.ts

@@ -1,7 +1,5 @@
 import { NextRequest } from 'next/server';
 import createAnimal from '../../../../server/mongodb/actions/createAnimal';
-import updateAnimal from '../../../../server/mongodb/actions/updateAnimal';
-import { getServerSession } from 'next-auth';
 import findAnimals from '../../../../server/mongodb/actions/findAllAnimals';
 import findAnimalsByOwner from '../../../../server/mongodb/actions/findAnimalsByOwner';
 import { auth } from '@/lib/auth';
@@ -50,8 +48,8 @@ export const POST = async (req: NextRequest): Promise<Response> => {
     data.profilePicture = '/images/appLogo.png';
 
     const animals = await findAnimalsByOwner({ id: userId });
-
-    if (animals?.filter((a) => a.name == data.name)) {
+    const animalsMatchingName = animals?.filter((a) => a.name == data.name);
+    if (animalsMatchingName && animalsMatchingName.length > 0) {
         return new Response(
             JSON.stringify({
                 error: 'An animal with this name already exists',

src/app/api/animal/route.ts

@@ -21,7 +21,7 @@ export const GET = async (
     }
 
     const user = await findUserById(id);
-    console.log('Found user ', user);
+
     if (user) {
         return new Response(JSON.stringify({ data: user || undefined }), {
             status: 200,

src/app/api/user/[id]/route.ts

@@ -0,0 +1,22 @@
+import { auth } from '@/lib/auth';
+import { NextRequest } from 'next/server';
+import findAllUsers from '../../../../server/mongodb/actions/findAllUsers';
+
+export const GET = async (req: NextRequest): Promise<Response> => {
+    const session = await auth();
+    const isAdmin = (session?.user as any).admin;
+
+    if (!isAdmin) {
+        return new Response(
+            JSON.stringify({
+                error: 'user is not authorized to query all users',
+            }),
+            { status: 403 }
+        );
+    }
+
+    const users = await findAllUsers();
+    return new Response(JSON.stringify({ data: users }), {
+        status: 200,
+    });
+};

src/app/api/user/route.ts

@@ -1,7 +1,35 @@
+'use client';
 import Link from 'next/link';
 import Image from 'next/image';
+import { AnimalDocument } from '../../../../../server/mongodb/models/Animal';
+import { useEffect, useState } from 'react';
+import AnimalCard from '@/components/AnimalCard';
 
 export default function AdminAnimalsPage() {
+    const [isLoading, setIsLoading] = useState(true);
+    const [animals, setAnimals] = useState<AnimalDocument[]>([]);
+
+    useEffect(() => {
+        const fetchAnimals = async () => {
+            try {
+                const response = await fetch('/api/animal?all=true', {
+                    method: 'GET',
+                    credentials: 'include',
+                });
+                const respBody = await response.json();
+                const animals: AnimalDocument[] = respBody?.data;
+
+                if (animals != undefined) {
+                    setAnimals(animals);
+                }
+                setIsLoading(false);
+            } catch (error) {
+                setIsLoading(false);
+            }
+        };
+
+        fetchAnimals();
+    }, [isLoading]);
     return (
         <main className="min-h-full w-full bg-white dark:bg-black flex flex-col">
             <div className="p-8  flex flex-row justify-between items-center">
@@ -24,7 +52,19 @@ export default function AdminAnimalsPage() {
             </div>
 
             <hr />
-            <div className="mt-8 mx-4 grid xl:grid-cols-3 gap-1"></div>
+            <div className="mt-8 mx-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                {animals.map((a, i) => {
+                    return (
+                        <div
+                            className="flex items-center justify-center "
+                            key={i}
+                        >
+                            <AnimalCard data={a} />
+                        </div>
+                    );
+                })}
+                {!isLoading && animals.length == 0 && <p>No animals yet!</p>}
+            </div>
         </main>
     );
 }

src/app/dashboard/admin/animals/page.tsx

@@ -9,14 +9,16 @@ export default function RootLayout({
 }: Readonly<{
     children: React.ReactNode;
 }>) {
-    const { data: session} = useSession();
+    const { data: session } = useSession();
     const isAdmin = session?.user && (session?.user as any).admin;
 
     return isAdmin ? (
-        <div>{children}</div>
+        <div className="h-full">{children}</div>
     ) : (
-        <div className='h-full flex flex-row justify-center items-center'>
-            <p className='rounded-2xl bg-red-300 p-4'>You are not authorized to view this page</p>
+        <div className="h-full flex flex-row justify-center items-center">
+            <p className="rounded-2xl bg-red-300 p-4">
+                You are not authorized to view this page
+            </p>
         </div>
     );
 }

src/app/dashboard/admin/layout.tsx

@@ -1,23 +1,63 @@
-import LoginForm from '@/components/LoginForm';
+'use client';
 import TrainingLogCard, { mockData } from '@/components/TrainingLogCard';
-import Link from 'next/link';
-import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { TrainingLogDocument } from '../../../../../server/mongodb/models/TrainingLog';
+import Skeleton from 'react-loading-skeleton';
 
 export default function AdminTrainingLogsPage() {
+    const [isLoading, setIsLoading] = useState(true);
+    const [logs, setLogs] = useState<TrainingLogDocument[]>([]);
+
+    useEffect(() => {
+        const fetchTrainingLogs = async () => {
+            try {
+                const response = await fetch('/api/training-log?all=true', {
+                    method: 'GET',
+                    credentials: 'include',
+                });
+                const respBody = await response.json();
+                const logs: TrainingLogDocument[] = respBody?.data;
+
+                if (logs != undefined) {
+                    setLogs(logs);
+                }
+                setIsLoading(false);
+            } catch (error) {
+                setIsLoading(false);
+            }
+        };
+
+        fetchTrainingLogs();
+    }, [isLoading]);
+
     return (
-            <main className="min-h-full w-full bg-white dark:bg-black flex flex-col">
-              <div className='p-8  flex flex-row justify-between items-center'>
+        <main className="min-h-full w-full bg-white dark:bg-black flex flex-col">
+            <div className="p-8  flex flex-row justify-between items-center">
                 <h1 className="text-left text-2xl font-bold text-neutral-600">
-                    All training logs
+                    All training Logs
                 </h1>
-              </div>
-                
-                <hr />
-                <div className="mt-8 mx-4 overflow-y-scroll flex-1 flex flex-col gap-4 justify-start items-center">
-                    <TrainingLogCard data={mockData} />
-                    <TrainingLogCard data={mockData} />
-                    <TrainingLogCard data={mockData} />
-                </div>
-            </main>
+            </div>
+
+            <hr />
+            <div className="mt-8 mx-4 overflow-y-scroll flex-1 flex flex-col gap-4 justify-start items-center">
+                {isLoading ? (
+                    <Skeleton count={10} />
+                ) : (
+                    logs.map((l, i) => (
+                        <TrainingLogCard
+                            key={i}
+                            data={{
+                                ...l,
+                                _id: l._id.toString(),
+                                user: l.user as any,
+                                animal: l.animal as any,
+                                date: l.date as any,
+                            }}
+                        />
+                    ))
+                )}
+                {!isLoading && logs.length == 0 && <p>No training logs yet!</p>}
+            </div>
+        </main>
     );
 }