Merge pull request #40 from dgomie/debugging-v1beta

Debugging v1beta

Author: dgomie

public/img/shuffle.svg

@@ -132,14 +132,14 @@ export const ProfileSettings = ({ currentUser }) => {
           onChange={handleInputChange}
           disabled={!isEditing}
         />
-        <Input
+        {/* <Input
           id="email"
           name="email"
           label="Email"
           value={formData.email}
           onChange={handleInputChange}
           disabled={!isEditing}
-        />
+        /> */}
 
         <div className={styles.buttonContainer}>
           <Button variant="aquamarine" onClick={handleEditClick}>

src/components/profileSettings/ProfileSettings.js

@@ -17,36 +17,18 @@ export const RoundPageInfo = ({
     const now = new Date();
     const deadlineDate = new Date(deadline);
 
-    const isToday =
-      new Date(
-        now.getFullYear(),
-        now.getMonth(),
-        now.getDate() + 1
-      ).toDateString() === deadlineDate.toDateString();
-
+    const isToday = now.toDateString() === deadlineDate.toDateString();
     const isTomorrow =
       new Date(
         now.getFullYear(),
         now.getMonth(),
-        now.getDate() + 2
+        now.getDate() + 1
       ).toDateString() === deadlineDate.toDateString();
 
-    // const dayName = deadlineDate.toLocaleDateString('en-US', {
-    //   weekday: 'long',
-    // });
-    // const monthDay = deadlineDate.toLocaleDateString('en-US', {
-    //   month: 'numeric',
-    //   day: 'numeric',
-    // });
-
-    const previousDay = new Date(deadlineDate);
-    previousDay.setDate(deadlineDate.getDate() - 1);
-
-    const previousDayName = previousDay.toLocaleDateString('en-US', {
+    const dayName = deadlineDate.toLocaleDateString('en-US', {
       weekday: 'long',
     });
-
-    const previousMonthDay = previousDay.toLocaleDateString('en-US', {
+    const monthDay = deadlineDate.toLocaleDateString('en-US', {
       month: 'numeric',
       day: 'numeric',
     });
@@ -56,7 +38,7 @@ export const RoundPageInfo = ({
     } else if (isTomorrow) {
       return `${type} due tomorrow at midnight`;
     } else {
-      return `${type} due ${previousDayName} ${previousMonthDay} at midnight`;
+      return `${type} due ${dayName} ${monthDay} at midnight`;
     }
   };
 
@@ -116,4 +98,4 @@ export const RoundPageInfo = ({
       )}
     </div>
   );
-};
+};

src/components/roundPageInfo/RoundPageInfo.js

@@ -2,6 +2,8 @@ import React, { useMemo, useState } from 'react';
 import styles from './RoundSettingsModal.module.css';
 import Input from '@/components/input/Input';
 import Button from '@/components/button/Button';
+import Image from 'next/image';
+import { musicLeaguePrompts } from '@/data/defaultPrompts'; // Import prompts
 
 const RoundSettingsModal = ({
   editableRoundData,
@@ -13,7 +15,23 @@ const RoundSettingsModal = ({
   const [submissionError, setSubmissionError] = useState('');
   const [voteError, setVoteError] = useState('');
 
-  // Check if there are any changes between editableRoundData and originalRoundData
+  // Function to generate a random prompt
+  const handleShufflePrompt = () => {
+    if (musicLeaguePrompts.length === 0) {
+      setEditableRoundData({
+        ...editableRoundData,
+        prompt: 'No prompts available', // Fallback prompt
+      });
+      return;
+    }
+    const randomPrompt =
+      musicLeaguePrompts[Math.floor(Math.random() * musicLeaguePrompts.length)];
+    setEditableRoundData({
+      ...editableRoundData,
+      prompt: randomPrompt,
+    });
+  };
+
   const hasChanges = useMemo(() => {
     if (!editableRoundData || !originalRoundData) return false;
     return (
@@ -27,34 +45,37 @@ const RoundSettingsModal = ({
   const handleSubmissionDeadlineChange = (e) => {
     const newSubmissionDeadline = new Date(e.target.value).toISOString();
     const now = new Date().toISOString();
-  
+
     if (newSubmissionDeadline <= now) {
       setSubmissionError('Submission deadline must be a future date.');
       return;
     }
-  
-    if (editableRoundData.voteDeadline && newSubmissionDeadline >= editableRoundData.voteDeadline) {
+
+    if (
+      editableRoundData.voteDeadline &&
+      newSubmissionDeadline >= editableRoundData.voteDeadline
+    ) {
       setSubmissionError('');
       setVoteError('Vote deadline must be after the submission deadline.');
     } else {
       setVoteError('');
     }
-  
+
     setSubmissionError('');
     setEditableRoundData({
       ...editableRoundData,
       submissionDeadline: newSubmissionDeadline,
     });
   };
-  
+
   const handleVoteDeadlineChange = (e) => {
     const newVoteDeadline = new Date(e.target.value).toISOString();
-  
+
     if (newVoteDeadline <= editableRoundData.submissionDeadline) {
       setVoteError('Vote deadline must be after the submission deadline.');
       return;
     }
-  
+
     setVoteError('');
     setEditableRoundData({
       ...editableRoundData,
@@ -68,6 +89,7 @@ const RoundSettingsModal = ({
     <div className={styles.modal}>
       <div className={styles.modalContent}>
         <div className={styles.title}>Edit Round Settings</div>
+
         <Input
           id="prompt"
           name="prompt"
@@ -82,6 +104,19 @@ const RoundSettingsModal = ({
           }
           required
         />
+        <Button variant="aquamarine" onClick={handleShufflePrompt}>
+          <div className={styles.randomizeButtonContent}>
+            <Image
+              src="/img/shuffle.svg"
+              height={20}
+              width={20}
+              alt="shuffle"
+              className={styles.shuffleIcon}
+            />
+            Randomize Prompt
+          </div>
+        </Button>
+
         <Input
           id="submissionDeadline"
           name="submissionDeadline"

src/components/roundSettingsModal/RoundSettingsModal.js

@@ -26,6 +26,7 @@
   display: flex;
   justify-content: space-between;
   margin-top: 20px;
+  gap: .5rem;
 }
 
 .title {
@@ -39,4 +40,11 @@
   text-align: center;
   font-size: .85rem;
   font-weight: bold;
+}
+
+.randomizeButtonContent {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
 }