From fda61a38ce8593a0963a1d161c2dc08fd20e91f9 Mon Sep 17 00:00:00 2001 From: "sewmina7@gmail.com" Date: Tue, 25 Jun 2024 17:51:32 +0530 Subject: [PATCH] Timed leaderboards --- app/modal.tsx | 10 ++- app/page.tsx | 203 ++++++++++++++++++++++++++------------------------ 2 files changed, 114 insertions(+), 99 deletions(-) diff --git a/app/modal.tsx b/app/modal.tsx index a018a69..9d1366c 100644 --- a/app/modal.tsx +++ b/app/modal.tsx @@ -8,14 +8,20 @@ interface Detail { price_now: number; } -const Modal: React.FC<{ isOpen: boolean; onClose: () => void; item: { username: string; points: number } }> = ({ isOpen, onClose, item }) => { +const Modal: React.FC<{ isOpen: boolean; onClose: () => void; item: { username: string; points: number }; period:string; }> = ({ isOpen, onClose, item, period }) => { const [details, setDetails] = useState(null); // Specify null as the initial type useEffect(() => { if (isOpen && item) { const fetchDetails = async () => { try { - const response = await fetch(`https://api.callfi.io/get_user_callouts.php?tag=${item.username}`); + let urlAddition = ""; + if(period == "Weekly"){ + urlAddition = "_weekly"; + }else if(period == "Monthly"){ + urlAddition = "_monthly"; + } + const response = await fetch(`https://api.callfi.io/get_user_callouts${urlAddition}.php?tag=${item.username}`); if (!response.ok) { throw new Error('Network response was not ok'); } diff --git a/app/page.tsx b/app/page.tsx index 148bcc9..99d21d8 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -5,12 +5,10 @@ import { SunIcon, MoonIcon } from "@heroicons/react/solid"; import { PrivyProvider, usePrivy } from "@privy-io/react-auth"; import { FaTwitter, FaWallet } from "react-icons/fa"; import { CheckIcon } from "@heroicons/react/outline"; -import Modal from './modal'; -import CalloutModal from './callout'; - +import Modal from './modal'; +import CalloutModal from './callout'; import { motion } from 'framer-motion'; - // Helper functions to generate pseudo data const generateRandomName = () => { const names = ["Alice", "Bob", "Charlie", "David", "Eva", "Frank", "Grace", "Hannah", "Ivan", "Judy"]; @@ -30,13 +28,16 @@ function Home() { const [modalOpen, setModalOpen] = useState(false); const { login, user, ready, logout, linkTwitter, unlinkTwitter, linkWallet, unlinkWallet } = usePrivy(); const [darkMode, setDarkMode] = useState(true); - const [twitterConnected, setTwitterConnected] = useState(false); // State to track Twitter connection - const [walletConnected, setWalletConnected] = useState(false); // State to track Wallet connection + const [twitterConnected, setTwitterConnected] = useState(false); + const [walletConnected, setWalletConnected] = useState(false); const [incrementNumber, setIncrementNumber] = useState(1); const [leaderboardData, setLeaderboardData] = useState([]); const [isJoined, setIsJoined] = useState(false); - const [selectedItem, setSelectedItem] = useState(null); // State to store selected leaderboard item - const [newCallModalOpen, setNewCallModalOpen] = useState(false); + const [selectedItem, setSelectedItem] = useState(null); + const [newCallModalOpen, setNewCallModalOpen] = useState(false); + const [selectedPeriod, setSelectedPeriod] = useState('All Time'); + + const periods = ['All Time', 'Weekly', 'Monthly']; // Function to handle opening modal and setting selected item const openModal = (item) => { @@ -71,24 +72,35 @@ function Home() { } }, [darkMode]); - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch('https://api.callfi.io/get_leaderboard.php'); - if (!response.ok) { - throw new Error('Network response was not ok'); - } - const data = await response.json(); - console.log('Leaderboard data:', data); - setLeaderboardData(data); - } catch (error) { - console.error('Failed to fetch leaderboard data:', error); + let fetchData = async () => { + try { + let urlAddition = ""; + if(selectedPeriod == "Weekly"){ + urlAddition = "_weekly"; + } else if(selectedPeriod == "Monthly"){ + urlAddition = "_monthly"; } - }; + const response = await fetch(`https://api.callfi.io/get_leaderboard${urlAddition}.php`); + console.log(urlAddition); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + const data = await response.json(); + console.log('Leaderboard data:', data); + setLeaderboardData(data); + } catch (error) { + console.error('Failed to fetch leaderboard data:', error); + } + }; - // Fetch data immediately on mount + useEffect(()=>{ + setLeaderboardData([]); fetchData(); + }, [selectedPeriod]) + + useEffect(() => { + fetchData(); // Set up the interval to fetch data every 5 seconds const intervalId = setInterval(() => { setIncrementNumber((prevNumber) => prevNumber + 1); @@ -97,7 +109,7 @@ function Home() { // Clean up the interval on component unmount return () => clearInterval(intervalId); - }, []); + }, [selectedPeriod]); const toggleDarkMode = () => { setDarkMode(!darkMode); @@ -114,20 +126,19 @@ function Home() { const data = await response.json(); console.log('API call successful:', data); - setTwitterConnected(true); // Set Twitter connection state to true on successful API call + setTwitterConnected(true); } catch (error) { console.error('Error during API call:', error); } - try{ + try { const response = await fetch('https://api.callfi.io/check_user_approved.php?tag=' + usertag); const responseTxt = await response.text(); - if(responseTxt == "1"){ + if (responseTxt == "1") { setIsJoined(true); } - - }catch(error){ - + } catch (error) { + console.error('Error checking user approval:', error); } }; @@ -137,21 +148,19 @@ function Home() { if (username !== "@unknownUser") { postLoginAPI(username); } - // Assume we have a way to check if the wallet is connected - const walletStatus = user.wallet; // This is an assumption; replace it with actual wallet connection check + const walletStatus = user.wallet; if (walletStatus) { setWalletConnected(true); } } }, [ready, user]); + return ( - // ${darkMode ? "bg-black text-white" : "bg-white text-black"}

CallFi

- {ready && user ? (
- {/* Note card */} - { - ready && user?.twitter && !isJoined &&( -
-
-

Join the Leaderboard

-

Get on the leaderboard by posting a tweet!

- -
-
- ) - } - { - ready && user?.twitter && isJoined &&( -
-
-

Feeling Lucky?

-

Make a callout to a token you believe in!!

- -
+ {ready && user?.twitter && !isJoined && ( +
+
+

Join the Leaderboard

+

Get on the leaderboard by posting a tweet!

+
- ) - } +
+ )} - { - ready && !user?.twitter && ( -
-
-

Join the Leaderboard

-

Start by linking your Twitter account!

- {user ? ( - +
+
+ )} + + {ready && !user?.twitter && ( +
+
+

Join the Leaderboard

+

Start by linking your Twitter account!

+ {user ? ( + - ) : ( - - )} - - -
+ )}
- ) - } +
+ )} - - {/* Leaderboard */}
+
+ {periods.map((period) => ( + + ))} +
+
{leaderboardData.map((item) => ( -
= 0 ? 'positive' : 'negative'} mx-auto mb-4`} - onClick={() => openModal(item)} - > -
- {`${item["username"]}'s -
-

{item["username"]}

-

{parseFloat(item["points"]).toFixed(2)}x

+
= 0 ? 'positive' : 'negative'} mx-auto mb-4`} + onClick={() => openModal(item)} + > +
+ {`${item["username"]}'s +
+

{item["username"]}

+

{parseFloat(item["points"]).toFixed(2)}x

+
-
- + ))}
- {/* Modal */} - - - {/* Rest of your Home component */} + +