diff --git a/components/Old/artistPortfolio.tsx b/components/Old/artistPortfolio.tsx index fc29e1b..97d5f99 100644 --- a/components/Old/artistPortfolio.tsx +++ b/components/Old/artistPortfolio.tsx @@ -22,7 +22,8 @@ const ArtistPortfolio = ({masonry,columns,artistId}) => { Loading - + + ) : ( diff --git a/components/Old/editableArtistPortfolio.tsx b/components/Old/editableArtistPortfolio.tsx index dc9be7a..426258f 100644 --- a/components/Old/editableArtistPortfolio.tsx +++ b/components/Old/editableArtistPortfolio.tsx @@ -1,16 +1,21 @@ 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 EditableArtistPortfolioImage from './editableArtistPortfolioImage'; import FileOpenIcon from '@mui/icons-material/FileOpen'; import { Grid } from '@mui/material'; const EditableArtistPortfolio = ({ artistId }) => { const [portfolioData, setPortfolioData] = useState([]); + const [columns, setColumns] = useState(2); const [loading, setLoading] = useState(true); // State for loading indicator useEffect(() => { getData(); }, []); + const handleColumns = (event, value)=>{ + setColumns(value); + } + const getData = async () => { const response = await fetch('/api/discovery/artist/' + artistId + '/portfolio'); const data = await response.json(); @@ -46,29 +51,40 @@ const EditableArtistPortfolio = ({ artistId }) => { ( + + + + } + > + {(portfolioData.length > 0 ? "Upload Another Portfolio Image" : "Upload Your First Portfolio Image")} + + + - - - } - > - {(portfolioData.length > 0 ? "Upload Another Portfolio Image" : "Upload Your First Portfolio Image")} - - - - - + + + + {portfolioData.map((item) => ( ))} diff --git a/components/Old/editableArtistPortfolioImage.tsx b/components/Old/editableArtistPortfolioImage.tsx index a76cfc6..30dde81 100644 --- a/components/Old/editableArtistPortfolioImage.tsx +++ b/components/Old/editableArtistPortfolioImage.tsx @@ -27,7 +27,7 @@ const EditableArtistPortfolioImage = ({artistId,itemId,reload}) => { } return ( - + { - return (View More); + return (View More); }}, ]; diff --git a/components/SellerStats.tsx b/components/SellerStats.tsx new file mode 100644 index 0000000..e5cc283 --- /dev/null +++ b/components/SellerStats.tsx @@ -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: + }, + { + stats: '0', + title: 'Accepted', + color: 'success', + icon: + }, + { + stats: '0', + color: 'warning', + title: 'Denied', + icon: + }, + { + stats: '$0.00', + color: 'info', + title: 'Revenue', + icon: + } +] + +const renderStats = () => { + return salesData.map((item: DataType, index: number) => ( + + + + {item.icon} + + + {item.title} + {item.stats} + + + + )) +} + +const SellerStats = () => { + return ( + + + + Total 0% growth + {' '} + 😎 this month + + } + titleTypographyProps={{ + sx: { + mb: 2.5, + lineHeight: '2rem !important', + letterSpacing: '0.15px !important' + } + }} + /> + `${theme.spacing(3)} !important` }}> + + {renderStats()} + + + + ) +} + +export default SellerStats diff --git a/core/layouts/components/shared-components/UserDropdown.tsx b/core/layouts/components/shared-components/UserDropdown.tsx index d2e672d..94945a4 100644 --- a/core/layouts/components/shared-components/UserDropdown.tsx +++ b/core/layouts/components/shared-components/UserDropdown.tsx @@ -1,5 +1,5 @@ // ** React Imports -import { useState, SyntheticEvent, Fragment } from 'react' +import { useState, SyntheticEvent, Fragment, useEffect } from 'react' // ** Next Import import { useRouter } from 'next/router' @@ -37,6 +37,17 @@ const BadgeContentSpan = styled('span')(({ theme }) => ({ const UserDropdown = () => { 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 const [anchorEl, setAnchorEl] = useState(null) @@ -69,7 +80,7 @@ const UserDropdown = () => { } return ( - (!isLoading && user) ? ( + (!isLoading && user && appUser) ? ( { badgeContent={} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} > - + - {user.nickname} + {appUser["displayName"]} Welcome back! @@ -111,43 +122,12 @@ const UserDropdown = () => { - handleDropdownClose()}> - - - Profile - - - handleDropdownClose()}> - - - Inbox - - - handleDropdownClose()}> - - - Chat - - - - handleDropdownClose()}> + router.push("/dashboard/settings")}> Settings - handleDropdownClose()}> - - - Pricing - - - handleDropdownClose()}> - - - FAQ - - handleDropdownClose('/api/auth/logout')}> diff --git a/layouts/components/vertical/AppBarContent.tsx b/layouts/components/vertical/AppBarContent.tsx index 357e757..8a2afb9 100644 --- a/layouts/components/vertical/AppBarContent.tsx +++ b/layouts/components/vertical/AppBarContent.tsx @@ -50,20 +50,8 @@ const AppBarContent = (props: Props) => { ) : null} - - - - ) - }} - /> - diff --git a/navigation/vertical/index.ts b/navigation/vertical/index.ts index 37dbac9..cc5e3e6 100644 --- a/navigation/vertical/index.ts +++ b/navigation/vertical/index.ts @@ -3,12 +3,7 @@ import Login from 'mdi-material-ui/Login' import Table from 'mdi-material-ui/Table' import CubeOutline from 'mdi-material-ui/CubeOutline' import HomeOutline from 'mdi-material-ui/HomeOutline' -import FormatLetterCase from 'mdi-material-ui/FormatLetterCase' -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' +import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications'; // ** Type import import { VerticalNavItemsType } from '../../core/layouts/types' @@ -29,7 +24,6 @@ const navigation = (): VerticalNavItemsType => { }, []); if(isStripeOnboarded){ - return [ { sectionTitle: 'General' @@ -42,11 +36,16 @@ const navigation = (): VerticalNavItemsType => { { title: 'Account Settings', icon: Settings, - path: '/artist/settings' + path: '/dashboard/settings' }, { sectionTitle: 'Artist' }, + { + title: 'Shop Settings', + icon: SettingsApplicationsIcon, + path: '/dashboard/artist/artistsettings' + }, { title: 'Payout Portal', icon: BankTransfer, @@ -74,7 +73,12 @@ const navigation = (): VerticalNavItemsType => { title: 'Dashboard', icon: HomeOutline, path: '/dashboard' - } + }, + { + title: 'Account Settings', + icon: Settings, + path: '/dashboard/settings' + }, ] } } diff --git a/pages/advanced/ssr-profile.tsx b/pages/advanced/ssr-profile.tsx index 5b829e1..3b8d2cb 100644 --- a/pages/advanced/ssr-profile.tsx +++ b/pages/advanced/ssr-profile.tsx @@ -1,5 +1,5 @@ import { withPageAuthRequired } from "@auth0/nextjs-auth0"; -import Layout from "../../components/OLd/layout"; +import Layout from "../../components/Old/layout"; import { User } from "../../interfaces"; type ProfileProps = { diff --git a/pages/api/me.tsx b/pages/api/me.tsx new file mode 100644 index 0000000..6c5b116 --- /dev/null +++ b/pages/api/me.tsx @@ -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); + } + }); \ No newline at end of file diff --git a/pages/artist/[id].tsx b/pages/artist/[id].tsx deleted file mode 100644 index c2f3fea..0000000 --- a/pages/artist/[id].tsx +++ /dev/null @@ -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 ( - - {loading ? ( // Render loading indicator if loading is true - - - Loading - - - - - ) : ( - - - - - Back - - - - - {sellerData["name"]} - - - - - - - - - - Biography - - - {sellerData["biography"]} - - - - - - - - - - Social Media - - - - - - - - - - - {user ? ( - - Request Order - - ) : ( - - - - Submit Request - - - - )} - - - - - - )} - - ); - }; - - export default SellerProfile; diff --git a/pages/artist/[id]/request.tsx b/pages/artist/[id]/request.tsx deleted file mode 100644 index 20a21eb..0000000 --- a/pages/artist/[id]/request.tsx +++ /dev/null @@ -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 ( - - {loading ? ( // Render loading indicator if loading is true - - - Loading - - - - - ) : ( - - - - - Back - - - - - New Request - - - - - - - {user ? ( - <> - - - - - - - - - - - - - - - setValue(value)}/> - - - - - - Submit Request - - - > - ) : ( - <> - - Please login to place a request. - - - Login - - > - )} - - - )} - - ); - }; - - export default SellerProfile; diff --git a/pages/dashboard/artist/artistsettings.tsx b/pages/dashboard/artist/artistsettings.tsx new file mode 100644 index 0000000..94f5215 --- /dev/null +++ b/pages/dashboard/artist/artistsettings.tsx @@ -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 ( + + + + + + + General Settings + + + Save Changes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {(profileData != null) ? ( + ):null} + + + + + ); +}; + +// Protected route, checking user authentication client-side.(CSR) +export default withPageAuthRequired(ArtistSettings); diff --git a/pages/dashboard/artist/pagesettings.tsx b/pages/dashboard/artist/pagesettings.tsx index 56413d9..f986089 100644 --- a/pages/dashboard/artist/pagesettings.tsx +++ b/pages/dashboard/artist/pagesettings.tsx @@ -14,6 +14,8 @@ 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'; +import CurrencyTextField from '@lupus-ai/mui-currency-textfield'; +import Box from '@mui/material/Box'; const Profile = () => { @@ -37,8 +39,8 @@ const Profile = () => { 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 [bioBgColor, setBioBgColor] = useState('rgb(78, 73, 73)'); + const [bioHeaderColor, setBioHeaderColor] = useState('rgb(194, 187, 187)'); const [bioHeaderIsImage, setBioHeaderImage] = useState(false); const [bioHeaderImageUrl, setBioHeaderImageUrl] = useState(''); const [bioHeaderText, setBioHeaderText] = useState('Biography'); @@ -61,11 +63,47 @@ const Profile = () => { 'h1', // Size 6 ][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 [portfolioColumns, setPotrfolioColumns] = useState(2); const [portfolioWoven, setPortfolioWoven] = useState(true); const [portfolioShouldScroll, setPortfolioShouldScroll] = useState(true); 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 profileResponse = await fetch('/api/artist/profile'); @@ -152,6 +190,66 @@ const Profile = () => { 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 ( @@ -164,7 +262,7 @@ const Profile = () => { - + Save @@ -232,6 +330,7 @@ const Profile = () => { + @@ -243,7 +342,7 @@ const Profile = () => { - + @@ -280,6 +379,26 @@ const Profile = () => { + + + + + + + + + + + + + + + Header Size + + + + + @@ -320,6 +439,59 @@ const Profile = () => { + + + } + aria-controls="panel1-content" + > + Requests + + + + + + + + + + + + + + + + + + Header Size + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -354,8 +526,18 @@ const Profile = () => { - + + + {(portfolioHeaderIsImage) ? ( + + ) : ( + + {portfolioHeaderText} + + )} + + {(portfolioShouldScroll)?( {(profileData ? ( @@ -371,6 +553,41 @@ const Profile = () => { )} + + + + + + {(requestHeaderIsImage) ? ( + + ) : ( + + {requestHeaderText} + + )} + + + + TERMS + + + + By clicking the button below, you agree to the + terms and conditions. + + + + + Agree And Start Request + + + + + diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx index 88285e5..35a5d49 100644 --- a/pages/dashboard/index.tsx +++ b/pages/dashboard/index.tsx @@ -13,7 +13,7 @@ import CardStatisticsVerticalComponent from '../../core/components/card-statisti // ** Styled Component Import 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 { withPageAuthRequired } from '@auth0/nextjs-auth0/client' import Button from '@mui/material/Button' @@ -21,8 +21,12 @@ import { CardContent } from '@mui/material' import Onboarding from '../../components/Onboarding' import { useState } from 'react' import { useEffect } from 'react' +import router from 'next/router' import { isObject } from 'util' 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 = () => { - + My Orders - + + + + {router.push("/dashboard/orders")}} fullWidth variant="contained">View All Orders + + @@ -90,15 +99,33 @@ const Dashboard = () => { ):( (onboarding) ? ( - + - - - Manage Portfolio + + + + + + "http://localhost:3000/shops/neroshi" + + + } onClick={()=>{router.push("/dashboard/artist/artistsettings#portfolio")}} fullWidth variant="outlined">Copy + + + {router.push("/dashboard/artist/artistsettings#portfolio")}} fullWidth variant="outlined">Preview - Design Store Page + {router.push("/dashboard/artist/artistsettings#portfolio")}} fullWidth variant="contained">Manage Portfolio + + + {router.push("/dashboard/artist/pagesettings")}} fullWidth variant="contained">Design Store Page + + + {router.push("/dashboard/artist/pagesettings")}} fullWidth variant="contained">Payment Portal + + + {router.push("/dashboard/artist/pagesettings")}} fullWidth variant="contained">Configure Your Shop diff --git a/pages/dashboard/settings.tsx b/pages/dashboard/settings.tsx new file mode 100644 index 0000000..7dc0398 --- /dev/null +++ b/pages/dashboard/settings.tsx @@ -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 ( + + + + + + + General Settings + + + {(saved) ? ( + Saved + ):( + Save Changes + )} + + + + + + + + + + + + + ); +}; + +// Protected route, checking user authentication client-side.(CSR) +export default withPageAuthRequired(ArtistSettings); diff --git a/pages/profile.tsx b/pages/profile.tsx deleted file mode 100644 index 2dcc54f..0000000 --- a/pages/profile.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { withPageAuthRequired } from "@auth0/nextjs-auth0/client"; -import { User } from "../interfaces"; - -type ProfileCardProps = { - user: User; -}; - -const ProfileCard = ({ user }: ProfileCardProps) => { - return ( - <> - Profile - - - Profile (client rendered) - - nickname: {user.nickname} - name: {user.name} - - > - ); -}; - -const Profile = ({ user, isLoading }) => { - return ( - <> - {isLoading ? <>Loading> : } -> - ); -}; - -// Protected route, checking user authentication client-side.(CSR) -export default withPageAuthRequired(Profile); diff --git a/pages/settings.tsx b/pages/settings.tsx deleted file mode 100644 index bf08dbe..0000000 --- a/pages/settings.tsx +++ /dev/null @@ -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 ( - - - - - - Back - - - - - Settings - - - - - Save - - - - - - - - - - - ); -}; - -export default Settings;
nickname: {user.nickname}
name: {user.name}