From 5ef2568aa518724ce23c6feef93e186b7100eb4c Mon Sep 17 00:00:00 2001
From: Joao Ramos <joaomframos.1@gmail.com>
Date: Sun, 24 Mar 2024 23:42:02 +0000
Subject: [PATCH] Added support for PDF bulletpoints

---
 src/exams/pdf/list.item.tsx         | 24 ++++++++++++
 src/exams/pdf/test.report.tsx       | 59 +++++++++++++++++++++++------
 src/interfaces/module.scores.ts     |  1 +
 src/pages/api/stats/[id]/export.tsx |  2 +
 4 files changed, 75 insertions(+), 11 deletions(-)
 create mode 100644 src/exams/pdf/list.item.tsx

diff --git a/src/exams/pdf/list.item.tsx b/src/exams/pdf/list.item.tsx
new file mode 100644
index 00000000..8652d6ae
--- /dev/null
+++ b/src/exams/pdf/list.item.tsx
@@ -0,0 +1,24 @@
+import { Text, View, StyleSheet } from "@react-pdf/renderer";
+
+const styles = StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  bullet: {
+    height: "100%",
+  },
+});
+
+const ListItem = ({ text, textStyle }: { text: string, textStyle: any[] }) => {
+  return (
+    <View style={styles.row}>
+      <View style={styles.bullet}>
+        <Text style={textStyle}>{"\u2022" + " "}</Text>
+      </View>
+      <Text style={textStyle}>{text}</Text>
+    </View>
+  );
+};
+
+export default ListItem;
diff --git a/src/exams/pdf/test.report.tsx b/src/exams/pdf/test.report.tsx
index df1479d7..58d51a06 100644
--- a/src/exams/pdf/test.report.tsx
+++ b/src/exams/pdf/test.report.tsx
@@ -6,11 +6,17 @@ import { styles } from "./styles";
 
 import { StyleSheet } from "@react-pdf/renderer";
 import TestReportFooter from "./test.report.footer";
+import ListItem from "./list.item";
+
 const customStyles = StyleSheet.create({
   testDetails: {
     display: "flex",
     gap: 4,
   },
+  testDetailsContainer: {
+    display: "flex",
+    gap: 16,
+  },
 });
 
 interface Props {
@@ -124,7 +130,7 @@ const TestReport = ({
           </View>
         </View>
         <View style={[{ paddingTop: 30 }, styles.separator]}></View>
-        <TestReportFooter userId={id}/>
+        <TestReportFooter userId={id} />
       </Page>
       <Page style={styles.body}>
         <View>
@@ -149,15 +155,46 @@ const TestReport = ({
               .filter(
                 ({ suggestions, evaluation }) => suggestions || evaluation
               )
-              .map(({ module, suggestions, evaluation }) => (
-                <View key={module} style={customStyles.testDetails}>
-                  <Text style={[...defaultSkillsTitleStyle, styles.textBold]}>
-                    {module}
-                  </Text>
-                  <Text style={defaultSkillsTextStyle}>{evaluation}</Text>
-                  <Text style={defaultSkillsTextStyle}>{suggestions}</Text>
-                </View>
-              ))}
+              .map(
+                ({
+                  module,
+                  suggestions,
+                  evaluation,
+                  bullet_points = [],
+                }) => (
+                  <View key={module} style={customStyles.testDetailsContainer}>
+                    <View style={customStyles.testDetails}>
+                      <Text
+                        style={[...defaultSkillsTitleStyle, styles.textBold]}
+                      >
+                        {module}
+                      </Text>
+                      <Text style={defaultSkillsTextStyle}>{evaluation}</Text>
+                      <Text style={defaultSkillsTextStyle}>{suggestions}</Text>
+                    </View>
+                    <View style={customStyles.testDetails}>
+                      {bullet_points.length > 0 && (
+                        <>
+                          <Text
+                            style={defaultSkillsTitleStyle}
+                          >
+                            How to Improve:
+                          </Text>
+                          <View>
+                            {bullet_points.map((text: string) => (
+                              <ListItem
+                                key={text}
+                                text={text}
+                                textStyle={defaultSkillsTextStyle}
+                              />
+                            ))}
+                          </View>
+                        </>
+                      )}
+                    </View>
+                  </View>
+                )
+              )}
           </View>
           <View style={styles.alignRightRow}>
             <Image src={qrcode} style={styles.qrcode} />
@@ -165,7 +202,7 @@ const TestReport = ({
         </View>
         <View style={[{ paddingBottom: 30 }, styles.separator]}></View>
         <View style={{ flexGrow: 1 }}></View>
-        <TestReportFooter userId={id}/>
+        <TestReportFooter userId={id} />
       </Page>
     </Document>
   );
diff --git a/src/interfaces/module.scores.ts b/src/interfaces/module.scores.ts
index 144ed6aa..f46e61e5 100644
--- a/src/interfaces/module.scores.ts
+++ b/src/interfaces/module.scores.ts
@@ -8,6 +8,7 @@ export interface ModuleScore {
 	png?: string;
 	evaluation?: string;
 	suggestions?: string;
+	bullet_points?: string[];
 }
 
 export interface StudentData {
diff --git a/src/pages/api/stats/[id]/export.tsx b/src/pages/api/stats/[id]/export.tsx
index ce71d899..7906da63 100644
--- a/src/pages/api/stats/[id]/export.tsx
+++ b/src/pages/api/stats/[id]/export.tsx
@@ -79,6 +79,7 @@ interface SkillsFeedbackRequest {
 interface SkillsFeedbackResponse extends SkillsFeedbackRequest {
 	evaluation: string;
 	suggestions: string;
+	bullet_points?: string[];
 }
 
 const getSkillsFeedback = async (sections: SkillsFeedbackRequest[]) => {
@@ -225,6 +226,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 							...result,
 							evaluation: feedback?.evaluation,
 							suggestions: feedback?.suggestions,
+							bullet_points: feedback?.bullet_points,
 						};
 					}