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/exams/Selection.tsx

@@ -14,8 +14,6 @@ import {
   BsPen,
   BsXCircle,
 } from "react-icons/bs";
-import { totalExamsByModule } from "@/utils/stats";
-import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import Button from "@/components/Low/Button";
 import { sortByModuleName } from "@/utils/moduleUtils";
 import { capitalize } from "lodash";
@@ -24,7 +22,7 @@ import { Variant } from "@/interfaces/exam";
 import useSessions, { Session } from "@/hooks/useSessions";
 import SessionCard from "@/components/Medium/SessionCard";
 import useExamStore from "@/stores/exam";
-import moment from "moment";
+import useStats from "../hooks/useStats";
 
 interface Props {
   user: User;
@@ -41,7 +39,21 @@ export default function Selection({ user, page, onStart }: Props) {
   const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
   const [variant, setVariant] = useState<Variant>("full");
 
-  const { data: stats } = useFilterRecordsByUser<Stat[]>(user?.id);
+  const {
+    data: {
+      allStats = [],
+      moduleCount: { reading, listening, writing, speaking, level } = {
+        reading: 0,
+        listening: 0,
+        writing: 0,
+        speaking: 0,
+        level: 0,
+      },
+    },
+  } = useStats<{
+    allStats: Stat[];
+    moduleCount: Record<Module, number>;
+  }>(user?.id, !user?.id, "byModule");
   const { sessions, isLoading, reload } = useSessions(user.id);
 
   const dispatch = useExamStore((state) => state.dispatch);
@@ -77,7 +89,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Reading",
-                value: totalExamsByModule(stats, "reading"),
+                value: reading,
                 tooltip: "The amount of reading exams performed.",
               },
               {
@@ -85,7 +97,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Listening",
-                value: totalExamsByModule(stats, "listening"),
+                value: listening,
                 tooltip: "The amount of listening exams performed.",
               },
               {
@@ -93,7 +105,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Writing",
-                value: totalExamsByModule(stats, "writing"),
+                value: writing,
                 tooltip: "The amount of writing exams performed.",
               },
               {
@@ -101,7 +113,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Speaking",
-                value: totalExamsByModule(stats, "speaking"),
+                value: speaking,
                 tooltip: "The amount of speaking exams performed.",
               },
               {
@@ -109,7 +121,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Level",
-                value: totalExamsByModule(stats, "level"),
+                value: level,
                 tooltip: "The amount of level exams performed.",
               },
             ]}