From 68fb5e5bc72a1582d9f108c056c4461f93428c95 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Mon, 18 Sep 2023 08:16:56 +0100
Subject: [PATCH] Updated a problem with the rendering of the Solutions

---
 src/components/Solutions/FillBlanks.tsx     | 13 +++--
 src/components/Solutions/MatchSentences.tsx | 31 ++++++-----
 src/components/Solutions/MultipleChoice.tsx |  2 +-
 src/components/Solutions/TrueFalse.tsx      | 61 +++++++++++----------
 4 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/src/components/Solutions/FillBlanks.tsx b/src/components/Solutions/FillBlanks.tsx
index 598c770c..77c7aa40 100644
--- a/src/components/Solutions/FillBlanks.tsx
+++ b/src/components/Solutions/FillBlanks.tsx
@@ -85,12 +85,13 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
 					))}
 				</span>
 				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
-					{text.split("\\n").map((line, index) => (
-						<p key={index}>
-							{renderLines(line)}
-							<br />
-						</p>
-					))}
+					{userSolutions &&
+						text.split("\\n").map((line, index) => (
+							<p key={index}>
+								{renderLines(line)}
+								<br />
+							</p>
+						))}
 				</span>
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
diff --git a/src/components/Solutions/MatchSentences.tsx b/src/components/Solutions/MatchSentences.tsx
index d0582c99..c2537202 100644
--- a/src/components/Solutions/MatchSentences.tsx
+++ b/src/components/Solutions/MatchSentences.tsx
@@ -74,21 +74,22 @@ export default function MatchSentencesSolutions({
 							</div>
 						))}
 					</div>
-					{sentences.map((sentence, index) => (
-						<Xarrow
-							key={index}
-							start={sentence.id}
-							end={sentence.solution}
-							lineColor={
-								!userSolutions.find((x) => x.question === sentence.id)
-									? "#CC5454"
-									: userSolutions.find((x) => x.question === sentence.id)?.option === sentence.solution
-									? "#7872BF"
-									: "#CC5454"
-							}
-							showHead={false}
-						/>
-					))}
+					{userSolutions &&
+						sentences.map((sentence, index) => (
+							<Xarrow
+								key={index}
+								start={sentence.id}
+								end={sentence.solution}
+								lineColor={
+									!userSolutions.find((x) => x.question === sentence.id)
+										? "#CC5454"
+										: userSolutions.find((x) => x.question === sentence.id)?.option === sentence.solution
+										? "#7872BF"
+										: "#CC5454"
+								}
+								showHead={false}
+							/>
+						))}
 				</div>
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
diff --git a/src/components/Solutions/MultipleChoice.tsx b/src/components/Solutions/MultipleChoice.tsx
index 308a4654..5ef32351 100644
--- a/src/components/Solutions/MultipleChoice.tsx
+++ b/src/components/Solutions/MultipleChoice.tsx
@@ -88,7 +88,7 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 			<div className="flex flex-col gap-4 w-full h-full mb-20">
 				<div className="flex flex-col gap-2 mt-4 h-full bg-mti-gray-smoke rounded-xl px-16 py-8">
 					<span className="text-xl font-semibold">{prompt}</span>
-					{questionIndex < questions.length && (
+					{userSolutions && questionIndex < questions.length && (
 						<Question
 							{...questions[questionIndex]}
 							userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
diff --git a/src/components/Solutions/TrueFalse.tsx b/src/components/Solutions/TrueFalse.tsx
index 4e65991d..a80df152 100644
--- a/src/components/Solutions/TrueFalse.tsx
+++ b/src/components/Solutions/TrueFalse.tsx
@@ -64,37 +64,40 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 				</div>
 				<span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span>
 				<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
-					{questions.map((question, index) => {
-						const userSolution = userSolutions.find((x) => x.id === question.id.toString());
+					{userSolutions &&
+						questions.map((question, index) => {
+							const userSolution = userSolutions.find((x) => x.id === question.id.toString());
 
-						return (
-							<div key={question.id.toString()} className="flex flex-col gap-4">
-								<span>
-									{index + 1}. {question.prompt}
-								</span>
-								<div className="flex gap-4">
-									<Button
-										variant={question.solution === "true" || userSolution?.solution === "true" ? "solid" : "outline"}
-										className="!py-2"
-										color={getButtonColor("true", question.solution, userSolution?.solution)}>
-										True
-									</Button>
-									<Button
-										variant={question.solution === "false" || userSolution?.solution === "false" ? "solid" : "outline"}
-										className="!py-2"
-										color={getButtonColor("false", question.solution, userSolution?.solution)}>
-										False
-									</Button>
-									<Button
-										variant={question.solution === "not_given" || userSolution?.solution === "not_given" ? "solid" : "outline"}
-										className="!py-2"
-										color={getButtonColor("not_given", question.solution, userSolution?.solution)}>
-										Not Given
-									</Button>
+							return (
+								<div key={question.id.toString()} className="flex flex-col gap-4">
+									<span>
+										{index + 1}. {question.prompt}
+									</span>
+									<div className="flex gap-4">
+										<Button
+											variant={question.solution === "true" || userSolution?.solution === "true" ? "solid" : "outline"}
+											className="!py-2"
+											color={getButtonColor("true", question.solution, userSolution?.solution)}>
+											True
+										</Button>
+										<Button
+											variant={question.solution === "false" || userSolution?.solution === "false" ? "solid" : "outline"}
+											className="!py-2"
+											color={getButtonColor("false", question.solution, userSolution?.solution)}>
+											False
+										</Button>
+										<Button
+											variant={
+												question.solution === "not_given" || userSolution?.solution === "not_given" ? "solid" : "outline"
+											}
+											className="!py-2"
+											color={getButtonColor("not_given", question.solution, userSolution?.solution)}>
+											Not Given
+										</Button>
+									</div>
 								</div>
-							</div>
-						);
-					})}
+							);
+						})}
 				</div>
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">