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() {
-    try {
-        const response = await fetch("/api/maps?Page=1&Limit=10");
-        const json = await response.json();
-        console.log(json);
-    } catch(error) {
-        console.log(error);
-        
-        return (
-            <Webpage>
-                <h1>No Maps!</h1>
-            </Webpage>
-        )
-    }
+export default function MapsPage() {
+    const [ingameMaps, setIngameMaps] = useState();
+
+    useEffect(() => {
+        fetch("/api/maps?Page=1&Limit=10")
+            .then(response => response.json())
+            .then(setIngameMaps);
+    }, []);
+
+    useEffect(() => {
+        console.log(ingameMaps);
+    }, [ingameMaps]);
     
     return (
         <Webpage>