diff --git a/src/pages/create.jsx b/src/pages/create.jsx index 452e7453..8559b1fa 100644 --- a/src/pages/create.jsx +++ b/src/pages/create.jsx @@ -1,186 +1,186 @@ -import Head from 'next/head'; -import { useState, useEffect } from 'react'; -import { StandardNav } from '@/components/StandardNav'; -import { Footer } from '@/components/Footer'; -import { ChallengeCard } from '@/components/create/ChallengeCard'; -import Link from 'next/link'; -import { motion, AnimatePresence } from 'framer-motion'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'; -import Typography from '@mui/material/Typography'; -import Popover from '@mui/material/Popover'; -import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'; -import { ArrowRightIcon } from '@heroicons/react/20/solid'; -import request from "@/utils/request"; -import Menu from '@/components/editor/Menu'; -import Skeleton from 'react-loading-skeleton'; -import { Popover as HeadlessPopover } from '@headlessui/react'; -import Modal from '@mui/material/Modal'; -import Box from '@mui/material/Box'; - -export default function Create() { - const [activeTab, setActiveTab] = useState('unverified'); - const [challenges, setChallenges] = useState([]); - const [hasChallenges, setHasChallenges] = useState(false); - const [username, setUsername] = useState(''); - const [date, setDate] = useState(''); - const [title, setTitle] = useState('Unverified Challenges'); +import Head from 'next/head' +import { useState, useEffect } from 'react' +import { StandardNav } from '@/components/StandardNav' +import { Footer } from '@/components/Footer' +import { ChallengeCard } from '@/components/create/ChallengeCard' +import Link from 'next/link' +import { motion, AnimatePresence } from 'framer-motion' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faInfoCircle } from '@fortawesome/free-solid-svg-icons' +import Typography from '@mui/material/Typography' +import Popover from '@mui/material/Popover' +import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state' +import { ArrowRightIcon } from '@heroicons/react/20/solid' +import request from '@/utils/request' +import Menu from '@/components/editor/Menu' +import Skeleton from 'react-loading-skeleton' +import { Popover as HeadlessPopover } from '@headlessui/react' +import Modal from '@mui/material/Modal' +import Box from '@mui/material/Box' + +export default function Create () { + const [activeTab, setActiveTab] = useState('unverified') + const [challenges, setChallenges] = useState([]) + const [hasChallenges, setHasChallenges] = useState(false) + const [username, setUsername] = useState('') + const [date, setDate] = useState('') + const [title, setTitle] = useState('Unverified Challenges') const [infoText, setInfoText] = useState( 'You cannot edit unverified challenges. Please wait for admins to approve these!' - ); + ) - const [isCreating, setIsCreating] = useState(false); - const [isOpen, setIsOpen] = useState(false); - const [showPopup, setShowPopup] = useState(false); - const [loading, setLoading] = useState(true); + const [isCreating, setIsCreating] = useState(false) + const [isOpen, setIsOpen] = useState(false) + const [showPopup, setShowPopup] = useState(false) + const [loading, setLoading] = useState(true) const toggleDropdown = () => { - setIsOpen(!isOpen); - }; + setIsOpen(!isOpen) + } useEffect(() => { - const urlParams = new URLSearchParams(window.location.search); - const success = urlParams.get('success'); + const urlParams = new URLSearchParams(window.location.search) + const success = urlParams.get('success') if (success === 'true') { - document.getElementById('saved').classList.remove('hidden'); + document.getElementById('saved').classList.remove('hidden') } - }, []); + }, []) - const [writeups, setWriteups] = useState([]); + const [writeups, setWriteups] = useState([]) useEffect(() => { - setLoading(true); + setLoading(true) try { - request(`${process.env.NEXT_PUBLIC_API_URL}/stats/creator`, "GET", null) + request(`${process.env.NEXT_PUBLIC_API_URL}/stats/creator`, 'GET', null) .then((data) => { setStats([ { id: 1, name: 'Challenges Created', - value: data.challengesCreated, + value: data.challengesCreated }, { id: 2, name: 'Challenge Views', - value: data.challengeViews, + value: data.challengeViews }, { id: 3, name: 'Challenge Attempts', - value: data.challengeAttempts, + value: data.challengeAttempts }, { id: 4, name: 'Challenge Solves', - value: data.challengeSolves, + value: data.challengeSolves } - ]); - setLoading(false); + ]) + setLoading(false) }) .catch((err) => { - console.log(err); - setLoading(false); - }); + console.log(err) + setLoading(false) + }) } catch { - setLoading(false); + setLoading(false) } - }, []); + }, []) const [stats, setStats] = useState([ { id: 1, name: 'Challenges Created', value: '0' }, { id: 2, name: 'Challenge Views', value: '0' }, { id: 3, name: 'Challenge Attempts', value: '0' }, - { id: 4, name: 'Challenge Solves', value: '0' }, - ]); + { id: 4, name: 'Challenge Solves', value: '0' } + ]) - const [solvedChallenges, setSolvedChallenges] = useState([]); + const [solvedChallenges, setSolvedChallenges] = useState([]) useEffect(() => { - setLoading(true); + setLoading(true) try { - request(`${process.env.NEXT_PUBLIC_API_URL}/account`, "GET", null) + request(`${process.env.NEXT_PUBLIC_API_URL}/account`, 'GET', null) .then((data) => { - setUsername(data.username); - fetchWriteups(data.username); - setDate(data.createdAt); - request(`${process.env.NEXT_PUBLIC_API_URL}/users/${data.username}/solvedChallenges`, "GET", null).then(challenges => { - setSolvedChallenges(challenges); - setLoading(false); - }); + setUsername(data.username) + fetchWriteups(data.username) + setDate(data.createdAt) + request(`${process.env.NEXT_PUBLIC_API_URL}/users/${data.username}/solvedChallenges`, 'GET', null).then(challenges => { + setSolvedChallenges(challenges) + setLoading(false) + }) }) .catch((err) => { - console.log(err); - setLoading(false); - }); + console.log(err) + setLoading(false) + }) - fetchChallenges("unverified"); + fetchChallenges('unverified') } catch (error) { - setLoading(false); + setLoading(false) } - }, [activeTab]); + }, [activeTab]) const fetchWriteups = async (username) => { try { - const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/users/${username}/writeups`, "GET", null); + const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/users/${username}/writeups`, 'GET', null) if (Array.isArray(response) && response.length > 0) { - setWriteups(response); + setWriteups(response) console.log(response) } else { - setWriteups([]); + setWriteups([]) } } catch (error) { } - }; + } const fetchChallenges = async (selection) => { - let response = []; + let response = [] try { switch (selection) { case 'unverified': - setTitle('Unverified'); + setTitle('Unverified') setInfoText( 'Please wait for admins to approve unverified challenges!' - ); - response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account/challenges?state=unverified`, "GET", null); - break; + ) + response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account/challenges?state=unverified`, 'GET', null) + break case 'pending': - setTitle('Pending Changes'); - setInfoText('These challenges are awaiting changes!'); - response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account/challenges?state=pending`, "GET", null); - break; + setTitle('Pending Changes') + setInfoText('These challenges are awaiting changes!') + response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account/challenges?state=pending`, 'GET', null) + break case 'published': - setTitle('Published'); + setTitle('Published') setInfoText( 'These challenges are live! Share them with your friends!' - ); - response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account/challenges?state=published`, "GET", null); - break; + ) + response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account/challenges?state=published`, 'GET', null) + break default: - setTitle('Unverified'); - response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account/challenges?state=verified`, "GET", null); + setTitle('Unverified') + response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account/challenges?state=verified`, 'GET', null) } } catch (error) { } if (Array.isArray(response) && response.length > 0) { - setChallenges(response); - setHasChallenges(true); + setChallenges(response) + setHasChallenges(true) } else { - setChallenges([]); - setHasChallenges(false); + setChallenges([]) + setHasChallenges(false) } - }; + } - function InfoPopup({ activeTab }) { + function InfoPopup ({ activeTab }) { return ( - + {(popupState) => (
-
+
@@ -190,21 +190,21 @@ export default function Create() { {...bindPopover(popupState)} anchorOrigin={{ vertical: 'center', - horizontal: 'right', + horizontal: 'right' }} transformOrigin={{ vertical: 'center', - horizontal: 'left', + horizontal: 'left' }} sx={{ '& .MuiPaper-root': { backgroundColor: '#323232', - border: '1px solid #363636', - }, + border: '1px solid #363636' + } }} > {infoText} @@ -213,37 +213,37 @@ export default function Create() {
)} - ); + ) } - const [openModal, setOpenModal] = useState(false); - const [modalContent, setModalContent] = useState(''); + const [openModal, setOpenModal] = useState(false) + const [modalContent, setModalContent] = useState('') const handleOpenModal = (content) => { - setModalContent(content); - setOpenModal(true); - }; + setModalContent(content) + setOpenModal(true) + } const handleCloseModal = () => { - setOpenModal(false); - setModalContent(''); - }; + setOpenModal(false) + setModalContent('') + } - const [notifications, setNotifications] = useState([]); + const [notifications, setNotifications] = useState([]) useEffect(() => { const fetchNotifications = async () => { try { - const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account/notifications`, "GET", null); - const challengeNotifications = response.filter(notification => notification.type === 'CHALLENGE'); - setNotifications(challengeNotifications); + const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account/notifications`, 'GET', null) + const challengeNotifications = response.filter(notification => notification.type === 'CHALLENGE') + setNotifications(challengeNotifications) } catch (error) { - console.error('Error fetching notifications:', error); + console.error('Error fetching notifications:', error) } - }; + } - fetchNotifications(); - }, []); + fetchNotifications() + }, []) return ( <> @@ -256,69 +256,61 @@ export default function Create() {
-

+
+ className='fixed top-0 left-0 mt-10 h-full w-1/2 ' + aria-hidden='true' + /> - +