Merge pull request #11 from gractwo/gustavo

fetch gallery images from api instead of json

components/IndexGallery/IndexGallery.tsx

@@ -1,25 +1,58 @@
 import styles from "./IndexGallery.module.scss";
-import gallery from "../../data/gallery.json";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 
 const IndexGallery = () => {
+	type apiResType = {
+		Id: string;
+		Title: string;
+		Link: string;
+		Description?: string;
+		Place?: string;
+		Date?: string;
+	};
+	const [data, setData] = useState([]);
+	useEffect(() => {
+		fetch("https://gractwo.pl/api/v1/images")
+			.then((res) => {
+				return res.json();
+			})
+			.then((data) => {
+				setData(data);
+			})
+			.catch((err) => {
+				console.log(err);
+			});
+	}, []);
 	return (
 		<>
 			<main>
 				<h2>galeria zdjęć idących mocno</h2>
 			</main>
 			<main className={styles.gallerycontainer}>
-				{gallery.map((entry) => {
+				{data.map((el: apiResType) => {
 					return (
-						<Link
+						<Link key={el.Id} href={el.Link} className={styles.galleryimg}>
-							key={entry.link}
+							<img src={el.Link} alt={el.Description || el.Title} />
-							href={entry.link}
-							className={styles.galleryimg}
-						>
-							<img src={entry.link} alt={entry.description} />
 							<article>
-								<h3>{entry.title}</h3>
+								<h3>{el.Title}</h3>
-								<p>{entry.meta}</p>
+								<p>
+									{el.Place || ""}
+									{el.Place && el.Date ? ", " : ""}
+									{el.Date
+										? new Date(el.Date).getDate().toString().length == 2
+											? new Date(el.Date).getDate()
+											: "0" + new Date(el.Date).getDate()
+										: ""}
+									{"."}
+									{el.Date
+										? (new Date(el.Date).getMonth() + 1).toString().length == 2
+											? new Date(el.Date).getMonth() + 1
+											: "0" + (new Date(el.Date).getMonth() + 1)
+										: ""}
+									{"."}
+									{el.Date ? new Date(el.Date).getFullYear() : ""}
+								</p>
 							</article>
 						</Link>
 					);

data/gallery.json

@@ -1,32 +0,0 @@
-[
-	{
-		"title": "RemCon 2022",
-		"description": "Bavil, Dzioba, Mollin i BeElephant pozują nad morzem.",
-		"meta": "Gdynia, 25.02.2022",
-		"link": "https://media.discordapp.net/attachments/719165033090908190/946703702864060466/20220225_104137.jpg"
-	},
-	{
-		"title": "Mollin Stream II",
-		"description": "BeElephant i Mollin w kompromitujących przebraniach.",
-		"meta": "Poznań, 02.12.2022",
-		"link": "https://media.discordapp.net/attachments/719166032714924045/1048341477329227847/image.png"
-	},
-	{
-		"title": "Morasko Chill",
-		"description": "Album cover dla nieistniejącej (jeszcze) płyty, featuring BeElephant, J4roid, Mollin i MrMichal564.",
-		"meta": "Poznań, 11.2022",
-		"link": "https://media.discordapp.net/attachments/434626765768491008/1052985575642239017/Pamiec_wody_o_jabku.jpg"
-	},
-	{
-		"title": "OP pojawił się za jamesenem",
-		"description": "Poprzez całkowity przypadek BeElephant pojawia się za jamesenem w tramwaju.",
-		"meta": "Poznań, 15.11.2022",
-		"link": "https://media.discordapp.net/attachments/719166032714924045/1055549275825766471/20221115_183021.jpg"
-	},
-	{
-		"title": "Ceremonia przekazania skarpety",
-		"description": "Ceremonialne pzekazanie Skarpety Stachowiaka jej prawowitemu właścicielowi w trzech aktach",
-		"meta": "Poznań, 9.2022",
-		"link": "https://cdn.discordapp.com/attachments/788182003098583070/1055542425592012810/Untitled164_20221222184347.png"
-	}
-]

pages/index.tsx

@@ -14,7 +14,6 @@ const PageIndex = () => {
 				return res.json();
 			})
 			.then((data) => {
-				console.log(data);
 				setSplash(data.Splash);
 			})
 			.catch((err) => {