diff --git a/src/components/StandardNav.jsx b/src/components/StandardNav.jsx index 7e9c37a3..23f67f28 100644 --- a/src/components/StandardNav.jsx +++ b/src/components/StandardNav.jsx @@ -1,6 +1,5 @@ -import { Fragment, useEffect, useState } from 'react'; -import { Disclosure, Menu, Popover, Transition } from '@headlessui/react'; -import { Dialog } from '@headlessui/react'; +import { Fragment, useEffect, useState, useContext } from 'react' +import { Disclosure, Menu, Popover, Transition, Dialog } from '@headlessui/react' import { Bars3Icon, @@ -12,259 +11,260 @@ import { ArrowRightIcon, EllipsisVerticalIcon, ShieldCheckIcon, - BellIcon, -} from '@heroicons/react/24/outline'; -import { Logo } from '@/components/Logo'; -import Link from 'next/link'; -import request from '@/utils/request'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faEllipsis, faSearch } from '@fortawesome/free-solid-svg-icons'; + BellIcon +} from '@heroicons/react/24/outline' +import { Logo } from '@/components/Logo' +import Link from 'next/link' +import request from '@/utils/request' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { + faEllipsis, faSearch, faBug, faLock, faUserSecret, faNetworkWired, faBrain, - faTerminal, -} from '@fortawesome/free-solid-svg-icons'; - -import 'reactjs-popup/dist/index.css'; -import Upgrade from './nav/Upgrade'; - -import { useRouter } from 'next/router'; -import { LogoAdmin } from './LogoAdmin'; -import { CSSTransition } from 'react-transition-group'; -import SearchModal from './nav/SearchModal'; -import SpawnTerminal from './nav/SpawnTerminal'; -import { Context } from '@/context'; -import { useContext } from 'react'; - -function classNames(...classes) { - return classes.filter(Boolean).join(' '); + faTerminal +} from '@fortawesome/free-solid-svg-icons' + +import 'reactjs-popup/dist/index.css' +import Upgrade from './nav/Upgrade' + +import { useRouter } from 'next/router' +import { LogoAdmin } from './LogoAdmin' +import { CSSTransition } from 'react-transition-group' +import SearchModal from './nav/SearchModal' +import SpawnTerminal from './nav/SpawnTerminal' +import { Context } from '@/context' + +function classNames (...classes) { + return classes.filter(Boolean).join(' ') } -const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL; -const adminList = ['pranav']; +const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL +const adminList = ['pranav'] const DEFAULT_NOTIFICATION = { image: 'https://cutshort-data.s3.amazonaws.com/cloudfront/public/companies/5809d1d8af3059ed5b346ed1/logo-1615367026425-logo-v6.png', message: 'You have no notifications.', detailPage: '/events', - receivedTime: '', -}; + receivedTime: '' +} -export function StandardNav({ guestAllowed, alignCenter = true }) { - const { role, points } = useContext(Context); +export function StandardNav ({ guestAllowed, alignCenter = true }) { + const { role, points } = useContext(Context) - const [terminaIsOpen, setTerminalIsOpen] = useState(false); - const [upgradeModalOpen, setUpgradeModalOpen] = useState(false); + const [terminaIsOpen, setTerminalIsOpen] = useState(false) + const [upgradeModalOpen, setUpgradeModalOpen] = useState(false) - const [isAdmin, setIsAdmin] = useState(true); - const [notifications, setNotifications] = useState([]); - const [showBanner, setShowBanner] = useState(false); - const [showSearchModal, setShowSearchModal] = useState(false); - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const [showNotificationsDropdown, setShowNotificationsDropdown] = useState(false); + const [isAdmin, setIsAdmin] = useState(true) + const [notifications, setNotifications] = useState([]) + const [showBanner, setShowBanner] = useState(false) + const [showSearchModal, setShowSearchModal] = useState(false) + const [isPopoverOpen, setIsPopoverOpen] = useState(false) + const [showNotificationsDropdown, setShowNotificationsDropdown] = useState(false) - const [open, setOpen] = useState(true); + const [open, setOpen] = useState(true) - const router = useRouter(); + const router = useRouter() - function logout() { + function logout () { document.cookie = - 'idToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; - router.push('/login'); + 'idToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;' + router.push('/login') } useEffect(() => { if (!localStorage.getItem('dismissStatus')) { - setShowBanner(true); + setShowBanner(true) } - }, []); + }, []) // Function to close the modal const closeModal = () => { - setShowSearchModal(false); - }; + setShowSearchModal(false) + } // Effect to add and remove the event listener useEffect(() => { const handleKeyDown = (event) => { if (event.keyCode === 27) { // 27 is the key code for ESC key - closeModal(); + closeModal() } - }; + } // Add event listener - document.addEventListener('keydown', handleKeyDown); + document.addEventListener('keydown', handleKeyDown) // Remove event listener on cleanup return () => { - document.removeEventListener('keydown', handleKeyDown); - }; - }, []); + document.removeEventListener('keydown', handleKeyDown) + } + }, []) const toggleSearchModal = () => { - setShowSearchModal((prev) => !prev); // Toggle the state - }; + setShowSearchModal((prev) => !prev) // Toggle the state + } - const [notification, showNotifications] = useState(false); + const [notification, showNotifications] = useState(false) const [notificationData, setNotificationData] = useState([ - DEFAULT_NOTIFICATION, - ]); + DEFAULT_NOTIFICATION + ]) - const [username, setUsername] = useState(null); - const [pfp, setPfp] = useState(null); + const [username, setUsername] = useState(null) + const [pfp, setPfp] = useState(null) // get user's profile picture useEffect(() => { if (!username) { - return; + return } if (localStorage.getItem('pfp')) { - setPfp(localStorage.getItem('pfp')); + setPfp(localStorage.getItem('pfp')) } const fetchData = async () => { try { const endPoint = - process.env.NEXT_PUBLIC_API_URL + '/users/' + username + '/pfp'; - const result = await request(endPoint, 'GET', null); + process.env.NEXT_PUBLIC_API_URL + '/users/' + username + '/pfp' + const result = await request(endPoint, 'GET', null) if (result) { - setPfp(result); + setPfp(result) } else { - setPfp(`https://robohash.org/${username}.png?set=set1&size=150x150`); + setPfp(`https://robohash.org/${username}.png?set=set1&size=150x150`) } } catch (err) { - console.log('failed to get profile picture'); + console.log('failed to get profile picture') } - }; - fetchData(); - }, [username]); + } + fetchData() + }, [username]) useEffect(() => { const fetchNotification = async () => { - console.log('fetching notifications'); + console.log('fetching notifications') const endPoint = - process.env.NEXT_PUBLIC_API_URL + '/account/notifications'; - const result = await request(endPoint, 'GET', null); - if (!result || !result.length) return; + process.env.NEXT_PUBLIC_API_URL + '/account/notifications' + const result = await request(endPoint, 'GET', null) + if (!result || !result.length) return - console.log('Here is the result'); - console.log(result); + console.log('Here is the result') + console.log(result) setNotificationData( result.map((notification) => { - const currentDate = new Date(); - const createdAt = new Date(notification.createdAt); - const timedelta = currentDate - createdAt; - console.log(notification); - let noti = ''; - - let seconds = Math.floor(timedelta / 1000); - let minutes = Math.floor(seconds / 60); - seconds = seconds % 60; - let hours = Math.floor(minutes / 60); - minutes = minutes % 60; - let days = Math.floor(hours / 24); - hours = hours % 24; - - if (days) noti = days + ' days'; - else if (hours) noti = hours + ' hours'; - else if (minutes) noti = minutes + ' minutes'; - else noti = seconds = ' seconds'; + const currentDate = new Date() + const createdAt = new Date(notification.createdAt) + const timedelta = currentDate - createdAt + console.log(notification) + let noti = '' + + let seconds = Math.floor(timedelta / 1000) + let minutes = Math.floor(seconds / 60) + seconds = seconds % 60 + let hours = Math.floor(minutes / 60) + minutes = minutes % 60 + const days = Math.floor(hours / 24) + hours = hours % 24 + + if (days) noti = days + ' days' + else if (hours) noti = hours + ' hours' + else if (minutes) noti = minutes + ' minutes' + else noti = seconds = ' seconds' return { message: notification.message, receivedTime: noti + ' ago', detailPage: '/events', image: - 'https://cutshort-data.s3.amazonaws.com/cloudfront/public/companies/5809d1d8af3059ed5b346ed1/logo-1615367026425-logo-v6.png', - }; + 'https://cutshort-data.s3.amazonaws.com/cloudfront/public/companies/5809d1d8af3059ed5b346ed1/logo-1615367026425-logo-v6.png' + } }) - ); - }; - setUsername(localStorage.getItem('username') || null); - fetchNotification(); - }, []); - - function dismissStatus() { - localStorage.setItem('dismissStatus', true); - setShowBanner(false); + ) + } + setUsername(localStorage.getItem('username') || null) + fetchNotification() + }, []) + + function dismissStatus () { + localStorage.setItem('dismissStatus', true) + setShowBanner(false) } const fetchNotifications = async () => { try { - const url = `${process.env.NEXT_PUBLIC_API_URL}/notification`; - const data = await request(url, 'GET', null); - console.log(data); + const url = `${process.env.NEXT_PUBLIC_API_URL}/notification` + const data = await request(url, 'GET', null) + console.log(data) if (data.success) { - setNotifications(data.body); - console.log(data); + setNotifications(data.body) + console.log(data) } else { - setNotifications(['Unable to get notification, try again']); + setNotifications(['Unable to get notification, try again']) } } catch (err) { - console.log(err); + console.log(err) } - }; + } const linkClass = (path) => `inline-flex items-center border-b-2 px-4 pt-1 text-md transition-all ${ router.pathname === path ? 'text-blue-500 border-blue-500' : 'text-gray-300 hover:text-gray-50 border-transparent' - }`; + }` return ( <> {isPopoverOpen && (
setShowSearchModal(false)} >

test

-

+
)} - + {({ open }) => ( <>
-
-
-
+
+
+
{/* Mobile menu button */} - - Open main menu - {open ? ( -
-
- +
+
-
+
{/* Ellipsis dropdown */} - + {({ open }) => ( <> - + - -
-
+ +
+
-

+

Create

-

+

Classrooms

@@ -345,18 +345,18 @@ export function StandardNav({ guestAllowed, alignCenter = true }) { )} - {/*search bar*/} -
+ {/* search bar */} +
setShowSearchModal(true)} > - + Search for anything
@@ -377,61 +377,63 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
{!guestAllowed && ( -
+
-

- {points} +

+ {points}

{/* Notification Bell Icon */} - + {({ open }) => ( <> - -