mirror of
https://github.com/D4M13N-D3V/comissions-app-ui.git
synced 2025-03-14 08:15:08 +00:00
386 lines
19 KiB
TypeScript
386 lines
19 KiB
TypeScript
|
import { withPageAuthRequired } from "@auth0/nextjs-auth0/client";
|
||
|
|
import Grid from '@mui/material/Grid';
|
||
|
|
import Card from '@mui/material/Card';
|
||
|
|
import CardContent from '@mui/material/CardContent';
|
||
|
|
import Button from '@mui/material/Button';
|
||
|
|
import { Accordion, Typography } from "@mui/material";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import Switch from '@mui/material/Switch';
|
||
|
|
import Divider from '@mui/material/Divider';
|
||
|
|
import TextField from '@mui/material/TextField';
|
||
|
|
import { MuiColorInput } from 'mui-color-input'
|
||
|
|
import { AccordionSummary } from "@mui/material";
|
||
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||
|
|
import AccordionDetails from '@mui/material/AccordionDetails';
|
||
|
|
import Slider from '@mui/material/Slider';
|
||
|
|
import ArtistPortfolio from '../../../components/Old/artistPortfolio';
|
||
|
|
|
||
|
|
const Profile = () => {
|
||
|
|
|
||
|
|
const [profileData, setSellerProfileData] = useState(null);
|
||
|
|
|
||
|
|
const [backgroundColor, setBackgroundColor] = useState('rgb(126, 115, 115)');
|
||
|
|
|
||
|
|
const [headerColor, setHeaderColor] = useState('rgb(194, 187, 187)');
|
||
|
|
const [headerIsImage, setHeaderImage] = useState(false);
|
||
|
|
const [headerImageUrl, setHeaderImageUrl] = useState('');
|
||
|
|
const [headerText, setHeaderText] = useState('Shop');
|
||
|
|
const [headerSize, setHeaderSize] = useState(5);
|
||
|
|
const headerVariant = [
|
||
|
|
'h6', // Size 1
|
||
|
|
'h5', // Size 2
|
||
|
|
'h4', // Size 3
|
||
|
|
'h3', // Size 4
|
||
|
|
'h2', // Size 5
|
||
|
|
'h1', // Size 6
|
||
|
|
][headerSize - 1] || 'h6';
|
||
|
|
|
||
|
|
|
||
|
|
const [bioColor, setBioColor] = useState('rgb(186, 186, 186)');
|
||
|
|
const [bioBgColor, setBioBgColor] = useState('rgb(103, 97, 97)');
|
||
|
|
const [bioHeaderColor, setBioHeaderColor] = useState('rgb(255, 255, 255)');
|
||
|
|
const [bioHeaderIsImage, setBioHeaderImage] = useState(false);
|
||
|
|
const [bioHeaderImageUrl, setBioHeaderImageUrl] = useState('');
|
||
|
|
const [bioHeaderText, setBioHeaderText] = useState('Biography');
|
||
|
|
const [bioHeaderSize, setBioHeaderSize] = useState(3);
|
||
|
|
const [bioSize, setBioSize] = useState(1);
|
||
|
|
const bioHeaderVariant = [
|
||
|
|
'h6', // Size 1
|
||
|
|
'h5', // Size 2
|
||
|
|
'h4', // Size 3
|
||
|
|
'h3', // Size 4
|
||
|
|
'h2', // Size 5
|
||
|
|
'h1', // Size 6
|
||
|
|
][bioHeaderSize - 1] || 'h6';
|
||
|
|
const bioVariant = [
|
||
|
|
'h6', // Size 1
|
||
|
|
'h5', // Size 2
|
||
|
|
'h4', // Size 3
|
||
|
|
'h3', // Size 4
|
||
|
|
'h2', // Size 5
|
||
|
|
'h1', // Size 6
|
||
|
|
][bioSize - 1] || 'h6';
|
||
|
|
|
||
|
|
const [portfolioBgColor, setPortfolioBgColor] = useState('rgb(78, 73, 73)');
|
||
|
|
const [portfolioColumns, setPotrfolioColumns] = useState(2);
|
||
|
|
const [portfolioWoven, setPortfolioWoven] = useState(true);
|
||
|
|
const [portfolioShouldScroll, setPortfolioShouldScroll] = useState(true);
|
||
|
|
const [portfolioSize, setPortfolioSize] = useState(25);
|
||
|
|
|
||
|
|
const getData = async () => {
|
||
|
|
const profileResponse = await fetch('/api/artist/profile');
|
||
|
|
const sellerProfile = await profileResponse.json();
|
||
|
|
setSellerProfileData(sellerProfile);
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
getData()
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleBackgroundColorChange = (newValue) => {
|
||
|
|
setBackgroundColor(newValue)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleHeaderTextChange = (e) => {
|
||
|
|
setHeaderText(e.target.value)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleHeaderImageUrl = (e) => {
|
||
|
|
setHeaderImageUrl(e.target.value)
|
||
|
|
}
|
||
|
|
const handleHeaderImageToggle = (e) => {
|
||
|
|
setHeaderImage(e.target.checked)
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleHeaderSize = (e, newValue) => {
|
||
|
|
setHeaderSize(newValue)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleHeaderColorChange = (newValue) => {
|
||
|
|
setHeaderColor(newValue)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const handleBioHeaderTextChange = (e) => {
|
||
|
|
setBioHeaderText(e.target.value)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleBioHeaderImageUrl = (e) => {
|
||
|
|
setBioHeaderImageUrl(e.target.value)
|
||
|
|
}
|
||
|
|
const handleBioHeaderImageToggle = (e) => {
|
||
|
|
setBioHeaderImage(e.target.checked)
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleBioHeaderSize = (e, newValue) => {
|
||
|
|
setBioHeaderSize(newValue)
|
||
|
|
}
|
||
|
|
const handleBioSize = (e, newValue) => {
|
||
|
|
setBioSize(newValue)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleBioHeaderColorChange = (newValue) => {
|
||
|
|
setBioHeaderColor(newValue)
|
||
|
|
}
|
||
|
|
const handleBioColorChange = (newValue) => {
|
||
|
|
setBioColor(newValue)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleBioBgColorChange = (newValue) => {
|
||
|
|
setBioBgColor(newValue)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const handlePortfolioBgColor = (newValue) => {
|
||
|
|
setPortfolioBgColor(newValue)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handlePortfolioColumns = (e, newValue) => {
|
||
|
|
setPotrfolioColumns(newValue)
|
||
|
|
}
|
||
|
|
const handlePortfolioWoven = (e) => {
|
||
|
|
setPortfolioWoven(e.target.checked)
|
||
|
|
};
|
||
|
|
const handlePortfolioShouldScroll = (e) => {
|
||
|
|
setPortfolioShouldScroll(e.target.checked)
|
||
|
|
console.log(portfolioShouldScroll)
|
||
|
|
};
|
||
|
|
const handlePortfolioSize = (e, newValue) => {
|
||
|
|
setPortfolioSize(newValue)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Grid container spacing={2}>
|
||
|
|
<Grid item xs={12} md={4}>
|
||
|
|
<Card >
|
||
|
|
<CardContent>
|
||
|
|
<Grid container spacing={1}>
|
||
|
|
<Grid item xs={12} md={9}>
|
||
|
|
<Typography variant="h6" >
|
||
|
|
Customize Your Page
|
||
|
|
</Typography>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={3}>
|
||
|
|
<Button variant="contained" size="large">
|
||
|
|
Save
|
||
|
|
</Button>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<Divider/>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<Accordion defaultExpanded>
|
||
|
|
<AccordionSummary
|
||
|
|
expandIcon={<ExpandMoreIcon />}
|
||
|
|
aria-controls="panel1-content"
|
||
|
|
>
|
||
|
|
<Typography>Background</Typography>
|
||
|
|
</AccordionSummary>
|
||
|
|
<AccordionDetails>
|
||
|
|
<Grid container spacing={2}>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<MuiColorInput fullWidth value={backgroundColor} onChange={handleBackgroundColorChange} />
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</AccordionDetails>
|
||
|
|
</Accordion>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<Accordion defaultExpanded>
|
||
|
|
<AccordionSummary
|
||
|
|
expandIcon={<ExpandMoreIcon />}
|
||
|
|
aria-controls="panel1-content"
|
||
|
|
>
|
||
|
|
<Typography>Header</Typography>
|
||
|
|
</AccordionSummary>
|
||
|
|
<AccordionDetails>
|
||
|
|
<Grid container spacing={2}>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<TextField disabled={headerIsImage} variant="outlined" fullWidth label="Header Text" onChange={handleHeaderTextChange} value={headerText} size="small"></TextField>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={10}>
|
||
|
|
<TextField variant="outlined" fullWidth label="Image Url" size="small" onChange={handleHeaderImageUrl}></TextField>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={2}>
|
||
|
|
<Switch checked={headerIsImage} onChange={handleHeaderImageToggle} />
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<MuiColorInput disabled={headerIsImage} label="Color" fullWidth value={headerColor} onChange={handleHeaderColorChange} />
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={3}>
|
||
|
|
<Typography variant="body1" >
|
||
|
|
Text Size
|
||
|
|
</Typography>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={9}>
|
||
|
|
<Slider disabled={headerIsImage} value={headerSize} onChange={handleHeaderSize} aria-label="Size" defaultValue={6} step={1} marks min={1} max={6} />
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</AccordionDetails>
|
||
|
|
</Accordion>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<Accordion defaultExpanded>
|
||
|
|
<AccordionSummary
|
||
|
|
expandIcon={<ExpandMoreIcon />}
|
||
|
|
aria-controls="panel1-content"
|
||
|
|
>
|
||
|
|
<Typography>Biography</Typography>
|
||
|
|
</AccordionSummary>
|
||
|
|
<AccordionDetails>
|
||
|
|
<Grid container spacing={2}>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<TextField disabled={bioHeaderIsImage} variant="outlined" fullWidth label="Header Text" onChange={handleBioHeaderTextChange} value={bioHeaderText} size="small"></TextField>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={10}>
|
||
|
|
<TextField variant="outlined" fullWidth label="Header Image Url" size="small" value={bioHeaderImageUrl} onChange={handleBioHeaderImageUrl}></TextField>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={2}>
|
||
|
|
<Switch checked={bioHeaderIsImage} onChange={handleBioHeaderImageToggle} />
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<MuiColorInput disabled={bioHeaderIsImage} label="Header Text Color" fullWidth value={bioHeaderColor} onChange={handleBioHeaderColorChange} />
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<MuiColorInput label="Background Color" fullWidth value={bioBgColor} onChange={handleBioBgColorChange} />
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<MuiColorInput label="Text Color" fullWidth value={bioColor} onChange={handleBioColorChange} />
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={5}>
|
||
|
|
<Typography variant="body1" >
|
||
|
|
Header Size
|
||
|
|
</Typography>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={7}>
|
||
|
|
<Slider disabled={bioHeaderIsImage} value={bioHeaderSize} onChange={handleBioHeaderSize} aria-label="Size" defaultValue={6} step={1} marks min={1} max={6} />
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={5}>
|
||
|
|
<Typography variant="body1" >
|
||
|
|
Text Size
|
||
|
|
</Typography>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={7}>
|
||
|
|
<Slider value={bioSize} onChange={handleBioSize} aria-label="Size" defaultValue={6} step={1} marks min={1} max={6} />
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</AccordionDetails>
|
||
|
|
</Accordion>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<Accordion defaultExpanded>
|
||
|
|
<AccordionSummary
|
||
|
|
expandIcon={<ExpandMoreIcon />}
|
||
|
|
aria-controls="panel1-content"
|
||
|
|
>
|
||
|
|
<Typography>Portfolio</Typography>
|
||
|
|
</AccordionSummary>
|
||
|
|
<AccordionDetails>
|
||
|
|
<Grid container spacing={2}>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<MuiColorInput label="Background Color" fullWidth value={portfolioBgColor} onChange={handlePortfolioBgColor} />
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={10}>
|
||
|
|
<Typography variant="body1" >
|
||
|
|
Masonry Layout Enabled
|
||
|
|
</Typography>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={2 }>
|
||
|
|
<Switch checked={portfolioWoven} onChange={handlePortfolioWoven} />
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={5}>
|
||
|
|
<Typography variant="body1" >
|
||
|
|
Columns
|
||
|
|
</Typography>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={7}>
|
||
|
|
<Slider value={portfolioColumns} onChange={handlePortfolioColumns} aria-label="Size" defaultValue={6} step={1} marks min={1} max={5} />
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={10}>
|
||
|
|
<Typography variant="body1" >
|
||
|
|
Enable Scrolling
|
||
|
|
</Typography>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={2 }>
|
||
|
|
<Switch checked={portfolioShouldScroll} onChange={handlePortfolioShouldScroll} />
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={4}>
|
||
|
|
<Typography variant="body1" >
|
||
|
|
Max Size
|
||
|
|
</Typography>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={8}>
|
||
|
|
<Slider disabled={!portfolioShouldScroll} value={portfolioSize} onChange={handlePortfolioSize} aria-label="Size" defaultValue={5} step={5} marks min={1} max={100} />
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</AccordionDetails>
|
||
|
|
</Accordion>
|
||
|
|
</Grid>
|
||
|
|
|
||
|
|
</Grid>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={8}>
|
||
|
|
<Grid container spacing={1}>
|
||
|
|
<Grid item xs={12} md={12}>
|
||
|
|
<Card sx={{backgroundColor:backgroundColor}}>
|
||
|
|
<CardContent>
|
||
|
|
<Grid container spacing={1}>
|
||
|
|
<Grid item xs={12} md={12} sx={{textAlign:"center"}}>
|
||
|
|
{(headerIsImage) ? (
|
||
|
|
<img src={headerImageUrl} alt="Header Image" />
|
||
|
|
) : (
|
||
|
|
<Typography variant={headerVariant} color={headerColor}>
|
||
|
|
{headerText}
|
||
|
|
</Typography>
|
||
|
|
)}
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={12} sx={{textAlign:"center", marginTop:"2%"}}>
|
||
|
|
<Card sx={{backgroundColor:bioBgColor}}>
|
||
|
|
<CardContent>
|
||
|
|
{(bioHeaderIsImage) ? (
|
||
|
|
<img src={bioHeaderImageUrl} alt="Header Image" />
|
||
|
|
) : (
|
||
|
|
<Typography variant={bioHeaderVariant} color={bioHeaderColor}>
|
||
|
|
{bioHeaderText}
|
||
|
|
</Typography>
|
||
|
|
)}
|
||
|
|
<Typography variant={bioVariant} color={bioColor} > {(profileData ? profileData["biography"]:null)}
|
||
|
|
</Typography>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={12} md={12} sx={{textAlign:"center", marginTop:"2%"}}>
|
||
|
|
<Card sx={{backgroundColor:portfolioBgColor}}>
|
||
|
|
{(portfolioShouldScroll)?(
|
||
|
|
<CardContent sx={{height:`${portfolioSize}rem`, overflowY:"scroll",}}>
|
||
|
|
{(profileData ? (
|
||
|
|
<ArtistPortfolio masonry={portfolioWoven} columns={portfolioColumns} artistId={profileData["id"]} />
|
||
|
|
):null)}
|
||
|
|
</CardContent>
|
||
|
|
):(
|
||
|
|
<CardContent >
|
||
|
|
{(profileData ? (
|
||
|
|
<ArtistPortfolio masonry={portfolioWoven} columns={portfolioColumns} artistId={profileData["id"]} />
|
||
|
|
):null)}
|
||
|
|
</CardContent>
|
||
|
|
)}
|
||
|
|
</Card>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Protected route, checking user authentication client-side.(CSR)
|
||
|
|
export default withPageAuthRequired(Profile);
|