update results screen

aao056 · Jan 22, 2025 · 8f996cd · 8f996cd
1 parent 62c4f68
commit 8f996cd
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 15 deletions.
diff --git a/src/components/account/account-ui.tsx b/src/components/account/account-ui.tsx
@@ -198,7 +198,7 @@ export function AccountTransactions({ address }: { address: PublicKey }) {
   return (
     <div className="space-y-2">
       <div className="flex justify-between">
-        <h2 className="text-2xl font-bold">Transaction History</h2>
+        <h2 className="text-2xl font-bold">Voting History</h2>
         <div className="space-x-2">
           {query.isLoading ? (
             <span className="loading loading-spinner"></span>
@@ -213,7 +213,7 @@ export function AccountTransactions({ address }: { address: PublicKey }) {
       {query.isSuccess && (
         <div>
           {query.data.length === 0 ? (
-            <div>No transactions found.</div>
+            <div>No votes found.</div>
           ) : (
             <table className="table border-4 rounded-lg border-separate border-base-300">
               <thead>

diff --git a/src/components/results/results-data-access.tsx b/src/components/results/results-data-access.tsx
@@ -15,8 +15,6 @@ export function useCandidateScores() {
 
     const scores: any[] = []
 
-    console.log(candidates)
-
     candidates.map((cand) => {
         if (!cand.voters.length) {
             scores.push({

diff --git a/src/components/results/results-feature.tsx b/src/components/results/results-feature.tsx
@@ -6,32 +6,55 @@ import { useVotingdappProgram } from '../votingdapp/votingdapp-data-access'
 import { ResultsChart } from "./results-ui"
 import { WalletButton } from '../solana/solana-provider'
 import getUnixInDate from '@/utils/getUnixInDate'
+import { AccountTransactions } from '../account/account-ui'
+import { useState, useEffect } from 'react'
 
 export default function ResultsFeature() {
     const { publicKey } = useWallet()
     const { accounts, programId } = useVotingdappProgram()
+    const [electionHasFinished, setElectionHasFinished] = useState(false)
+    const [endTime, setEndTime] = useState(null)
 
-    // const title = accounts.data && accounts.data.length ? accounts.data[0].account?.name : "Unintialized Blockchain Presidental Election"
-    // const subtitle = accounts.data && accounts.data.length ? `${accounts.data[0].account?.description}` : "No description yet"
-    // const start_time = accounts.data && accounts.data.length ? `${getUnixInDate(accounts.data[0].account?.startTime.toNumber())}` : "No data"
-    // const end_time = accounts.data && accounts.data.length ? `${getUnixInDate(accounts.data[0].account?.endTime.toNumber())}` : "No data"
+    // Extract and parse the election end time
+    useEffect(() => {
+        if (accounts.data && accounts.data.length) {
+            const endTimeUnix = accounts.data[0].account?.endTime.toNumber()
+            const parsedDate = getUnixInDate(endTimeUnix)
+            if (!parsedDate) setEndTime(parsedDate)
+
+            const endDate = new Date(parsedDate)
+            if (endDate < new Date()) {
+                setElectionHasFinished(true)
+            }
+        }
+    }, [accounts.data])
 
     return publicKey ? (
         <div>
             <AppHero
                 title={"Election results"}
                 subtitle={'This page displays the election results'}
             >
-                {/* <p className='mb-3'>
-                    Election starts: {start_time}<br />
-                    Election ends: {end_time}
-                </p> */}
                 <p className="mb-6">
                     <ExplorerLink path={`account/${programId}`} label={ellipsify(programId.toString())} />
                 </p>
-                {/* <VotingDappSystemCreate /> */}
             </AppHero>
-            <ResultsChart />
+            {electionHasFinished ? (
+                <div>
+                    <div className='my-2'>
+                        <ResultsChart />
+                    </div>
+                    <div className='my-8'>
+                        <AccountTransactions address={programId} />
+                    </div>
+                </div>
+            ) : (
+                <div className="text-center">
+                    <p className="text-lg font-medium">
+                        The election is still taking place. Please come back after the election has finished.
+                    </p>
+                </div>
+            )}
         </div>
     ) : (
         <div className="max-w-4xl mx-auto">

diff --git a/src/utils/getUnixInDate.ts b/src/utils/getUnixInDate.ts
@@ -1,3 +1,3 @@
-export default function getUnixInDate(timestamp: number) {
+export default function getUnixInDate(timestamp: number): Date {
     return new Date(timestamp * 1000)
 }