fix(ts): refactor codebase for capacitor setup

app/(tabs)/bookmark/page.tsx

@@ -50,7 +50,7 @@ const QuestionItem = ({ question }: QuestionItemProps) => {
 
 const BookmarkPage = () => {
   const router = useRouter();
-  const [questions, setQuestions] = useState();
+  const [questions, setQuestions] = useState<Question[]>([]);
 
   useEffect(() => {
     fetch("/data/bookmark.json")
@@ -74,7 +74,7 @@ const BookmarkPage = () => {
                 <ListFilter size={24} color="#113768" />
               </button>
             </div>
-            {questions?.map((question) => (
+            {questions.map((question: Question) => (
               <QuestionItem key={question.id} question={question} />
             ))}
           </div>

app/(tabs)/categories/page.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const page = () => {
-  return <div>page</div>;
-};
-
-export default page;

app/(tabs)/home/page.tsx

@@ -1,57 +1,56 @@
 "use client";
 
-import React, { useState, useEffect, ReactNode } from "react";
+import React, { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import Header from "@/components/Header";
 import SlidingGallery from "@/components/SlidingGallery";
 import BackgroundWrapper from "@/components/BackgroundWrapper";
-import DestructibleAlert from "@/components/DestructibleAlert";
 import { ChevronRight } from "lucide-react";
 import styles from "@/css/Home.module.css";
 import { API_URL } from "@/lib/auth";
 import { Avatar } from "@/components/ui/avatar";
 import { getLinkedViews } from "@/lib/gallery-views";
 import { getTopThree } from "@/lib/leaderboard";
+import DestructibleAlert from "@/components/DestructibleAlert";
+import { GalleryViews } from "@/types/gallery";
 
-interface LinkedView {
+interface LeaderboardEntry {
   id: string;
-  content: ReactNode;
+  name: string;
+  points: number;
 }
 
-const page = () => {
+const HomePage = () => {
   const router = useRouter();
-  const [boardData, setBoardData] = useState([]);
-  const [boardError, setBoardError] = useState(null);
-  const [linkedViews, setLinkedViews] = useState<LinkedView[]>();
-
-  const performanceData = [
-    { label: "Mock Test", progress: 20 },
-    { label: "Topic Test", progress: 70 },
-    { label: "Subject Test", progress: 50 },
-  ];
-
-  const progressData = [
-    { label: "Physics", progress: 25 },
-    { label: "Chemistry", progress: 57 },
-  ];
+  const [boardData, setBoardData] = useState<LeaderboardEntry[]>([]);
+  const [boardError, setBoardError] = useState<string | null>(null);
+  const [linkedViews, setLinkedViews] = useState<GalleryViews[]>();
 
   useEffect(() => {
     let isMounted = true;
-    async function fetchBoardData() {
+
+    const fetchBoardData = async () => {
       try {
         const response = await fetch(`${API_URL}/leaderboard`);
         if (!response.ok) {
           throw new Error("Failed to fetch leaderboard data");
         }
-        const data = await response.json();
+
+        const data: LeaderboardEntry[] = await response.json();
         if (isMounted) setBoardData(data);
-      } catch (error) {
-        if (isMounted) setBoardError(error.message || "An error occurred");
+      } catch (err) {
+        if (isMounted) {
+          const message =
+            err instanceof Error ? err.message : "An unexpected error occurred";
+          setBoardError(message);
+        }
       }
-    }
-    const fetchedLinkedViews = getLinkedViews();
+    };
+
+    const fetchedLinkedViews: GalleryViews[] = getLinkedViews();
     setLinkedViews(fetchedLinkedViews);
+
     fetchBoardData();
 
     return () => {
@@ -157,20 +156,24 @@ const page = () => {
                   </div>
                   <div className={styles.divider}></div>
                   <div className={styles.topThreeList}>
-                    {getTopThree(boardData).map((student, idx) => (
-                      <div key={idx} className={styles.topThreeItem}>
-                        <div className={styles.studentInfo}>
-                          <span className={styles.rank}>{student.rank}</span>
-                          <Avatar className="bg-slate-300 w-4 h-4 rounded-full"></Avatar>
-                          <span className={styles.studentName}>
-                            {student.name}
+                    {boardError ? (
+                      <DestructibleAlert text={boardError} />
+                    ) : (
+                      getTopThree(boardData).map((student, idx) => (
+                        <div key={idx} className={styles.topThreeItem}>
+                          <div className={styles.studentInfo}>
+                            <span className={styles.rank}>{student.rank}</span>
+                            <Avatar className="bg-slate-300 w-4 h-4 rounded-full" />
+                            <span className={styles.studentName}>
+                              {student.name}
+                            </span>
+                          </div>
+                          <span className={styles.points}>
+                            {student.points}pt
                           </span>
                         </div>
-                        <span className={styles.points}>
-                          {student.points}pt
-                        </span>
-                      </div>
-                    ))}
+                      ))
+                    )}
                   </div>
                 </div>
               </div>
@@ -232,4 +235,4 @@ const page = () => {
   );
 };
 
-export default page;
+export default HomePage;

app/(tabs)/leaderboard/page.tsx

@@ -2,6 +2,7 @@
 
 import BackgroundWrapper from "@/components/BackgroundWrapper";
 import Header from "@/components/Header";
+import DestructibleAlert from "@/components/DestructibleAlert";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { API_URL, getToken } from "@/lib/auth";
 import { BoardData, getLeaderboard } from "@/lib/leaderboard";
@@ -40,7 +41,14 @@ const LeaderboardPage = () => {
         setUserData(fetchedUserData);
       } catch (error) {
         console.error(error);
-        setUserData(undefined);
+        setUserData({
+          name: "",
+          institution: "",
+          sscRoll: "",
+          hscRoll: "",
+          email: "",
+          phone: "",
+        });
       }
     }
 
@@ -97,6 +105,33 @@ const LeaderboardPage = () => {
     return result ? [{ ...result, rank: sortedData.indexOf(result) + 1 }] : [];
   };
 
+  if (loading) {
+    return (
+      <BackgroundWrapper>
+        <section>
+          <Header displayTabTitle="Leaderboard" />
+          <section className="flex flex-col mx-10 pt-10 space-y-4">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900 mb-4"></div>
+            <p className="text-lg font-medium text-gray-900">Loading...</p>
+          </section>
+        </section>
+      </BackgroundWrapper>
+    );
+  }
+
+  if (boardError) {
+    return (
+      <BackgroundWrapper>
+        <section>
+          <Header displayTabTitle="Leaderboard" />
+          <section className="flex flex-col mx-10 pt-10 space-y-4">
+            <DestructibleAlert text={boardError} />
+          </section>
+        </section>
+      </BackgroundWrapper>
+    );
+  }
+
   return (
     <BackgroundWrapper>
       <section>

app/(tabs)/paper/page.tsx

@@ -2,7 +2,7 @@
 
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import Header from "@/components/Header";
 import DestructibleAlert from "@/components/DestructibleAlert";
 import BackgroundWrapper from "@/components/BackgroundWrapper";
@@ -15,7 +15,7 @@ interface Mock {
   rating: number;
 }
 
-export default function PaperScreen() {
+function PaperPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const name = searchParams.get("name") || "";
@@ -23,7 +23,6 @@ export default function PaperScreen() {
   const [questions, setQuestions] = useState<Mock[] | null>(null);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
   const [refreshing, setRefreshing] = useState<boolean>(false);
-  const [componentKey, setComponentKey] = useState<number>(0);
 
   async function fetchMocks() {
     try {
@@ -45,12 +44,7 @@ export default function PaperScreen() {
 
   const onRefresh = async () => {
     setRefreshing(true);
-
     await fetchMocks();
-    setComponentKey((prevKey) => prevKey + 1);
-    setTimeout(() => {
-      setRefreshing(false);
-    }, 1000);
   };
 
   if (errorMsg) {
@@ -124,3 +118,20 @@ export default function PaperScreen() {
     </BackgroundWrapper>
   );
 }
+
+export default function PaperScreen() {
+  <Suspense
+    fallback={
+      <BackgroundWrapper>
+        <div className="min-h-screen">
+          <div className="mx-10 mt-10 flex flex-col justify-center items-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900 mb-4"></div>
+            <p className="text-lg font-medium text-gray-900">Loading...</p>
+          </div>
+        </div>
+      </BackgroundWrapper>
+    }
+  >
+    <PaperPageContent />
+  </Suspense>;
+}

app/(tabs)/settings/page.tsx

@@ -3,6 +3,7 @@
 import BackgroundWrapper from "@/components/BackgroundWrapper";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { API_URL, getToken } from "@/lib/auth";
+import { UserData } from "@/types/auth";
 import {
   Bookmark,
   ChartColumn,
@@ -22,7 +23,14 @@ import React, { useEffect, useState } from "react";
 
 const SettingsPage = () => {
   const router = useRouter();
-  const [userData, setUserData] = useState(null);
+  const [userData, setUserData] = useState<UserData>({
+    name: "",
+    institution: "",
+    sscRoll: "",
+    hscRoll: "",
+    email: "",
+    phone: "",
+  });
 
   useEffect(() => {
     async function fetchUser() {

app/(tabs)/unit/page.tsx

@@ -16,21 +16,18 @@ const units = [
 const Unit = () => {
   const router = useRouter();
 
-  const handleUnitPress = (unit) => {
+  const handleUnitPress = (unit: {
+    id?: number;
+    name: string;
+    rating?: number;
+  }) => {
     router.push(`/paper?name=${encodeURIComponent(unit.name)}`);
   };
 
   return (
     <BackgroundWrapper>
       <div className="flex flex-col min-h-screen">
-        <Header
-          displayExamInfo={null}
-          displayTabTitle={"Units"}
-          displaySubject={null}
-          displayUser={false}
-          title=""
-          image={""}
-        />
+        <Header displayTabTitle="Units" />
         <div className="flex-1">
           <div className="overflow-y-auto">
             <div className="border border-blue-200 gap-4 rounded-3xl p-4 mx-10 mt-10">