ENCOA-316 ENCOA-317:

Refactor components to remove Layout wrapper and pass it in the App component , implemented a skeleton feedback while loading page and improved API calls related to Dashboard/User Profile

src/pages/stats.tsx

@@ -21,9 +21,8 @@ import {
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { useEffect, useMemo, useState } from "react";
-import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
+import useStats from "@/hooks/useStats";
 import {
-  averageScore,
   groupBySession,
   groupByModule,
   timestampToMoment,
@@ -32,11 +31,8 @@ import { ToastContainer } from "react-toastify";
 import { capitalize } from "lodash";
 import { Module } from "@/interfaces";
 import ProgressBar from "@/components/Low/ProgressBar";
-import Layout from "@/components/High/Layout";
 import { calculateBandScore } from "@/utils/score";
 import {
-  countExamModules,
-  countFullExams,
   MODULE_ARRAY,
   sortByModule,
 } from "@/utils/moduleUtils";
@@ -109,7 +105,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
   const [selectedEntity, setSelectedEntity] = useState<string>();
 
   const entitiesToSearch = useMemo(() => {
-    if(selectedEntity) return [selectedEntity]
+    if (selectedEntity) return [selectedEntity];
     if (isAdmin) return undefined;
     return mapBy(entities, "id");
   }, [entities, isAdmin, selectedEntity]);
@@ -137,10 +133,19 @@ export default function Stats({ user, entities, isAdmin }: Props) {
 
   const [intervalDates, setIntervalDates] = useState<Date[]>([]);
 
-  const { data: stats } = useFilterRecordsByUser<Stat[]>(
-    statsUserId,
-    !statsUserId
-  );
+  const {
+    data: {
+      allStats: stats = [],
+      fullExams: exams = 0,
+      uniqueModules: modules = 0,
+      averageScore = 0,
+    },
+  } = useStats<{
+    allStats: Stat[];
+    fullExams: number;
+    uniqueModules: number;
+    averageScore: number;
+  }>(statsUserId, !statsUserId, "stats");
 
   const initialStatDate = useMemo(
     () => (stats[0] ? timestampToMoment(stats[0]).toDate() : null),
@@ -239,7 +244,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
       </Head>
       <ToastContainer />
       {user && (
-        <Layout user={user} className="gap-8">
+        <>
           <ProfileSummary
             user={userData || user}
             items={[
@@ -247,7 +252,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
                 icon: (
                   <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
                 ),
-                value: countFullExams(stats),
+                value: exams,
                 label: "Exams",
                 tooltip: "Number of all conducted completed exams",
               },
@@ -255,7 +260,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
                 icon: (
                   <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
                 ),
-                value: countExamModules(stats),
+                value: modules,
                 label: "Modules",
                 tooltip:
                   "Number of all exam modules performed including Level Test",
@@ -264,7 +269,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
                 icon: (
                   <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
                 ),
-                value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
+                value: `${averageScore.toFixed(2) || 0}%`,
                 label: "Average Score",
                 tooltip: "Average success rate for questions responded",
               },
@@ -888,7 +893,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
               <span className="font-semibold ml-1">No stats to display...</span>
             </section>
           )}
-        </Layout>
+        </>
       )}
     </>
   );