Accordion display of voting prompt (useful for voting)

heshammourad · Sep 18, 2024 · b6662bb · b6662bb
1 parent e7ac8df
commit b6662bb
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/react-ui/src/pages/contest/Contest.jsx b/react-ui/src/pages/contest/Contest.jsx
@@ -1,11 +1,14 @@
 /**
  * Voting and winners
  */
-
+import Accordion from '@material-ui/core/Accordion';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
 import Box from '@material-ui/core/Box';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
+import ExpandMore from '@material-ui/icons/ExpandMore';
 import clsx from 'clsx';
 import { useState, useEffect, useCallback } from 'react';
 import { forceCheck } from 'react-lazyload';
@@ -14,6 +17,7 @@ import { animateScroll } from 'react-scroll';
 
 import {
   EntryDescriptionDrawer,
+  FormattedContent,
   PageContainer,
   PageWithDrawer,
   RedditLogInDialog,
@@ -46,6 +50,10 @@ const useStyles = makeStyles((theme) => ({
   icon: {
     color: theme.palette.grey[700],
   },
+  prompt: {
+    backgroundColor: theme.palette.grey[200],
+    marginBottom: '20px',
+  },
 }));
 
 function Contest() {
@@ -60,6 +68,7 @@ function Contest() {
   const [selectedCategories, setSelectedCategories] = useState(
     state?.selectedCategories ?? [],
   );
+  const [isPromptOpen, setIsPromptOpen] = useState(false);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [drawerEntryId, setDrawerEntryId] = useState(null);
 
@@ -93,6 +102,10 @@ function Contest() {
     window.location.reload();
   }, []);
 
+  const togglePromptOpen = useCallback(() => {
+    setIsPromptOpen((prev) => !prev);
+  }, []);
+
   const toggleDrawerOpen = useCallback((isOpen) => {
     setDrawerEntryId(null);
     setIsDrawerOpen(isOpen);
@@ -166,7 +179,7 @@ function Contest() {
   const { headingVariant } = useContestSizing();
 
   const {
-    categories, isContestMode, name, votingWindowOpen, winners,
+    categories, isContestMode, name, votingWindowOpen, winners, prompt,
   } = contest;
 
   // Prevents display of stale, cached data
@@ -222,6 +235,20 @@ function Contest() {
           >
             {name}
           </Typography>
+
+          <Accordion
+            className={classes.prompt}
+            expanded={isPromptOpen}
+            onChange={togglePromptOpen}
+          >
+            <AccordionSummary expandIcon={<ExpandMore />}>
+              Click here to view the prompt that contestants were given
+            </AccordionSummary>
+            <AccordionDetails onClick={togglePromptOpen} style={{ cursor: 'pointer' }}>
+              <FormattedContent content={prompt} markdown />
+            </AccordionDetails>
+          </Accordion>
+
           {votingWindowOpen === false && (
             <ContestUnderReview {...{ isValidating, mutate }} />
           )}

diff --git a/react-ui/src/pages/home/Home.jsx b/react-ui/src/pages/home/Home.jsx
@@ -119,8 +119,8 @@ function Home() {
             , check out
             {' '}
             <InternalLink to="/contests">older contests</InternalLink>
-            , or view
-            the
+            , or view the
+            {' '}
             <InternalLink to="/hallOfFame">Hall of Fame</InternalLink>
             .
           </p>

diff --git a/server/api/contest.js b/server/api/contest.js
@@ -89,6 +89,7 @@ exports.get = async ({ params: { id }, username }, res) => {
          date,
          local_voting,
          name,
+         prompt,
          submission_end,
          submission_start,
          subtext,
@@ -108,6 +109,7 @@ exports.get = async ({ params: { id }, username }, res) => {
       date,
       localVoting,
       name,
+      prompt,
       submissionEnd,
       submissionStart,
       subtext,
@@ -120,6 +122,7 @@ exports.get = async ({ params: { id }, username }, res) => {
       isContestMode: false,
       localVoting,
       name,
+      prompt,
       requestId: uuidv4(),
       submissionEnd,
       submissionStart,