feat: added portfolio to artist dashboard

components/artistPortfolio.tsx

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

components/editableArtistPortfolio.tsx

@@ -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 }}>
-                            {portfolioData.map((item) => (
-                                <EditableArtistPortfolioImage artistId={artistId} itemId={item.id} />
-                            ))}
-                        </ImageList>
-                    </Grid>
                 </Grid>
+                    <ImageList cols={2} rowHeight={200} sx={{ height: 400, width:"100%" }}>
+                        {portfolioData.map((item) => (
+                            <EditableArtistPortfolioImage artistId={artistId} itemId={item.id} />
+                        ))}
+                    </ImageList>
+                    </>
+                ) : (
+                    <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>
+                ))
             )
     )
 }

components/editableArtistPortfolioImage.tsx

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

pages/api/artist/portfolio.tsx

@@ -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'
+    const file = files["newImage"]; // 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)
     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');

pages/api/artist/portfolio/[id]/delete.tsx

@@ -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()});
+});

pages/api/discovery/artist/[sellerId]/portfolio.tsx

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

pages/artistDashboard.tsx

@@ -241,7 +241,7 @@ const SellerDashoard = (ctx) => {
                                   sx={{ width: '100%' }}
                                 />
                               </TabPanel>
-                              <TabPanel value={tabValue} index={1} dir={theme.direction}>
+                              <TabPanel value={tabValue} index={1} dir={theme.direction}  >
                                 <EditableArtistPortfolio artistId={sellerData["id"]}></EditableArtistPortfolio>
                               </TabPanel>
                               <TabPanel value={tabValue} index={2} dir={theme.direction}>