add ability to star questions

qbreader · Jul 27, 2024 · aa1209b · aa1209b
1 parent 7537c23
commit aa1209b
Show file tree

Hide file tree

Showing 9 changed files with 167 additions and 21 deletions.
diff --git a/client/database/BonusCard.js b/client/database/BonusCard.js
@@ -1,6 +1,7 @@
 import account from '../scripts/accounts.js';
 import { stringifyBonus } from './stringify.js';
 import { getBonusPartLabel } from '../scripts/utilities/index.js';
+import Star from './Star.js';
 export default function BonusCard({
   bonus,
   highlightedBonus,
@@ -90,19 +91,27 @@ export default function BonusCard({
   }, /*#__PURE__*/React.createElement("b", {
     className: "clickable",
     onClick: clickToCopy
-  }, bonus.set.name, " | ", bonus.category, " | ", bonus.subcategory, " ", bonus.alternate_subcategory ? ' (' + bonus.alternate_subcategory + ')' : '', " | ", bonus.difficulty), /*#__PURE__*/React.createElement("b", {
+  }, bonus.set.name, " | ", bonus.category, " | ", bonus.subcategory, " ", bonus.alternate_subcategory ? ' (' + bonus.alternate_subcategory + ')' : '', " | ", bonus.difficulty), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("b", {
     className: "clickable",
     "data-bs-toggle": "collapse",
     "data-bs-target": `#question-${_id}`
-  }, "Packet ", bonus.packet.number, " | Question ", bonus.number)), /*#__PURE__*/React.createElement("div", {
+  }, "Packet ", bonus.packet.number, " |"), /*#__PURE__*/React.createElement("span", null, " "), /*#__PURE__*/React.createElement(Star, {
+    _id: _id,
+    questionType: "bonus",
+    initiallyStarred: false
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "card-container collapse show",
     id: `question-${_id}`
   }, /*#__PURE__*/React.createElement("div", {
     className: "card-body",
     style: {
       fontSize: `${fontSize}px`
     }
-  }, /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: bonus.leadin.substring(0, 3) === '<b>' ? 'bold' : 'normal'
+    }
+  }, bonus.number, ". "), /*#__PURE__*/React.createElement("span", {
     dangerouslySetInnerHTML: {
       __html: highlightedBonus.leadin
     }
@@ -123,7 +132,7 @@ export default function BonusCard({
     "data-bs-target": "#bonus-stats-modal"
   }, /*#__PURE__*/React.createElement("small", {
     className: "text-muted"
-  }, packetName ? 'Packet ' + packetName : /*#__PURE__*/React.createElement("span", null, "\xA0")), /*#__PURE__*/React.createElement("small", {
+  }, packetName ? 'Packet ' + packetName + '' : /*#__PURE__*/React.createElement("span", null, "\xA0")), /*#__PURE__*/React.createElement("small", {
     className: "text-muted float-end"
   }, /*#__PURE__*/React.createElement("a", {
     href: "#",

diff --git a/client/database/BonusCard.jsx b/client/database/BonusCard.jsx
@@ -1,6 +1,7 @@
 import account from '../scripts/accounts.js';
 import { stringifyBonus } from './stringify.js';
 import { getBonusPartLabel } from '../scripts/utilities/index.js';
+import Star from './Star.js';
 
 export default function BonusCard ({ bonus, highlightedBonus, hideAnswerlines, showCardFooter, fontSize = 16 }) {
   const _id = bonus._id;
@@ -91,13 +92,18 @@ export default function BonusCard ({ bonus, highlightedBonus, hideAnswerlines, s
         <b className='clickable' onClick={clickToCopy}>
           {bonus.set.name} | {bonus.category} | {bonus.subcategory} {bonus.alternate_subcategory ? ' (' + bonus.alternate_subcategory + ')' : ''} | {bonus.difficulty}
         </b>
-        <b className='clickable' data-bs-toggle='collapse' data-bs-target={`#question-${_id}`}>
-          Packet {bonus.packet.number} | Question {bonus.number}
-        </b>
+        <span>
+          <b className='clickable' data-bs-toggle='collapse' data-bs-target={`#question-${_id}`}>
+            Packet {bonus.packet.number} |
+          </b>
+          <span> </span>
+          <Star _id={_id} questionType='bonus' initiallyStarred={false} />
+        </span>
       </div>
       <div className='card-container collapse show' id={`question-${_id}`}>
         <div className='card-body' style={{ fontSize: `${fontSize}px` }}>
-          <p dangerouslySetInnerHTML={{ __html: highlightedBonus.leadin }} />
+          <span style={{ fontWeight: bonus.leadin.substring(0, 3) === '<b>' ? 'bold' : 'normal' }}>{bonus.number}. </span>
+          <span dangerouslySetInnerHTML={{ __html: highlightedBonus.leadin }} />
           {indices.map((i) =>
             <div key={`${bonus._id}-${i}`}>
               <hr />
@@ -116,7 +122,9 @@ export default function BonusCard ({ bonus, highlightedBonus, hideAnswerlines, s
           )}
         </div>
         <div className={`card-footer clickable ${!showCardFooter && 'd-none'}`} onClick={showBonusStats} data-bs-toggle='modal' data-bs-target='#bonus-stats-modal'>
-          <small className='text-muted'>{packetName ? 'Packet ' + packetName : <span>&nbsp;</span>}</small>
+          <small className='text-muted'>
+            {packetName ? 'Packet ' + packetName + '' : <span>&nbsp;</span>}
+          </small>
           <small className='text-muted float-end'>
             <a href='#' onClick={onClick} id={`report-question-${_id}`} data-bs-toggle='modal' data-bs-target='#report-question-modal'>
               Report Question

diff --git a/client/database/Star.js b/client/database/Star.js
@@ -0,0 +1,54 @@
+import star from '../scripts/auth/star.js';
+const starredHTML = /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  fill: "currentColor",
+  class: "bi bi-star-fill",
+  viewBox: "0 0 20 20"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
+}));
+const unstarredHTML = /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  fill: "currentColor",
+  class: "bi bi-star",
+  viewBox: "0 0 20 20"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"
+}));
+export default function Star({
+  _id,
+  questionType,
+  initiallyStarred
+}) {
+  const [starred, setStarred] = React.useState(initiallyStarred);
+  async function onClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    let successful = false;
+    if (starred) {
+      if (questionType === 'tossup') {
+        successful = await star.unstarTossup(_id);
+      } else {
+        successful = await star.unstarBonus(_id);
+      }
+    } else {
+      if (questionType === 'tossup') {
+        successful = await star.starTossup(_id);
+      } else {
+        successful = await star.starBonus(_id);
+      }
+    }
+    if (successful) {
+      setStarred(!starred);
+    }
+  }
+  return /*#__PURE__*/React.createElement("a", {
+    href: "#",
+    id: `star-${_id}`,
+    onClick: onClick
+  }, starred ? starredHTML : unstarredHTML);
+}
diff --git a/client/database/Star.jsx b/client/database/Star.jsx
@@ -0,0 +1,44 @@
+import star from '../scripts/auth/star.js';
+
+const starredHTML = (
+  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='currentColor' class='bi bi-star-fill' viewBox='0 0 20 20'>
+    <path d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z' />
+  </svg>
+);
+const unstarredHTML = (
+  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='currentColor' class='bi bi-star' viewBox='0 0 20 20'>
+    <path d='M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z' />
+  </svg>
+);
+
+export default function Star ({ _id, questionType, initiallyStarred }) {
+  const [starred, setStarred] = React.useState(initiallyStarred);
+
+  async function onClick (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    let successful = false;
+    if (starred) {
+      if (questionType === 'tossup') {
+        successful = await star.unstarTossup(_id);
+      } else {
+        successful = await star.unstarBonus(_id);
+      }
+    } else {
+      if (questionType === 'tossup') {
+        successful = await star.starTossup(_id);
+      } else {
+        successful = await star.starBonus(_id);
+      }
+    }
+    if (successful) {
+      setStarred(!starred);
+    }
+  }
+
+  return (
+    <a href='#' id={`star-${_id}`} onClick={onClick}>
+      {starred ? starredHTML : unstarredHTML}
+    </a>
+  );
+}
diff --git a/client/database/TossupCard.js b/client/database/TossupCard.js
@@ -1,5 +1,6 @@
 import account from '../scripts/accounts.js';
 import { stringifyTossup } from './stringify.js';
+import Star from './Star.js';
 export default function TossupCard({
   tossup,
   highlightedTossup,
@@ -85,11 +86,15 @@ export default function TossupCard({
   }, /*#__PURE__*/React.createElement("b", {
     className: "clickable",
     onClick: clickToCopy
-  }, tossup.set.name, " | ", tossup.category, " | ", tossup.subcategory, " ", tossup.alternate_subcategory ? ' (' + tossup.alternate_subcategory + ')' : '', " | ", tossup.difficulty), /*#__PURE__*/React.createElement("b", {
+  }, tossup.set.name, " | ", tossup.category, " | ", tossup.subcategory, " ", tossup.alternate_subcategory ? ' (' + tossup.alternate_subcategory + ')' : '', " | ", tossup.difficulty), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("b", {
     className: "clickable",
     "data-bs-toggle": "collapse",
     "data-bs-target": `#question-${_id}`
-  }, "Packet ", tossup.packet.number, " | Question ", tossup.number)), /*#__PURE__*/React.createElement("div", {
+  }, "Packet ", tossup.packet.number, " |"), /*#__PURE__*/React.createElement("span", null, " "), /*#__PURE__*/React.createElement(Star, {
+    _id: _id,
+    questionType: "tossup",
+    initiallyStarred: false
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "card-container collapse show",
     id: `question-${_id}`
   }, /*#__PURE__*/React.createElement("div", {
@@ -98,6 +103,10 @@ export default function TossupCard({
       fontSize: `${fontSize}px`
     }
   }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: tossup.question.substring(0, 3) === '<b>' ? 'bold' : 'normal'
+    }
+  }, tossup.number, ". "), /*#__PURE__*/React.createElement("span", {
     dangerouslySetInnerHTML: {
       __html: highlightedTossup.question
     }
@@ -114,7 +123,7 @@ export default function TossupCard({
     "data-bs-target": "#tossup-stats-modal"
   }, /*#__PURE__*/React.createElement("small", {
     className: "text-muted"
-  }, packetName ? 'Packet ' + packetName : /*#__PURE__*/React.createElement("span", null, "\xA0")), /*#__PURE__*/React.createElement("small", {
+  }, packetName ? 'Packet ' + packetName + '' : /*#__PURE__*/React.createElement("span", null, "\xA0")), /*#__PURE__*/React.createElement("small", {
     className: "text-muted float-end"
   }, /*#__PURE__*/React.createElement("a", {
     href: "#",

diff --git a/client/database/TossupCard.jsx b/client/database/TossupCard.jsx
@@ -1,5 +1,6 @@
 import account from '../scripts/accounts.js';
 import { stringifyTossup } from './stringify.js';
+import Star from './Star.js';
 
 export default function TossupCard ({ tossup, highlightedTossup, hideAnswerline, showCardFooter, fontSize = 16 }) {
   const _id = tossup._id;
@@ -85,20 +86,27 @@ export default function TossupCard ({ tossup, highlightedTossup, hideAnswerline,
         <b className='clickable' onClick={clickToCopy}>
           {tossup.set.name} | {tossup.category} | {tossup.subcategory} {tossup.alternate_subcategory ? ' (' + tossup.alternate_subcategory + ')' : ''} | {tossup.difficulty}
         </b>
-        <b className='clickable' data-bs-toggle='collapse' data-bs-target={`#question-${_id}`}>
-          Packet {tossup.packet.number} | Question {tossup.number}
-        </b>
+        <span>
+          <b className='clickable' data-bs-toggle='collapse' data-bs-target={`#question-${_id}`}>
+            Packet {tossup.packet.number} |
+          </b>
+          <span> </span>
+          <Star _id={_id} questionType='tossup' initiallyStarred={false} />
+        </span>
       </div>
       <div className='card-container collapse show' id={`question-${_id}`}>
         <div className='card-body' style={{ fontSize: `${fontSize}px` }}>
+          <span style={{ fontWeight: tossup.question.substring(0, 3) === '<b>' ? 'bold' : 'normal' }}>{tossup.number}. </span>
           <span dangerouslySetInnerHTML={{ __html: highlightedTossup.question }} />
           <hr className='my-3' />
           <div>
             <b>ANSWER:</b> <span dangerouslySetInnerHTML={{ __html: hideAnswerline ? '' : highlightedTossup?.answer }} />
           </div>
         </div>
         <div className={`card-footer clickable ${!showCardFooter && 'd-none'}`} onClick={showTossupStats} data-bs-toggle='modal' data-bs-target='#tossup-stats-modal'>
-          <small className='text-muted'>{packetName ? 'Packet ' + packetName : <span>&nbsp;</span>}</small>
+          <small className='text-muted'>
+            {packetName ? 'Packet ' + packetName + '' : <span>&nbsp;</span>}
+          </small>
           <small className='text-muted float-end'>
             <a href='#' onClick={onClick} id={`report-question-${_id}`} data-bs-toggle='modal' data-bs-target='#report-question-modal'>
               Report Question

diff --git a/client/database/index.html b/client/database/index.html
@@ -65,6 +65,14 @@
     </nav>
 
     <div class="container-xl mt-3 mb-4">
+        <div class="toast-container position-fixed top-0 end-0 p-3">
+            <div id="star-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+                <div class="toast-header">
+                    <strong class="me-auto">You must be logged in to star questions.</strong>
+                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                </div>
+            </div>
+        </div>
         <div class="row">
             <div class="col-12">
                 <p class="lead">

diff --git a/client/scripts/auth/star.js b/client/scripts/auth/star.js
@@ -39,8 +39,8 @@ export default class star {
     });
   }
 
-  static unstarBonus (bonusId) {
-    fetch('/auth/stars/unstar-bonus', {
+  static async unstarBonus (bonusId) {
+    return fetch('/auth/stars/unstar-bonus', {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ bonus_id: bonusId })
@@ -51,13 +51,15 @@ export default class star {
       } else if (!response.ok) {
         window.alert('There was an error unstarring the bonus.');
       }
+      return response.ok;
     }).catch(_error => {
       window.alert('There was an error unstarring the bonus.');
+      return false;
     });
   }
 
-  static unstarTossup (tossupId) {
-    fetch('/auth/stars/unstar-tossup', {
+  static async unstarTossup (tossupId) {
+    return fetch('/auth/stars/unstar-tossup', {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ tossup_id: tossupId })
@@ -68,8 +70,10 @@ export default class star {
       } else if (!response.ok) {
         window.alert('There was an error unstarring the bonus.');
       }
+      return response.ok;
     }).catch(_error => {
       window.alert('There was an error unstarring the bonus.');
+      return false;
     });
   }
 

diff --git a/package.json b/package.json
@@ -58,7 +58,9 @@
         "ignore": [
             "client/bootstrap/*",
             "client/admin/category-reports.js",
-            "client/database/index.js"
+            "client/database/index.js",
+            "client/database/BonusCard.js",
+            "client/database/TossupCard.js"
         ]
     }
 }