damien/comissions-app-ui
1
0
Fork 0
mirror of https://github.com/D4M13N-D3V/comissions-app-ui.git synced 2025-03-14 08:15:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

wrapped up discovery component for artist

Browse Source
This commit is contained in:
Damien Ostler 2024-02-11 02:20:39 -05:00
parent 4176de11d8
commit 1c94da7f20
5 changed files with 205 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
components/artist.tsx
View File

@ -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 (
<ImageListItem key="https://images.unsplash.com/photo-1551963831-b3b1ca40c98e">
<img
srcSet={`https://images.unsplash.com/photo-1551963831-b3b1ca40c98e?w=248&fit=crop&auto=format&dpr=2 2x`}
src={`https://images.unsplash.com/photo-1551963831-b3b1ca40c98e?w=248&fit=crop&auto=format`}
alt={"Neroshi"}
loading="lazy"
/>
<ImageListItemBar
title={artistId}
subtitle={"0 Stars (0 Reviews)"}
actionIcon={
<IconButton
sx={{ color: 'rgba(255, 255, 255, 0.54)' }}
aria-label={`info`}
>
<InfoIcon />
</IconButton>
}
/>
</ImageListItem>)
<Card color="primary" sx={{margin:5}}>
<CardContent>
<Grid container spacing={2}>
<Grid item xs={6} md={4}>
<Item>
<CardMedia
component="img"
sx={{ width: 151 }}
image="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png"
alt="Live from space album cover"
/>
</Item>
</Grid>
<Grid item xs={6} md={8}>
<Item>
<Typography variant="h5" component="h2">
{sellerData.name}
</Typography>
<Typography color="primary">
{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

51
components/artistPortfolio.tsx Normal file
View File

@ -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

11
components/header.tsx
View File

@ -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',
}}
>

152
pages/index.tsx
View File

@ -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<paths>()
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 (
<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 }} />
<div style={{ display: 'flex', justifyContent: 'center', marginTop: '10px' }}>
{chips.map((chip, index) => (
<Chip
key={index}
label={chip.label}
color="primary"
variant={chip.outlined ? 'outlined' : 'default'}
onClick={() => console.log(`Clicked on ${chip.label}`)}
style={{ margin: '0 5px' }}
/>
<Box sx={{ m: 4 }} />
{sellersData.map((item) => (
<Artist artistId={item.id} />
))}
</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)',
},
];

43
services/DiscoveryService.ts Normal file
View File

@ -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;
}