👽 api: get instagram media data from its api

src/app/api/instagram/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+
+export const GET = async () => {
+  const baseUrl = process.env.GRAPH_API_BASE_URL;
+  const instagramId = process.env.GRAPH_API_INSTAGRAM_ID;
+  const accessToken = process.env.GRAPH_API_ACCESS_TOKEN;
+  const queries = 'media{caption,children{media_url},media_url,permalink,like_count,timestamp,username}';
+  const url = `${baseUrl}/${instagramId}?access_token=${accessToken}&fields=${queries}`;
+
+  const res = await fetch(url);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const data = await res.json();
+  return NextResponse.json(data);
+};

src/app/gallery/page.tsx

@@ -1,14 +1,65 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable no-shadow */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+
+'use client';
+
+import { useEffect, useState } from 'react';
+
 import AnimatedText from '@/components/common/AnimatedText/AnimatedText';
 import Footer from '@/components/layout/Footer/Footer';
 
 import type { NextPage } from 'next';
 
 const Gallery: NextPage = () => {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch('/api/instagram')
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error('Failed to fetch data');
+        }
+        return res.json();
+      })
+      .then((data) => {
+        setData(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError('Error fetching data');
+        setLoading(false);
+        console.error(err);
+      });
+  }, []);
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>{error}</div>;
+  if (!data) return <div>No data</div>;
+
   return (
     <div className="flex w-full flex-col items-center px-2.5 text-white xs:px-5 lg:px-0">
       <div className="my-24">
         <AnimatedText text="Gallery" classes="text-[48px] xs:text-[60px] xsm:text-[80px]" />
       </div>
+      <div>
+        {data.media.data.map((post, index) => (
+          <div key={index}>
+            <img src={post.media_url} alt={post.caption} />
+            <p>{post.caption}</p>
+            <p>Likes: {post.like_count}</p>
+            <p>Posted by: {post.username}</p>
+            <a href={post.permalink} target="_blank" rel="noopener noreferrer">
+              View on Instagram
+            </a>
+          </div>
+        ))}
+      </div>
       {/* Footer */}
       <Footer />
     </div>