From 100786ae9a6a74084e0eb8e5aadd4fbacdfe45f0 Mon Sep 17 00:00:00 2001
From: Lorenzo Corallo <66379281+lorenzocorallo@users.noreply.github.com>
Date: Tue, 13 Feb 2024 01:18:17 +0100
Subject: [PATCH] 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 <fgrandi30@gmail.com>
---
 scripts/database.ts               |  5 ++++-
 src/components/Util/Question.tsx  | 34 +++++++++++++++++++++++++++++++
 src/components/pages/QPreview.tsx |  1 +
 src/utils/database.ts             |  1 +
 4 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/scripts/database.ts b/scripts/database.ts
index 6c0085a..fe1e1c7 100644
--- a/scripts/database.ts
+++ b/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) => {
diff --git a/src/components/Util/Question.tsx b/src/components/Util/Question.tsx
index 413e9dc..82d1a7b 100644
--- a/src/components/Util/Question.tsx
+++ b/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('')
+}
diff --git a/src/components/pages/QPreview.tsx b/src/components/pages/QPreview.tsx
index eae4fa4..60b16da 100644
--- a/src/components/pages/QPreview.tsx
+++ b/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>
   )
 }
diff --git a/src/utils/database.ts b/src/utils/database.ts
index 0a5254a..95237ee 100644
--- a/src/utils/database.ts
+++ b/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