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
-							key={entry.link}
-							href={entry.link}
-							className={styles.galleryimg}
-						>
-							<img src={entry.link} alt={entry.description} />
+						<Link key={el.Id} href={el.Link} className={styles.galleryimg}>
+							<img src={el.Link} alt={el.Description || el.Title} />
 							<article>
-								<h3>{entry.title}</h3>
-								<p>{entry.meta}</p>
+								<h3>{el.Title}</h3>
+								<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>
 					);