turn maps page into client component

web/src/app/maps/page.tsx

@@ -1,19 +1,20 @@
+"use client"
+
+import { useState, useEffect } from "react";
 import Webpage from "@/app/_components/webpage";
 
-export default async function MapsPage() {
+export default function MapsPage() {
-    try {
+    const [ingameMaps, setIngameMaps] = useState();
-        const response = await fetch("/api/maps?Page=1&Limit=10");
+
-        const json = await response.json();
+    useEffect(() => {
-        console.log(json);
+        fetch("/api/maps?Page=1&Limit=10")
-    } catch(error) {
+            .then(response => response.json())
-        console.log(error);
+            .then(setIngameMaps);
-        
+    }, []);
-        return (
+
-            <Webpage>
+    useEffect(() => {
-                <h1>No Maps!</h1>
+        console.log(ingameMaps);
-            </Webpage>
+    }, [ingameMaps]);
-        )
-    }
     
     return (
         <Webpage>