feat: render question tags (results, q/db-preview) (#110)

* feat: render question tags (results, q/db-preview)

* chore(lint): remove unused import

* feat: add `tag` db column, conditionally render tags section

* fix: tags field may be undefined

* fix: set `tag` default to undefined

* fix: trim tags

---------

Co-authored-by: Federico Grandi <[email protected]>

scripts/database.ts

@@ -137,7 +137,10 @@ async function getParsedSheets() {
       correct: r.rispostaCorretta?.toLowerCase(),
       attachments:
         DriveClient.matchFileIds(r.immaginiQuesito || '') || undefined,
-      validated: (r.validato as string | undefined)?.toLowerCase() == 'sì'
+      validated: (r.validato as string | undefined)?.toLowerCase() == 'sì',
+      tags: r.tag
+        ? (r.tag as string).split(';').map((s) => s.trim())
+        : undefined
     }))
 
     res['com'] = res['com']?.map((q, _, arr) => {

src/components/Util/Question.tsx

@@ -3,6 +3,7 @@ import { Question as IQuestion } from '../../utils/database'
 import { StyleSheet } from '../../utils/style'
 import QuestionAttachments from './QuestionAttachments'
 import RenderedText from './RenderedText'
+import { FaAnchor } from 'react-icons/fa'
 
 const styles = StyleSheet.create({
   question: {
@@ -21,6 +22,20 @@ const styles = StyleSheet.create({
   icon: {
     width: '10px',
     height: '10px'
+  },
+  tagsContainer: {
+    borderTop: '1px solid #b1b1b1',
+    borderBottom: '1px solid #b1b1b1',
+    borderColor: 'gray',
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: 16,
+    padding: '12px 0',
+    gap: 8
+  },
+  tags: {
+    margin: 0,
+    fontStyle: 'italic'
   }
 })
 
@@ -77,6 +92,25 @@ export default function Question({
           </p>
         )
       })}
+
+      {q.tags && q.tags.length > 0 && (
+        <div style={styles.tagsContainer}>
+          <FaAnchor />
+          <p style={styles.tags}>{concatTags(q.tags)}</p>
+        </div>
+      )}
     </div>
   )
 }
+
+function concatTags(tagsArr: string[]): string {
+  return tagsArr
+    .map((tag, i) => {
+      const isFirstTag = i === 0
+      const isLastTag = i === tagsArr.length - 1
+      if (isFirstTag) return `${tag[0].toUpperCase()}${tag.slice(1)}; `
+      if (isLastTag) return `${tag}.`
+      return `${tag}; `
+    })
+    .join('')
+}

src/components/pages/QPreview.tsx

@@ -31,6 +31,7 @@ export default function QPreview(props: Props) {
         onChange={(v) => setIsCustom(v === 'custom')}
       />
       {isCustom ? <CustomQ /> : <DatabaseQ {...props} />}
+      <br />
     </div>
   )
 }

src/utils/database.ts

@@ -21,6 +21,7 @@ export interface Question {
   correct: AnswerLetter
   attachments: string[]
   validated: boolean
+  tags?: string[]
 
   // These are only present for COM questions
   sub?: string