Members Only Step 10

gallery.js

import React, { useState, useEffect } from 'react'
import { signOut, useSession } from "next-auth/react"
import Link from 'next/link';

const Gallery = () => {
  const { data: session, status } = useSession()
  const [loading, setLoading] = useState(true);
  const [address, setAddress] = useState("");
  const [index, setIndex] = useState([]);
  const [imageUrls, setImageUrls] = useState([]);

  useEffect(() => {
    if(session && session.user && session.user.name && address !== session.user.name) {  
      setAddress(session.user.name);      
      loadFiles();
    }
  }, [session]);

  const loadFiles = async () => {    
    const res = await fetch(`/api/media`);
    const data = await res.json();
    setIndex(data.imageIndex);
    getUrls(data.imageIndex);
    setLoading(false);
  };      

  const getUrls = async (indexArray) => {
    let urls = [];
    for(const indexFile of indexArray) {
      const res = await fetch(`/api/accessToken?id=${indexFile.id}&cid=${indexFile.cid}`);
      const url = await res.text();
      urls.push(url);
    }
    setImageUrls(urls);
  }

  if(loading) {
    <div>
      <h1>Loading...</h1>
    </div>
  } else {
    return (
      <div>
        {
          !session ? 
          <div>
            <h1>You need to sign in</h1>
            <Link href="/">Sign in</Link>
          </div> : 
          <div>
            <h1>The Gallery</h1>
            <div className="grid-container">
              {imageUrls.map((url) => {
                return (
                  <div key={url} className="grid-item">
                    <img className="img" src={url} loading="auto" />
                  </div>
                );
              })}
            </div>
          </div>
        }
      </div>
    )
  } 
}

export default Gallery