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

feat: shop builder

Browse Source
This commit is contained in:
Damien Ostler 2024-02-18 06:59:55 -05:00
parent 539e1607bd
commit 565cb5dffb
18 changed files with 638 additions and 393 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/Old/artistPortfolio.tsx
View File

@ -22,7 +22,8 @@ const ArtistPortfolio = ({masonry,columns,artistId}) => {
<Typography variant="h4" sx={{textAlign:"center"}}> <Typography variant="h4" sx={{textAlign:"center"}}>
Loading Loading
</Typography> </Typography>
<CircularProgress sx={{paddingTop:5}} /> <Box sx={{paddingTop:"2%"}}/>
<CircularProgress />
</Box> </Box>
) : ) :
( (

62
components/Old/editableArtistPortfolio.tsx
View File

@ -1,16 +1,21 @@
import * as React from 'react'; import * as React from 'react';
import { ImageList, Box, Button, CircularProgress } from '@mui/material'; import { ImageList, Box, Button, CircularProgress, Slider } from '@mui/material';
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import EditableArtistPortfolioImage from './editableArtistPortfolioImage'; import EditableArtistPortfolioImage from './editableArtistPortfolioImage';
import FileOpenIcon from '@mui/icons-material/FileOpen'; import FileOpenIcon from '@mui/icons-material/FileOpen';
import { Grid } from '@mui/material'; import { Grid } from '@mui/material';
const EditableArtistPortfolio = ({ artistId }) => { const EditableArtistPortfolio = ({ artistId }) => {
const [portfolioData, setPortfolioData] = useState([]); const [portfolioData, setPortfolioData] = useState([]);
const [columns, setColumns] = useState(2);
const [loading, setLoading] = useState(true); // State for loading indicator const [loading, setLoading] = useState(true); // State for loading indicator
useEffect(() => { useEffect(() => {
getData(); getData();
}, []); }, []);
const handleColumns = (event, value)=>{
setColumns(value);
}
const getData = async () => { const getData = async () => {
const response = await fetch('/api/discovery/artist/' + artistId + '/portfolio'); const response = await fetch('/api/discovery/artist/' + artistId + '/portfolio');
const data = await response.json(); const data = await response.json();
@ -46,29 +51,40 @@ const EditableArtistPortfolio = ({ artistId }) => {
( (
<Grid container spacing={2} sm={12}> <Grid container spacing={2} sm={12}>
<Grid item xs={12} sm={12} 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="large"
sx={{width:"100%"}}
startIcon={<FileOpenIcon />}
>
{(portfolioData.length > 0 ? "Upload Another Portfolio Image" : "Upload Your First Portfolio Image")}
</Button>
</label>
</Grid>
<Grid item xs={12} sm={12} sx={{ textAlign: "center" }}> <Grid item xs={12} sm={12} sx={{ textAlign: "center" }}>
<input <Slider
id="portfolioUploadInput" defaultValue={columns}
style={{ display: 'none' }} aria-labelledby="discrete-slider"
accept="image/*" valueLabelDisplay="auto"
type="file" onChange={handleColumns}
onChange={handlePortfolioUploadImageChange} step={1}
/> marks
<label htmlFor="portfolioUploadInput"> min={1}
<Button max={5}/>
fullWidth </Grid>
variant='outlined' <Grid item xs={12} sm={12} sx={{maxHeight:"45rem",overflowY:"scroll"}}>
component="span" <ImageList variant='masonry' cols={columns} sx={{ width:"100%" }}>
size="small"
sx={{width:"100%"}}
startIcon={<FileOpenIcon />}
>
{(portfolioData.length > 0 ? "Upload Another Portfolio Image" : "Upload Your First Portfolio Image")}
</Button>
</label>
</Grid>
<Grid item xs={12} sm={12}>
<ImageList cols={2} rowHeight={200} sx={{ height: 400, width:"100%" }}>
{portfolioData.map((item) => ( {portfolioData.map((item) => (
<EditableArtistPortfolioImage artistId={artistId} itemId={item.id} reload={getData}/> <EditableArtistPortfolioImage artistId={artistId} itemId={item.id} reload={getData}/>
))} ))}

2
components/Old/editableArtistPortfolioImage.tsx
View File

@ -27,7 +27,7 @@ const EditableArtistPortfolioImage = ({artistId,itemId,reload}) => {
} }
return ( return (
<ImageListItem key={itemId } sx={{maxWidth:300, maxHeight:300, overflow:"hidden"}}> <ImageListItem key={itemId } >
<img <img
srcSet={process.env.NEXT_PUBLIC_API_URL+`/api/Discovery/Sellers/${artistId}/Portfolio/${itemId}`} 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}`} src={process.env.NEXT_PUBLIC_API_URL+`/api/Discovery/Sellers/${artistId}/Portfolio/${itemId}`}

2
components/Orders.tsx
View File

@ -7,7 +7,7 @@ const columns: GridColDef[] = [
{ field: 'artist', headerName: 'Artist', width: 130 }, { field: 'artist', headerName: 'Artist', width: 130 },
{ field: 'status', headerName: 'Status', width: 130 }, { field: 'status', headerName: 'Status', width: 130 },
{ field: 'action', headerName: 'Action', width: 180, renderCell: (params) => { { field: 'action', headerName: 'Action', width: 180, renderCell: (params) => {
return (<Button variant="outlined" color="primary" fullWidth>View More</Button>); return (<Button variant="outlined" color="secondary" fullWidth>View More</Button>);
}}, }},
]; ];

116
components/SellerStats.tsx Normal file
View File

@ -0,0 +1,116 @@
// ** React Imports
import { ReactElement } from 'react'
// ** MUI Imports
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid'
import Card from '@mui/material/Card'
import Avatar from '@mui/material/Avatar'
import CardHeader from '@mui/material/CardHeader'
import IconButton from '@mui/material/IconButton'
import Typography from '@mui/material/Typography'
import CardContent from '@mui/material/CardContent'
// ** Icons Imports
import TrendingUp from 'mdi-material-ui/TrendingUp'
import CurrencyUsd from 'mdi-material-ui/CurrencyUsd'
import DotsVertical from 'mdi-material-ui/DotsVertical'
import CellphoneLink from 'mdi-material-ui/CellphoneLink'
import AccountOutline from 'mdi-material-ui/AccountOutline'
import CompareArrowsIcon from '@mui/icons-material/CompareArrows';
// ** Types
import { ThemeColor } from '../core/layouts/types'
import { Person } from '@mui/icons-material'
interface DataType {
stats: string
title: string
color: ThemeColor
icon: ReactElement
}
const salesData: DataType[] = [
{
stats: '0',
title: 'Customers',
color: 'primary',
icon: <Person sx={{ fontSize: '1.75rem' }} />
},
{
stats: '0',
title: 'Accepted',
color: 'success',
icon: <CompareArrowsIcon sx={{ fontSize: '1.75rem' }} />
},
{
stats: '0',
color: 'warning',
title: 'Denied',
icon: <CompareArrowsIcon sx={{ fontSize: '1.75rem' }} />
},
{
stats: '$0.00',
color: 'info',
title: 'Revenue',
icon: <CurrencyUsd sx={{ fontSize: '1.75rem' }} />
}
]
const renderStats = () => {
return salesData.map((item: DataType, index: number) => (
<Grid item xs={12} sm={3} key={index}>
<Box key={index} sx={{ display: 'flex', alignItems: 'center' }}>
<Avatar
variant='rounded'
sx={{
mr: 3,
width: 44,
height: 44,
boxShadow: 3,
color: 'common.white',
backgroundColor: `${item.color}.main`
}}
>
{item.icon}
</Avatar>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant='caption'>{item.title}</Typography>
<Typography variant='h6'>{item.stats}</Typography>
</Box>
</Box>
</Grid>
))
}
const SellerStats = () => {
return (
<Card>
<CardHeader
title='Seller Statistics'
subheader={
<Typography variant='body2'>
<Box component='span' sx={{ fontWeight: 600, color: 'text.primary' }}>
Total 0% growth
</Box>{' '}
😎 this month
</Typography>
}
titleTypographyProps={{
sx: {
mb: 2.5,
lineHeight: '2rem !important',
letterSpacing: '0.15px !important'
}
}}
/>
<CardContent sx={{ pt: theme => `${theme.spacing(3)} !important` }}>
<Grid container spacing={[5, 0]}>
{renderStats()}
</Grid>
</CardContent>
</Card>
)
}
export default SellerStats

52
core/layouts/components/shared-components/UserDropdown.tsx
View File

@ -1,5 +1,5 @@
// ** React Imports // ** React Imports
import { useState, SyntheticEvent, Fragment } from 'react' import { useState, SyntheticEvent, Fragment, useEffect } from 'react'
// ** Next Import // ** Next Import
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
@ -37,6 +37,17 @@ const BadgeContentSpan = styled('span')(({ theme }) => ({
const UserDropdown = () => { const UserDropdown = () => {
const { user, isLoading } = useUser(); const { user, isLoading } = useUser();
const [appUser, setAppUser] = useState(null);
useEffect(() => {
getData()
}, []);
const getData = async () => {
var userResponse = await fetch('/api/me');
var user = await userResponse.json();
setAppUser(user);
}
// ** States // ** States
const [anchorEl, setAnchorEl] = useState<Element | null>(null) const [anchorEl, setAnchorEl] = useState<Element | null>(null)
@ -69,7 +80,7 @@ const UserDropdown = () => {
} }
return ( return (
(!isLoading && user) ? ( (!isLoading && user && appUser) ? (
<Fragment> <Fragment>
<Badge <Badge
overlap='circular' overlap='circular'
@ -100,10 +111,10 @@ const UserDropdown = () => {
badgeContent={<BadgeContentSpan />} badgeContent={<BadgeContentSpan />}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
> >
<Avatar alt={user.nickname} src={user.picture} sx={{ width: '2.5rem', height: '2.5rem' }} /> <Avatar alt={appUser["displayName"]} src={user.picture} sx={{ width: '2.5rem', height: '2.5rem' }} />
</Badge> </Badge>
<Box sx={{ display: 'flex', marginLeft: 3, alignItems: 'flex-start', flexDirection: 'column' }}> <Box sx={{ display: 'flex', marginLeft: 3, alignItems: 'flex-start', flexDirection: 'column' }}>
<Typography sx={{ fontWeight: 600 }}>{user.nickname}</Typography> <Typography sx={{ fontWeight: 600 }}>{appUser["displayName"]}</Typography>
<Typography variant='body2' sx={{ fontSize: '0.8rem', color: 'text.disabled' }}> <Typography variant='body2' sx={{ fontSize: '0.8rem', color: 'text.disabled' }}>
Welcome back! Welcome back!
</Typography> </Typography>
@ -111,43 +122,12 @@ const UserDropdown = () => {
</Box> </Box>
</Box> </Box>
<Divider sx={{ mt: 0, mb: 1 }} /> <Divider sx={{ mt: 0, mb: 1 }} />
<MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose()}> <MenuItem sx={{ p: 0 }} onClick={() => router.push("/dashboard/settings")}>
<Box sx={styles}>
<AccountOutline sx={{ marginRight: 2 }} />
Profile
</Box>
</MenuItem>
<MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose()}>
<Box sx={styles}>
<EmailOutline sx={{ marginRight: 2 }} />
Inbox
</Box>
</MenuItem>
<MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose()}>
<Box sx={styles}>
<MessageOutline sx={{ marginRight: 2 }} />
Chat
</Box>
</MenuItem>
<Divider />
<MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose()}>
<Box sx={styles}> <Box sx={styles}>
<CogOutline sx={{ marginRight: 2 }} /> <CogOutline sx={{ marginRight: 2 }} />
Settings Settings
</Box> </Box>
</MenuItem> </MenuItem>
<MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose()}>
<Box sx={styles}>
<CurrencyUsd sx={{ marginRight: 2 }} />
Pricing
</Box>
</MenuItem>
<MenuItem sx={{ p: 0 }} onClick={() => handleDropdownClose()}>
<Box sx={styles}>
<HelpCircleOutline sx={{ marginRight: 2 }} />
FAQ
</Box>
</MenuItem>
<Divider /> <Divider />
<MenuItem sx={{ py: 2 }} onClick={() => handleDropdownClose('/api/auth/logout')}> <MenuItem sx={{ py: 2 }} onClick={() => handleDropdownClose('/api/auth/logout')}>
<LogoutVariant sx={{ marginRight: 2, fontSize: '1.375rem', color: 'text.secondary' }} /> <LogoutVariant sx={{ marginRight: 2, fontSize: '1.375rem', color: 'text.secondary' }} />

12
layouts/components/vertical/AppBarContent.tsx
View File

@ -50,20 +50,8 @@ const AppBarContent = (props: Props) => {
<Menu /> <Menu />
</IconButton> </IconButton>
) : null} ) : null}
<TextField
size='small'
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 4 } }}
InputProps={{
startAdornment: (
<InputAdornment position='start'>
<Magnify fontSize='small' />
</InputAdornment>
)
}}
/>
</Box> </Box>
<Box className='actions-right' sx={{ display: 'flex', alignItems: 'center' }}> <Box className='actions-right' sx={{ display: 'flex', alignItems: 'center' }}>
<ModeToggler settings={settings} saveSettings={saveSettings} />
<NovuProvider subscriberId={'on-boarding-subscriber-id-123'} applicationIdentifier={'9SKjzgN_odAF'}> <NovuProvider subscriberId={'on-boarding-subscriber-id-123'} applicationIdentifier={'9SKjzgN_odAF'}>
<PopoverNotificationCenter colorScheme={'light'}> <PopoverNotificationCenter colorScheme={'light'}>

22
navigation/vertical/index.ts
View File

@ -3,12 +3,7 @@ import Login from 'mdi-material-ui/Login'
import Table from 'mdi-material-ui/Table' import Table from 'mdi-material-ui/Table'
import CubeOutline from 'mdi-material-ui/CubeOutline' import CubeOutline from 'mdi-material-ui/CubeOutline'
import HomeOutline from 'mdi-material-ui/HomeOutline' import HomeOutline from 'mdi-material-ui/HomeOutline'
import FormatLetterCase from 'mdi-material-ui/FormatLetterCase' import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications';
import AccountCogOutline from 'mdi-material-ui/AccountCogOutline'
import CreditCardOutline from 'mdi-material-ui/CreditCardOutline'
import AccountPlusOutline from 'mdi-material-ui/AccountPlusOutline'
import AlertCircleOutline from 'mdi-material-ui/AlertCircleOutline'
import GoogleCirclesExtended from 'mdi-material-ui/GoogleCirclesExtended'
// ** Type import // ** Type import
import { VerticalNavItemsType } from '../../core/layouts/types' import { VerticalNavItemsType } from '../../core/layouts/types'
@ -29,7 +24,6 @@ const navigation = (): VerticalNavItemsType => {
}, []); }, []);
if(isStripeOnboarded){ if(isStripeOnboarded){
return [ return [
{ {
sectionTitle: 'General' sectionTitle: 'General'
@ -42,11 +36,16 @@ const navigation = (): VerticalNavItemsType => {
{ {
title: 'Account Settings', title: 'Account Settings',
icon: Settings, icon: Settings,
path: '/artist/settings' path: '/dashboard/settings'
}, },
{ {
sectionTitle: 'Artist' sectionTitle: 'Artist'
}, },
{
title: 'Shop Settings',
icon: SettingsApplicationsIcon,
path: '/dashboard/artist/artistsettings'
},
{ {
title: 'Payout Portal', title: 'Payout Portal',
icon: BankTransfer, icon: BankTransfer,
@ -74,7 +73,12 @@ const navigation = (): VerticalNavItemsType => {
title: 'Dashboard', title: 'Dashboard',
icon: HomeOutline, icon: HomeOutline,
path: '/dashboard' path: '/dashboard'
} },
{
title: 'Account Settings',
icon: Settings,
path: '/dashboard/settings'
},
] ]
} }
} }

2
pages/advanced/ssr-profile.tsx
View File

@ -1,5 +1,5 @@
import { withPageAuthRequired } from "@auth0/nextjs-auth0"; import { withPageAuthRequired } from "@auth0/nextjs-auth0";
import Layout from "../../components/OLd/layout"; import Layout from "../../components/Old/layout";
import { User } from "../../interfaces"; import { User } from "../../interfaces";
type ProfileProps = { type ProfileProps = {

34
pages/api/me.tsx Normal file
View File

@ -0,0 +1,34 @@
import { useRouter } from 'next/router'
import { withApiAuthRequired } from "@auth0/nextjs-auth0";
import { getAccessToken } from '@auth0/nextjs-auth0';
export default withApiAuthRequired(async function me(req, res) {
if(req.method !== 'GET') {
console.log(req.body)
const { accessToken } = await getAccessToken(req, res);
const response = await fetch(process.env.NEXT_PUBLIC_API_URL+'/api/User', {
headers: {
"Authorization": `Bearer ${accessToken}`,
"Content-Type": "application/json"
},
method: "PUT",
body: req.body
});
let result = await response.json();
res.status(200).json(result);
}
else{
const { accessToken } = await getAccessToken(req, res);
const response = await fetch(process.env.NEXT_PUBLIC_API_URL+'/api/User', {
headers: {
"Authorization": `Bearer ${accessToken}`,
"Content-Type": "application/json"
}
});
let result = await response.json();
res.status(200).json(result);
}
});

108
pages/artist/[id].tsx
View File

@ -1,108 +0,0 @@
import Layout from "../../components/OLd/layout";
import { useUser } from "@auth0/nextjs-auth0/client";
import { Box, Grid, Card, CardContent, Typography, List, Button, CircularProgress, Tooltip } from "@mui/material";
import { useState, useEffect } from "react";
import { useRouter } from 'next/router'
import ArtistPortfolio from "../../components/artistPortfolio";
const SellerProfile = () => {
const { user, isLoading } = useUser();
const router = useRouter()
const { id } = router.query
const [sellerData, setSellerData] = useState([]);
const [loading, setLoading] = useState(true); // State for loading indicator
useEffect(() => {
const getData = async () => {
if(id){
const response = await fetch('/api/discovery/artist/'+id);
const data = await response.json();
setSellerData(data);
setLoading(false); // Once data is fetched, set loading to false
}
}
getData();
}, [id]);
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>
<Box sx={{ paddingTop: 5 }} />
<CircularProgress />
</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"}} >
{user ? (
<Button size="large" color="secondary" variant="contained" href={"/artist/"+id+"/request"}>
Request Order
</Button>
) : (
<Tooltip title="Log in order to place a request.">
<span>
<Button size="large" color="secondary" variant="contained" disabled>
Submit Request
</Button>
</span>
</Tooltip>
)}
</Grid>
<Grid item xs={12} sm={12}>
<ArtistPortfolio artistId={id} />
</Grid>
</Grid>
)}
</Layout>
);
};
export default SellerProfile;

118
pages/artist/[id]/request.tsx
View File

@ -1,118 +0,0 @@
import Layout from "../../../components/OLd/layout";
import { useUser } from "@auth0/nextjs-auth0/client";
import { Box, Grid, Typography, Button, CircularProgress, TextField} from "@mui/material";
import { useState, useEffect } from "react";
import { useRouter } from 'next/router'
import CurrencyTextField from '@lupus-ai/mui-currency-textfield'
interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}
const SellerProfile = () => {
const { user, isLoading } = useUser();
const router = useRouter()
const { id } = router.query
const [sellerData, setSellerData] = useState([]);
const [loading, setLoading] = useState(true); // State for loading indicator
useEffect(() => {
const getData = async () => {
if(id){
const response = await fetch('/api/discovery/artist/'+id);
const data = await response.json();
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>
<Box sx={{ paddingTop: 5 }} />
<CircularProgress />
</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={"../"+id}>
Back
</Button>
</Grid>
<Grid item xs={12} sm={8} sx={{textAlign:"center"}}>
<Typography variant="h4">
New Request
</Typography>
</Grid>
<Grid item xs={12} sm={2} sx={{textAlign:"center"}}>
</Grid>
</Grid>
<Grid container item xs={12} sm={12} sx={{textAlign:"center"}} >
{user ? (
<>
<Grid item xs={12} sm={12} sx={{textAlign:"center"}} >
<TextField fullWidth disabled id="fo" label="Artist" variant="outlined" value={sellerData["name"]}/>
<Box sx={{padding:2}} />
<TextField id="outlined-multiline-static" label="Request Details" fullWidth multiline rows={4} defaultValue="" placeholder="Put the details of your request. Links to reference images. Descriptions of what you want. Things like that."/>
<Box sx={{padding:2}} />
</Grid>
<Grid item xs={12} sm={12} sx={{textAlign:"center"}} >
<Button>
<input type="file" multiple />
</Button>
</Grid>
<Box sx={{padding:2}} />
<Grid item xs={12} sm={12} sx={{textAlign:"center"}} >
<CurrencyTextField
label="Offer Amount"
variant="standard"
value={value}
currencySymbol="USD "
//minimumValue="0"
outputFormat="string"
decimalCharacter="."
digitGroupSeparator=","
onChange={(event, value)=> setValue(value)}/>
</Grid>
<Box sx={{padding:2}} />
<Grid item xs={12} sm={12} sx={{textAlign:"center"}} >
<Button color="secondary" variant="contained" >
Submit Request
</Button>
</Grid>
</>
) : (
<>
<Typography>
Please login to place a request.
</Typography>
<Button color="primary" variant="contained" href="/api/auth/login">
Login
</Button>
</>
)}
</Grid>
</Grid>
)}
</Layout>
);
};
export default SellerProfile;

82
pages/dashboard/artist/artistsettings.tsx Normal file
View File

@ -0,0 +1,82 @@
import { useUser,withPageAuthRequired } from "@auth0/nextjs-auth0/client";
import { Grid, Typography } from "@mui/material";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import EditableArtistPortfolio from "../../../components/Old/editableArtistPortfolio";
import { useEffect, useState } from "react";
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Switch from '@mui/material/Switch';
import Divider from '@mui/material/Divider';
const ArtistSettings = () => {
const {user, isLoading} = useUser();
const [profileData, setSellerProfileData] = useState(null);
const getData = async () => {
const profileResponse = await fetch('/api/artist/profile');
const sellerProfile = await profileResponse.json();
setSellerProfileData(sellerProfile);
}
useEffect(() => {
getData()
}, []);
return (
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card>
<CardContent>
<Grid container spacing={2}>
<Grid item xs={12} md={8}>
<Typography variant="h5" gutterBottom>General Settings</Typography>
</Grid>
<Grid item xs={12} md={4} >
<Button variant="contained" color="success" fullWidth>Save Changes</Button>
</Grid>
<Grid item xs={12} md={12} >
<Grid container spacing={2} sx={{paddingTop:"2%"}}>
<Grid item xs={12} md={12} sx={{paddingTop:"2%"}}>
<TextField id="outlined-basic" label="Shop Name" size="small" variant="outlined" fullWidth />
</Grid>
<Grid item xs={12} md={12} sx={{paddingTop:"2%"}}>
<TextField id="outlined-basic" multiline rows={7} size="small" label="Shop Description" variant="outlined" fullWidth />
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12} >
<Grid container spacing={2} sx={{paddingTop:"2%"}}>
<Grid item xs={12} md={6} sx={{paddingTop:"2%"}}>
<TextField id="outlined-basic" label="Social Media 1" type="url" size="small" variant="outlined" fullWidth />
</Grid>
<Grid item xs={12} md={6} sx={{paddingTop:"2%"}}>
<TextField id="outlined-basic" label="Social Media 2" type="url" size="small" variant="outlined" fullWidth />
</Grid>
<Grid item xs={12} md={6} sx={{paddingTop:"2%"}}>
<TextField id="outlined-basic" label="Social Media 3" type="url" size="small" variant="outlined" fullWidth />
</Grid>
<Grid item xs={12} md={6} sx={{paddingTop:"2%"}}>
<TextField id="outlined-basic" label="Social Media 4" type="url" size="small" variant="outlined" fullWidth />
</Grid>
<Grid item xs={12} md={12} sx={{paddingTop:"2%"}}>
<TextField id="outlined-basic" multiline rows={5} size="small" label="Your request guidelines" variant="outlined" fullWidth />
</Grid>
</Grid>
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card id="portfolio">
<CardContent>
{(profileData != null) ? (
<EditableArtistPortfolio artistId={profileData["id"]}/>):null}
</CardContent>
</Card>
</Grid>
</Grid>
);
};
// Protected route, checking user authentication client-side.(CSR)
export default withPageAuthRequired(ArtistSettings);

227
pages/dashboard/artist/pagesettings.tsx
View File

@ -14,6 +14,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import AccordionDetails from '@mui/material/AccordionDetails'; import AccordionDetails from '@mui/material/AccordionDetails';
import Slider from '@mui/material/Slider'; import Slider from '@mui/material/Slider';
import ArtistPortfolio from '../../../components/Old/artistPortfolio'; import ArtistPortfolio from '../../../components/Old/artistPortfolio';
import CurrencyTextField from '@lupus-ai/mui-currency-textfield';
import Box from '@mui/material/Box';
const Profile = () => { const Profile = () => {
@ -37,8 +39,8 @@ const Profile = () => {
const [bioColor, setBioColor] = useState('rgb(186, 186, 186)'); const [bioColor, setBioColor] = useState('rgb(186, 186, 186)');
const [bioBgColor, setBioBgColor] = useState('rgb(103, 97, 97)'); const [bioBgColor, setBioBgColor] = useState('rgb(78, 73, 73)');
const [bioHeaderColor, setBioHeaderColor] = useState('rgb(255, 255, 255)'); const [bioHeaderColor, setBioHeaderColor] = useState('rgb(194, 187, 187)');
const [bioHeaderIsImage, setBioHeaderImage] = useState(false); const [bioHeaderIsImage, setBioHeaderImage] = useState(false);
const [bioHeaderImageUrl, setBioHeaderImageUrl] = useState(''); const [bioHeaderImageUrl, setBioHeaderImageUrl] = useState('');
const [bioHeaderText, setBioHeaderText] = useState('Biography'); const [bioHeaderText, setBioHeaderText] = useState('Biography');
@ -61,11 +63,47 @@ const Profile = () => {
'h1', // Size 6 'h1', // Size 6
][bioSize - 1] || 'h6'; ][bioSize - 1] || 'h6';
const [portfolioHeaderColor, setPortfolioHeaderColor] = useState('rgb(194, 187, 187)');
const [portfolioHeaderIsImage, setPortfolioHeaderImage] = useState(false);
const [portfolioHeaderImageUrl, setPortfolioHeaderImageUrl] = useState('');
const [portfolioHeaderText, setPortfolioHeaderText] = useState('Portfolio');
const [portfolioHeaderSize, setPortfolioHeaderSize] = useState(3);
const [portfolioBgColor, setPortfolioBgColor] = useState('rgb(78, 73, 73)'); const [portfolioBgColor, setPortfolioBgColor] = useState('rgb(78, 73, 73)');
const [portfolioColumns, setPotrfolioColumns] = useState(2); const [portfolioColumns, setPotrfolioColumns] = useState(2);
const [portfolioWoven, setPortfolioWoven] = useState(true); const [portfolioWoven, setPortfolioWoven] = useState(true);
const [portfolioShouldScroll, setPortfolioShouldScroll] = useState(true); const [portfolioShouldScroll, setPortfolioShouldScroll] = useState(true);
const [portfolioSize, setPortfolioSize] = useState(25); const [portfolioSize, setPortfolioSize] = useState(25);
const portfolioVariant = [
'h6', // Size 1
'h5', // Size 2
'h4', // Size 3
'h3', // Size 4
'h2', // Size 5
'h1', // Size 6
][portfolioHeaderSize - 1] || 'h6';
const [requestHeaderColor, setRequestHeaderColor] = useState('rgb(194, 187, 187)');
const [requestHeaderIsImage, setRequestHeaderImage] = useState(false);
const [requestHeaderImageUrl, setRequestHeaderImageUrl] = useState('');
const [requestHeaderText, setRequestHeaderText] = useState('Requests');
const [requestHeaderSize, setRequestHeaderSize] = useState(3);
const [requestBgColor, setRequestBgColor] = useState('rgb(78, 73, 73)');
const [requestTermsTextColor, setRequestTermsTextColor] = useState('rgb(194, 187, 187)');
const [requestButtonBGColor, setRequestButtonBGColor] = useState('rgb(101, 97, 97)');
const [requestButtonTextColor, setRequestButtonTextColor] = useState('rgb(194, 187, 187)');
const [requestHoverButtonBGColor, setRequestHoverButtonBGColor] = useState('rgb(98, 98, 98)');
const [requestHoverButtonTextColor, setRequestHoverButtonTextColor] = useState('rgb(194, 187, 187)');
const requestVariant = [
'h6', // Size 1
'h5', // Size 2
'h4', // Size 3
'h3', // Size 4
'h2', // Size 5
'h1', // Size 6
][requestHeaderSize - 1] || 'h6';
const getData = async () => { const getData = async () => {
const profileResponse = await fetch('/api/artist/profile'); const profileResponse = await fetch('/api/artist/profile');
@ -152,6 +190,66 @@ const Profile = () => {
setPortfolioSize(newValue) setPortfolioSize(newValue)
} }
const handlePortfolioHeaderTextChange = (e) => {
setPortfolioHeaderText(e.target.value)
}
const handlePortfolioHeaderImageUrl = (e) => {
setPortfolioHeaderImageUrl(e.target.value)
}
const handlePortfolioHeaderImageToggle = (e) => {
setPortfolioHeaderImage(e.target.checked)
};
const handlePortfolioHeaderSize = (e, newValue) => {
setPortfolioHeaderSize(newValue)
}
const handlePortfolioHeaderColorChange = (newValue) => {
setPortfolioHeaderColor(newValue)
}
const handleRequestBgColor = (newValue) => {
setRequestBgColor(newValue)
}
const handleRequestHeaderTextChange = (e) => {
setRequestHeaderText(e.target.value)
}
const handleRequestHeaderImageUrl = (e) => {
setRequestHeaderImageUrl(e.target.value)
}
const handleRequestHeaderImageToggle = (e) => {
setRequestHeaderImage(e.target.checked)
};
const handleRequestHeaderSize = (e, newValue) => {
setRequestHeaderSize(newValue)
}
const handleRequestHeaderColorChange = (newValue) => {
setRequestHeaderColor(newValue)
}
const handleRequestTermsTextColorChange = (newValue) => {
setRequestTermsTextColor(newValue)
}
const handleRequestButtonBGColorChange = (newValue) => {
setRequestButtonBGColor(newValue)
}
const handleRequestButtonTextColorChange = (newValue) => {
setRequestButtonTextColor(newValue)
}
const handleRequestHoverButtonBGColorChange = (newValue) => {
setRequestHoverButtonBGColor(newValue)
}
const handleRequestHoverButtonTextColorChange = (newValue) => {
setRequestHoverButtonTextColor(newValue)
}
return ( return (
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12} md={4}> <Grid item xs={12} md={4}>
@ -164,7 +262,7 @@ const Profile = () => {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} md={3}> <Grid item xs={12} md={3}>
<Button variant="contained" size="large"> <Button color="success" variant="contained" size="large">
Save Save
</Button> </Button>
</Grid> </Grid>
@ -232,6 +330,7 @@ const Profile = () => {
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<TextField disabled={bioHeaderIsImage} variant="outlined" fullWidth label="Header Text" onChange={handleBioHeaderTextChange} value={bioHeaderText} size="small"></TextField> <TextField disabled={bioHeaderIsImage} variant="outlined" fullWidth label="Header Text" onChange={handleBioHeaderTextChange} value={bioHeaderText} size="small"></TextField>
</Grid> </Grid>
@ -243,7 +342,7 @@ const Profile = () => {
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<MuiColorInput disabled={bioHeaderIsImage} label="Header Text Color" fullWidth value={bioHeaderColor} onChange={handleBioHeaderColorChange} /> <MuiColorInput disabled={bioHeaderIsImage} label="Header Text Color" fullWidth value={bioHeaderColor} onChange={handleBioHeaderColorChange} />
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<MuiColorInput label="Background Color" fullWidth value={bioBgColor} onChange={handleBioBgColorChange} /> <MuiColorInput label="Background Color" fullWidth value={bioBgColor} onChange={handleBioBgColorChange} />
</Grid> </Grid>
@ -280,6 +379,26 @@ const Profile = () => {
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12} md={12}>
<TextField disabled={portfolioHeaderIsImage} variant="outlined" fullWidth label="Header Text" onChange={handlePortfolioHeaderTextChange} value={portfolioHeaderText} size="small"></TextField>
</Grid>
<Grid item xs={12} md={10}>
<TextField variant="outlined" fullWidth label="Header Image Url" size="small" value={portfolioHeaderImageUrl} onChange={handlePortfolioHeaderImageUrl}></TextField>
</Grid>
<Grid item xs={12} md={2}>
<Switch checked={portfolioHeaderIsImage} onChange={handlePortfolioHeaderImageToggle} />
</Grid>
<Grid item xs={12} md={12}>
<MuiColorInput disabled={portfolioHeaderIsImage} label="Header Text Color" fullWidth value={portfolioHeaderColor} onChange={handlePortfolioHeaderColorChange} />
</Grid>
<Grid item xs={12} md={5}>
<Typography variant="body1" >
Header Size
</Typography>
</Grid>
<Grid item xs={12} md={7}>
<Slider disabled={portfolioHeaderIsImage} value={portfolioHeaderSize} onChange={handlePortfolioHeaderSize} aria-label="Size" defaultValue={6} step={1} marks min={1} max={6} />
</Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<MuiColorInput label="Background Color" fullWidth value={portfolioBgColor} onChange={handlePortfolioBgColor} /> <MuiColorInput label="Background Color" fullWidth value={portfolioBgColor} onChange={handlePortfolioBgColor} />
</Grid> </Grid>
@ -320,6 +439,59 @@ const Profile = () => {
</Accordion> </Accordion>
</Grid> </Grid>
<Grid item xs={12} md={12}>
<Accordion defaultExpanded>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
>
<Typography>Requests</Typography>
</AccordionSummary>
<AccordionDetails>
<Grid container spacing={2}>
<Grid item xs={12} md={12}>
<TextField disabled={requestHeaderIsImage} variant="outlined" fullWidth label="Header Text" onChange={handleRequestHeaderTextChange} value={requestHeaderText} size="small"></TextField>
</Grid>
<Grid item xs={12} md={10}>
<TextField variant="outlined" fullWidth label="Header Image Url" size="small" value={requestHeaderImageUrl} onChange={handleRequestHeaderImageUrl}></TextField>
</Grid>
<Grid item xs={12} md={2}>
<Switch checked={requestHeaderIsImage} onChange={handleRequestHeaderImageToggle} />
</Grid>
<Grid item xs={12} md={12}>
<MuiColorInput disabled={requestHeaderIsImage} label="Header Text Color" fullWidth value={requestHeaderColor} onChange={handleRequestHeaderColorChange} />
</Grid>
<Grid item xs={12} md={5}>
<Typography variant="body1" >
Header Size
</Typography>
</Grid>
<Grid item xs={12} md={7}>
<Slider disabled={requestHeaderIsImage} value={requestHeaderSize} onChange={handleRequestHeaderSize} aria-label="Size" defaultValue={6} step={1} marks min={1} max={6} />
</Grid>
<Grid item xs={12} md={12}>
<MuiColorInput label="Background Color" fullWidth value={requestBgColor} onChange={handleRequestBgColor} />
</Grid>
<Grid item xs={12} md={12}>
<MuiColorInput label="Terms Text Color" fullWidth value={requestTermsTextColor} onChange={handleRequestTermsTextColorChange} />
</Grid>
<Grid item xs={12} md={12}>
<MuiColorInput label="Button BG Color" fullWidth value={requestButtonBGColor} onChange={handleRequestButtonBGColorChange} />
</Grid>
<Grid item xs={12} md={12}>
<MuiColorInput label="Button Text Color" fullWidth value={requestButtonTextColor} onChange={handleRequestButtonTextColorChange} />
</Grid>
<Grid item xs={12} md={12}>
<MuiColorInput label="Button Hover BG Color" fullWidth value={requestHoverButtonBGColor} onChange={handleRequestHoverButtonBGColorChange} />
</Grid>
<Grid item xs={12} md={12}>
<MuiColorInput label="Button Hover Text Color" fullWidth value={requestHoverButtonTextColor} onChange={handleRequestHoverButtonTextColorChange} />
</Grid>
</Grid>
</AccordionDetails>
</Accordion>
</Grid>
</Grid> </Grid>
</CardContent> </CardContent>
</Card> </Card>
@ -354,8 +526,18 @@ const Profile = () => {
</CardContent> </CardContent>
</Card> </Card>
</Grid> </Grid>
<Grid item xs={12} md={12} sx={{textAlign:"center", marginTop:"2%"}}> <Grid item xs={12} md={12} sx={{ marginTop:"2%"}}>
<Card sx={{backgroundColor:portfolioBgColor}}> <Card sx={{backgroundColor:portfolioBgColor}}>
<Box sx={{textAlign:"center", paddingTop:"2%"}}>
{(portfolioHeaderIsImage) ? (
<img src={portfolioHeaderImageUrl} alt="Header Image" />
) : (
<Typography sx={{paddingBottom:"2%"}} variant={portfolioVariant} color={portfolioHeaderColor}>
{portfolioHeaderText}
</Typography>
)}
</Box>
{(portfolioShouldScroll)?( {(portfolioShouldScroll)?(
<CardContent sx={{height:`${portfolioSize}rem`, overflowY:"scroll",}}> <CardContent sx={{height:`${portfolioSize}rem`, overflowY:"scroll",}}>
{(profileData ? ( {(profileData ? (
@ -371,6 +553,41 @@ const Profile = () => {
)} )}
</Card> </Card>
</Grid> </Grid>
<Grid xs={12} md={12} sx={{ marginTop:"2%"}}>
<Card sx={{backgroundColor:requestBgColor}}>
<CardContent>
<Grid container>
<Grid item xs={12} md={12} sx={{textAlign:"center"}}>
{(requestHeaderIsImage) ? (
<img src={requestHeaderImageUrl} alt="Header Image" />
) : (
<Typography sx={{paddingBottom:"2%"}} variant={requestVariant} color={requestHeaderColor}>
{requestHeaderText}
</Typography>
)}
</Grid>
<Grid item xs={12} md={12} sx={{textAlign:"center"}}>
<Typography variant="body1" color={requestTermsTextColor}>
TERMS
</Typography>
</Grid>
<Grid item xs={12} md={12} sx={{textAlign:"center"}}>
<Typography color="white" variant="body2">By clicking the button below, you agree to the
terms and conditions.</Typography>
</Grid>
<Grid item xs={12} md={12} sx={{textAlign:"center"}}>
</Grid>
<Grid item xs={12} md={12} sx={{textAlign:"center",paddingTop:"2%"}}>
<Button size="large" variant="contained" sx={{backgroundColor:requestButtonBGColor, color:requestButtonTextColor,
':hover': {
bgcolor: requestHoverButtonBGColor, // theme.palette.primary.main
color: requestHoverButtonTextColor,
},}}>Agree And Start Request</Button>
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
</Grid> </Grid>
</CardContent> </CardContent>
</Card> </Card>

43
pages/dashboard/index.tsx
View File

@ -13,7 +13,7 @@ import CardStatisticsVerticalComponent from '../../core/components/card-statisti
// ** Styled Component Import // ** Styled Component Import
import ApexChartWrapper from '../../core/styles/libs/react-apexcharts' import ApexChartWrapper from '../../core/styles/libs/react-apexcharts'
import { Card, Typography } from '@mui/material' import { Card, TextField, Typography } from '@mui/material'
import { withApiAuthRequired } from "@auth0/nextjs-auth0"; import { withApiAuthRequired } from "@auth0/nextjs-auth0";
import { withPageAuthRequired } from '@auth0/nextjs-auth0/client' import { withPageAuthRequired } from '@auth0/nextjs-auth0/client'
import Button from '@mui/material/Button' import Button from '@mui/material/Button'
@ -21,8 +21,12 @@ import { CardContent } from '@mui/material'
import Onboarding from '../../components/Onboarding' import Onboarding from '../../components/Onboarding'
import { useState } from 'react' import { useState } from 'react'
import { useEffect } from 'react' import { useEffect } from 'react'
import router from 'next/router'
import { isObject } from 'util' import { isObject } from 'util'
import Orders from '../../components/Orders' import Orders from '../../components/Orders'
import StatisticsCard from '../../views/dashboard/StatisticsCard'
import SellerStats from '../../components/SellerStats'
import { Clipboard } from 'mdi-material-ui'
@ -70,12 +74,17 @@ const Dashboard = () => {
<Card> <Card>
<CardContent> <CardContent>
<Grid container> <Grid container>
<Grid item xs={12} md={12} sx={{textAlign:"center"}}> <Grid item xs={12} md={3} sx={{textAlign:"center"}}>
<Typography variant="h5" gutterBottom> <Typography variant="h5" gutterBottom>
My Orders My Orders
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} md={12}> <Grid item xs={12} md={4} sx={{textAlign:"center"}}>
</Grid>
<Grid item xs={12} md={5} sx={{textAlign:"center"}}>
<Button color="info" onClick={()=>{router.push("/dashboard/orders")}} fullWidth variant="contained">View All Orders</Button>
</Grid>
<Grid item xs={12} md={12} sx={{paddingTop:"2%"}}>
<Orders /> <Orders />
</Grid> </Grid>
</Grid> </Grid>
@ -90,15 +99,33 @@ const Dashboard = () => {
</Grid> </Grid>
):( ):(
(onboarding) ? ( (onboarding) ? (
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Card sx={{textAlign:"center", width:"100%"}}> <Card sx={{textAlign:"center", width:"100%"}}>
<CardContent> <CardContent>
<Grid container> <Grid spacing={3} container>
<Grid item xs={12} md={6}> <Grid item xs={12} md={12} >
<Button color="secondary" sx={{width:"90%"}} variant="contained">Manage Portfolio</Button> <SellerStats />
</Grid>
<Grid item xs={12} md={8}>
<TextField size="small" label="Your Public URL" variant="outlined" disabled fullWidth defaultValue={"http://localhost:3000/shops/neroshi"}>"http://localhost:3000/shops/neroshi"</TextField>
</Grid>
<Grid item xs={12} md={2}>
<Button color="info" startIcon={<Clipboard/>} onClick={()=>{router.push("/dashboard/artist/artistsettings#portfolio")}} fullWidth variant="outlined">Copy</Button>
</Grid>
<Grid item xs={12} md={2}>
<Button color="secondary" onClick={()=>{router.push("/dashboard/artist/artistsettings#portfolio")}} fullWidth variant="outlined">Preview</Button>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Button color="primary" href="/dashboard/artist/pagesettings" fullWidth sx={{width:"90%"}} variant="contained">Design Store Page</Button> <Button color="secondary" onClick={()=>{router.push("/dashboard/artist/artistsettings#portfolio")}} fullWidth variant="contained">Manage Portfolio</Button>
</Grid>
<Grid item xs={12} md={6}>
<Button color="secondary" onClick={()=>{router.push("/dashboard/artist/pagesettings")}} fullWidth variant="contained">Design Store Page</Button>
</Grid>
<Grid item xs={12} md={6}>
<Button color="secondary" onClick={()=>{router.push("/dashboard/artist/pagesettings")}} fullWidth variant="contained">Payment Portal</Button>
</Grid>
<Grid item xs={12} md={6}>
<Button color="secondary" onClick={()=>{router.push("/dashboard/artist/pagesettings")}} fullWidth variant="contained">Configure Your Shop</Button>
</Grid> </Grid>
</Grid> </Grid>
</CardContent> </CardContent>

76
pages/dashboard/settings.tsx Normal file
View File

@ -0,0 +1,76 @@
import { useUser, withPageAuthRequired } from "@auth0/nextjs-auth0/client";
import { Grid, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
const ArtistSettings = () => {
const { user, isLoading } = useUser();
const [appUser, setAppUser] = useState(null);
const [displayName, setDisplayName] = useState("");
const [biography, setBiography] = useState("");
const [saved, setSaved] = useState(false);
const handleDisplayNameChange = (event) => {
setDisplayName(event.target.value);
}
const handleBiographyChange = (event) => {
setBiography(event.target.value);
}
const saveChanges = async () => {
var userResponse = await fetch('/api/me',{
method: 'PUT',
body: JSON.stringify({displayName: displayName, biography: biography})
});
var user = await userResponse.json();
setSaved(true);
}
useEffect(() => {
getData()
}, []);
const getData = async () => {
var userResponse = await fetch('/api/me');
var user = await userResponse.json();
setDisplayName(user["displayName"])
setBiography(user["biography"])
setAppUser(user);
}
return (
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card>
<CardContent>
<Grid container item md={12}>
<Grid item xs={12} md={8}>
<Typography variant="h5" gutterBottom>General Settings</Typography>
</Grid>
<Grid item xs={12} md={4} >
{(saved) ? (
<Button variant="contained" color="success" fullWidth onClick={saveChanges}>Saved</Button>
):(
<Button variant="contained" color="success" fullWidth onClick={saveChanges}>Save Changes</Button>
)}
</Grid>
<Grid item xs={12} md={12} sx={{ paddingTop: "2%" }}>
<TextField id="outlined-basic" label="Display Name" onChange={handleDisplayNameChange} variant="outlined" fullWidth value={displayName} />
</Grid>
<Grid item xs={12} md={12} sx={{ paddingTop: "2%" }}>
<TextField id="outlined-basic" multiline rows={5} label="Biography" onChange={handleBiographyChange} variant="outlined" value={biography} fullWidth />
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
</Grid>
);
};
// Protected route, checking user authentication client-side.(CSR)
export default withPageAuthRequired(ArtistSettings);

32
pages/profile.tsx
View File

@ -1,32 +0,0 @@
import { withPageAuthRequired } from "@auth0/nextjs-auth0/client";
import { User } from "../interfaces";
type ProfileCardProps = {
user: User;
};
const ProfileCard = ({ user }: ProfileCardProps) => {
return (
<>
<h1>Profile</h1>
<div>
<h3>Profile (client rendered)</h3>
<img src={user.picture} alt="user picture" />
<p>nickname: {user.nickname}</p>
<p>name: {user.name}</p>
</div>
</>
);
};
const Profile = ({ user, isLoading }) => {
return (
<>
{isLoading ? <>Loading</> : <ProfileCard user={user} />}
</>
);
};
// Protected route, checking user authentication client-side.(CSR)
export default withPageAuthRequired(Profile);

38
pages/settings.tsx
View File

@ -1,38 +0,0 @@
import { useUser } from "@auth0/nextjs-auth0/client";
import Layout from "../components/OLd/layout";
import { Grid, Button, Typography, TextField, Box } from "@mui/material";
const Settings = () => {
const { user, isLoading } = useUser();
return (
<Layout user={user} loading={isLoading}>
<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">
Settings
</Typography>
</Grid>
<Grid item xs={12} sm={2} sx={{textAlign:"center"}}>
<Button color="secondary" variant="contained" href="../">
Save
</Button>
</Grid>
</Grid>
<Grid item xs={12} sm={12}>
<TextField variant="filled" fullWidth label="Display Name" value={user?.email} />
<Box sx={{padding:2}} />
<TextField variant="outlined" fullWidth multiline rows={4} label="Biography" value={user?.email} />
</Grid>
</Grid>
</Layout>
);
};
export default Settings;