diff --git a/components/artist.tsx b/components/artist.tsx index e9b1464..5abb620 100644 --- a/components/artist.tsx +++ b/components/artist.tsx @@ -15,6 +15,7 @@ import AccordionSummary from '@mui/material/AccordionSummary'; import AccordionDetails from '@mui/material/AccordionDetails'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ArtistPortfolio from './artistPortfolio'; +import Button from '@mui/material/Button'; import { useEffect, useState } from "react"; import { fetchSeller } from "../services/DiscoveryService"; @@ -36,16 +37,6 @@ const Artist = ({artistId}) => { - - - - - @@ -60,30 +51,19 @@ const Artist = ({artistId}) => { + + + + + + - - } - 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 index e3ff8f6..a2d302a 100644 --- a/components/artistPortfolio.tsx +++ b/components/artistPortfolio.tsx @@ -1,23 +1,8 @@ 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 { fetchSellerPortfolio,getPortfolioUrl } from "../services/DiscoveryService"; import { IconButton } from '@mui/material'; @@ -37,7 +22,7 @@ const ArtistPortfolio = ({artistId}) => { {portfolioData.map((item) => ( - + - + + + + + + + diff --git a/components/layout.tsx b/components/layout.tsx index 71999ee..5efb898 100644 --- a/components/layout.tsx +++ b/components/layout.tsx @@ -11,7 +11,7 @@ const Layout = ({ user, loading = false, children }: LayoutProps) => { return ( <> - Next.js with Auth0 + comissions.app
diff --git a/pages/index.tsx b/pages/index.tsx index b6a56c3..b231e22 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -10,16 +10,7 @@ import styled from "@emotion/styled"; import Artist from "../components/artist"; import { useEffect, useState } from "react"; import { fetchSellers } from "../services/DiscoveryService"; - - - - -//API CODE FOR DISCOVERY - - - - - +import CircularProgress from '@mui/material/CircularProgress'; const StyledTextField = styled(TextField)({ @@ -47,10 +38,12 @@ const StyledTextField = styled(TextField)({ const Home = () => { const [sellersData, setSellersData] = useState([]); + const [loading, setLoading] = useState(true); // State for loading indicator useEffect(() => { const getData = async () => { const data = await fetchSellers(); setSellersData(data); + setLoading(false); } getData(); }, []); @@ -59,26 +52,20 @@ const Home = () => { return ( - <> - { user ? ( - <> - - - - - - - ): ( - COMISSIONS.APP - )} - - input && input.focus()} sx={{input: {textAlign: "center"}}} fullWidth color="secondary" label="SEARCH ARTISTS" variant="outlined" /> - - - {sellersData.map((item) => ( - - ))} - + {loading ? ( // Render loading indicator if loading is true + + + Loading... + + + + ) : ( + <> + {sellersData.map((item) => ( + + ))} + + )} ); }; diff --git a/pages/seller/[id].tsx b/pages/seller/[id].tsx new file mode 100644 index 0000000..413829f --- /dev/null +++ b/pages/seller/[id].tsx @@ -0,0 +1,151 @@ +import Layout from "../../components/layout"; +import { useUser } from "@auth0/nextjs-auth0/client"; +import { Box, Grid, Card, CardContent, Typography, List, ListItem, ListItemButton, ListItemIcon, + ListItemText, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button, + Tabs, Tab, CircularProgress } from "@mui/material"; +import { useState, useEffect } from "react"; +import { useRouter } from 'next/router' +import { fetchSeller } from "../../services/DiscoveryService"; +import ServicePortfolio from "../../components/servicePortfolio"; +import ServicePanel from "../../components/servicePanel"; +import ArtistPortfolio from "../../components/artistPortfolio"; +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'; + + +interface TabPanelProps { + children?: React.ReactNode; + index: number; + value: number; +} + +function a11yProps(index: number) { + return { + id: `simple-tab-${index}`, + 'aria-controls': `simple-tabpanel-${index}`, + }; +} + +function createData( + serviceName: string, + rating: number, + review: string +) { + return { serviceName, rating, review }; +} + +function CustomTabPanel(props: TabPanelProps) { + const { children, value, index, ...other } = props; + + return ( + + ); +} + +const SellerProfile = () => { + const { user, isLoading } = useUser(); + const router = useRouter() + const { id } = router.query + console.log(router.query) + const [sellerData, setSellerData] = useState([]); + const [loading, setLoading] = useState(true); // State for loading indicator + useEffect(() => { + const getData = async () => { + if(id){ + const data = await fetchSeller(id); + setSellerData(data); + setLoading(false); // Once data is fetched, set loading to false + } + } + getData(); + }, [id]); + + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + + const [value, setValue] = useState(0); + return ( + + {loading ? ( // Render loading indicator if loading is true + + + Loading... + + + + ) : ( + + + + + + + + {sellerData.name} + + + + + + + + + + Biography + + + {sellerData.biography} + + + + + + + + + + Social Media + + + + + + + + + + + + + + + + + )} + + ); + }; + + export default SellerProfile; diff --git a/services/DiscoveryService.ts b/services/DiscoveryService.ts index c3071f8..589f39f 100644 --- a/services/DiscoveryService.ts +++ b/services/DiscoveryService.ts @@ -12,10 +12,8 @@ export async function fetchSellers(): Promise { } 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'); @@ -24,10 +22,8 @@ export async function fetchSeller(id): Promise { } 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'); @@ -35,8 +31,28 @@ export async function fetchSellerPortfolio(id): Promise { return await response.json(); } +export async function fetchServicePortfolio(sellerId, serviceId): Promise { + const baseUrl = "https://core-api.development.comissions.app"; + var url = baseUrl+`/api/Discovery/Sellers/${sellerId}/Services/${serviceId}/Portfolio`; + const response = await fetch(url); + if (!response.ok) { + throw new Error('Failed to fetch seller portfolio'); + } + return await response.json(); +} + +export async function fetchService(sellerId, serviceId): Promise { + const baseUrl = "https://core-api.development.comissions.app"; + var url = baseUrl+`/api/Discovery/Sellers/${sellerId}/Services/${serviceId}`; + 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;