Refactor MySubmissions page to use useQuery

packages/nextjs/app/my-submissions/page.tsx

@@ -1,46 +1,35 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { SubmissionCard } from "../submissions/_components/SubmissionCard";
+import { useQuery } from "@tanstack/react-query";
 import { useAccount } from "wagmi";
 import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import scaffoldConfig from "~~/scaffold.config";
 import { SubmissionWithWinnerTag } from "~~/services/database/repositories/submissions";
-import { notification } from "~~/utils/scaffold-eth";
 
 const MySubmissions = () => {
-  const [submissions, setSubmissions] = useState<SubmissionWithWinnerTag[]>([]);
   const { address: connectedAddress, isConnecting } = useAccount();
   const router = useRouter();
   const { submissionsEnabled } = scaffoldConfig;
 
-  useEffect(() => {
-    const fetchSubmissions = async () => {
-      if (isConnecting || !connectedAddress) {
-        return;
-      }
+  const {
+    isPending,
+    error,
+    data: submissions,
+  } = useQuery({
+    queryKey: ["my-submissions", connectedAddress],
+    queryFn: () => fetch(`/api/users/${connectedAddress}/submissions`).then(res => res.json()),
+  });
 
-      try {
-        const response = await fetch(`/api/users/${connectedAddress}/submissions`);
-        if (!response.ok) {
-          throw new Error("Failed to fetch submissions");
-        }
-        const data = await response.json();
-        setSubmissions(data);
-      } catch (error) {
-        console.error("Error fetching submissions:", error);
-        notification.error("Failed to fetch submissions");
-      }
-    };
-
-    fetchSubmissions();
-  }, [connectedAddress, isConnecting]);
-
-  if (isConnecting) {
+  if (isConnecting || isPending) {
     return <div className="max-w-7xl container mx-auto px-6 mt-10">Loading...</div>;
   }
 
+  if (error) {
+    return <div className="max-w-7xl container mx-auto px-6 mt-10">Error loading submissions.</div>;
+  }
+
   return (
     <div className="max-w-7xl container mx-auto px-6 mt-10">
       {!connectedAddress ? (
@@ -71,7 +60,7 @@ const MySubmissions = () => {
             </div>
           ) : (
             <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
-              {submissions.map(submission => (
+              {submissions.map((submission: SubmissionWithWinnerTag) => (
                 <SubmissionCard key={submission.id} submission={submission} />
               ))}
             </div>