Feat: Add territory part

nextjs/components/atoms/Activelink.js

@@ -0,0 +1,18 @@
+import { withRouter } from 'next/router';
+import Link from 'next/link';
+import React, { Children } from 'react';
+
+const ActiveLink = ({ router, children, ...props }) => {
+  const child = Children.only(children);
+
+  let className = child.props.className || '';
+  if (router.pathname === props.href && props.activeClassName) {
+    className = `${className} ${props.activeClassName}`.trim();
+  }
+
+  delete props.activeClassName;
+
+  return <Link {...props}>{React.cloneElement(child, { className })}</Link>;
+};
+
+export default withRouter(ActiveLink);

nextjs/components/atoms/VideoVimeo.js

@@ -35,13 +35,13 @@ const useStyles = makeStyles(theme => ({
 
 export default function VideoVimeo(props) {
 
-    const {videoId, title, options, classesOverride} = props;
+    const {videoId, title, options, classesOverride, autoplay} = props;
     const classes = useStyles();
 
     return (
         <section className={classes.video +' '+classesOverride}>
             <iframe className='player' 
-            src={"https://player.vimeo.com/video/"+ videoId + options+"?autoplay=1"} 
+            src={"https://player.vimeo.com/video/"+ videoId + options+"?autoplay="+autoplay} 
             frameBorder="0" 
             title={title} 
             webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen></iframe>

nextjs/components/organisms/Answer.js

@@ -86,6 +86,9 @@ class Answer extends Component {
         file: null,
         firstname: '',
         lastname: '',
+        linkedin: '',
+        twitter: '',
+        website: '',
         mediaId:null,
         companyId:null
     };
@@ -98,6 +101,9 @@ class Answer extends Component {
         this.setState({
             firstname: nextProps.user.firstname,
             lastname: nextProps.user.lastname,
+            linkedin: nextProps.user.linkedin,
+            twitter:nextProps.user.twitter,
+            website:nextProps.user.website,
             mediaId: nextProps.mediaId,
             companyId: nextProps.companyId
         })
@@ -106,7 +112,11 @@ class Answer extends Component {
     componentDidMount(){
         this.setState({
             firstname:this.props.user.firstname,
-            lastname:  this.props.user.lastname   })
+            lastname:this.props.user.lastname,   
+            linkedin:this.props.user.linkedin,   
+            twitter:this.props.user.twitter,   
+            website:this.props.user.website,   
+        })
     }
 
     onSubmit = (e) => {
@@ -117,6 +127,9 @@ class Answer extends Component {
         data.append('file', this.state.file)
         data.append('firstname', this.state.firstname)
         data.append('lastname', this.state.lastname)
+        data.append('linkedin', this.state.linkedin)
+        data.append('twitter', this.state.twitter)
+        data.append('website', this.state.website)
 
 //TODO:maybe add this two in a single saga
         this.props.updateUserRequest(data)
@@ -172,7 +185,7 @@ class Answer extends Component {
                     />
 
                     <TextField
-                        disabled
+                        name="linkedin"
                         id="outlined-required"
                         label="Linkedin"
                         className={classes.textField}
@@ -181,7 +194,7 @@ class Answer extends Component {
 
                     />
                     <TextField
-                        disabled
+                        name="twitter"
                         id="outlined-required"
                         label="Twitter"
                         className={classes.textField}
@@ -190,7 +203,7 @@ class Answer extends Component {
                     />
 
                     <TextField
-                        disabled
+                        name="website"
                         id="outlined-required"
                         label="Site internet"
                         className={classes.textField}

nextjs/components/organisms/Header.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, Children } from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
@@ -32,9 +32,9 @@ import { fetchCurrentUserRequest } from "../../actions/user";
 import { requestLogout } from "../../actions/auth";
 import Button from '@material-ui/core/Button';
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
-
 import Typography from '@material-ui/core/Typography';
-
+import { withRouter } from "next/router";
+import ActiveLink from "./../atoms/Activelink";
 const styles = theme => ({
   root: {
     width: '100%',
@@ -192,7 +192,13 @@ const styles = theme => ({
     '& svg': {
       width: '0.7em',
       height: '0.7em',
-    }
+    },
+  },
+
+  active: { 
+    '& span, & svg': {
+      color: theme.palette.primary.main+ ' !important',
+    },
   },
 
   //DESKTOP PART
@@ -306,6 +312,8 @@ class Header extends React.Component {
 
   render() {
     const { classes } = this.props;
+
+  
     return (
       <div className={classes.root}>
         <Drawer anchor="left" open={this.state.left} onClose={this.toggleDrawer('left', false)}>
@@ -328,34 +336,34 @@ class Header extends React.Component {
                 <Divider />
                 <div className={classes.links}>
                   <div className={classes.linkGroup}>
-                    <Link href="/"  >
+                    <ActiveLink activeClassName={ classes.active } href="/"  >
                       <a className={classes.darkMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <HomeIcon className={classes.icon} />
                         <ListItemText classes={{ primary: classes.ListItemText }} primary='Accueil'>
                         </ListItemText>
                       </ListItem></a>
-                    </Link>
-                    <Link href="/Offres"  >
+                    </ActiveLink>
+                    <ActiveLink activeClassName={ classes.active } href="/Offres"  >
                       <a className={classes.darkMenuItem +' '+ classes.darkMenuItemSpecific}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <OfferIcon className={classes.icon} />
                         <ListItemText classes={{ primary: classes.ListItemText }} primary={`Offres d'emploi`}>
                         </ListItemText>
                       </ListItem></a>
-                    </Link>
-                    <Link href="/Entreprises"  >
+                    </ActiveLink>
+                    <ActiveLink activeClassName={ classes.active } href="/Entreprises"  >
                       <a className={classes.darkMenuItem +' '+ classes.darkMenuItemSpecific}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <CompanyIcon className={classes.icon} />
                         <ListItemText classes={{ primary: classes.ListItemText }} primary='Nos entreprises'>
                         </ListItemText>
                       </ListItem></a>
-                    </Link>
-                    <Link href="/Help"  >
+                    </ActiveLink>
+                    <ActiveLink activeClassName={ classes.active } href="/Help"  >
                       <a className={classes.darkMenuItem +' '+ classes.darkMenuItemSpecific}><ListItem classes={{ root: classes.rootListItem }}>
                         <HelpIcon className={classes.icon} />
                         <ListItemText classes={{ primary: classes.ListItemText }} primary='Comment ça marche ?'>
                         </ListItemText>
                       </ListItem></a>
-                    </Link>
+                    </ActiveLink>
                   </div>
 
                   <div>
@@ -524,24 +532,24 @@ class Header extends React.Component {
 
                 <List className={classes.desktopMenuList}>
                   <div>
-                    <Link href="/Offres"  >
+                    <ActiveLink activeClassName={ classes.active } href="/Offres"  >
                       <a className={classes.desktopMenuItem}>
                         <ListItemText primary="Offres d'emploi">
                         </ListItemText>
                       </a>
-                    </Link>
-                    <Link href="/Entreprises"  >
+                    </ActiveLink>
+                    <ActiveLink activeClassName={ classes.active } href="/Entreprises"  >
                       <a className={classes.desktopMenuItem}>
                         <ListItemText primary='Nos entreprises'>
                         </ListItemText>
                       </a>
-                    </Link>
-                    <Link href="/Help"  >
+                    </ActiveLink>
+                    <ActiveLink activeClassName={ classes.active } href="/Help"  >
                       <a className={classes.desktopMenuItem}>
                         <ListItemText primary='Comment ça marche ?'>
                         </ListItemText>
                       </a>
-                    </Link>
+                    </ActiveLink>
                   </div>
 
                   <div>

nextjs/components/organisms/OffreDetail.js

@@ -307,7 +307,7 @@ function OffreDetail(props) {
                         </section>
                     </Hidden>
 
-                    <VideoVimeo  {...isCandidature == 'true' ? 'classes={{ video: classes.video }}': ''}  videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} />
+                    <VideoVimeo  {...isCandidature == 'true' ? 'classes={{ video: classes.video }}': ''}  videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} autoplay='1'/>
 
                     <div className={classes.container}>
                         <Hidden mdUp>

nextjs/components/templates/LayoutBack.js

@@ -33,14 +33,12 @@ const styles = theme => ({
   },
   content: {
     top: '64px',
-    height: 'calc(100vh - 64px)',
     width: '100%',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'flex-start',
     top: '64px',
-    height: 'calc(100vh - 64px)',
     position: 'relative',
 
   },

nextjs/pages/Conseils.js

@@ -34,7 +34,7 @@ class Conseils extends React.Component {
           <link rel="canonical" href="https://app.talentstube.com" />
         </Head>
         <section className={ classes.container }>
-        <VideoVimeo videoId='356411947' classes={{ video: classes.VideoVimeo}}/>
+        <VideoVimeo videoId='356411947' autoplay='1'/>
         </section>
     </LayoutBack>
     )

nextjs/pages/Entreprise.js

@@ -124,7 +124,7 @@ const styles = theme => ({
         flexDirection: 'column',
         alignSelf: 'center',
     },
-    discoverContainer: {
+    discoverContainerOffers: {
         backgroundColor: theme.palette.background.grey,
         paddingBottom: theme.spacing(7),
         minHeight: '30vh',
@@ -138,12 +138,22 @@ const styles = theme => ({
         [theme.breakpoints.up('md')]: {
             paddingTop: theme.spacing(2),
             paddingBottom: theme.spacing(2),
-            marginBottom: '10vh',
         },
     },
     discoverContainerImage: {
         position: 'relative',
     },
+    discoverContainerTerritory: {
+        backgroundColor: theme.palette.background.grey,
+        paddingBottom: theme.spacing(10),
+        [theme.breakpoints.up('md')]: {
+            paddingTop: theme.spacing(2),
+            paddingBottom: theme.spacing(8),
+        },
+    },
+    discoverTerritoryContentContainer: {
+        boxShadow: '0px 0px 10px rgba(30, 35, 39, 0.10)',
+    },
     logo: {
         width: 'inherit',
         height: '100%',
@@ -291,6 +301,19 @@ const styles = theme => ({
             color: theme.palette.primary.main,
         }
     },
+    videoVimeo: {
+        paddingBottom: '56% !important', 
+        [theme.breakpoints.up('md')]: {
+            paddingBottom: '56% !important', 
+        }
+    },
+    territoryTitle: {
+        fontWeight: '500',
+        padding: theme.spacing(2),
+        background: theme.palette.background.default,
+        borderBottomLeftRadius: '5px',
+        borderBottomRightRadius: '5px',
+    },
 });
 
 const CustomTableBody = ({ rowIds, Row, style, className }) => (
@@ -324,6 +347,10 @@ class Entreprise extends React.Component {
         const offre = (company.count_ads == 1) ? company.count_ads + ' offre' : company.count_ads + ' offres'
         const nbOffre = (company.count_ads > 0) ? offre : 'Candidature spontanée'
 
+        const territoryVideoUrlTab = (company.territories[0] && company.territories[0].territory)?company.territories[0].territory.presentation_video.cdn_url.split('/'):'';
+        const territoryVideoId = territoryVideoUrlTab[2]
+        console.log(territoryVideoUrlTab)
+
         const NewLayout = ({ Table }) => (
             <div>
                 <Table />
@@ -380,7 +407,7 @@ class Entreprise extends React.Component {
                                 >Candidature spontanée</Button>
                             </section>
                         </Hidden>
-                        {company.presentation_video && <VideoVimeo videoId={Ar.last(_.split(company.presentation_video.cdn_url, '/'))} />}
+                        {company.presentation_video && <VideoVimeo videoId={Ar.last(_.split(company.presentation_video.cdn_url, '/'))} autoplay='1'/>}
                         <div className={classes.container}>
                             <Hidden mdUp>
                                 <section className={classes.headerContainer}>
@@ -475,7 +502,7 @@ class Entreprise extends React.Component {
 
                         {
                             !_.isEmpty(company.ads) ? (
-                                <div className={classes.container + ' ' + classes.discoverContainer} id="discover">
+                                <div className={classes.container + ' ' + classes.discoverContainerOffers} id="discover">
                                     <Typography gutterBottom className={classes.title + ' ' + classes.discoverTitle}>
                                         Les offres d'emploi pour <span>{company.brand_name && company.brand_name}</span>
                                     </Typography>
@@ -492,6 +519,24 @@ class Entreprise extends React.Component {
                             ) : ''
                         }
 
+                        {
+                            !_.isEmpty(company.territories) ? (
+                                <div className={classes.container + ' ' + classes.discoverContainerTerritory}>
+                                    <section>
+                                        <Typography gutterBottom className={classes.title + ' ' + classes.discoverTitle} align="center">
+                                            Découvrir le <span className={classes.primary}>territoire</span>
+                                        </Typography> 
+                                        <section className={ classes.discoverTerritoryContentContainer }>
+                                            <VideoVimeo classesOverride={ classes.videoVimeo } videoId={territoryVideoId} autoplay='0' />
+                                            <Typography className={ classes.territoryTitle } gutterBottom>
+                                                { !_.isEmpty(company.territories) ? company.territories[0].territory.brand_name : '' }
+                                            </Typography>
+                                        </section>
+                                    </section>
+                                </div>
+                            ) : ''
+                        }
+
                     </div>
                 )}
             </LayoutCompany>

nextjs/pages/Help.js

@@ -118,7 +118,7 @@ function Help(props) {
           className={classes.subTitle}>
           Découvrez les offres d'emploi en vidéo
         </Typography>
-        <VideoVimeo videoId='356411947' classesOverride={classes.video}/>
+        <VideoVimeo videoId='356411947' classesOverride={classes.video} autoplay='0'/>
         <Typography
           className={classes.text}
           gutterBottom>

nextjs/pages/Reponse.js

@@ -350,7 +350,7 @@ class Reponse extends React.Component {
               Vous allez postuler en <span>vidéo</span> !
               </Typography>
               <Typography gutterBottom align="center">
-                C'est <span>simple </span>,<span>rapide</span> et <span>plus humain</span>
+                C'est <span>simple</span>,<span> rapide</span> et <span>plus humain</span>
               </Typography>    
             </div>
 

nextjs/pages/_error.js

@@ -14,10 +14,10 @@ class Error extends React.Component {
 
     render() {
         return (
-            <LayoutBack text="-Erreur-">
+            <LayoutBack text="Erreur">
                 <p>
                     {this.props.statusCode
-                        ? `Une erreur ${this.props.statusCode} est survenue sur le serveur (-.-)Zzz...`
+                        ? `Une erreur ${this.props.statusCode} est survenue sur le serveur.`
                         : 'Une erreur est survenue sur le client'}
                 </p>
             </LayoutBack>