import * as React from 'react'; import {ImageList, Box, Typography, CircularProgress} from '@mui/material'; import { useEffect, useState } from "react"; import ArtistPortfolioImage from './artistPortfolioImage'; const ArtistPortfolio = ({masonry,columns,artistId}) => { const [portfolioData, setPortfolioData] = useState([]); const [loading, setLoading] = useState(true); // State for loading indicator useEffect(() => { const getData = async () => { const response = await fetch('/api/discovery/artist/'+artistId+'/portfolio'); const data = await response.json(); setPortfolioData(data); setLoading(false); } (portfolioData) getData(); }, []); return ( (loading) ? ( <Box sx={{textAlign:"center", paddingTop:20}}> <Typography variant="h4" sx={{textAlign:"center"}}> Loading </Typography> <CircularProgress sx={{paddingTop:5}} /> </Box> ) : ( (masonry) ? ( <ImageList variant="masonry" gap={8} cols={columns} sx={{overflowY:"scroll", maxWidth:"100%"}} > {portfolioData.map((item) => ( <ArtistPortfolioImage artistId={artistId} itemId={item.id} /> ))} </ImageList> ):( <ImageList gap={8} cols={columns} > {portfolioData.map((item) => ( <ArtistPortfolioImage artistId={artistId} itemId={item.id} /> ))} </ImageList> ) ) ) } export default ArtistPortfolio