From da3d7ff7f837d1dbbe07bf1308ed941e90aee529 Mon Sep 17 00:00:00 2001
From: Stanislaw <62724833+BoberITman@users.noreply.github.com>
Date: Sun, 29 Jan 2023 21:59:30 +0100
Subject: [PATCH] add badges

---
 .../ProfileCard/ProfileCard.module.scss       | 10 ++++
 components/ProfileCard/ProfileCard.tsx        | 47 ++++++++--------
 pages/ja/index.tsx                            | 54 ++++++++-----------
 pages/profil/[profname]/index.tsx             |  8 +--
 4 files changed, 59 insertions(+), 60 deletions(-)

diff --git a/components/ProfileCard/ProfileCard.module.scss b/components/ProfileCard/ProfileCard.module.scss
index 04613e9..37af9cb 100644
--- a/components/ProfileCard/ProfileCard.module.scss
+++ b/components/ProfileCard/ProfileCard.module.scss
@@ -108,11 +108,21 @@
 		flex-direction: row;
 		flex-wrap: wrap;
 		section {
+			display: flex;
+			align-items: center;
+			gap: 1rem;
 			width: 50%;
 			padding: 2rem;
 			@media screen and (max-width: 800px) {
 				width: 100%;
 			}
+			img {
+				height: 4rem;
+				border-radius: 50%;
+			}
+			h3 {
+				padding-top: 0;
+			}
 		}
 	}
 }
diff --git a/components/ProfileCard/ProfileCard.tsx b/components/ProfileCard/ProfileCard.tsx
index 94f5176..08ba1ab 100644
--- a/components/ProfileCard/ProfileCard.tsx
+++ b/components/ProfileCard/ProfileCard.tsx
@@ -13,10 +13,12 @@ type UserProfileCardProps = {
 			looseXP?: number;
 		};
 		badges?: {
-			badgeName: string;
-			badgeDesc?: string;
-			badgeMerit?: string;
-			badgeImage?: string;
+			Id: string; // ID
+			Name: string; // badge name
+			Desc: string; // badge description (short)
+			Expl?: string; // badge explanation (long)
+			Img?: string; // direct url to an image
+			Date?: string; // datetime w/ timezone (eg: "2022-02-25T10:23:54Z")
 		}[];
 		accentColor?: string;
 	};
@@ -90,23 +92,26 @@ const ProfileCard = ({ data }: UserProfileCardProps) => {
 					</div>
 				)}
 				<footer>
-					{data.badges
-						?.slice(0, 1)
-						.map(
-							(el: {
-								badgeName: string;
-								badgeDesc?: string;
-								badgeMerit?: string;
-								badgeImage?: string;
-							}) => {
-								return (
-									<section key={el.badgeName}>
-										<h3>{el.badgeName}</h3>
-										<p>{el.badgeDesc}</p>
-									</section>
-								);
-							}
-						)}
+					{data.badges?.map(
+						(el: {
+							Id: string; // ID
+							Name: string; // badge name
+							Desc: string; // badge description (short)
+							Expl?: string; // badge explanation (long)
+							Img?: string; // direct url to an image
+							Date?: string; // datetime w/ timezone (eg: "2022-02-25T10:23:54Z")
+						}) => {
+							return (
+								<section key={el.Name}>
+									<img src={el.Img} />
+									<div>
+										<h3>{el.Name}</h3>
+										<p>{el.Desc}</p>
+									</div>
+								</section>
+							);
+						}
+					)}
 				</footer>
 			</div>
 		</>
diff --git a/pages/ja/index.tsx b/pages/ja/index.tsx
index 88632a5..0b6c430 100644
--- a/pages/ja/index.tsx
+++ b/pages/ja/index.tsx
@@ -15,7 +15,16 @@ const PageMe = () => {
 		DevBadge?: boolean;
 		AssignedUser?: string;
 	};
+	type badgeSchema = {
+		Id: string; // ID
+		Name: string; // badge name
+		Desc: string; // badge description (short)
+		Expl?: string; // badge explanation (long)
+		Img?: string; // direct url to an image
+		Date?: string; // datetime w/ timezone (eg: "2022-02-25T10:23:54Z")
+	};
 	const [personsData, setPersonsData] = useState<personsSchema | null>(null);
+	const [badgesData, setBadgesData] = useState<badgeSchema[] | null>(null);
 
 	useEffect(() => {
 		if (!user) return;
@@ -26,11 +35,22 @@ const PageMe = () => {
 			.then((data) => {
 				setPersonsData(
 					data.filter((el: personsSchema) => {
-						if (!user) return false;
 						return el.AssignedUser === user.sub?.replace("oauth2|discord|", "");
 					})[0]
 				);
 			});
+		fetch(
+			`https://gractwo.pl/api/v1/badges/${user.sub?.replace(
+				"oauth2|discord|",
+				""
+			)}`
+		)
+			.then((res) => {
+				return res.json();
+			})
+			.then((data) => {
+				setBadgesData(data);
+			});
 	}, [user]);
 
 	return (
@@ -65,37 +85,7 @@ const PageMe = () => {
 							// 	looseXP: 420,
 							// 	tilNextLevel: 69,
 							// },
-							badges: [
-								{
-									badgeName: "Odkrywca internetowy",
-									badgeDesc:
-										"Logowanie się na gractwo.pl nie jest takie straszne.",
-								},
-								{
-									badgeName: "Technik Informatyk",
-									badgeDesc: "Łapanki na korytarzu to normalka.",
-								},
-								{
-									badgeName: "Rozpad PGTF",
-									badgeDesc: "Służba w oddziałach Super Pizzy - powód do dumy.",
-								},
-								{
-									badgeName: "Mollin Stream",
-									badgeDesc: "„Sorry, ja za bardzo nie pamietam.” ~ Mollin",
-								},
-								{
-									badgeName: "Alkoholik",
-									badgeDesc: "pracoholicy gdy skończy im się pracohol:",
-								},
-								{
-									badgeName: "Studnia Oneshot",
-									badgeDesc: "elf w studni - ciekawe jak stamtąd wyjdzie",
-								},
-								{
-									badgeName: "RemCon 2022",
-									badgeDesc: "pomorze konwent",
-								},
-							],
+							badges: badgesData || undefined,
 						}}
 					/>
 					<Link href="/ja/ustawienia">
diff --git a/pages/profil/[profname]/index.tsx b/pages/profil/[profname]/index.tsx
index 224607f..418c23e 100644
--- a/pages/profil/[profname]/index.tsx
+++ b/pages/profil/[profname]/index.tsx
@@ -69,13 +69,7 @@ const ProfilePage = () => {
 								// looseXP: 420,
 								// tilNextLevel: 69,
 								// },
-								badges: [
-									{
-										badgeName: "Odkrywca internetowy",
-										badgeDesc:
-											"Logowanie się na gractwo.pl nie jest takie straszne.",
-									},
-								],
+								badges: [],
 							}}
 						/>
 					</main>