Implement Dashboard Navbar Refresh Button using server actions and Ad…

…min Dashboard Home page Complete

app/(admin)/admin/courses/page.js

@@ -1,3 +1,5 @@
+export const dynamic = 'force-dynamic';
+
 const AdminCoursesPage = () => {
     return <div></div>;
 };

app/(admin)/admin/dashboard/page.js

@@ -2,33 +2,29 @@ import DashboardBarChart from '@/app/dashboard/_components/BarChart/BarChart';
 import RecentEnrollCard from '@/app/dashboard/_components/RecentEnrollCard/RecentEnrollCard';
 import TotalCard from '@/app/dashboard/_components/TotalCard/TotalCard';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { fetchDashboardData } from '@/lib/dashboard-helper';
 import { formatPrice } from '@/lib/formatPrice';
-import { getUserData } from '@/lib/getUserData';
 import { cn } from '@/lib/utils';
 import { calculateSales } from '@/queries/admin';
 import { getTotalCourse } from '@/queries/courses';
-import { getMonthEnrollmentsSell } from '@/queries/enrollments';
+import { getMonthEnrollmentsSell, getRecentEnrollments } from '@/queries/enrollments';
 import { getTotalInstructor } from '@/queries/instructor';
 import { getTotalUsers } from '@/queries/users';
 import { BookOpen, DollarSign, TrendingDown, TrendingUp, Users } from 'lucide-react';
 
+export const dynamic = 'force-dynamic';
+
 const AdminDashboard = async () => {
-    const user = await getUserData();
     const totalInstructor = await getTotalInstructor();
     const totalCourses = await getTotalCourse();
     const { totalSales, thisMonthSales, lastMonthSales, percentChange } = await calculateSales();
     const totalUser = await getTotalUsers();
     const reportData = await getMonthEnrollmentsSell();
-    console.log(reportData);
-
-    const { courses, totalEnroll, totalSalePrice, enrollByInstructorReports, recentEnrollments } =
-        (await fetchDashboardData(user?.id)) ?? {};
+    const recentEnrollments = await getRecentEnrollments();
 
     return (
         <div className='flex flex-col w-full'>
             <main className='flex flex-col flex-1 gap-4 p-4 md:gap-8 md:p-8'>
-                <div className='grid grid-cols-1 gap-5 lg:grid-cols-3'>
+                <div className='grid grid-cols-1 gap-3 sm:gap-5 md:grid-cols-2 xl:grid-cols-3'>
                     <TotalCard
                         title={
                             <p className='flex items-center gap-3'>
@@ -79,7 +75,7 @@ const AdminDashboard = async () => {
                             <CardTitle>Transactions Charts</CardTitle>
                         </CardHeader>
                         <CardContent>
-                            <DashboardBarChart chartData={enrollByInstructorReports} />
+                            <DashboardBarChart chartData={reportData} />
                         </CardContent>
                     </Card>
                     <Card>

app/(main)/account/@tabs/apply-instructor/page.js

@@ -1,7 +1,9 @@
 import { getUserData } from '@/lib/getUserData';
 import ApplyInstructorForm from '../_components/Form/ApplyInstructorForm';
+import { cookies } from 'next/headers';
 
 const ApplyInstructor = async () => {
+    cookies();
     const user = await getUserData();
 
     return (

app/actions/index.js

@@ -1,6 +1,7 @@
 'use server';
 
 import { nextAndPrevLesson } from '@/lib/lesson';
+import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
 
 export const formAccessCourse = async (courseId, formatLessonId) => {
@@ -20,3 +21,7 @@ export const lessonPrevAccess = async (courseId, lesson) => {
 export const redirectPage = async (path) => {
     redirect(path);
 };
+
+export const revalidatePathAction = async () => {
+    revalidatePath('/');
+};

app/dashboard/_components/navbar.jsx

@@ -12,6 +12,7 @@ import useAuth from "@/hooks/useAuth";
 import Spinner from "@/components/globals/Spinner/Spinner";
 import { signOut } from "next-auth/react";
 import ThemeSwitch from "@/components/globals/ThemeSwitch/ThemeSwitch";
+import Refresh from "@/components/globals/Refresh/Refresh";
 
 export const Navbar = () => {
   const { user, status } = useAuth();
@@ -21,12 +22,13 @@ export const Navbar = () => {
     <div className="flex items-center h-full p-4 border-b shadow-sm bg-background">
       <MobileSidebar />
       <div className="flex items-center justify-end w-full gap-5">
+        <Refresh />
         <ThemeSwitch />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <div className="cursor-pointer">
               {
-                status === "loading" ? <Spinner className="!w-6 !h-6" /> : (
+                status === "loading" ? <Spinner size={true} /> : (
                   <Avatar>
                     <AvatarImage
                       src={user?.profilePicture?.url}

app/dashboard/_components/sidebar-routes.jsx

@@ -45,12 +45,12 @@ const adminRoutes = [
   {
     icon: BookOpen,
     label: 'Courses',
-    href: '/admin/dashboard/courses'
+    href: '/admin/courses'
   },
   {
     icon: Users,
     label: 'Instructors',
-    href: '/admin/dashboard/instructors'
+    href: '/admin/instructors'
   },
 ]
 

components/globals/Refresh/Btn.jsx

@@ -0,0 +1,16 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { RefreshCw } from "lucide-react";
+import { useFormStatus } from "react-dom";
+
+const Btn = () => {
+    const { pending } = useFormStatus();
+
+    return (
+        <button disabled={pending} className={cn(pending && "animate-spin", "text-foreground")}>
+            <RefreshCw />
+        </button>
+    );
+};
+
+export default Btn;

components/globals/Refresh/Refresh.jsx

@@ -0,0 +1,12 @@
+import { revalidatePathAction } from "@/app/actions";
+import Btn from "./Btn";
+
+const Refresh = () => {
+    return (
+        <form action={revalidatePathAction}>
+            <Btn />
+        </form>
+    );
+};
+
+export default Refresh;

queries/enrollments.js

@@ -190,7 +190,7 @@ export const getRecentEnrollments = async (instructorId) => {
             (enrollment) => enrollment?.course_id?.instructor?._id.toString() === instructorId
         );
 
-        return replaceMongoIdInArray(filterInstructorEnrollCourses);
+        return replaceMongoIdInArray(instructorId ? filterInstructorEnrollCourses : enrollments);
     } catch (error) {
         throw new Error(error);
     }