fix(api): fix api endpoint logic #1

app/(tabs)/paper/page.tsx

@@ -2,7 +2,7 @@
 
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/navigation";
-import { Suspense, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Header from "@/components/Header";
 import DestructibleAlert from "@/components/DestructibleAlert";
 import BackgroundWrapper from "@/components/BackgroundWrapper";
@@ -14,8 +14,7 @@ interface Mock {
   title: string;
   rating: number;
 }
-
-function PaperPageContent() {
+export default function PaperScreen() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const name = searchParams.get("name") || "";
@@ -23,6 +22,7 @@ function PaperPageContent() {
   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 {
@@ -44,29 +44,31 @@ function PaperPageContent() {
 
   const onRefresh = async () => {
     setRefreshing(true);
+
     await fetchMocks();
+    setComponentKey((prevKey) => prevKey + 1);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 1000);
   };
 
   if (errorMsg) {
     return (
       <BackgroundWrapper>
-        <div className="min-h-screen">
-          <Header displayTabTitle={name} />
-          <div className="overflow-y-auto">
-            <div className="mt-5 px-5">
-              <DestructibleAlert text={errorMsg} extraStyles="" />
-            </div>
-            <div className="flex justify-center mt-4">
-              <button
-                onClick={onRefresh}
-                disabled={refreshing}
-                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
-              >
-                {refreshing ? <Loader /> : <RefreshCw />}
-              </button>
-            </div>
+        <Header displayTabTitle={name} />
+        <div className="overflow-y-auto">
+          <div className="mt-5 px-5">
+            <DestructibleAlert text={errorMsg} extraStyles="" />
+          </div>
+          <div className="flex justify-center mt-4">
+            <button
+              onClick={onRefresh}
+              disabled={refreshing}
+              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
+            >
+              {refreshing ? <Loader /> : <RefreshCw />}
+            </button>
           </div>
-          {/* <CustomBackHandler fallbackRoute="unit" /> */}
         </div>
       </BackgroundWrapper>
     );
@@ -118,20 +120,3 @@ function PaperPageContent() {
     </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>;
-}