wrapped up discovery component for artist

components/artist.tsx

@@ -1,31 +1,89 @@
 import * as React from 'react';
-import ImageListItem from '@mui/material/ImageListItem';
+
-import ImageListItemBar from '@mui/material/ImageListItemBar';
+import Card from '@mui/material/Card';
-import IconButton from '@mui/material/IconButton';
+import CardActions from '@mui/material/CardActions';
-import InfoIcon from '@mui/icons-material/Info';
+import CardContent from '@mui/material/CardContent';
-import Image from 'next/image';
+import Typography from '@mui/material/Typography';
+import CardMedia from '@mui/material/CardMedia';
+import StarBorderOutlinedIcon from '@mui/icons-material/StarBorderOutlined';
+import ShoppingCartCheckoutOutlinedIcon from '@mui/icons-material/ShoppingCartCheckoutOutlined';
+import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
+import Grid from '@mui/material/Grid';
+import Item from '@mui/material/Grid';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ArtistPortfolio from './artistPortfolio';
+import { useEffect, useState } from "react";
+import { fetchSeller } from "../services/DiscoveryService";
+
+
+import { IconButton } from '@mui/material';
 
 const Artist = ({artistId}) => {
+  const [sellerData, setSellerData] = useState([]);
+  useEffect(() => {
+    const getData = async () => {
+      const data = await fetchSeller(artistId);
+      console.log(data)
+      setSellerData(data);
+    }
+    getData();
+  }, []);
+    
     return (
-    <ImageListItem key="https://images.unsplash.com/photo-1551963831-b3b1ca40c98e">
+      <Card color="primary" sx={{margin:5}}>
-    <img
+      <CardContent>
-      srcSet={`https://images.unsplash.com/photo-1551963831-b3b1ca40c98e?w=248&fit=crop&auto=format&dpr=2 2x`}
+      <Grid container spacing={2}>
-      src={`https://images.unsplash.com/photo-1551963831-b3b1ca40c98e?w=248&fit=crop&auto=format`}
+        <Grid item xs={6} md={4}>
-      alt={"Neroshi"}
+          <Item>
-      loading="lazy"
+            <CardMedia
-    />
+              component="img"
-    <ImageListItemBar
+              sx={{ width: 151 }}
-      title={artistId}
+              image="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png"
-      subtitle={"0 Stars (0 Reviews)"}
+              alt="Live from space album cover"
-      actionIcon={
+            />
-        <IconButton
+          </Item>
-          sx={{ color: 'rgba(255, 255, 255, 0.54)' }}
+        </Grid>
-          aria-label={`info`}
+        <Grid item xs={6} md={8}>
-        >
+          <Item>
-          <InfoIcon />
+            <Typography variant="h5" component="h2">
-        </IconButton>
+              {sellerData.name}
-      }
+            </Typography>
-    />
+            <Typography color="primary">
-  </ImageListItem>)
+              {sellerData.averageRating ? `${sellerData.averageRating} Stars (${sellerData.reviewCount} Reviews)` : "No Reviews"}
+            </Typography>
+            <Typography variant="body2" component="p">
+              {sellerData.biography}
+            </Typography>
+          </Item>
+          
+        </Grid>
+        <Grid item xs={12} md={12}>
+
+        <Accordion>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1-content"
+            id="panel1-header"
+          >
+            View Portfolio
+          </AccordionSummary>
+          <AccordionDetails>
+            <ArtistPortfolio artistId={artistId} />
+          </AccordionDetails>
+        </Accordion>
+          <Item>
+          </Item>
+        </Grid>
+      </Grid>   
+      </CardContent>
+      <CardActions>
+      <IconButton color="primary" size="small"><AccountCircleOutlinedIcon></AccountCircleOutlinedIcon>Profile</IconButton>
+      <IconButton color="primary" size="small"><StarBorderOutlinedIcon></StarBorderOutlinedIcon>Reviews</IconButton>
+      <IconButton color="primary" size="small"><ShoppingCartCheckoutOutlinedIcon></ShoppingCartCheckoutOutlinedIcon>Browse Services</IconButton>
+      </CardActions>
+    </Card>)
 }
 export default Artist

components/artistPortfolio.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import CardMedia from '@mui/material/CardMedia';
+import StarBorderOutlinedIcon from '@mui/icons-material/StarBorderOutlined';
+import ShoppingCartCheckoutOutlinedIcon from '@mui/icons-material/ShoppingCartCheckoutOutlined';
+import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
+import Grid from '@mui/material/Grid';
+import Item from '@mui/material/Grid';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ImageList from '@mui/material/ImageList';
+import ImageListItem from '@mui/material/ImageListItem';
+import { useEffect, useState } from "react";
+import { fetchSeller,fetchSellerPortfolio,getPortfolioUrl } from "../services/DiscoveryService";
+
+
+import { IconButton } from '@mui/material';
+
+const ArtistPortfolio = ({artistId}) => {
+  const [portfolioData, setPortfolioData] = useState([]);
+  useEffect(() => {
+    const getData = async () => {
+      const data = await fetchSellerPortfolio(artistId);
+      console.log(data)
+      setPortfolioData(data);
+    }
+    getData();
+  }, []);
+    
+    return (
+      
+        <ImageList  cols={2} rowHeight={200} sx={{maxHeight:400}}>
+        {portfolioData.map((item) => (
+          <ImageListItem key={item.img}>
+            <img
+              srcSet={`${getPortfolioUrl(artistId,item.id)}`}
+              src={`${getPortfolioUrl(artistId,item.id)}`}
+              alt={item.title}
+              loading="lazy"
+            />
+          </ImageListItem>
+        ))}
+      </ImageList>)
+}
+export default ArtistPortfolio

components/header.tsx

@@ -3,18 +3,11 @@ import { useUser } from "@auth0/nextjs-auth0/client";
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import Menu from '@mui/material/Menu';
-import MenuIcon from '@mui/icons-material/Menu';
 import Container from '@mui/material/Container';
-import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
-import Badge from "@mui/material/Badge";
-import NotificationsIcon from "@mui/icons-material/Notifications";
-import AdbIcon from '@mui/icons-material/Adb';
 import { Chip, Icon } from '@mui/material';
 import {
   NovuProvider,
@@ -66,10 +59,10 @@ function ResponsiveAppBar() {
             sx={{
               mr: 2,
               paddingLeft: '1rem',
-              display: { xs: 'none', md: 'flex' },
+              display: { xs: 'flex', md: 'flex' },
               fontFamily: 'monospace',
               fontWeight: 700,
-              letterSpacing: '.3rem',
+              letterSpacing: '0rem',
               textDecoration: 'none',
             }}
           >

pages/index.tsx

@@ -1,4 +1,5 @@
 import { useUser } from "@auth0/nextjs-auth0/client";
+import { GetAccessToken } from "@auth0/nextjs-auth0";
 import Layout from "../components/layout";
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
@@ -6,16 +7,19 @@ import { Typography } from "@mui/material";
 import Box from '@mui/material/Box';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import styled from "@emotion/styled";
-import IconButton from '@mui/material/IconButton';
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-import ImageListItemBar from '@mui/material/ImageListItemBar';
-import ListSubheader from '@mui/material/ListSubheader';
-import InfoIcon from '@mui/icons-material/Info';
-import Chip from "@mui/material/Chip";
-import { Fetcher } from "openapi-typescript-fetch";
-import { paths } from "../types";
 import Artist from "../components/artist";
+import { useEffect, useState } from "react";
+import { fetchSellers } from "../services/DiscoveryService";
+
+
+
+
+//API CODE FOR DISCOVERY
+
+
+
+
+
 
 
 const StyledTextField = styled(TextField)({
@@ -42,21 +46,20 @@ const StyledTextField = styled(TextField)({
 
 
 const Home = () => {
-  const { user, isLoading } = useUser();
+  const [sellersData, setSellersData] = useState([]);
-  const fetcher = Fetcher.for<paths>()
+  useEffect(() => {
-  fetcher.configure({
+    const getData = async () => {
-    baseUrl: 'https://localhost.7148',
+      const data = await fetchSellers();
-    init: {
+      setSellersData(data);
-      headers: {
-  
-      },
     }
-  })
+    getData();
+  }, []);
+
+  const { user, isLoading } = useUser();
 
   return (
     <Layout user={user} loading={isLoading}>
       <>
-      
         { user ? (
           <>
         <Box sx={{ m: 1 }} />
@@ -70,26 +73,11 @@ const Home = () => {
         )}  
         <Box sx={{ m: 2 }} />
         <StyledTextField    inputRef={input => input && input.focus()} sx={{input: {textAlign: "center"}}} fullWidth color="secondary" label="SEARCH ARTISTS" variant="outlined" />
-        <Box sx={{ m: 4 }} />
+          <Box sx={{ m: 4 }} /> 
-        <div style={{ display: 'flex', justifyContent: 'center', marginTop: '10px' }}>
+
-        {chips.map((chip, index) => (
+        {sellersData.map((item) => (
-          <Chip
+          <Artist artistId={item.id} />
-            key={index}
-            label={chip.label}
-            color="primary"
-            variant={chip.outlined ? 'outlined' : 'default'}
-            onClick={() => console.log(`Clicked on ${chip.label}`)}
-            style={{ margin: '0 5px' }}
-          />
         ))}
-      </div>
-
-
-    <ImageList sx={{ flex:1 }}>
-      {itemData.map((item) => (
-        <Artist artistId="1" />
-      ))}
-    </ImageList>
       </>
     </Layout>
   );
@@ -108,92 +96,4 @@ const chips = [
   { label: 'Category', outlined: false },
   { label: 'Category', outlined: true },
   { label: 'Category', outlined: false },
-];
-
-
-const itemData = [
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-    rows: 2,
-    cols: 2,
-    featured: true,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-    rows: 2,
-    cols: 2,
-    featured: true,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-    rows: 2,
-    cols: 2,
-    featured: true,
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Neroshi',
-    author: '0 Stars (0 Reviews)',
-  },
 ];

services/DiscoveryService.ts

@@ -0,0 +1,43 @@
+
+
+export async function fetchSellers(): Promise<any> {
+    const baseUrl = "https://core-api.development.comissions.app";
+    var url = baseUrl+`/api/Discovery/Sellers`;
+    console.log(url);
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error('Failed to fetch sellers');
+    }
+    return await response.json();
+}
+
+export async function fetchSeller(id): Promise<any> {
+    console.log(id)
+    const baseUrl = "https://core-api.development.comissions.app";
+    var url = baseUrl+`/api/Discovery/Sellers/${id}`;
+    console.log(url);
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error('Failed to fetch seller');
+    }
+    return await response.json();
+}
+
+export async function fetchSellerPortfolio(id): Promise<any> {
+    console.log(id)
+    const baseUrl = "https://core-api.development.comissions.app";
+    var url = baseUrl+`/api/Discovery/Sellers/${id}/Portfolio`;
+    console.log(url);
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error('Failed to fetch seller portfolio');
+    }
+    return await response.json();
+}
+
+export function getPortfolioUrl(id, pieceId): string {
+    console.log(id)
+    const baseUrl = "https://core-api.development.comissions.app";
+    var url = baseUrl+`/api/Discovery/Sellers/${id}/Portfolio/${pieceId}`;
+    return url;
+}