refactor: Create UserFunds component to extract this logic from myfun…

…ds page component
web3wagers · Sep 30, 2024 · 3575e5e · 3575e5e
1 parent 9edefc3
commit 3575e5e
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 53 deletions.
diff --git a/frontend/gostarkme-web/app/app/myfunds/[useraddr]/page.tsx b/frontend/gostarkme-web/app/app/myfunds/[useraddr]/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useEffect, useState } from 'react';
-import FundCard from '@/components/modules/myfunds/FundCard';
+import React from 'react';
+import UserFunds from '@/components/modules/myfunds/UserFunds';
 import Navbar from '@/components/ui/Navbar';
 import Footer from '@/components/ui/Footer';
 import { Button } from '@/components/ui/Button';
@@ -11,35 +11,8 @@ interface MyFundsPageProps {
 }
 
 const MyFundsPage: React.FC<MyFundsPageProps> = ({ params }) => {
-  const [funds, setFunds] = useState<object[]>([]);
   const { useraddr } = params;
 
-  useEffect(() => {
-    // TODO: Implement funds fetching using 'useraddr'
-    setFunds([
-      {
-        id: 1,
-        type: "Project",
-        title: "Batman's fund",
-        description: "Example of card without delete button",
-      },
-      {
-        id: 2,
-        type: "Project",
-        title: "Deadpool's fund",
-        description: "I need help with my project to develop an awesome project like Go Stark Me",
-        onClick: handleDeleteFund
-      },
-      {
-        id: 3,
-        type: "Fund",
-        title: "Spider-Man's fund",
-        description: "Text to prove that we add elipsis when text exceds card width and we don't break the layout. asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf",
-        onClick: handleDeleteFund
-      }
-    ]);
-  }, []);
-
   const navItems = [
     { label: 'My Profile', href: `/app/myprofile/${useraddr}` },
     { label: 'My funds', href: `/app/myfunds/${useraddr}` }
@@ -50,11 +23,6 @@ const MyFundsPage: React.FC<MyFundsPageProps> = ({ params }) => {
     alert(`Creating new fund`);
   }
 
-  const handleDeleteFund = (fundId: number) => {
-    // TODO: Implement fund deletion based on a unique id or receive the fund object and delete it
-    alert(`Deleting fund with id: ${fundId}`);
-  }
-
   return (
     <div className="min-h-screen flex flex-col">
       <Navbar
@@ -75,25 +43,8 @@ const MyFundsPage: React.FC<MyFundsPageProps> = ({ params }) => {
             </div>
             <Button className='!px-12 !py-2.5' label='New' onClick={onNewFundHandler} />
           </div>
-          {funds.length === 0 ? (
-            <div className="flex justify-center items-center h-64">
-              <div className="text-center text-gray-500">
-                No funds found for address {useraddr.slice(0, 5)}...{useraddr.slice(-4)}
-              </div>
-            </div>
-          ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-y-10 gap-x-16">
-            {funds.map((fund: any, index: number) => (
-              <FundCard 
-                key={index} 
-                type={fund.type} 
-                title={fund.title} 
-                description={fund.description} 
-                {... fund.onClick && { onClick: () => fund.onClick(fund.id) }}
-              />
-            ))}
-          </div>
-        )}
+
+          <UserFunds userAddress={useraddr} />
         </div>
       </main>
       <Footer />

diff --git a/frontend/gostarkme-web/components/modules/myfunds/UserFunds.tsx b/frontend/gostarkme-web/components/modules/myfunds/UserFunds.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import React, { useEffect, useState } from 'react';
+import FundCard from '@/components/modules/myfunds/FundCard';
+
+interface UserFundsProps {
+  userAddress: string;
+}
+
+const UserFunds: React.FC<UserFundsProps> = ({ userAddress }) => {
+  const [funds, setFunds] = useState<object[]>([]);
+
+  useEffect(() => {
+    // TODO: Implement funds fetching using 'userAddress'
+    setFunds([
+      {
+        id: 1,
+        type: "Project",
+        title: "Batman's fund",
+        description: "Example of card without delete button",
+      },
+      {
+        id: 2,
+        type: "Project",
+        title: "Deadpool's fund",
+        description: "I need help with my project to develop an awesome project like Go Stark Me",
+        onClick: handleDeleteFund
+      },
+      {
+        id: 3,
+        type: "Fund",
+        title: "Spider-Man's fund",
+        description: "Text to prove that we add elipsis when text exceds card width and we don't break the layout. asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf",
+        onClick: handleDeleteFund
+      }
+    ]);
+  }, []);
+
+  const handleDeleteFund = (fundId: number) => {
+    // TODO: Implement fund deletion based on a unique id or receive the fund object and delete it
+    alert(`Deleting fund with id: ${fundId}`);
+  }
+
+  return (
+    <div>
+        {funds.length === 0 ? (
+        <div className="flex justify-center items-center h-64">
+            <div className="text-center text-gray-500">
+            No funds found for address {userAddress.slice(0, 5)}...{userAddress.slice(-4)}
+            </div>
+        </div>
+        ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-y-10 gap-x-16">
+            {funds.map((fund: any, index: number) => (
+            <FundCard 
+                key={index} 
+                type={fund.type} 
+                title={fund.title} 
+                description={fund.description} 
+                {... fund.onClick && { onClick: () => fund.onClick(fund.id) }}
+            />
+            ))}
+        </div>
+        )}
+    </div>
+  );
+};
+
+export default UserFunds;