From 1c94da7f20c017f5cfe961c5676594cd381d6300 Mon Sep 17 00:00:00 2001 From: Damien Ostler Date: Sun, 11 Feb 2024 02:20:39 -0500 Subject: [PATCH] wrapped up discovery component for artist --- components/artist.tsx | 108 +++++++++++++++++------ components/artistPortfolio.tsx | 51 +++++++++++ components/header.tsx | 11 +-- pages/index.tsx | 152 ++++++--------------------------- services/DiscoveryService.ts | 43 ++++++++++ 5 files changed, 205 insertions(+), 160 deletions(-) create mode 100644 components/artistPortfolio.tsx create mode 100644 services/DiscoveryService.ts diff --git a/components/artist.tsx b/components/artist.tsx index f0f7191..e9b1464 100644 --- a/components/artist.tsx +++ b/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 IconButton from '@mui/material/IconButton'; -import InfoIcon from '@mui/icons-material/Info'; -import Image from 'next/image'; + +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 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 ( - - {"Neroshi"} - - - - } - /> - ) + + + + + + + + + + + + {sellerData.name} + + + {sellerData.averageRating ? `${sellerData.averageRating} Stars (${sellerData.reviewCount} Reviews)` : "No Reviews"} + + + {sellerData.biography} + + + + + + + + } + aria-controls="panel1-content" + id="panel1-header" + > + View Portfolio + + + + + + + + + + + + Profile + Reviews + Browse Services + + ) } export default Artist \ No newline at end of file diff --git a/components/artistPortfolio.tsx b/components/artistPortfolio.tsx new file mode 100644 index 0000000..e3ff8f6 --- /dev/null +++ b/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 ( + + + {portfolioData.map((item) => ( + + {item.title} + + ))} + ) +} +export default ArtistPortfolio \ No newline at end of file diff --git a/components/header.tsx b/components/header.tsx index a089a4f..ff975af 100644 --- a/components/header.tsx +++ b/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', }} > diff --git a/pages/index.tsx b/pages/index.tsx index ad20818..b6a56c3 100644 --- a/pages/index.tsx +++ b/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 fetcher = Fetcher.for() - fetcher.configure({ - baseUrl: 'https://localhost.7148', - init: { - headers: { - - }, + const [sellersData, setSellersData] = useState([]); + useEffect(() => { + const getData = async () => { + const data = await fetchSellers(); + setSellersData(data); } - }) + getData(); + }, []); + + const { user, isLoading } = useUser(); return ( <> - { user ? ( <> @@ -70,26 +73,11 @@ const Home = () => { )} input && input.focus()} sx={{input: {textAlign: "center"}}} fullWidth color="secondary" label="SEARCH ARTISTS" variant="outlined" /> - -
- {chips.map((chip, index) => ( - console.log(`Clicked on ${chip.label}`)} - style={{ margin: '0 5px' }} - /> + + + {sellersData.map((item) => ( + ))} -
- - - - {itemData.map((item) => ( - - ))} - ); @@ -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)', - }, ]; \ No newline at end of file diff --git a/services/DiscoveryService.ts b/services/DiscoveryService.ts new file mode 100644 index 0000000..c3071f8 --- /dev/null +++ b/services/DiscoveryService.ts @@ -0,0 +1,43 @@ + + +export async function fetchSellers(): Promise { + 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 { + 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 { + 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; +} \ No newline at end of file