🫐⛸ ↣ Add new page queries to view components of specific proposals in […

…#16 #18]

client/src/components/CountBox.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const CountBox = ({ title, value }) => {
+  return (
+    <div className='flex flex-col items-center w-[150px]'>
+        <h4 className='font-epilogue font-bold text-[30px] text-white p-3 bg-[#1c1c24] rounded-t-[10px] w-full text-center truncate'>{value}</h4>
+        <p className="font-epilogue font-normal text-[16px] text-[#808191] bg-[#28282e] px-3 py-2 w-full rouned-b-[10px] text-center">{title}</p>
+    </div>
+  )
+}
+
+export default CountBox;

client/src/components/FundCard.jsx

@@ -23,8 +23,17 @@ const FundCard = ({ owner, title, description, target, deadline, amountCollected
                         <p className='mt-[3px] font-epilogue font-normal text-[12px] leading-[18px] text-[#808191] sm:max-w-[120px] truncate'>Raised of {target}</p>
                     </div>
                     <div className='flex flex-col'>
-
+                        <h4 className="font-epilogue font-semibold text-[14px] text-[#b2b3bd] leading-[22px]">{remainingDays}</h4>
+                        <p className="mt-[3px] font-epilogue font-normal text-[12px] leading-[18px] text-[#808191] sm:max-w-[120px] truncate">Days Left</p>
+                    </div>
+                </div>
+                <div className='flex items-center mt-[20px] gap-[12px]'>
+                    <div className='w-[30px] h-[30px] rounded-full flex justify-center items-center bg-[#13131a]'>
+                        <img src={thirdweb} alt='user' className='w-1/2 h-1/2 object-contain' />
                     </div>
+                    <p className='flex-1 font-epilogue font-normal text-[12px] text-[#808191] truncate'>
+                        by <span className='text-[#b2b3bd]'>{owner}</span>
+                    </p>
                 </div>
             </div>
         </div>

client/src/components/index.js

@@ -3,4 +3,5 @@ export { default as Navbar } from './Navbar';
 export { default as CustomButton } from './CustomButton';
 export { default as FormField } from './FormField';
 export { default as DisplayProposals } from './DisplayProposals';
-export { default as FundCard } from './FundCard'; // Update function name to `ProposalCard`
+export { default as FundCard } from './FundCard'; // Update function name to `ProposalCard`
+export { default as CountBox } from './CountBox';

client/src/context/index.jsx

@@ -47,13 +47,22 @@ export const StateContextProvider = ({ children }) => {
         return parsedProposals; // This is sent to the `useEffect` in `Home.jsx` page
     }
 
+    const getUserProposals = async () => { // Get proposals that a specific user (authed) has created
+        const allProposals = await getProposals();
+        const filteredProposals = allProposals.filter((proposal) =>
+            proposal.owner === address
+        );
+        return filteredProposals;
+    }
+
     return(
         <StateContext.Provider
             value={{ address,
                 contract,
                 connect,
                 createProposal: publishProposal,
                 getProposals,
+                getUserProposals,
             }}
         >
             {children}

client/src/pages/Profile.jsx

@@ -1,9 +1,30 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react';
+import { useStateContext } from '../context';
+import { DisplayProposals } from '../components';
 
 const Profile = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [proposals, setProposals] = useState([]); // Empty array, retrieved from the state context from onchain
+
+  const { address, contract, getUserProposals }  = useStateContext();
+  const fetchProposals = async () => { // This is to allow us to call this g.request in the useEffect (as the request is async in /context)
+    setIsLoading(true);
+    const data = await getUserProposals();
+    setProposals(data);
+    setIsLoading(false);
+  }
+
+  useEffect(() => {
+    if (contract) fetchProposals();
+  }, [address, contract]); // Re-called when these change
+
   return (
-    <div>Profile</div>
+    <DisplayProposals // Component that selects different proposals based on props passed here
+      title="All Proposals"
+      isLoading={isLoading}
+      proposals={proposals}
+    />
   )
 }
 
-export default Profile
+export default Profile;

client/src/pages/ProposalDetails.jsx

@@ -1,9 +1,74 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { ethers } from 'ethers';
+import { useStateContext } from '../context';
+import { CustomButton, CountBox } from '../components';
+import { calculateBarPercentage, daysLeft } from '../utils';
+import { thirdweb } from '../assets';
 
 const ProposalDetails = () => {
+  const { state } = useLocation();
+  const { getVoters, contract, address } = useStateContext();
+  console.log(state);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [amount, setAmount] = useState('');
+  const [voters, setVoters] = useState([]); // Array of voters on a specific proposal
+  const remainingDays = daysLeft(state.deadline);
+
   return (
-    <div>ProposalDetails</div>
+    <div>
+      {isLoading && 'Loading...'}
+      <div className='w-full flex md:flex-row flex-col mt-10 gap-[30px]'>
+        <div className='flex-1 flex-col'>
+          <img src={state.image} alt='campaign' className='w-full h-[410px] object-cover rounded-xl' />
+          <div className='relative w-full h-[5px] bg-[#3a3a43] mt-2'>
+            <div className='absolute h-full bg-[#41cd8d]' style={{ width: `${calculateBarPercentage(state.target, state.amountCollected)}%`, maxWidth: '100%' }}>
+            </div>
+          </div>
+        </div>
+        <div className='flex md:w-[150px] w-full flex-wrap justify-between gap-[30px]'>
+          <CountBox title='Days Left' value={remainingDays} />
+          <CountBox title={`Raised of ${state.target}`} value={state.amountCollected} />
+          <CountBox title='Voters' value={voters.length} />
+        </div>
+      </div>
+      <div className='mt-[60px] flex lg:flex-row flex-col gap-5'>
+        <div className='flex-[2] flex flex-col gap-[40px]'>
+          <div>
+            <h4 className='font-epilogue font-semibold text-[18px] text-white uppercase'>CREATOR:</h4>
+            <div className='mt-[20px] flex flex-row items-center flex-wrap gap-[14px]'>
+              <div className='w-[52px] h-[52px] flex items-center justify-center rounded-full bg-[#2c2f32] cursor-pointer'>
+                <img src={thirdweb} alt='user profilepic' className='w-[60%] h-[60%] object-contain' />
+              </div>
+              <div>
+                <h4 className='font-epilogue font-semibold text-[14px] text-white break-all'>{state.owner}</h4>
+                <p className='mt-[4px] font-epilogue font-normal text-[12px] text-[#808191]'>10 Proposals</p>
+              </div>
+            </div>
+          </div>
+          <div>
+            <h4 className='font-epilogue font-semibold text-[18px] text-white uppercase'>STORY:</h4>
+            <div className='mt-[20px]'>
+              <p className='font-epilogue font-normal text-[16px] text-[#808191] leading-[26px] text-justify'>{state.description}</p>
+            </div>
+          </div>
+          <div>
+            <h4 className='font-epilogue font-semibold text-[18px] text-white uppercase'>VOTERS:</h4>
+            <div className='mt-[20px] flex flex-col gap-4'>
+              {voters.length > 0 ? voters.map((item, index) => {
+                <div>
+                  VOTER
+                </div>
+              }) : (
+                <p className='font-epilogue font-normal text-[16px] text-[#808191] leading-[26px] text-justify'>Nobody has voted on this proposal yet</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   )
 }
 
-export default ProposalDetails
+export default ProposalDetails;