mirror of
https://github.com/D4M13N-D3V/comissions-app-ui.git
synced 2025-03-14 00:05:07 +00:00
removed random string in responses
This commit is contained in:
Damien Ostler
parent
6f37e0cb3e
commit
66b0c7be80
31
components/swipableView.tsx
Normal file
31
components/swipableView.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import { useEffect, useRef } from "react"
|
||||
|
||||
export default function SwipeableViews(
|
||||
{ className = "", index, onChangeIndex, ...rootProps }:
|
||||
{ index: number, onChangeIndex: (index: number) => void } & React.HTMLProps<HTMLDivElement>
|
||||
) {
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const scrollTimeout = useRef<number>()
|
||||
|
||||
useEffect(() => {
|
||||
containerRef.current?.children[index]?.scrollIntoView({ behavior: "smooth" })
|
||||
}, [index])
|
||||
|
||||
return (
|
||||
<div
|
||||
{...rootProps}
|
||||
ref={containerRef}
|
||||
className={
|
||||
"flex snap-x snap-mandatory items-stretch overflow-x-scroll " +
|
||||
"*:w-full *:flex-shrink-0 *:snap-center " + className
|
||||
}
|
||||
onScroll={({ currentTarget }) => {
|
||||
if (scrollTimeout.current) clearTimeout(scrollTimeout.current)
|
||||
scrollTimeout.current = window.setTimeout(() => {
|
||||
const pageWidth = currentTarget.scrollWidth / currentTarget.children.length
|
||||
onChangeIndex(Math.round(currentTarget.scrollLeft / pageWidth))
|
||||
}, 100)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
31
package-lock.json
generated
31
package-lock.json
generated
@ -12,6 +12,7 @@
|
||||
"@lupus-ai/mui-currency-textfield": "^1.0.3",
|
||||
"@mui/icons-material": "^5.15.6",
|
||||
"@mui/material": "^5.15.6",
|
||||
"@mui/x-data-grid": "^6.19.4",
|
||||
"@novu/notification-center": "^0.22.0",
|
||||
"next": "latest",
|
||||
"openapi-typescript-fetch": "^1.1.3",
|
||||
@ -665,6 +666,31 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/x-data-grid": {
|
||||
"version": "6.19.4",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.19.4.tgz",
|
||||
"integrity": "sha512-qXBe2mSetdsl3ZPqB/1LpKNkEiaYUiFXIaMHTIjuzLyusXgt+w7UsHYO7R+aJYUU7c3FeHla0R1nwRMY3kZ5ng==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.2",
|
||||
"@mui/utils": "^5.14.16",
|
||||
"clsx": "^2.0.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"reselect": "^4.1.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mui/material": "^5.4.1",
|
||||
"@mui/system": "^5.4.1",
|
||||
"react": "^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/env": {
|
||||
"version": "14.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz",
|
||||
@ -1939,6 +1965,11 @@
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
|
||||
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "4.1.8",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
|
||||
"integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.8",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
"@lupus-ai/mui-currency-textfield": "^1.0.3",
|
||||
"@mui/icons-material": "^5.15.6",
|
||||
"@mui/material": "^5.15.6",
|
||||
"@mui/x-data-grid": "^6.19.4",
|
||||
"@novu/notification-center": "^0.22.0",
|
||||
"next": "latest",
|
||||
"openapi-typescript-fetch": "^1.1.3",
|
||||
|
||||
15
pages/api/seller/profile.tsx
Normal file
15
pages/api/seller/profile.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { getAccessToken, withApiAuthRequired, getSession } from '@auth0/nextjs-auth0';
|
||||
|
||||
export default withApiAuthRequired(async function sellerProfile(req, res) {
|
||||
console.log("TEST")
|
||||
const { accessToken } = await getAccessToken(req, res);
|
||||
const response = await fetch(process.env.NEXT_PUBLIC_API_URL+'/api/SellerProfile', {
|
||||
headers: {
|
||||
"Authorization": `Bearer ${accessToken}`
|
||||
}
|
||||
});
|
||||
|
||||
let result = await response.json();
|
||||
res.status(200).json(result);
|
||||
});
|
||||
|
||||
@ -1,20 +1,14 @@
|
||||
import { getAccessToken, withApiAuthRequired, getSession } from '@auth0/nextjs-auth0';
|
||||
|
||||
export default withApiAuthRequired(async function products(req, res) {
|
||||
// If your Access Token is expired and you have a Refresh Token
|
||||
// `getAccessToken` will fetch you a new one using the `refresh_token` grant
|
||||
const { accessToken } = await getAccessToken(req, res);
|
||||
const response = await fetch(process.env.NEXT_PUBLIC_API_URL+'/api/SellerProfile', {
|
||||
headers: {
|
||||
"Authorization": `Bearer ${accessToken}`
|
||||
}
|
||||
},
|
||||
method: 'POST'
|
||||
});
|
||||
if(response.status == 401 || response.status == 400){
|
||||
res.status(200);
|
||||
}
|
||||
else{
|
||||
let result = await response.json();
|
||||
res.status(200).json(result);
|
||||
}
|
||||
let result = await response.json();
|
||||
res.status(200).json(result);
|
||||
});
|
||||
|
||||
@ -1,65 +1,114 @@
|
||||
import { useUser } from "@auth0/nextjs-auth0/client";
|
||||
import { getAccessToken } from "@auth0/nextjs-auth0";
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import Layout from "../components/layout";
|
||||
import { Grid, Button, Typography, TextField, Box } from "@mui/material";
|
||||
import { useState, useEffect } from "react";
|
||||
import SwipeableViews from '../components/swipableView';
|
||||
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const SellerDashoard = (ctx) => {
|
||||
const { user, isLoading } = useUser();
|
||||
const [sellerRequestData, setSellerRequestData] = useState([]);
|
||||
const [sellerData, setSellerData] = useState([]);
|
||||
const [loading, setLoading] = useState(true); // State for loading indicator
|
||||
|
||||
const [tabValue, setTabValue] = useState(0);
|
||||
|
||||
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
|
||||
setTabValue(newValue);
|
||||
};
|
||||
|
||||
const handleChangeIndex = (index: number) => {
|
||||
setTabValue(index);
|
||||
};
|
||||
|
||||
const requestSeller = () => {
|
||||
const response = fetch('/api/seller/request', {
|
||||
method: 'POST'
|
||||
}).then((response) => {
|
||||
console.log(response);
|
||||
});
|
||||
}
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
dir?: string;
|
||||
index: number;
|
||||
value: number;
|
||||
}
|
||||
|
||||
function TabPanel(props: TabPanelProps) {
|
||||
const { children, value, index, ...other } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="tabpanel"
|
||||
hidden={value !== index}
|
||||
id={`full-width-tabpanel-${index}`}
|
||||
aria-labelledby={`full-width-tab-${index}`}
|
||||
{...other}
|
||||
>
|
||||
{value === index && (
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Typography>{children}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function a11yProps(index: number) {
|
||||
return {
|
||||
id: `full-width-tab-${index}`,
|
||||
'aria-controls': `full-width-tabpanel-${index}`,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const getData = async () => {
|
||||
const response = await fetch('/api/sellers/profile');
|
||||
const response = await fetch('/api/seller/profile');
|
||||
const sellerProfile = await response.json();
|
||||
console.log(sellerProfile)
|
||||
setSellerData(sellerProfile);
|
||||
const requestResponse = await fetch('/api/seller/request', {method:"POST"});
|
||||
const sellerRequest = await response.json();
|
||||
setSellerData(sellerProfile);
|
||||
setLoading(false); // Once data is fetched, set loading to false
|
||||
}
|
||||
getData();
|
||||
}, []);
|
||||
return (
|
||||
<Layout user={user} loading={isLoading}>
|
||||
const theme = useTheme();
|
||||
|
||||
{(Object.keys(sellerData).length>0) ? (
|
||||
<><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">
|
||||
Seller Dashboard
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={2} sx={{textAlign:"center"}}>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12}>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding:4}}>
|
||||
<Grid container sx={{textAlign:"center"}}>
|
||||
<Grid item xs={12} sm={2} sx={{textAlign:"center"}}>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={8} sx={{textAlign:"center"}}>
|
||||
TODO
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={2} sx={{textAlign:"center"}}>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12}>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
|
||||
) : (
|
||||
const columns: GridColDef[] = [
|
||||
{ field: 'requestor', headerName: 'User', width: 150 },
|
||||
{ field: 'message', headerName: 'Message', width: 280 },
|
||||
{ field: 'amount', headerName: 'Amount', width:125 },
|
||||
];
|
||||
const rows = [
|
||||
{ id: 1, requestor: 'Snow', message: 'This is a test message!', amount: 35.00 },
|
||||
{ id: 2, requestor: 'Lannister', message: 'This is a test message!', amount: 42.00 },
|
||||
{ id: 3, requestor: 'Lannister', message: 'This is a test message!', amount: 45.00 },
|
||||
{ id: 4, requestor: 'Stark', message: 'This is a test message!', amount: 16.00 },
|
||||
{ id: 5, requestor: 'Targaryen', message: 'This is a test message!', amount: 150.00 },
|
||||
{ id: 6, requestor: 'Melisandre', message: "This is a test message!", amount: 150.00 },
|
||||
{ id: 7, requestor: 'Clifford', message: 'This is a test message!', amount: 44.00 },
|
||||
{ id: 8, requestor: 'Frances', message: 'This is a test message!', amount: 36.00 },
|
||||
{ id: 9, requestor: 'Roxie', message: 'This is a test message!', amount: 65.00 },
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<Layout user={user} loading={isLoading}>
|
||||
<Grid container spacing={2} sx={{padding:4}}>
|
||||
<Grid container sx={{textAlign:"center"}}>
|
||||
<Grid item container sx={{textAlign:"center"}}>
|
||||
<Grid item xs={12} sm={2} sx={{textAlign:"center"}}>
|
||||
<Button color="primary" variant="contained" href="../">
|
||||
Back
|
||||
@ -67,19 +116,71 @@ const SellerDashoard = (ctx) => {
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={8} sx={{textAlign:"center"}}>
|
||||
<Typography variant="h4">
|
||||
<Button size="large" color="secondary" variant="contained">Request To Become Seller</Button>
|
||||
Seller Dashboard
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={2} sx={{textAlign:"center"}}>
|
||||
{/* <Button color="secondary" variant="contained" href="../">
|
||||
<Button color="secondary" variant="contained" href="../">
|
||||
Save
|
||||
</Button> */}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12}>
|
||||
|
||||
<Grid item container xs={12} sm={12}>
|
||||
<Grid item xs={12} sm={12}>
|
||||
<TextField variant="filled" fullWidth label="Artist Name" />
|
||||
<Box sx={{padding:1}} />
|
||||
<TextField variant="outlined" fullWidth multiline rows={4} label="Biography" />
|
||||
<Box sx={{padding:1}} />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} sx={{textAlign:"center"}}>
|
||||
<Button sx={{width:"50%"}} color="success" variant="contained">Payout Portal</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item container xs={12} sm={12}>
|
||||
|
||||
<AppBar position="static">
|
||||
<Tabs
|
||||
value={tabValue}
|
||||
onChange={handleChange}
|
||||
indicatorColor="secondary"
|
||||
textColor="inherit"
|
||||
variant="fullWidth"
|
||||
aria-label="full width tabs example"
|
||||
>
|
||||
<Tab label="New Requests" {...a11yProps(0)} />
|
||||
<Tab label="Portfolio" {...a11yProps(1)} />
|
||||
<Tab label="Ongoing Requests" {...a11yProps(2)} />
|
||||
</Tabs>
|
||||
</AppBar>
|
||||
<SwipeableViews
|
||||
axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
|
||||
index={tabValue}
|
||||
onChangeIndex={handleChangeIndex}
|
||||
>
|
||||
<TabPanel value={tabValue} index={0} dir={theme.direction}>
|
||||
<DataGrid
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
initialState={{
|
||||
pagination: {
|
||||
paginationModel: { page: 0, pageSize: 5 },
|
||||
},
|
||||
}}
|
||||
pageSizeOptions={[5, 10]}
|
||||
sx={{width: '100%'}}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabValue} index={1} dir={theme.direction}>
|
||||
Item Two
|
||||
</TabPanel>
|
||||
<TabPanel value={tabValue} index={2} dir={theme.direction}>
|
||||
Item Three
|
||||
</TabPanel>
|
||||
</SwipeableViews>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user