fix(ts): refactor codebase for capacitor setup

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;