From 53cfd64da158e05e470d7371618607759615e11e Mon Sep 17 00:00:00 2001 From: Damien Ostler Date: Sun, 11 Feb 2024 22:53:05 -0500 Subject: [PATCH] more --- components/artist.tsx | 6 +- components/header.tsx | 10 +-- package-lock.json | 48 +++++++++++++ package.json | 1 + pages/about.tsx | 24 ------- pages/seller/[id].tsx | 39 +---------- pages/seller/[id]/request.tsx | 123 ++++++++++++++++++++++++++++++++++ pages/settings.tsx | 38 +++++++++++ 8 files changed, 220 insertions(+), 69 deletions(-) delete mode 100644 pages/about.tsx create mode 100644 pages/seller/[id]/request.tsx create mode 100644 pages/settings.tsx diff --git a/components/artist.tsx b/components/artist.tsx index 174dca1..90755df 100644 --- a/components/artist.tsx +++ b/components/artist.tsx @@ -54,13 +54,13 @@ const Artist = ({user, artistId}) => { - + {user ? ( - + ) : ( - + )} diff --git a/components/header.tsx b/components/header.tsx index 18fbe6c..e0cb648 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -22,7 +22,7 @@ type HeaderProps = { }; -const settings = ['Profile', 'Account', 'Dashboard', 'Logout']; +const settings = ['Seller Dashboard', 'Account', 'Dashboard', 'Logout']; function ResponsiveAppBar() { const [anchorElNav, setAnchorElNav] = React.useState(null); @@ -105,16 +105,16 @@ function ResponsiveAppBar() { onClose={handleCloseUserMenu} > - + - + - + - + diff --git a/package-lock.json b/package-lock.json index 9903345..cbe1157 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@fontsource/roboto": "^5.0.8", + "@lupus-ai/mui-currency-textfield": "^1.0.3", "@mui/icons-material": "^5.15.6", "@mui/material": "^5.15.6", "@novu/notification-center": "^0.22.0", @@ -345,6 +346,20 @@ "@hapi/hoek": "^9.0.0" } }, + "node_modules/@lupus-ai/mui-currency-textfield": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@lupus-ai/mui-currency-textfield/-/mui-currency-textfield-1.0.3.tgz", + "integrity": "sha512-VF6+aBDZCCgA57yw0kC1BibSUs6xErjD28My1nPo1ZXtAiNMjyShdTEtmi6aZL2wN5bcjiJAguIVgvOQjpBidQ==", + "dependencies": { + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@mui/material": "^5.11.1", + "autonumeric": "^4.6.0", + "prop-types": "^15.8.1", + "react": "^18.2.0", + "tss-react": "^4.5.0" + } + }, "node_modules/@mantine/core": { "version": "5.10.5", "resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.10.5.tgz", @@ -1156,6 +1171,15 @@ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, + "node_modules/autonumeric": { + "version": "4.10.5", + "resolved": "https://registry.npmjs.org/autonumeric/-/autonumeric-4.10.5.tgz", + "integrity": "sha512-t7h1poYH37eVi/pDTdO0UBb8qk8A9gUHzABP/wUoqSw4w5aDFJr2gxfZPl+agta4ifb5OfBm4Bylv1G/dCC2zQ==", + "funding": { + "type": "patreon", + "url": "https://www.patreon.com/AlexandreBonneau" + } + }, "node_modules/axios": { "version": "1.6.7", "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz", @@ -2093,6 +2117,30 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, + "node_modules/tss-react": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/tss-react/-/tss-react-4.9.4.tgz", + "integrity": "sha512-4o+XFdaTcraNEIsCRxKiEX7g6xhcsdSxfHRjos3Kg9GbYIpzfK4M2MHMETTuXT54nUrldtnkipNC003v/q5KVg==", + "dependencies": { + "@emotion/cache": "*", + "@emotion/serialize": "*", + "@emotion/utils": "*" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/server": "^11.4.0", + "@mui/material": "^5.0.0", + "react": "^16.8.0 || ^17.0.2 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/server": { + "optional": true + }, + "@mui/material": { + "optional": true + } + } + }, "node_modules/typescript": { "version": "4.9.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", diff --git a/package.json b/package.json index bb1c03e..a0ca3c6 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@fontsource/roboto": "^5.0.8", + "@lupus-ai/mui-currency-textfield": "^1.0.3", "@mui/icons-material": "^5.15.6", "@mui/material": "^5.15.6", "@novu/notification-center": "^0.22.0", diff --git a/pages/about.tsx b/pages/about.tsx deleted file mode 100644 index 930210c..0000000 --- a/pages/about.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useUser } from "@auth0/nextjs-auth0/client"; -import Layout from "../components/layout"; - -const About = () => { - const { user, isLoading } = useUser(); - - return ( - -

About

-

- This project shows different ways to display Profile info: using{" "} - Client rendered, Server rendered, and API rendered -

-

- Navigating between this page and Home is always pretty fast. - However, when you navigate to the Server rendered profile page it - takes more time because it uses SSR to fetch the user and then to - display it -

- - ); -}; - -export default About; diff --git a/pages/seller/[id].tsx b/pages/seller/[id].tsx index 48d48d8..e4254dc 100644 --- a/pages/seller/[id].tsx +++ b/pages/seller/[id].tsx @@ -17,41 +17,6 @@ interface TabPanelProps { value: number; } -function a11yProps(index: number) { - return { - id: `simple-tab-${index}`, - 'aria-controls': `simple-tabpanel-${index}`, - }; -} - -function createData( - serviceName: string, - rating: number, - review: string -) { - return { serviceName, rating, review }; -} - -function CustomTabPanel(props: TabPanelProps) { - const { children, value, index, ...other } = props; - - return ( - - ); -} - const SellerProfile = () => { const { user, isLoading } = useUser(); const router = useRouter() @@ -132,14 +97,14 @@ const SellerProfile = () => { {user ? ( - ) : ( diff --git a/pages/seller/[id]/request.tsx b/pages/seller/[id]/request.tsx new file mode 100644 index 0000000..4b00e0d --- /dev/null +++ b/pages/seller/[id]/request.tsx @@ -0,0 +1,123 @@ +import Layout from "../../../components/layout"; +import { useUser } from "@auth0/nextjs-auth0/client"; +import { Box, Grid, Card, CardContent, Typography, List, ListItem, ListItemButton, ListItemIcon, + ListItemText, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button, + Tabs, Tab, CircularProgress } from "@mui/material"; +import { useState, useEffect } from "react"; +import { useRouter } from 'next/router' +import { fetchSeller } from "../../../services/DiscoveryService"; +import ArtistPortfolio from "../../../components/artistPortfolio"; +import Tooltip from '@mui/material/Tooltip'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { TextField } from "@mui/material"; +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 + console.log(router.query) + const [sellerData, setSellerData] = useState([]); + const [loading, setLoading] = useState(true); // State for loading indicator + useEffect(() => { + const getData = async () => { + if(id){ + const data = await fetchSeller(id); + 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... + + + + ) : ( + + + + + + + + New Request + + + + + + + {user ? ( + <> + + + + + + + + + + + + + setValue(value)}/> + + + + + + + + ) : ( + <> + + Please login to place a request. + + + + )} + + + )} + + ); + }; + + export default SellerProfile; diff --git a/pages/settings.tsx b/pages/settings.tsx new file mode 100644 index 0000000..815a144 --- /dev/null +++ b/pages/settings.tsx @@ -0,0 +1,38 @@ +import { useUser } from "@auth0/nextjs-auth0/client"; +import Layout from "../components/layout"; +import { Grid, Button, Typography, TextField, Box } from "@mui/material"; + +const Settings = () => { + const { user, isLoading } = useUser(); + + return ( + + + + + + + + + Settings + + + + + + + + + + + + + + ); +}; + +export default Settings;