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

more shit for api

Browse Source
This commit is contained in:
Damien Ostler 2024-02-11 20:44:27 -05:00
parent 1c94da7f20
commit fe11f9c6fb
7 changed files with 206 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/artist.tsx
View File

@ -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}) => {
<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">
@ -60,30 +51,19 @@ const Artist = ({artistId}) => {
</Item>
</Grid>
<Grid item xs={6} md={4}>
<Grid item xs={6} md={4}>
<Button color="secondary" variant='contained' sx={{width:150 }}>Request Order</Button>
<Button href={"seller/"+artistId} color="primary" variant='contained' sx={{width:150, marginTop:2}}>View Profile</Button>
</Grid>
</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

19
components/artistPortfolio.tsx
View File

@ -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}) => {
<ImageList cols={2} rowHeight={200} sx={{maxHeight:400}}>
{portfolioData.map((item) => (
<ImageListItem key={item.img}>
<ImageListItem key={item.id}>
<img
srcSet={`${getPortfolioUrl(artistId,item.id)}`}
src={`${getPortfolioUrl(artistId,item.id)}`}

8
components/header.tsx
View File

@ -104,7 +104,13 @@ function ResponsiveAppBar() {
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
<MenuItem key="logout" onClick={handleCloseUserMenu}>
<MenuItem key="sellerDashboard" onClick={handleCloseUserMenu}>
<Button color="secondary" variant='contained' href="profile">Seller Dashboard</Button>
</MenuItem>
<MenuItem key="myOrders" onClick={handleCloseUserMenu}>
<Button color="primary" href="profile">My Orders</Button>
</MenuItem>
<MenuItem key="settings" onClick={handleCloseUserMenu}>
<Button color="primary" href="profile">Settings</Button>
</MenuItem>
<MenuItem key="logout" onClick={handleCloseUserMenu}>

2
components/layout.tsx
View File

@ -11,7 +11,7 @@ const Layout = ({ user, loading = false, children }: LayoutProps) => {
return (
<>
<Head>
<title>Next.js with Auth0</title>
<title>comissions.app</title>
</Head>
<Header user={user} loading={loading} />

47
pages/index.tsx
View File

@ -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 (
<Layout user={user} loading={isLoading}>
<>
{ user ? (
<>
<Box sx={{ m: 1 }} />
<ButtonGroup fullWidth variant="contained" aria-label="outlined primary button group">
<Button color="primary" fullWidth>Your Orders</Button>
<Button color="secondary" fullWidth>Seller Dashboard</Button>
</ButtonGroup>
</>
): (
<Typography variant="h2" component="h2" textAlign="center">COMISSIONS.APP</Typography>
)}
<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 }} />
{sellersData.map((item) => (
<Artist artistId={item.id} />
))}
</>
{loading ? ( // Render loading indicator if loading is true
<Box sx={{textAlign:"center", paddingTop:20}}>
<Typography variant="h4" sx={{textAlign:"center"}}>
Loading...
</Typography>
<CircularProgress sx={{paddingTop:5}} />
</Box>
) : (
<>
{sellersData.map((item) => (
<Artist artistId={item.id} />
))}
</>
)}
</Layout>
);
};

151
pages/seller/[id].tsx Normal file
View File

@ -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 (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box sx={{ p: 3 }}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
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 (
<Layout user={user} loading={isLoading}>
{loading ? ( // Render loading indicator if loading is true
<Box sx={{textAlign:"center", paddingTop:20}}>
<Typography variant="h4" sx={{textAlign:"center"}}>
Loading...
</Typography>
<CircularProgress sx={{paddingTop:5}} />
</Box>
) : (
<Grid container spacing={2} sx={{padding:4}}>
<Grid container sx={{textAlign:"center"}}>
<Grid item xs={12} sm={2} sx={{textAlign:"center"}}>
<Button color="primary" variant="contained" href="../">
Back
</Button>
</Grid>
<Grid item xs={12} sm={8} sx={{textAlign:"center"}}>
<Typography variant="h4">
{sellerData.name}
</Typography>
</Grid>
<Grid item xs={12} sm={2} sx={{textAlign:"center"}}>
</Grid>
</Grid>
<Grid item xs={12} sm={6}>
<Card sx={{height:250, overflowY: 'scroll'}}>
<CardContent>
<Typography variant="h5" sx={{textAlign:"center"}}>
Biography
</Typography>
<Typography sx={{paddingTop:2, textAlign:"center"}}>
{sellerData.biography}
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card sx={{height:250, overflowY: 'scroll'}}>
<CardContent sx={{textAlign:"center"}}>
<Grid item xs={12} md={12}>
<Typography variant="h5">
Social Media
</Typography>
<List
sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
aria-label="contacts"
>
</List>
</Grid>
<Grid item xs={12} md={12}>
</Grid>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={12} sx={{textAlign:"center"}} >
<Button size="large" color="secondary" variant="contained" href={"../order/"+id}>
Request Order
</Button>
</Grid>
<Grid item xs={12} sm={12}>
<ArtistPortfolio artistId={id} />
</Grid>
</Grid>
)}
</Layout>
);
};
export default SellerProfile;

26
services/DiscoveryService.ts
View File

@ -12,10 +12,8 @@ export async function fetchSellers(): Promise<any> {
}
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');
@ -24,10 +22,8 @@ export async function fetchSeller(id): Promise<any> {
}
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');
@ -35,8 +31,28 @@ export async function fetchSellerPortfolio(id): Promise<any> {
return await response.json();
}
export async function fetchServicePortfolio(sellerId, serviceId): Promise<any> {
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<any> {
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;