330 lines
9.6 KiB
JavaScript
330 lines
9.6 KiB
JavaScript
import React, { Fragment } from 'react';
|
||
import { connect } from "react-redux";
|
||
import { fetchCurrentUserRequest } from '../../actions/user'
|
||
import { fetchCompanyRequest } from '../../actions/companies'
|
||
import { uploadMediaCv } from '../../actions/mediaCv'
|
||
import { withStyles } from '@material-ui/core/styles'
|
||
import { makeStyles } from '@material-ui/styles';
|
||
import { Button, Typography, Divider, Hidden } from '@material-ui/core';
|
||
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
|
||
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
|
||
import LoaderVideo from '../../components/templates/loaderVideo'
|
||
import Snack from '../../components/atoms/snack';
|
||
import Snackbar from '@material-ui/core/Snackbar';
|
||
import { Alert, AlertTitle } from '@material-ui/lab';
|
||
import ReactHtmlParser from 'react-html-parser';
|
||
import getConfig from 'next/config'
|
||
import Card from '@material-ui/core/Card';
|
||
import CardActions from '@material-ui/core/CardActions';
|
||
import CardContent from '@material-ui/core/CardContent';
|
||
import Description from '@material-ui/icons/Description';
|
||
import Grid from '@material-ui/core/Grid';
|
||
import Container from '@material-ui/core/Container';
|
||
const styles = theme => ({
|
||
root: {
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'flex-start',
|
||
margin: theme.spacing(1),
|
||
},
|
||
rootButton: {
|
||
textTransform: 'inherit',
|
||
},
|
||
underlined: {
|
||
textDecoration: 'underline',
|
||
},
|
||
textButton: {
|
||
fontWeight: '700',
|
||
fontSize: '1.15em',
|
||
paddingLeft: theme.spacing(2),
|
||
},
|
||
InputKeyboardArrowDownIcon: {
|
||
fontSize: '2.5em',
|
||
color: theme.palette.primary.dark,
|
||
},
|
||
importButton: {
|
||
color: "#1e2327",
|
||
backgroundColor: "#fff",
|
||
padding: theme.spacing(3, 2),
|
||
margin: theme.spacing(1),
|
||
width: "100%",
|
||
textAlign: "right",
|
||
boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
|
||
'px rgba(0, 0, 0, 0.14)',
|
||
'&:hover': {
|
||
color: "#1e2327",
|
||
backgroundColor: "#fff",
|
||
}
|
||
},
|
||
grille :{
|
||
paddingTop:theme.spacing(4),
|
||
paddingRight:"30px",
|
||
width: "100%",
|
||
marginBottom:"30px",
|
||
|
||
borderRadius: "5px",
|
||
border: "1px solid #1E2327",
|
||
color:theme.palette.primary.dark
|
||
},
|
||
grille2 :{
|
||
margin:'10px',
|
||
width: "100%",
|
||
marginBottom:"30px",
|
||
|
||
},
|
||
button: {
|
||
width:"200px",
|
||
textTransform: 'inherit',
|
||
margin: theme.spacing(0, 8),
|
||
padding: theme.spacing(1.2, 2),
|
||
[theme.breakpoints.up('sm')]: {
|
||
margin: 'auto',
|
||
},
|
||
},
|
||
boutonMobile:{
|
||
width:"200px",
|
||
textAlign :"center",
|
||
color: theme.palette.secondary.main,
|
||
backgroundColor: theme.palette.primary.important,
|
||
margin : "0px !important"
|
||
},
|
||
lien:{
|
||
textDecoration:'none',
|
||
color:'#fff'
|
||
},
|
||
centered:{
|
||
textAlign:"center"
|
||
}
|
||
});
|
||
|
||
|
||
const { publicRuntimeConfig } = getConfig();
|
||
class Etape3 extends React.Component {
|
||
state = {
|
||
loading: true,
|
||
openSnack: false,
|
||
cv:false,
|
||
errors: {},
|
||
success : {}
|
||
};
|
||
|
||
componentDidMount() {
|
||
localStorage.setItem('loginRedirect', window.location.pathname)
|
||
|
||
if(!!!localStorage.getItem('ttJWT'))
|
||
{
|
||
Router.push("/Login")
|
||
}
|
||
else
|
||
this.setState({
|
||
loading: false,
|
||
cvLink: this.props.user.cv
|
||
})
|
||
}
|
||
|
||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||
|
||
this.setState({
|
||
cvLink: nextProps.cvLink,
|
||
loading: nextProps.loading,
|
||
openSnack: !!!_.isEmpty(nextProps.errors),
|
||
errors: !!!nextProps.errors ? { errors: { message: "" } } : nextProps.errors,
|
||
})
|
||
|
||
if (nextProps.mediaCv.statusCv === 'success') {
|
||
const success = {};
|
||
success.message ="Profil mis à jour";
|
||
console.log("CV mis à jour!!!")
|
||
if(nextProps.mediaCv) console.log(nextProps.mediaCv.message)
|
||
this.setState({ success });
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
inputFilesystemChangeCv = (e) => {
|
||
this.uploadMediaCv(e)
|
||
}
|
||
|
||
uploadMediaCv = (e) => {
|
||
var file = e.target.files[0]
|
||
|
||
const data = new FormData()
|
||
data.append('upload', file)
|
||
console.log ("envoi de cv")
|
||
this.props.uploadMediaCv(data)
|
||
}
|
||
|
||
AfficherSuccess() {
|
||
if (!this.state.success || !this.state.success.message) {
|
||
console.log("Erreur Upload CV");
|
||
return "";
|
||
} else if (this.state.success.length != 0 && this.state.success.message != "") {
|
||
return (
|
||
|
||
<Snackbar open={open} autoHideDuration={1000} onClose={() => this.setState({open: false})}>
|
||
<Alert onClose={() => this.setState({open: false})} severity="success">
|
||
{ReactHtmlParser(this.state.success.message)}
|
||
</Alert>
|
||
</Snackbar>
|
||
);
|
||
}
|
||
return "";
|
||
}
|
||
|
||
AfficherLienCv(classes) {
|
||
console.log("afficher lien");
|
||
if (this.state.cvLink !="") {
|
||
|
||
return (
|
||
|
||
<Fragment>
|
||
<Hidden> </Hidden>
|
||
<Hidden> </Hidden>
|
||
|
||
<Hidden> </Hidden>
|
||
<Hidden> </Hidden>
|
||
|
||
<Hidden> </Hidden>
|
||
<div className={classes.centered} >
|
||
<Typography >
|
||
<a href={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink}
|
||
target="_blank" className={classes.lien}
|
||
|
||
>
|
||
<Button
|
||
variant="contained"
|
||
className={classes.button + ' ' + classes.boutonMobile}
|
||
>Visualiser mon CV
|
||
</Button>
|
||
|
||
</a>
|
||
<br />
|
||
|
||
</Typography>
|
||
</div>
|
||
|
||
</Fragment>
|
||
|
||
);
|
||
|
||
}
|
||
return "";
|
||
}
|
||
|
||
render() {
|
||
const { classes, company } = this.props;
|
||
const { loading } = this.state;
|
||
return (
|
||
<Grid
|
||
container
|
||
direction="row"
|
||
alignItems="flex-start"
|
||
className={classes.grille}
|
||
justify="center"
|
||
alignItems="center">
|
||
|
||
|
||
<Grid item lg={12} md={12} xl={12} xs={12} className={classes.grilleGauche}>
|
||
<div id="cv">
|
||
|
||
<Typography
|
||
align="center"
|
||
gutterBottom
|
||
variant="headline"
|
||
variant="h6"
|
||
component="h2"
|
||
className={classes.h6}>
|
||
<Description className={classes.menuIcon}></Description> Curriculum vitae
|
||
</Typography>
|
||
<Typography
|
||
align="center">Importez votre CV pour permettre aux recruteurs d’en savoir plus sur vous.
|
||
.</Typography>
|
||
|
||
</div>
|
||
<Fragment>
|
||
{ loading ?
|
||
|
||
<LoaderVideo textePrincipal="Votre candidature vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/> :
|
||
<Grid
|
||
container
|
||
spacing={4}
|
||
direction="row"
|
||
alignItems="flex-start"
|
||
className={classes.grille2}
|
||
justify="center"
|
||
alignItems="center">
|
||
<Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
|
||
<Fragment>
|
||
{this.AfficherSuccess()}
|
||
|
||
<input
|
||
type="file"
|
||
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .pdf, .odt"
|
||
className={classes.input+' cypButtonImportVid'}
|
||
style={{ display: 'none' }}
|
||
id="import-button-file-cv"
|
||
onChange={this.inputFilesystemChangeCv}
|
||
/>
|
||
<label htmlFor="import-button-file-cv">
|
||
<Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
|
||
<img alt="talents-tube" src='/statique/images/Import-cv-candidat.svg' className={classes.iconButton} />
|
||
<Typography className={classes.textButton}>
|
||
J'<span className={classes.underlined}>importe</span> mon CV
|
||
</Typography>
|
||
<KeyboardArrowDownIcon className={ classes. InputKeyboardArrowDownIcon }/>
|
||
</Button>
|
||
|
||
</label>
|
||
<Hidden> </Hidden>
|
||
{this.AfficherLienCv(classes)}
|
||
<Hidden> </Hidden>
|
||
<Hidden> </Hidden>
|
||
<Hidden> </Hidden>
|
||
</Fragment>
|
||
</Grid>
|
||
</Grid>
|
||
}
|
||
</Fragment>
|
||
</Grid>
|
||
|
||
</Grid>
|
||
);
|
||
}
|
||
|
||
}
|
||
|
||
Etape3.getInitialProps = function (context) {
|
||
|
||
const { adId, companyId } = context.query
|
||
const {res} = context
|
||
//TODO :really needed ?
|
||
context.store.dispatch(fetchCurrentUserRequest())
|
||
|
||
if(!!adId)
|
||
context.store.dispatch(fetchJobRequest(adId))
|
||
else if(!!companyId)
|
||
context.store.dispatch(fetchCompanyRequest(companyId))
|
||
|
||
return {};//leave this please
|
||
}
|
||
|
||
function mapStateToProps(state) {
|
||
// console.log("mapStateToProps")
|
||
// console.log(state.loading)
|
||
// console.log(state.user)
|
||
// console.log(state.media.message)
|
||
return {
|
||
user: state.user ,
|
||
cvLink : state.mediaCv.message,
|
||
loading: !!state.media.loading,
|
||
cv : true,
|
||
mediaCv: state.mediaCv,
|
||
//errors: errorMessageSelector(state),
|
||
user: state.user,
|
||
company: state.company
|
||
};
|
||
}
|
||
export default withStyles(styles)(connect(mapStateToProps, { fetchCurrentUserRequest, fetchCompanyRequest, uploadMediaCv })(Etape3)); |