Members Only Step 9

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([]);

  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();
    console.log(data);
    setIndex(data.imageIndex);
    setLoading(false);
  };      

  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>
            Gallery
          </div>
        }
      </div>
    )
  } 
}

export default Gallery