From 1e681a8c896078864a8cc55f3a70f929cbf79da9 Mon Sep 17 00:00:00 2001
From: Sahitiakella <sahiti.akella@gmail.com>
Date: Wed, 21 Feb 2024 21:03:49 -0700
Subject: [PATCH] Added merch gallery section

Signed-off-by: Sahitiakella <sahiti.akella@gmail.com>
---
 .../MerchSection/MerchGallery.styles.tsx      | 25 ++++++++
 src/components/MerchSection/MerchGallery.tsx  | 59 +++++++++++++++++++
 src/components/MerchSection/MerchSection.tsx  |  7 +++
 3 files changed, 91 insertions(+)
 create mode 100644 src/components/MerchSection/MerchGallery.styles.tsx
 create mode 100644 src/components/MerchSection/MerchGallery.tsx

diff --git a/src/components/MerchSection/MerchGallery.styles.tsx b/src/components/MerchSection/MerchGallery.styles.tsx
new file mode 100644
index 0000000..7a3c08c
--- /dev/null
+++ b/src/components/MerchSection/MerchGallery.styles.tsx
@@ -0,0 +1,25 @@
+
+import styled from "styled-components";
+
+export const MerchContainer = styled.div`
+  // mobile
+  column-count: 1;
+  column-gap: 24;
+  max-width: 1024px;
+  margin: auto;
+  // ipad
+  @media (min-width: 768px) {
+    column-count: 2;
+  }
+  // desktop
+  @media (min-width: 1024px) {
+    column-count: 3;
+  }
+`;
+
+export const Image = styled.img`
+  width: 100%;
+  height: auto;
+  margin-bottom: 24px;
+  background-color: white;
+`;
\ No newline at end of file
diff --git a/src/components/MerchSection/MerchGallery.tsx b/src/components/MerchSection/MerchGallery.tsx
new file mode 100644
index 0000000..4d560d4
--- /dev/null
+++ b/src/components/MerchSection/MerchGallery.tsx
@@ -0,0 +1,59 @@
+import axios from "axios";
+import { useCallback, useEffect, useState } from "react";
+import { PicturesContainer, PicturesHeader } from "components/PhotoGallery/PhotoGallery.styles";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import Loading from "components/Loading";
+
+const MerchGallery = () => {
+  const [photosURL, setPhotosURL] = useState<string[]>([]); 
+  const getAlbum = useCallback(async () => {
+    const galleryPicsURL = process.env.REACT_APP_PIC_API_URL;
+    try {
+      if (!galleryPicsURL) {
+        throw new Error("URL is not defined");
+      }
+      const { data } = await axios.get<string[]>(`${galleryPicsURL}/merchgallery`);
+
+      if (!data.length) {
+        throw new Error("No images found");
+      }
+      setPhotosURL(data);
+    } catch (error) {
+      console.error(
+        `Error fetching images from the server on  ${galleryPicsURL}/merchgallery`,
+        error
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    getAlbum();
+  }, [getAlbum]);
+
+  return (
+    <>
+      {photosURL.length === 0 ? (
+        <Loading />
+      ) : (
+        <PicturesHeader
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.5 }}
+        >
+          <PicturesContainer>
+            {photosURL.map((photo, index) => (
+              <LazyLoadImage
+                height="auto"
+                key={index}
+                src={photo}
+                width="100%"
+              />
+            ))}
+          </PicturesContainer>
+        </PicturesHeader>
+      )}
+    </>
+  );
+};
+
+export default MerchGallery;
diff --git a/src/components/MerchSection/MerchSection.tsx b/src/components/MerchSection/MerchSection.tsx
index 7bdb5ec..2d93183 100644
--- a/src/components/MerchSection/MerchSection.tsx
+++ b/src/components/MerchSection/MerchSection.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 import * as S from "./MerchSection.styles";
 import MerchCollection from "./MerchCollection";
+import Divider from "components/Divider";
 import { merchList } from "./MerchData";
+import MerchGallery from "components/MerchSection/MerchGallery";
 import useViewport from "components/UseViewport";
 
 const MerchSection = () => {
@@ -11,6 +13,11 @@ const MerchSection = () => {
   return (
     <S.MerchSection data-aos="fade-up" >
       <MerchCollection merchItems={merchList} desktopView={defaultView} />
+            <h1 className="chonkyHeading chonkyHeading--black chonkyHeading--lessMargin">
+            Merch Gallery
+          </h1>
+      <Divider />
+      <MerchGallery/>
     </S.MerchSection>
   );
 };