neroshitron/app/gallery/page.tsx

"use client";
import { createClient } from "@/utils/supabase/client";
import { redirect } from "next/navigation";
import GalleryThumbnail from "@/components/ui/gallery_thumbnail";


import React, { useState, useEffect } from 'react';
import { User } from "@supabase/supabase-js";
import Gallery from "@/components/ui/gallery";

function PageComponent() {

  const supabase = createClient();

  const [randomIds, setRandomIds] = useState<string[]>([]); // replace any with your gallery type
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [galleries, setGalleries] = useState<any[]>([]); // replace any with your gallery type
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
  const [tags, setTags] = useState<any[]>([]);
  const [search, setSearch] = useState<string>('');
  const [galleryColumns, setColumns] = useState<number>(0);
  const [selectedTags, setSelectedTags] = useState<number[]>([]);
  const generateRandomString = function (length:number) {
    let result           = '';
    let characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let charactersLength = characters.length;
    for ( let i = 0; i < length; i++ ) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
}

  const selectGallery = (gallery:string, columns:number) => {
    setRandomIds([generateRandomString(3), generateRandomString(3), generateRandomString(3), generateRandomString(3)]);
    setSelectedGallery(gallery);
    setColumns(columns);
    setIsOpen(true);
  };

  const closeGallery = () => {
    setSelectedGallery(null);
    setColumns(0);
    setIsOpen(false);
  }

  const getData = async () => {
    let { data: { user } } = await supabase.auth.getUser();
    const galleriesResponse = await fetch(`/api/galleries?search=`+search, {
      method: 'POST',
      headers: {
      'Content-Type': 'application/json'
      },
      body: JSON.stringify({ tags:selectedTags })
    });
    //console.log(galleriesResponse)
    const galleriesData = await galleriesResponse.json();
    const tagsResponse = await fetch(`/api/galleries/tags`);
    const tagsData = await tagsResponse.json();
    setGalleries(galleriesData);
    setTags(tagsData);
    setUser(user);
    setLoading(false);
  }
  useEffect(() => {
    getData();
    
  }, [selectedTags,search]);

  const handleTagClick = (tag: number) => {
    if (selectedTags.includes(tag)) {
      setSelectedTags(selectedTags.filter((selectedTag) => selectedTag !== tag));
    } else {
      setSelectedTags([...selectedTags, tag]);
    }
    //console.log(selectedTags)
  };

  return (
    
    <div className="w-full h-full flex justify-center ">
    <div className="flex-1 w-full h-full flex flex-col gap-20">
      <>
        <div className="absolute pl-8 w-2/4 left-1/2 h-full overflow-hidden z-20 animate-in  animate-duration-3000 animate-ease-out">
          <section className="neroshi-blue-900 h-50 p-8 pt-20 opacity-30 hover:opacity-100">
            <div className="container mx-auto py-8">
              <input
                className="w-full text-neroshi-blue-950 h-16 px-3 rounded mb-8 focus:outline-none focus:shadow-outline text-xl px-8 shadow-lg"
                type="search"
                placeholder="Search..."
                onChange={(e) => setSearch(e.target.value)}
              />
              <nav className="grid grid-cols-4 gap-4">
                {tags.map((tag, index) => (
                  <a
                    key={index}
                    className={`rounded-lg no-underline text-white py-3 px-4 font-medium text-center ${
                      selectedTags.includes(tag.name) ? 'bg-neroshi-blue-950 hover:bg-neroshi-blue-900' : 'bg-neroshi-blue-800 hover:bg-neroshi-blue-700'
                    }`}
                    href="#"
                    onClick={() => handleTagClick(tag.name)}
                  >
                    {tag.name}
                  </a>
                ))}
              </nav>
            </div>
          </section>
        </div>

        <div className="absolute w-full h-full overflow-hidden z-0 animate-fade-left animate-fade-left animate-once animate-duration-[2000ms] animate-normal animate-fill-forwards">
          <img
            src="gallery_girl.png"
            className="float-right object-cover h-screen w-3/6  opacity-50 overflow-hidden"
            alt="Background"
          />
        </div>

        <div className="absolute items-center w-2/4 h-full ml-10 z-0 overflow-hidden animate-in animate-ease-out">
          <div className="grid grid-cols-3 gap-y-52 gap-x-5 h-full overflow-y-auto no-scrollbar pt-20">
            {galleries && galleries.map((gallery, index) => (
              <GalleryThumbnail
                key={gallery.name}
                id={gallery.name}
                title={gallery.name}
                tags = {gallery.tags}
                columns={gallery.columns}
                subscription={gallery.tier as string}
                onSelect={selectGallery}
                nsfw={gallery.nsfw}
              ></GalleryThumbnail>
            ))}
            <div className="pt-10"></div>
            <div className="pt-10"></div>
          </div>
        </div>
      </>
    </div>
    {isOpen ? (
      <>
        <div
          className={`fixed inset-0 transition-opacity z-30 ${
            isOpen ? "animate-in" : "fade-out"
          }`}
          aria-hidden="true"
        >
          <div
            className="absolute inset-0 bg-neroshi-blue-900 opacity-70 z-30"
            onClick={() => setIsOpen(false)}
          ></div>
          <div className="absolute inset-0 overflow-y-auto overflow-x-hidden no-scrollbar pt-2 w-full p-20 z-30">
            <Gallery
              id={selectedGallery as string}
              columns={galleryColumns}
              closeMenu={() => closeGallery()}
            ></Gallery>
          </div>
        </div>
      </>
    ) : null}
  </div>  
  );
}

export default PageComponent;