105 lines
2.3 KiB
TypeScript
105 lines
2.3 KiB
TypeScript
import { useRouter } from "next/router";
|
|
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/persons-of-note")
|
|
.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 (
|
|
persons
|
|
.map((el: personsSchema) => {
|
|
return el.Name.replaceAll(" ", "-").toLocaleLowerCase();
|
|
})
|
|
.includes(profname)
|
|
) {
|
|
const person: personsSchema = persons.filter((wpis: personsSchema) => {
|
|
return wpis.Name.replaceAll(" ", "-").toLocaleLowerCase() === profname;
|
|
})[0];
|
|
return (
|
|
<main>
|
|
<SEO title={person.Name} />
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: "1rem",
|
|
marginBottom: "1rem",
|
|
}}
|
|
>
|
|
<img
|
|
src={person.Img}
|
|
alt={`${person.Name} profile image`}
|
|
style={{
|
|
width: "128px",
|
|
aspectRatio: "1/1",
|
|
objectFit: "cover",
|
|
borderRadius: "50%",
|
|
}}
|
|
/>
|
|
<div>
|
|
<h1>{person.Name}</h1>
|
|
<p>{person.Desc}</p>
|
|
</div>
|
|
</div>
|
|
{/* 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ę:
|
|
<span
|
|
style={{
|
|
background: "var(--black1)",
|
|
boxShadow: "var(--shadow0)",
|
|
padding: "8px",
|
|
margin: "10px",
|
|
borderRadius: "4px",
|
|
}}
|
|
>
|
|
{`/profile/${profname}`}
|
|
</span>
|
|
nie jest poprawnym lokatorem profilu.
|
|
</p>
|
|
</main>
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
export default ProfilePage;
|