damien/comissions-app-ui
1
0
Fork 0
mirror of https://github.com/D4M13N-D3V/comissions-app-ui.git synced 2025-10-31 01:25:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: added portfolio to artist dashboard

Browse Source
This commit is contained in:
Damien Ostler 2024-02-15 02:16:38 -05:00
parent ed48b67e3c
commit c8b1dfb3ba
7 changed files with 94 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/artistPortfolio.tsx
View File

@ -13,7 +13,7 @@ const ArtistPortfolio = ({artistId}) => {
setPortfolioData(data);
setLoading(false);
}
//console.log(portfolioData)
////console.log(portfolioData)
getData();
}, []);
return (

37
components/editableArtistPortfolio.tsx
View File

@ -22,7 +22,7 @@ const EditableArtistPortfolio = ({ artistId }) => {
function handlePortfolioUploadImageChange(event) {
const file = event.target.files[0];
const formData = new FormData();
formData.append('file', file);
formData.append('newImage', file);
fetch('/api/artist/portfolio', {
method: 'POST',
@ -45,7 +45,9 @@ const EditableArtistPortfolio = ({ artistId }) => {
</Box>
) :
(
<Grid container spacing={2} sx={{ padding: 4 }}>
(portfolioData.length > 0 ?(<>
<Grid container spacing={2} sm={12} sx={{ padding: 4 }}>
<Grid item xs={12} sm={12} sx={{ textAlign: "center" }}>
<input
id="portfolioUploadInput"
@ -60,20 +62,43 @@ const EditableArtistPortfolio = ({ artistId }) => {
variant='outlined'
component="span"
size="small"
sx={{width:"100%"}}
startIcon={<FileOpenIcon />}
>
Add Image
</Button>
</label>
</Grid>
<Grid item xs={12} sm={12} sx={{ textAlign: "center" }}>
<ImageList cols={2} rowHeight={200} sx={{ maxHeight: 400 }}>
</Grid>
<ImageList cols={2} rowHeight={200} sx={{ height: 400, width:"100%" }}>
{portfolioData.map((item) => (
<EditableArtistPortfolioImage artistId={artistId} itemId={item.id} />
))}
</ImageList>
</Grid>
</Grid>
</>
) : (
<Box sx={{ textAlign: "center" }}>
<input
id="portfolioUploadInput"
style={{ display: 'none' }}
accept="image/*"
type="file"
onChange={handlePortfolioUploadImageChange}
/>
<label htmlFor="portfolioUploadInput">
<Button
fullWidth
variant='outlined'
component="span"
size="small"
sx={{width:"100%"}}
startIcon={<FileOpenIcon />}
>
Upload Your First Portfolio Image
</Button>
</label>
</Box>
))
)
)
}

20
components/editableArtistPortfolioImage.tsx
View File

@ -2,8 +2,9 @@ import * as React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import { useEffect, useState } from "react";
import DeleteIcon from '@mui/icons-material/Delete';
import { CircularProgress } from '@mui/material';
import { CircularProgress, ImageListItemBar } from '@mui/material';
import { IconButton } from '@mui/material';
@ -13,8 +14,16 @@ const EditableArtistPortfolioImage = ({artistId,itemId}) => {
setLoaded(true);
};
const deleteButton = () => {
fetch('/api/artist/portfolio/'+itemId+"/delete", {
method: 'DELETE'
}).then(response =>
window.location.reload());
}
return (
<ImageListItem key={itemId }>
<ImageListItem key={itemId } sx={{maxWidth:300, maxHeight:300, overflow:"hidden"}}>
<img
srcSet={process.env.NEXT_PUBLIC_API_URL+`/api/Discovery/Sellers/${artistId}/Portfolio/${itemId}`}
src={process.env.NEXT_PUBLIC_API_URL+`/api/Discovery/Sellers/${artistId}/Portfolio/${itemId}`}
@ -23,6 +32,13 @@ const EditableArtistPortfolioImage = ({artistId,itemId}) => {
style={{ filter: loaded ? 'blur(0)' : 'blur(10px)', backgroundColor:'grey' }}
onLoad={handleImageLoaded}
/>
<ImageListItemBar
actionIcon={
<IconButton onClick={deleteButton} color="error" >
<DeleteIcon />
</IconButton>
}>
</ImageListItemBar>
</ImageListItem>)
}
export default EditableArtistPortfolioImage

18
pages/api/artist/portfolio.tsx
View File

@ -1,11 +1,16 @@
import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';
import { IncomingForm } from 'formidable'
import fs from 'fs/promises';
export const config = {
api: {
bodyParser: false,
},
};
async function createBlobFromFile(path: string): Promise<Blob> {
const file = await fs.readFile(path);
return new Blob([file]);
}
export default withApiAuthRequired(async function handler(req, res) {
const { accessToken } = await getAccessToken(req, res);
@ -18,22 +23,19 @@ export default withApiAuthRequired(async function handler(req, res) {
res.status(500).json({ error: 'Error parsing form' });
return;
}
const file = files["file"]; // Assuming your file input field name is 'file'
console.log(file)
const formData = new FormData();
formData.append('file', file); // Append the file to FormData
console.log(formData)
const file = files["newImage"]; // Assuming your file input field name is 'file'
try {
const response = await fetch(process.env.NEXT_PUBLIC_API_URL + '/api/SellerProfile/Portfolio', {
method: 'POST',
headers: {
"Authorization": `Bearer ${accessToken}`
"Authorization": `Bearer ${accessToken}`,
"Content-Type": " application/octet-stream"
},
body: formData // Don't set Content-Type, FormData will handle it
body: await createBlobFromFile(file[0].filepath) // Don't set Content-Type, FormData will handle it
});
//console.log(response)
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || 'Failed to upload file');

26
pages/api/artist/portfolio/[id]/delete.tsx Normal file
View File

@ -0,0 +1,26 @@
import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';
import { IncomingForm } from 'formidable'
import fs from 'fs/promises';
export const config = {
api: {
bodyParser: false,
},
};
async function createBlobFromFile(path: string): Promise<Blob> {
const file = await fs.readFile(path);
return new Blob([file]);
}
export default withApiAuthRequired(async function handler(req, res) {
const { accessToken } = await getAccessToken(req, res);
const { id } = req.query;
const response = await fetch(process.env.NEXT_PUBLIC_API_URL + '/api/SellerProfile/Portfolio/'+id, {
method: 'DELETE',
headers: {
"Authorization": `Bearer ${accessToken}`
},
});
res.status(200).json({status: await response.json()});
});

5
pages/api/discovery/artist/[sellerId]/portfolio.tsx
View File

@ -1,13 +1,14 @@
export default async function handler(req, res ): Promise<any> {
const { sellerId } = req.query;
var url = process.env.NEXT_PUBLIC_API_URL+`/api/Discovery/Sellers/${sellerId}/Portfolio`;
//console.log(url)
////console.log(url)
const response = await fetch(url);
console.log(response)
if (!response.ok) {
throw new Error('Failed to fetch seller portfolio');
}
var result = await response.json();
//console.log(result)
////console.log(result)
res.status(200).json(result);
}