make userprofiles rely on fetched data rather than local json

data/administracja.json

@@ -1,58 +0,0 @@
-[
-	{
-		"name": "jamesen",
-		"desc": "project pioneer.",
-		"img": "https://i.imgur.com/CBRxP3Z.png",
-		"devBadge": true,
-		"profile": {
-			"bigdesc": ["Tutaj będzie kiedyś opis profilu."],
-			"links": [
-				{
-					"resname": "Website",
-					"href": "https://manczak.net"
-				}
-			]
-		}
-	},
-	{
-		"name": "Mollin",
-		"desc": "porucznik essy.",
-		"img": "https://i.imgur.com/64sHQjM.jpg",
-		"profile": {
-			"bigdesc": ["Tutaj będzie kiedyś opis profilu."]
-		}
-	},
-	{
-		"name": "Elephant",
-		"desc": "osobnik demencyjny.",
-		"img": "https://i.imgur.com/INQM1Cd.png",
-		"profile": {
-			"bigdesc": ["Tutaj będzie kiedyś opis profilu."]
-		}
-	},
-	{
-		"name": "Dzioba",
-		"desc": "backend bastard.",
-		"img": "https://i.imgur.com/0gUirZH.png",
-		"devBadge": true,
-		"profile": {
-			"bigdesc": ["Tutaj będzie kiedyś opis profilu."]
-		}
-	},
-	{
-		"name": "KuOlek",
-		"desc": "duch. (bo go nie ma)",
-		"img": "https://i.imgur.com/SCTXTtz.png",
-		"profile": {
-			"bigdesc": ["Tutaj będzie kiedyś opis profilu."]
-		}
-	},
-	{
-		"name": "Bavil Gravlax",
-		"desc": "śpiący rękawek.",
-		"img": "https://i.imgur.com/6bxpBgK.png",
-		"profile": {
-			"bigdesc": ["Tutaj będzie kiedyś opis profilu."]
-		}
-	}
-]

pages/profile/[profname]/index.tsx

@@ -1,21 +1,50 @@
 import { useRouter } from "next/router";
-import administracja from "../../../data/administracja.json";
+import { useEffect, useState } from "react";
+import { SEO } from "../../../components/SEO";
 
 const ProfilePage = () => {
 	const router = useRouter();
 	const profname = router.query.profname as string;
+	type personsSchema = {
+		Id: string;
+		Name: string;
+		Desc?: string;
+		Img?: string;
+		IsAdmin?: boolean;
+		DevBadge?: boolean;
+		AssignedUser?: string;
+	};
+	const [persons, setPersons] = useState([]);
+	const [loading, setLoading] = useState(true);
+	useEffect(() => {
+		fetch("https://gractwo.pl/api/v1/admincards")
+			.then((res) => {
+				return res.json();
+			})
+			.then((data) => {
+				setPersons(data);
+				setLoading(false);
+			})
+			.catch((err) => {
+				console.log(err);
+			});
+	}, []);
+	if (loading) {
+		return <main style={{ color: "grey" }}>Fetching data...</main>;
+	} else {
 		if (
-		administracja
+			persons
-			.map((el) => {
+				.map((el: personsSchema) => {
-				return el.name.replaceAll(" ", "-").toLocaleLowerCase();
+					return el.Name.replaceAll(" ", "-").toLocaleLowerCase();
 				})
 				.includes(profname)
 		) {
-		const person = administracja.filter((wpis) => {
+			const person: personsSchema = persons.filter((wpis: personsSchema) => {
-			return wpis.name.replaceAll(" ", "-").toLocaleLowerCase() === profname;
+				return wpis.Name.replaceAll(" ", "-").toLocaleLowerCase() === profname;
 			})[0];
 			return (
 				<main>
+					<SEO title={person.Name} />
 					<div
 						style={{
 							display: "flex",
@@ -26,8 +55,8 @@ const ProfilePage = () => {
 						}}
 					>
 						<img
-						src={person.img}
+							src={person.Img}
-						alt={`${person.name} profile image`}
+							alt={`${person.Name} profile image`}
 							style={{
 								width: "128px",
 								aspectRatio: "1/1",
@@ -36,18 +65,20 @@ const ProfilePage = () => {
 							}}
 						/>
 						<div>
-						<h1>{person.name}</h1>
+							<h1>{person.Name}</h1>
-						<p>{person.desc}</p>
+							<p>{person.Desc}</p>
 						</div>
 					</div>
-				{person.profile?.bigdesc.map((el, index) => {
+					{/* FOR LATER BIGDESC DATASET */}
+					{/* {person.profile?.bigdesc.map((el, index) => {
 						return <p key={index}>{el || <br />}</p>;
-				})}
+					})} */}
 				</main>
 			);
 		} else {
 			return (
 				<main>
+					<SEO title="nieznany profil" />
 					<h1>Sorki!{" :("}</h1>
 					<p style={{ lineHeight: "30px" }}>
 						Sprawdź pisownię:
@@ -67,6 +98,7 @@ const ProfilePage = () => {
 				</main>
 			);
 		}
+	}
 };
 
 export default ProfilePage;