From 7ddd77518838f3778e2276292a77f553cedb6e9d Mon Sep 17 00:00:00 2001 From: Lowell Torola <44183219+lowtorola@users.noreply.github.com> Date: Sun, 4 Feb 2024 20:09:37 -0500 Subject: [PATCH] Home Page (#740) gahh i cant believe I'm merging this ugly time display hahaha --- frontend2/package-lock.json | 31 ++++++++-- frontend2/package.json | 1 + frontend2/src/components/CountdownDigital.tsx | 61 +++++++++++++++++++ frontend2/src/views/Home.tsx | 56 ++++++++++++++++- 4 files changed, 143 insertions(+), 6 deletions(-) create mode 100644 frontend2/src/components/CountdownDigital.tsx diff --git a/frontend2/package-lock.json b/frontend2/package-lock.json index 70b472940..38a94ef73 100644 --- a/frontend2/package-lock.json +++ b/frontend2/package-lock.json @@ -26,6 +26,7 @@ "react-hot-toast": "^2.4.1", "react-markdown": "^8.0.7", "react-router-dom": "^6.13.0", + "react-social-icons": "^6.10.0", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -2121,16 +2122,21 @@ "dev": true }, "node_modules/@babel/runtime": { - "version": "7.21.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz", - "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz", + "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==", "dependencies": { - "regenerator-runtime": "^0.13.11" + "regenerator-runtime": "^0.14.0" }, "engines": { "node": ">=6.9.0" } }, + "node_modules/@babel/runtime/node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, "node_modules/@babel/template": { "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz", @@ -17989,6 +17995,20 @@ } } }, + "node_modules/react-social-icons": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-social-icons/-/react-social-icons-6.10.0.tgz", + "integrity": "sha512-b4sbTE7vZBYF2yIa/ObMb6ZfMexnMF+OnciLv1ujzaioiBabZjSMeYS9Pp4Kh6BAeYejF/QByctns4abqy37rA==", + "dependencies": { + "@babel/runtime": "^7.23.8", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "peerDependencies": { + "react": "15.x.x || 16.x.x || 17.x.x || 18.x.x", + "react-dom": "15.x.x || 16.x.x || 17.x.x || 18.x.x" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -18073,7 +18093,8 @@ "node_modules/regenerator-runtime": { "version": "0.13.11", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", - "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==", + "dev": true }, "node_modules/regenerator-transform": { "version": "0.15.1", diff --git a/frontend2/package.json b/frontend2/package.json index e4c25f6a7..0a3b7ed56 100644 --- a/frontend2/package.json +++ b/frontend2/package.json @@ -21,6 +21,7 @@ "react-hot-toast": "^2.4.1", "react-markdown": "^8.0.7", "react-router-dom": "^6.13.0", + "react-social-icons": "^6.10.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/frontend2/src/components/CountdownDigital.tsx b/frontend2/src/components/CountdownDigital.tsx new file mode 100644 index 000000000..3d68d5453 --- /dev/null +++ b/frontend2/src/components/CountdownDigital.tsx @@ -0,0 +1,61 @@ +import { useQueryClient } from "@tanstack/react-query"; +import React, { useEffect } from "react"; +import { episodeQueryKeys } from "../api/episode/episodeKeys"; +import { useEpisodeId } from "../contexts/EpisodeContext"; + +interface CountdownDigitalProps { + date: Date; + title?: string; +} + +const CountdownDigital: React.FC = ({ + date, + title = "", +}) => { + const { episodeId } = useEpisodeId(); + const queryClient = useQueryClient(); + const dateHasPassed = date.getTime() < new Date().getTime(); + + const days = Math.floor( + (date.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24), + ); + const hours = Math.floor( + ((date.getTime() - new Date().getTime()) % (1000 * 60 * 60 * 24)) / + (1000 * 60 * 60), + ); + const minutes = Math.floor( + ((date.getTime() - new Date().getTime()) % (1000 * 60 * 60)) / (1000 * 60), + ); + + useEffect(() => { + const interval = setInterval(() => { + void queryClient.refetchQueries({ + queryKey: episodeQueryKeys.nextTournament({ episodeId }), + }); + }, 1000 * 30); + return () => { + clearInterval(interval); + }; + }, []); + + if (dateHasPassed) return
TODO all zeros
; + return ( +
+ {title} +
+
{days}
+
:
+
{hours}
+
:
+
{minutes}
+
Days
+
+
Hours
+
+
Minutes
+
+
+ ); +}; + +export default CountdownDigital; diff --git a/frontend2/src/views/Home.tsx b/frontend2/src/views/Home.tsx index 65ec03a56..e4d7acd75 100644 --- a/frontend2/src/views/Home.tsx +++ b/frontend2/src/views/Home.tsx @@ -1,10 +1,64 @@ import React from "react"; import { useEpisodeId } from "../contexts/EpisodeContext"; +import { useEpisodeInfo, useNextTournament } from "../api/episode/useEpisode"; +import SectionCard from "../components/SectionCard"; +import CountdownDigital from "../components/CountdownDigital"; +import Spinner from "../components/Spinner"; +import { SocialIcon } from "react-social-icons"; const Home: React.FC = () => { const { episodeId } = useEpisodeId(); + const episode = useEpisodeInfo({ id: episodeId }); + const nextTournament = useNextTournament({ episodeId }); - return

Homepage for {episodeId}

; + const SOCIAL = + "hover:drop-shadow-lg hover:opacity-80 transition-opacity duration-300 ease-in-out"; + + return ( +
+
+
+ + {nextTournament.isLoading ? ( + + ) : nextTournament.isSuccess && nextTournament.data !== null ? ( + + ) : ( + "No upcoming submission deadlines." + )} + + {/* MATCH STATISTICS (TODO) */} + {/* + RANKINGS GRAPH (TODO) + */} +
+
+ + Welcome to {episode.data?.name_long}! + {episode.data?.blurb} + + +
+ + + + +
+ + {/* ANNOUNCEMENTS (TODO) */} +
+
+
+ ); }; export default Home;