Event Announcements (#45)

Co-authored-by: Zack Traczyk <[email protected]>

src/components/AllDoneModal.tsx

@@ -0,0 +1,77 @@
+import React, { Dispatch, Fragment, SetStateAction } from "react"
+import { Dialog, Transition } from "@headlessui/react"
+import { FaceSmileIcon } from "@heroicons/react/24/solid"
+import { Link } from "react-router-dom"
+
+interface AllDoneModalProps {
+  open: boolean
+  setOpen: Dispatch<SetStateAction<boolean>>
+}
+
+export default function AllDoneModal({ open, setOpen }: AllDoneModalProps) {
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as='div' className='relative z-10' onClose={setOpen}>
+        <Transition.Child
+          as={Fragment}
+          enter='ease-out duration-300'
+          enterFrom='opacity-0'
+          enterTo='opacity-90'
+          leave='ease-in duration-200'
+          leaveFrom='opacity-90'
+          leaveTo='opacity-0'
+        >
+          <div className='fixed inset-0 bg-blue-imperial/70 transition-opacity' />
+        </Transition.Child>
+
+        <div className='fixed inset-0 z-10 overflow-y-auto'>
+          <div className='flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0'>
+            <Transition.Child
+              as={Fragment}
+              enter='ease-out duration-300'
+              enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+              enterTo='opacity-100 translate-y-0 sm:scale-100'
+              leave='ease-in duration-200'
+              leaveFrom='opacity-100 translate-y-0 sm:scale-100'
+              leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+            >
+              <Dialog.Panel className='relative overflow-hidden rounded-lg bg-blue-imperial px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6'>
+                <div>
+                  <div className='mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-button/20'>
+                    <FaceSmileIcon
+                      className='h-8 w-8 text-gold'
+                      aria-hidden='true'
+                    />
+                  </div>
+                  <div className='mt-3 text-center sm:mt-5'>
+                    <Dialog.Title
+                      as='h3'
+                      className='text-base font-semibold leading-6 text-white'
+                    >
+                      You did it!
+                    </Dialog.Title>
+                    <div className='mt-2'>
+                      <p className='text-sm text-white/70'>
+                        Keep a look out for application decisions in your email.
+                        Or check your application status in the portal.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div className='mt-5 sm:mt-6'>
+                  <Link
+                    to='/portal'
+                    className='inline-flex w-full justify-center rounded-md bg-blue-button/50 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-button/60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-button'
+                    onClick={() => setOpen(false)}
+                  >
+                    Login to Portal
+                  </Link>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  )
+}

src/components/Announcements.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from "react"
+import { ref, onValue } from "firebase/database"
+import { rtdb } from "../utils/firebaseapp"
+
+export type Announcement = {
+  body: string
+  date: string
+  title: string
+}
+
+const convertDate = (date: string) => {
+  const d = new Date(date)
+  return d.toLocaleDateString("default", {
+    weekday: "short",
+    month: "numeric",
+    day: "numeric",
+    year: "2-digit",
+  })
+}
+
+const convertTime = (date: string) => {
+  const d = new Date(date)
+  return d.toLocaleTimeString("default", { hour: "numeric", minute: "2-digit" })
+}
+
+const Announcements: React.FC = () => {
+  const [announcements, setAnnouncements] = useState<Announcement[]>([])
+  const [live, setLive] = useState(false)
+
+  useEffect(() => {
+    const dbRef = ref(rtdb, "announcements")
+
+    // Listen for changes in the 'announcements' node
+    onValue(dbRef, snapshot => {
+      const announcementsData = snapshot.val()
+      if (announcementsData) {
+        const announcementsArray = Object.keys(announcementsData).map(key => {
+          return announcementsData[key]
+        })
+        announcementsArray.sort((a, b) => b.date - a.date)
+        setAnnouncements(announcementsArray)
+      } else {
+        setAnnouncements([])
+      }
+    })
+
+    return () => {
+      onValue(dbRef, () => {})
+    }
+  }, [])
+
+  // Update live indicator
+  useEffect(() => {
+    const connectedRef = ref(rtdb, ".info/connected")
+    return onValue(connectedRef, snap => {
+      if (snap.val() === true) {
+        setLive(true)
+      } else {
+        setLive(false)
+      }
+    })
+  }, [])
+
+  return (
+    <div className='w-full max-w-2xl space-y-3 rounded-3xl bg-[#4659FF]/10 p-5 md:p-10'>
+      <h1 className='flex items-center gap-3 pb-3 pt-10 font-title text-xl font-bold uppercase md:gap-5 md:pt-0 md:text-2xl'>
+        <div
+          className={
+            "h-4 w-4 rounded-full shadow-md md:h-7 md:w-7 " +
+            (live ? "bg-[#82D06F] " : "bg-[#ff5050]")
+          }
+        >
+          <div
+            className={
+              "h-4 w-4 animate-ping rounded-full shadow-md md:h-7 md:w-7 " +
+              (live ? "bg-[#8fe27a8f] " : "bg-[#ff7a7a8c]")
+            }
+          ></div>
+        </div>
+        Live Now
+      </h1>
+
+      {announcements && announcements.length > 0 ? (
+        <ul className='flex h-80 grow flex-col gap-5 overflow-y-scroll rounded py-5 md:bg-[#D9D9D91A] md:p-10'>
+          {announcements.map((announcement: Announcement, key: number) => {
+            return (
+              <li className='border-b border-[#D7D7D7]' key={key}>
+                <p className='text-[#61A564]'>
+                  {convertTime(announcement.date)}
+                </p>
+                <p className='py-2 md:p-5 md:px-10'>{announcement.body}</p>
+                <p className='float-right text-[#A1A1A1]'>
+                  {convertDate(announcement.date)}
+                </p>
+              </li>
+            )
+          })}
+        </ul>
+      ) : (
+        <div className='flex h-80 flex-col items-center justify-center rounded py-5 md:bg-[#D9D9D91A] md:p-10'>
+          <p className='text-center'>No Announcements yet, stay tuned!</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Announcements

src/components/CheckEmailModal.tsx

@@ -0,0 +1,82 @@
+import React, { Dispatch, Fragment, SetStateAction } from "react"
+import { Dialog, Transition } from "@headlessui/react"
+import { EnvelopeIcon } from "@heroicons/react/24/outline"
+import { useNavigate } from "react-router-dom"
+
+interface CheckEmailModalProps {
+  open: boolean
+  setOpen: Dispatch<SetStateAction<boolean>>
+}
+
+export default function CheckEmailModal({
+  open,
+  setOpen,
+}: CheckEmailModalProps) {
+  const navigate = useNavigate()
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as='div' className='relative z-10' onClose={setOpen}>
+        <Transition.Child
+          as={Fragment}
+          enter='ease-out duration-300'
+          enterFrom='opacity-0'
+          enterTo='opacity-90'
+          leave='ease-in duration-200'
+          leaveFrom='opacity-90'
+          leaveTo='opacity-0'
+        >
+          <div className='bg-opacity-\75 bg-gray-500 fixed inset-0 transition-opacity' />
+        </Transition.Child>
+
+        <div className='fixed inset-0 z-10 overflow-y-auto'>
+          <div className='flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0'>
+            <Transition.Child
+              as={Fragment}
+              enter='ease-out duration-300'
+              enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+              enterTo='opacity-100 translate-y-0 sm:scale-100'
+              leave='ease-in duration-200'
+              leaveFrom='opacity-100 translate-y-0 sm:scale-100'
+              leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+            >
+              <Dialog.Panel className='relative overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6'>
+                <div>
+                  <div className='bg-green-100 mx-auto flex h-12 w-12 items-center justify-center rounded-full'>
+                    <EnvelopeIcon
+                      className='text-green-600 h-6 w-6'
+                      aria-hidden='true'
+                    />
+                  </div>
+                  <div className='mt-3 text-center sm:mt-5'>
+                    <Dialog.Title
+                      as='h3'
+                      className='text-gray-900 text-base font-semibold leading-6'
+                    >
+                      Email Confirmation Sent
+                    </Dialog.Title>
+                    <div className='mt-2'>
+                      <p className='text-gray-500 text-sm'>
+                        Please check your email to finish setting up your
+                        CruzHacks Account
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div className='mt-5 sm:mt-6'>
+                  <button
+                    type='button'
+                    className='bg-green-800 hover:bg-green-700 focus-visible:outline-green-700 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
+                    onClick={() => navigate("/login")}
+                  >
+                    Go back to login
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  )
+}

src/components/WillLoseProgressModal.tsx

@@ -0,0 +1,79 @@
+import React, { Dispatch, Fragment, SetStateAction } from "react"
+import { Dialog, Transition } from "@headlessui/react"
+import { ExclamationCircleIcon } from "@heroicons/react/24/outline"
+
+interface WillLoseProgressModalProps {
+  open: boolean
+  setOpen: Dispatch<SetStateAction<boolean>>
+}
+
+export default function WillLoseProgressModal({
+  open,
+  setOpen,
+}: WillLoseProgressModalProps) {
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as='div' className='relative z-10' onClose={setOpen}>
+        <Transition.Child
+          as={Fragment}
+          enter='ease-out duration-300'
+          enterFrom='opacity-0'
+          enterTo='opacity-90'
+          leave='ease-in duration-200'
+          leaveFrom='opacity-90'
+          leaveTo='opacity-0'
+        >
+          <div className='fixed inset-0 bg-blue-imperial/70 transition-opacity' />
+        </Transition.Child>
+
+        <div className='fixed inset-0 z-10 overflow-y-auto'>
+          <div className='flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0'>
+            <Transition.Child
+              as={Fragment}
+              enter='ease-out duration-300'
+              enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+              enterTo='opacity-100 translate-y-0 sm:scale-100'
+              leave='ease-in duration-200'
+              leaveFrom='opacity-100 translate-y-0 sm:scale-100'
+              leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+            >
+              <Dialog.Panel className='relative overflow-hidden rounded-lg bg-blue-imperial px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6'>
+                <div>
+                  <div className='mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-pink/20'>
+                    <ExclamationCircleIcon
+                      className='h-8 w-8 text-error'
+                      aria-hidden='true'
+                    />
+                  </div>
+                  <div className='mt-3 text-center sm:mt-5'>
+                    <Dialog.Title
+                      as='h3'
+                      className='text-base font-semibold leading-6 text-white'
+                    >
+                      Submit Application Before Leaving
+                    </Dialog.Title>
+                    <div className='mt-2'>
+                      <p className='text-sm text-white/70'>
+                        If you leave this page, you will lose all progress on
+                        your hacker application
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div className='mt-5 sm:mt-6'>
+                  <button
+                    type='button'
+                    className='inline-flex w-full justify-center rounded-md bg-blue-button/50 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-button/60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-button'
+                    onClick={() => setOpen(false)}
+                  >
+                    Dismiss
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  )
+}