add badges

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;
+			}
 		}
 	}
 }

components/ProfileCard/ProfileCard.tsx

@@ -13,10 +13,12 @@ type UserProfileCardProps = {
 			looseXP?: number;
 		};
 		badges?: {
-			badgeName: string;
+			Id: string; // ID
-			badgeDesc?: string;
+			Name: string; // badge name
-			badgeMerit?: string;
+			Desc: string; // badge description (short)
-			badgeImage?: string;
+			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,19 +92,22 @@ const ProfileCard = ({ data }: UserProfileCardProps) => {
 					</div>
 				)}
 				<footer>
-					{data.badges
+					{data.badges?.map(
-						?.slice(0, 1)
-						.map(
 						(el: {
-								badgeName: string;
+							Id: string; // ID
-								badgeDesc?: string;
+							Name: string; // badge name
-								badgeMerit?: string;
+							Desc: string; // badge description (short)
-								badgeImage?: string;
+							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.badgeName}>
+								<section key={el.Name}>
-										<h3>{el.badgeName}</h3>
+									<img src={el.Img} />
-										<p>{el.badgeDesc}</p>
+									<div>
+										<h3>{el.Name}</h3>
+										<p>{el.Desc}</p>
+									</div>
 								</section>
 							);
 						}

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: [
+							badges: badgesData || undefined,
-								{
-									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",
-								},
-							],
 						}}
 					/>
 					<Link href="/ja/ustawienia">

pages/profil/[profname]/index.tsx

@@ -69,13 +69,7 @@ const ProfilePage = () => {
 								// looseXP: 420,
 								// tilNextLevel: 69,
 								// },
-								badges: [
+								badges: [],
-									{
-										badgeName: "Odkrywca internetowy",
-										badgeDesc:
-											"Logowanie się na gractwo.pl nie jest takie straszne.",
-									},
-								],
 							}}
 						/>
 					</main>