From e312af36bbe308ea4bbe3e0e5bed10ddfaf27ad4 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Thu, 5 Sep 2024 17:25:22 +0100
Subject: [PATCH] Added the assignment to the Session Card

---
 src/components/Medium/SessionCard.tsx | 118 ++++++++++++++------------
 1 file changed, 64 insertions(+), 54 deletions(-)

diff --git a/src/components/Medium/SessionCard.tsx b/src/components/Medium/SessionCard.tsx
index 71e9af97..6fdfb55c 100644
--- a/src/components/Medium/SessionCard.tsx
+++ b/src/components/Medium/SessionCard.tsx
@@ -40,61 +40,71 @@ export default function SessionCard({
 	};
 
 	return (
-		<div className="border-mti-gray-anti-flash flex w-64 flex-col gap-3 rounded-xl border p-4 text-black">
-			<span className="flex gap-1">
-				<b>ID:</b>
-				{session.sessionId}
-			</span>
-			<span className="flex gap-1">
-				<b>Date:</b>
-				{moment(session.date).format("DD/MM/YYYY - HH:mm")}
-			</span>
-			<div className="flex w-full items-center justify-between">
-				<div className="-md:mt-2 grid w-full grid-cols-4 place-items-center justify-center gap-2">
-					{session.selectedModules.sort(sortByModuleName).map((module) => (
-						<div
-							key={module}
-							data-tip={capitalize(module)}
-							className={clsx(
-								"-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
-								module === "reading" && "bg-ielts-reading",
-								module === "listening" && "bg-ielts-listening",
-								module === "writing" && "bg-ielts-writing",
-								module === "speaking" && "bg-ielts-speaking",
-								module === "level" && "bg-ielts-level",
-							)}>
-							{module === "reading" && <BsBook className="h-4 w-4" />}
-							{module === "listening" && <BsHeadphones className="h-4 w-4" />}
-							{module === "writing" && <BsPen className="h-4 w-4" />}
-							{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
-							{module === "level" && <BsClipboard className="h-4 w-4" />}
-						</div>
-					))}
-				</div>
+		<div className="border-mti-gray-anti-flash flex w-64 flex-col justify-between gap-3 rounded-xl border p-4 text-black">
+			<div className="flex flex-col gap-3">
+				<span className="flex gap-1">
+					<b>ID:</b>
+					{session.sessionId}
+				</span>
+				<span className="flex gap-1">
+					<b>Date:</b>
+					{moment(session.date).format("DD/MM/YYYY - HH:mm")}
+				</span>
+				{session.assignment && (
+					<span className="flex flex-col gap-0">
+						<b>Assignment:</b>
+						{session.assignment.name}
+					</span>
+				)}
 			</div>
-			<div className="flex items-center gap-2 w-full">
-				<button
-					onClick={async () => await loadSession(session)}
-					disabled={isLoading}
-					className="bg-mti-green-ultralight w-full hover:bg-mti-green-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
-					{!isLoading && "Resume"}
-					{isLoading && (
-						<div className="flex items-center justify-center">
-							<BsArrowRepeat className="animate-spin text-white" size={25} />
-						</div>
-					)}
-				</button>
-				<button
-					onClick={deleteSession}
-					disabled={isLoading}
-					className="bg-mti-red-ultralight w-full hover:bg-mti-red-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
-					{!isLoading && "Delete"}
-					{isLoading && (
-						<div className="flex items-center justify-center">
-							<BsArrowRepeat className="animate-spin text-white" size={25} />
-						</div>
-					)}
-				</button>
+			<div className="flex flex-col gap-3">
+				<div className="flex w-full items-center justify-between">
+					<div className="-md:mt-2 grid w-full grid-cols-4 place-items-center justify-center gap-2">
+						{session.selectedModules.sort(sortByModuleName).map((module) => (
+							<div
+								key={module}
+								data-tip={capitalize(module)}
+								className={clsx(
+									"-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+									module === "reading" && "bg-ielts-reading",
+									module === "listening" && "bg-ielts-listening",
+									module === "writing" && "bg-ielts-writing",
+									module === "speaking" && "bg-ielts-speaking",
+									module === "level" && "bg-ielts-level",
+								)}>
+								{module === "reading" && <BsBook className="h-4 w-4" />}
+								{module === "listening" && <BsHeadphones className="h-4 w-4" />}
+								{module === "writing" && <BsPen className="h-4 w-4" />}
+								{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+								{module === "level" && <BsClipboard className="h-4 w-4" />}
+							</div>
+						))}
+					</div>
+				</div>
+				<div className="flex items-center gap-2 w-full">
+					<button
+						onClick={async () => await loadSession(session)}
+						disabled={isLoading}
+						className="bg-mti-green-ultralight w-full hover:bg-mti-green-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
+						{!isLoading && "Resume"}
+						{isLoading && (
+							<div className="flex items-center justify-center">
+								<BsArrowRepeat className="animate-spin text-white" size={25} />
+							</div>
+						)}
+					</button>
+					<button
+						onClick={deleteSession}
+						disabled={isLoading}
+						className="bg-mti-red-ultralight w-full hover:bg-mti-red-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
+						{!isLoading && "Delete"}
+						{isLoading && (
+							<div className="flex items-center justify-center">
+								<BsArrowRepeat className="animate-spin text-white" size={25} />
+							</div>
+						)}
+					</button>
+				</div>
 			</div>
 		</div>
 	);