|
|
@@ -4,7 +4,7 @@ import {Avatar, Box, Button, Container, Grid, TextField, Typography, useMediaQue
|
|
|
import Redirect from "react-router-dom/es/Redirect";
|
|
|
import Tabs from "@mui/material/Tabs";
|
|
|
import Tab from "@mui/material/Tab";
|
|
|
-import {useState} from "react";
|
|
|
+import {createRef, useCallback, useEffect, useState} from "react";
|
|
|
import PropTypes from "prop-types";
|
|
|
import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
|
|
|
import CancelIcon from '@mui/icons-material/Cancel';
|
|
|
@@ -12,6 +12,17 @@ import SendAndArchiveIcon from '@mui/icons-material/SendAndArchive';
|
|
|
import {actionAuthLogout} from "../reducers/AuthReducer";
|
|
|
import {actionUserRemove} from "../reducers/UserReducer";
|
|
|
import {backURL} from "../actions/PathDB";
|
|
|
+import {CMainOrders} from "./MyOrdersPage";
|
|
|
+import {CMainWishList} from "./WishListPage";
|
|
|
+import Dropzone, {useDropzone} from 'react-dropzone';
|
|
|
+import {
|
|
|
+ actionFullUserUpdate,
|
|
|
+ actionSetAvatar,
|
|
|
+ actionSetLogin,
|
|
|
+ actionSetNick, actionSetPassword,
|
|
|
+ actionUploadFile
|
|
|
+} from "../actions/ActionUploadFile";
|
|
|
+import {actionFullUserFindOne} from "../actions/ActionUserFind";
|
|
|
|
|
|
function TabPanel(props) {
|
|
|
const { children, value, index, ...other } = props;
|
|
|
@@ -68,21 +79,79 @@ const ItemTabsAccountDefault = ({title, content}) => {
|
|
|
</Grid>
|
|
|
)
|
|
|
}
|
|
|
-const FormUpload = ({user, time, setStatus}) => {
|
|
|
+const MyDropzone = ({onLoad}) => {
|
|
|
+ const [files, setFiles] = useState([]);
|
|
|
+
|
|
|
+ const {getRootProps, getInputProps, isDragActive} = useDropzone({accept: 'image/*', onDrop: acceptedFiles => {
|
|
|
+ setFiles(acceptedFiles.map(file => Object.assign(file, {
|
|
|
+ preview: URL.createObjectURL(file)
|
|
|
+ })));
|
|
|
+ }})
|
|
|
+
|
|
|
+ const thumbs = files.map(file => (
|
|
|
+ <div key={file.name} style={{display: 'inline-flex', borderRadius: 2,border: '1px solid #eaeaea',marginBottom: 8, marginRight: 8, width: 500, height: 500, padding: 4, boxSizing: 'border-box'}}>
|
|
|
+ <div style={{display: 'flex', minWidth: 0, overflow: 'hidden'}}>
|
|
|
+ <img src={file.preview} style={{display: 'block', width: 'auto', height: '100%', objectFit: 'cover', objectPosition: 'center center'}} alt={'avatar'}/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ));
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ files.forEach(file => URL.revokeObjectURL(file.preview));
|
|
|
+ onLoad(files)
|
|
|
+ }, [files]);
|
|
|
+
|
|
|
return (
|
|
|
- <form action="/upload" method="post" encType="multipart/form-data" id='formProfile'>
|
|
|
- <Grid container spacing={2} justifyContent={'space-between'} alignItems={'center'} textAlign={'center'}>
|
|
|
- <TextField sx={{color: '#000'}} label={'Login'} variant="outlined" value={user?.login}/>
|
|
|
- <TextField sx={{color: '#000'}} label={'Nick'} variant="outlined" value={user?.nick} />
|
|
|
- <Button variant="contained" component="Avatar">Choose a new avatar<input type="file" hidden/></Button>
|
|
|
- <ItemTabsAccountDefault title={'Status account'} content={user?.acl[2] || user?.acl[1]}/>
|
|
|
- <ItemTabsAccountDefault title={'Account creation date'} content={time}/>
|
|
|
- <Grid item xs={12} md={4} display='flex' justifyContent={'center'} alignItems={'center'}>
|
|
|
+ <section style={{display: 'flex', flexDirection: 'column', justifyContent: 'space-between', alignItems: 'center', width:"100%", borderRadius: '20px', padding: '20px'}}>
|
|
|
+ <div style={{width:"100%", height: "100%", border: '1px dashed #616161', borderRadius: '20px', padding: '20px'}} {...getRootProps()}>
|
|
|
+ <input {...getInputProps()} />
|
|
|
+ {isDragActive ?
|
|
|
+ <Typography variant='body1' color='#616161'>Drop the file here ...</Typography> :
|
|
|
+ <Typography variant='body1' color='#616161'>Drag 'n' drop image files here, or click to select file</Typography>
|
|
|
+ }
|
|
|
+ <aside>
|
|
|
+ {thumbs}
|
|
|
+ </aside>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const FormUpload = ({user, setStatus, setLogin, setNick, setPassword, setImage}) => {
|
|
|
+ const [loginValue, setLoginValue] = useState(user?.login || '')
|
|
|
+ const [nickValue, setNickValue] = useState(user?.nick || '')
|
|
|
+ const [passwordValue, setPasswordValue] = useState('')
|
|
|
+ const [fileValue, setFileValue] = useState('')
|
|
|
+ return (
|
|
|
+ <Grid container spacing={2} justifyContent={'center'} textAlign='center' flexDirection='column'>
|
|
|
+ <Grid item xs={12} display='flex' justifyContent='space-between' alignItems='center' marginBottom='30px'>
|
|
|
+ <TextField sx={{color: '#000'}} label={'Login'} variant="outlined" placeholder={user?.login || ''} onChange={e => setLoginValue(e.target.value)}/>
|
|
|
+ <TextField sx={{color: '#000'}} label={'Nick'} variant="outlined" placeholder={user?.nick || ''} onChange={e => setNickValue(e.target.value)}/>
|
|
|
+ <TextField sx={{color: '#000'}} label={'Password'} type='password' variant="outlined" onChange={e => setPasswordValue(e.target.value)}/>
|
|
|
+ </Grid>
|
|
|
+ <Grid item xs={12} display='flex' justifyContent='space-between' alignItems='center' marginBottom='30px'>
|
|
|
+ <MyDropzone onLoad={value => setFileValue(value)}/>
|
|
|
+ </Grid>
|
|
|
+ <Grid item xs={12} display='flex' justifyContent='center' alignItems='center'>
|
|
|
<Button
|
|
|
style={{ color: '#1976d2'}}
|
|
|
fullWidth
|
|
|
type='submit'
|
|
|
- marginRight='20px'
|
|
|
+ onClick={() => {
|
|
|
+ if (loginValue !== user?.login) {
|
|
|
+ setLogin(loginValue)
|
|
|
+ }
|
|
|
+ if (nickValue !== user?.nick) {
|
|
|
+ setNick(nickValue)
|
|
|
+ }
|
|
|
+ if (passwordValue){
|
|
|
+ setPassword(passwordValue)
|
|
|
+ }
|
|
|
+ if (Array.isArray(fileValue) && fileValue[0]) {
|
|
|
+ setImage(fileValue[0]);
|
|
|
+ }
|
|
|
+ setStatus(false)
|
|
|
+ }}
|
|
|
>
|
|
|
<SendAndArchiveIcon style={{marginRight: '5px'}}/>
|
|
|
Save
|
|
|
@@ -91,17 +160,17 @@ const FormUpload = ({user, time, setStatus}) => {
|
|
|
style={{ color: '#1976d2'}}
|
|
|
fullWidth
|
|
|
onClick={() => setStatus(false)}
|
|
|
- marginRight='20px'
|
|
|
>
|
|
|
<CancelIcon style={{marginRight: '5px'}}/>
|
|
|
Cancel
|
|
|
</Button>
|
|
|
</Grid>
|
|
|
</Grid>
|
|
|
- </form>
|
|
|
)
|
|
|
}
|
|
|
-const AccountDetails = ({user, time}) => {
|
|
|
+const CFormUpload = connect(null, {setLogin: actionSetLogin, setNick: actionSetNick, setPassword: actionSetPassword, setImage: actionSetAvatar, userUpdate: actionFullUserFindOne})(FormUpload)
|
|
|
+
|
|
|
+const AccountDetails = ({promise, user, time}) => {
|
|
|
const [status, setStatus] = useState(false)
|
|
|
|
|
|
return (
|
|
|
@@ -113,8 +182,7 @@ const AccountDetails = ({user, time}) => {
|
|
|
<ItemTabsAccountDefault title={'Account creation date'} content={time}/>
|
|
|
<ItemTabsAccountDefault title={'Avatar'}
|
|
|
content={
|
|
|
- // eslint-disable-next-line no-mixed-operators
|
|
|
- (user?.avatar?.url && <Avatar style={{margin: '0 auto'}} alt="User" src={backURL + '/' + user?.avatar?.url}/> || 'Not installed')
|
|
|
+ (user?.avatar?.url ? <Avatar style={{margin: '0 auto'}} alt="User" src={backURL + '/' + user?.avatar?.url}/> : 'Not installed')
|
|
|
}
|
|
|
/>
|
|
|
<Grid item xs={12} md={4}>
|
|
|
@@ -131,12 +199,13 @@ const AccountDetails = ({user, time}) => {
|
|
|
Edit data
|
|
|
</Typography>
|
|
|
</Grid>
|
|
|
+ {!promise.setNewLogin?.payload && promise.setNewLogin?.status === 'RESOLVED' && <Typography width='100%' textAlign='center' color='red'>this login already exists</Typography>}
|
|
|
</Grid> :
|
|
|
- <FormUpload user={user} time={time} setStatus={value => setStatus(value)}/>
|
|
|
+ <CFormUpload user={user} setStatus={value => setStatus(value)}/>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-const ProfilePage = ({user = {}, authLogOut, userLogOut}) => {
|
|
|
+const ProfilePage = ({user = {}, promise, authLogOut, userLogOut}) => {
|
|
|
const matches = useMediaQuery('(max-width:899px)')
|
|
|
const matches2 = useMediaQuery('(max-width:768px)')
|
|
|
const [value, setValue] = useState(0)
|
|
|
@@ -149,7 +218,7 @@ const ProfilePage = ({user = {}, authLogOut, userLogOut}) => {
|
|
|
if (Object.keys(user).length !== 0) {
|
|
|
let date = new Date(+user.createdAt);
|
|
|
let year = date.getFullYear();
|
|
|
- let month = "0" + date.getMonth();
|
|
|
+ let month = "0" + (date.getMonth()+1);
|
|
|
let day = "0" + date.getDate();
|
|
|
let hours = "0" + date.getHours();
|
|
|
let minutes = "0" + date.getMinutes();
|
|
|
@@ -192,13 +261,13 @@ const ProfilePage = ({user = {}, authLogOut, userLogOut}) => {
|
|
|
<Button onClick={() => {authLogOut(); userLogOut()}}>Logout</Button>
|
|
|
</Tabs>
|
|
|
<TabPanel value={value} index={0}>
|
|
|
- <AccountDetails user={user} time={formattedTime}/>
|
|
|
+ <AccountDetails user={user} promise={promise} time={formattedTime}/>
|
|
|
</TabPanel>
|
|
|
<TabPanel value={value} index={1}>
|
|
|
- my orders
|
|
|
+ <CMainOrders itemsPerPage={5}/>
|
|
|
</TabPanel>
|
|
|
<TabPanel value={value} index={2}>
|
|
|
- wish list
|
|
|
+ <CMainWishList color={'#fff'}/>
|
|
|
</TabPanel>
|
|
|
</Box>
|
|
|
</Container>
|
|
|
@@ -206,6 +275,6 @@ const ProfilePage = ({user = {}, authLogOut, userLogOut}) => {
|
|
|
</>
|
|
|
)
|
|
|
}
|
|
|
-const CProfilePage = connect(state => ({user: state.user}), {authLogOut: actionAuthLogout, userLogOut: actionUserRemove})(ProfilePage)
|
|
|
+const CProfilePage = connect(state => ({user: state.user, promise: state.promise}), {authLogOut: actionAuthLogout, userLogOut: actionUserRemove})(ProfilePage)
|
|
|
|
|
|
export default CProfilePage
|
Alex