Bug video territoire

nextjs/components/atoms/IconText.js

@@ -8,6 +8,7 @@ import LocationOnIcon from '@material-ui/icons/LocationOn';
 import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
 import Business from '@material-ui/icons/Business';
 import Typography from '@material-ui/core/Typography';
+import WatchLater from '@material-ui/icons/WatchLater';
 
 const variantIcon = {
   assignment: AssignmentIcon,
@@ -15,6 +16,7 @@ const variantIcon = {
   location_on: LocationOnIcon,
   business_center: BusinessCenterIcon,
   business: Business,
+  watch_later: WatchLater,
 };
 
 const styles = theme => ({

nextjs/components/atoms/IconTextInline.js

@@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core/styles';
 import AssignmentIcon from '@material-ui/icons/Assignment';
 import RoomIcon from '@material-ui/icons/Room';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
+import WatchLater from '@material-ui/icons/WatchLater';
 import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
 import Typography from '@material-ui/core/Typography';
 import Business from '@material-ui/icons/Business';
@@ -12,6 +13,7 @@ const variantIcon = {
   assignment: AssignmentIcon,
   room: RoomIcon,
   location_on: LocationOnIcon,
+  watch_later: WatchLater,
   business_center: BusinessCenterIcon,
   business: Business,
 };

nextjs/components/atoms/JobPosting.js

@@ -5,19 +5,24 @@ const JobPosting = props => {
     return (
         
             <JobPostingJsonLd
-        datePosted="2020-01-06T03:37:40Z"
+        datePosted={props.job_date}
         description={props.job_description}
         hiringOrganization={{
             name: props.job_brand,
             sameAs: props.job_brand_link,
         }}
         jobLocation={{
-            addressLocality: props.job_location,
+            addressLocality: props.job_ville,
+            addressRegion: props.job_dept,
+            // postalCode: props.job_location,
+            streetAddress: props.job_location,
+            addressCountry: props.job_pays,
 
         }}
         title={props.job_title}
-        validThrough="2020-01-06"
+        validThrough={props.job_date_fin}
         applicantLocationRequirements="FR"
+        employmentType = {props.job_contract_type + ","+props.job_temps_type }
         />
         
         

nextjs/components/atoms/OgHead.js

@@ -22,12 +22,12 @@ const OgHead = props => {
             <meta name="twitter:card" content="summary"/>
             <meta name="twitter:site" content="@TalentsTube"/>
             <meta name="twitter:title" content={props.seo_title}/>
-            <meta name="twitter:description" content={props.seo_title}/>
+            <meta name="twitter:description" content={props.seo_description}/>
             <meta name="twitter:image" content={props.image}/>
-            <meta http-equiv='cache-control' content='no-store,no-cache'></meta>
-            <meta http-equiv='expires' content='0'></meta>
-            <meta http-equiv='pragma' content='no-cache'></meta>
-            <link rel="canonical" href={ props.seo_url} />    
+            {/* <meta httpEquiv='cache-control' content='no-store,no-cache'></meta>
+            <meta httpEquiv='expires' content='0'></meta>
+            <meta httpEquiv='pragma' content='no-cache'></meta> */}
+            {/* <link rel="canonical" href={ props.seo_url} />     */}
             
         </Head>
         

nextjs/components/atoms/SimpleCollapse.js

@@ -94,7 +94,7 @@ const useStyles = makeStyles(theme => ({
 
 export default function SimpleCollapse(props) {
   const classes = useStyles();
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(true);
 
   function handleExpandClick() {
     setExpanded(!expanded);
@@ -111,12 +111,10 @@ export default function SimpleCollapse(props) {
       </Collapse>
 
       <CardActions disableSpacing classes={{ root: classes.rootCardAction }}>
-
-
         <IconButton
           onClick={handleExpandClick}
           aria-expanded={expanded}
-          aria-label="Afficher plus"
+          aria-label="Afficher plus "
         > <Typography className={classes.displayMore}>
             {(!expanded) ? 'Afficher plus' : 'Afficher moins'}
           </Typography>

nextjs/components/organisms/AccountEtape2.js

@@ -12,7 +12,7 @@ import {fetchCompanyRequest} from '../../actions/companies'
 import {fetchCurrentUserRequest} from '../../actions/user'
 import VideoVimeo from '../atoms/VideoVimeo'
 import Router from 'next/router'
-import Loader from '../templates/loader'
+import LoaderVideo from '../templates/loaderVideo'
 import Ar from "lodash/array"
 import Snackbar from '@material-ui/core/Snackbar';
 import { Alert, AlertTitle } from '@material-ui/lab';
@@ -71,6 +71,16 @@ const styles = theme => ({
             backgroundColor:  "#25D89A",
         }
     },
+    captureButton: {
+        color: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.main,
+        padding: theme.spacing(5, 2),
+        margin: theme.spacing(1),
+        boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.14)',
+        '&:hover': {
+          backgroundColor: theme.palette.primary.main,
+        },
+      },
     importButton: {
         color: theme.palette.primary.main,
         backgroundColor:  theme.palette.secondary.main,
@@ -135,7 +145,7 @@ class Etape2 extends React.Component {
         //window.location.reload(false);
         if (nextProps.media.status === 'success') {
             const success = {};
-            success.message ="Vidéo mis à jour";
+            success.message ="Vidéo mise à jour";
             this.setState({ success });
             this.setActiveStep(1);
         }
@@ -197,7 +207,7 @@ class Etape2 extends React.Component {
             <section className={classes.container}>
                 <Fragment>
                     {this.AfficherSuccess()}
-                    { loading ? <Loader/>  : <div></div> }
+                    { loading ? <LoaderVideo/>  : <div></div> }
                     
                     <div className={classes.root}>
                     <Hidden xsUp>
@@ -210,9 +220,39 @@ class Etape2 extends React.Component {
                             alignItems="center" 
                             spacing={2}>
                             <Grid item xs={12} sm={12} md={12} lg={6} lg={6}>
+                                
+
+
+                            { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
+                                (
+                                    <Fragment>
+                                    <input
+                                        type="file" accept="video/*" capture="camcorder"
+                                        className={classes.input}
+                                        style={{ display: 'none' }}
+                                        id="record-button-file"
+                                        multiple
+                                        onChange={this.inputCamRecorderChange}
+                                    />
+                                    <label htmlFor="record-button-file">
+                                        <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
+                                        <img alt="talents-tube" src='/static/images/capture.svg' className={classes.iconButton} />
+                                        <Typography align="left" className={classes.textButton}>
+                                            Je <span className={classes.underlined}>réalise</span> ma vidéo de présentation
+                                        </Typography>
+                                        <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                                        </Button>
+                                    </label>
+                                    </Fragment>
+                                ):
+                                (
+
+                                
                                 <div className={classes.recorderContainer}>
                                     <Recorder uploader={this.props.uploadMediaPres} titreBouton="Remplacer ma vidéo"/>
                                 </div>
+                                )
+                            }
                             </Grid>
                             <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
                                 <div> 

nextjs/components/organisms/AccountEtape3.js

@@ -8,7 +8,7 @@ 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 Loader from '../../components/templates/loader'
+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';
@@ -191,7 +191,7 @@ class Etape3 extends React.Component {
     return (
       <Fragment>
       { loading ? 
-        <Loader /> :
+        <LoaderVideo /> :
         <Fragment>
           {this.AfficherSuccess()}
           

nextjs/components/organisms/AccountProfile.js

@@ -321,13 +321,13 @@ const AccountProfile = props => {
                                     <DuoIcon className={classes.menuButton}/>
                                     : {(user.alias && user.alias != '' && user.alias != 'null')
                                         ? <a
-                                                href={publicRuntimeConfig.cvThequeUrl + "talent/" + user.alias}
+                                                href={publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias}
                                                 target="_blank">Voir mon profil TalentsTube
                                             </a>
                                         : 'Non renseigné'}<br/>
                                     <div
                                         class="fb-share-button"
-                                        data-href={publicRuntimeConfig.cvThequeUrl + "talent/" + user.alias}
+                                        data-href={publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias}
                                         data-layout="button_count"
                                         data-size="small">
 
@@ -335,7 +335,7 @@ const AccountProfile = props => {
                                         :
                                         <a
                                             target="_blank"
-                                            href={"https://www.facebook.com/sharer/sharer.php?u=" + publicRuntimeConfig.cvThequeUrl + "talent/" + user.alias + "%2F&amp;src=sdkpreparse"}
+                                            href={"https://www.facebook.com/sharer/sharer.php?u=" + publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias + "%2F&amp;src=sdkpreparse"}
                                             class="fb-xfbml-parse-ignore"> Partager mon profil
                                         </a>
                                     </div>

nextjs/components/organisms/Answer.js

@@ -160,7 +160,12 @@ class Answer extends Component {
 
         //TODO:maybe add this two in a single transactionnal saga
         this.props.updateUserRequest(data)
-
+        //TODO: faire appel à une méthode qui va encoyer le mail a l'entreprise 
+        
+        // this.props.companyMails.map((user) =>
+        //     //TODO Envoyer un mail a chaque user
+        //     console.log(user.email)
+        // )
         this.props.postAdAnswerRequest(
             {
                 adId: this.props.adId,
@@ -308,7 +313,7 @@ class Answer extends Component {
                     />
                 </form>
                 <div id="F" className={classes.foot}>
-                    <Button variant="contained" className={classes.button + ' cypButtonSendApplication'} onClick={this.onSubmit}>Postuler</Button>
+                <Button variant="contained" className={classes.button + ' cypButtonSendApplication'} onClick={this.onSubmit}>Envoyer ma candidature</Button>
                 </div>
             </section>
         )

nextjs/components/organisms/Footer.js

@@ -243,6 +243,13 @@ function Footer(props) {
                             </Typography>
                         </a>
                     </Link>
+                    <Link href="" >
+                        <a href="https://blog.talentstube.com/contact" target="_blank">
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Contact
+                            </Typography>
+                        </a>
+                    </Link>
                 </section>
                 <section className={classes.container}>
                     <Typography color="secondary" component="p" className={classes.titleContainer}>
@@ -255,11 +262,11 @@ function Footer(props) {
                         56 000 Vannes
                 </Typography>
                     <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
-                        02.30.05.06.31
+                    <a href="tel:+33230050631"  >02.30.05.06.31 </a> 
                 </Typography>
-                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                    {/* <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                         contact@talentstube.com
-                </Typography>
+                </Typography> */}
                 </section>
 
             </div>

nextjs/components/organisms/Header.js

@@ -605,7 +605,7 @@ class Header extends React.Component {
               </section>
               <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
 
-                <a href={publicRuntimeConfig.symphonyUrl + "/faire-offre-emploi-video"} className={classes.desktopMenuItem}>
+                <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
                   <ListItemText primary='Espace recruteurs'>
                   </ListItemText>
                   <ArrowForward className={classes.icon} />

nextjs/components/organisms/OffreDetail.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { Fragment,lazy, Suspense } from 'react'
 import Router from 'next/router'
 import { withStyles } from '@material-ui/core/styles';
 import getConfig from 'next/config'
@@ -16,11 +16,12 @@ import Ar from "lodash/array";
 import Hidden from '@material-ui/core/Hidden';
 import Link from 'next/link'
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
-import VideoVimeo from '../atoms/VideoVimeo'
+const VideoVimeo = lazy(() => import('../atoms/VideoVimeo'));
+//import VideoVimeo from '../atoms/VideoVimeo'
 import OgHead from '../atoms/OgHead'
 import JobPosting from '../atoms/JobPosting'
 import Moment from 'react-moment';
-
+const renderLoader = () => <p>Chargement</p>;
 const styles = theme => ({
     primary: {
         color: theme.palette.primary.main,
@@ -58,6 +59,9 @@ const styles = theme => ({
     offerInfoContainer: {
         display: 'flex',
     },
+    buttonContainer: {
+        alignItems: 'right',
+    },
     infoContainer: {
         display: 'flex',
         flexDirection: 'column',
@@ -80,12 +84,14 @@ const styles = theme => ({
     },
     IconTextContainer: {
         paddingTop: theme.spacing(1.5, 0),
+        height: '100%',
     },
     IconTextContainerDesktop: {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'flex-start',
         width: '100%',
+        
     },
     contentContainer: {
         display: 'flex',
@@ -172,6 +178,15 @@ const styles = theme => ({
     discoverTitle: {
         padding: theme.spacing(3, 0),
     },
+    voirEntreprise: {
+        textTransform: 'inherit',
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        padding: theme.spacing(1.2, 2),
+        color: '#BBBCBD',
+        backgroundColor: '#F3F3F4',
+
+    },
     contentText: {
         fontSize: '1em',
         fontWeight: '300',
@@ -247,12 +262,11 @@ const styles = theme => ({
     },
     button: {
         textTransform: 'inherit',
-        marginLeft: theme.spacing(8),
-        marginRight: theme.spacing(8),
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
         padding: theme.spacing(1.2, 2),
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.important,
-        alignSelf: 'center',
     },
     chip: {
         color: theme.palette.secondary.main,
@@ -311,7 +325,27 @@ function OffreDetail(props) {
     offre.location.gmap_address.formatted_address ? descriptionSEO += ", "+offre.location.gmap_address.formatted_address : ""
     offre.location.gmap_address.formatted_address ? titleSEO += ", "+offre.location.gmap_address.formatted_address : ""
     offre.company.brand_name ? titleSEO += " - "+offre.company.brand_name : ""
-    
+    descriptionSEO +=  ". Envoyez votre candidature en vidéo. "
+    titleSEO += " | Talents Tube "
+    let jobVille=""
+    let jobDpt=""
+    let jobPays=""
+    let  jobContract =""
+    let  tempsType =""
+    let  tempsTypeFr =""
+    offre.location.gmap_address.address_components[0] ? jobVille = offre.location.gmap_address.address_components[0].long_name: jobVille=""
+    offre.location.gmap_address.address_components[1] ? jobDpt = offre.location.gmap_address.address_components[1].long_name: jobDpt=""
+    offre.location.gmap_address.address_components[3] ? jobPays = offre.location.gmap_address.address_components[3].long_name: jobPays=""
+    // offre.location.gmap_address ? jobAdr = location.gmap_address.adr_address: jobAdr=""
+    offre.extra.contract_type ? jobContract = offre.extra.contract_type : jobContract =""
+    offre.extra.temps_type ? tempsType = offre.extra.temps_type : tempsType =""
+    if(tempsType=="PART_TIME"){
+        tempsTypeFr="Temps partiel"
+    }else if(tempsType=="FULL_TIME") {
+        tempsTypeFr="Plein temps"
+    }else if(tempsType=="MIX_TIME") {
+
+    }
     return (
         <Fragment>
             {/* {offre.public_tag.map((label, index) => {
@@ -329,7 +363,14 @@ function OffreDetail(props) {
                 job_brand_link= {entrepriseLink}
                 job_title = {offre.title}
                 job_location = {offre.location.gmap_address.formatted_address}
+                job_ville = {jobVille}
+                job_dept = {jobDpt}
+                job_pays = {jobPays}
+                job_adr = {offre.location.gmap_address.formatted_address}
                 job_date = {offre.published_at}
+                job_date_fin = {offre.unpublished_at}
+                job_temps_type= {tempsType}
+                job_contract_type= {jobContract}
             ></JobPosting>
             {offre.video && (
                 <Fragment>
@@ -361,19 +402,36 @@ function OffreDetail(props) {
                                     {/* ville */}
                                 </div>
                             </div>
+                            <div className={classes.buttonContainer}>
+                            {!!!offre.is_promoted && (
+                                <Link href={`/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`} >
+                                    <Button
+                                        variant="contained"
+                                        className={classes.voirEntreprise + ' cypButtonApply'}
+                                    >Voir l'entreprise</Button>
+                                    
+                                </Link>
+                                
+                                
+                            )}
                             {!!!offre.is_promoted && (
                                 <Link href={`/Reponse?adId=${offre.id}`}>
                                     <Button
                                         variant="contained"
                                         className={classes.button + ' cypButtonApply'}
                                     >Postuler</Button>
+                                    
                                 </Link>
+                                
+                                
                             )}
+                            </div>
+                            
                         </section>
                     </Hidden>
-
-                    <VideoVimeo  {...isCandidature == 'true' ? 'classes={{ video: classes.videoOffre }}' : ''} videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} autoplay='1' />
-
+                    <Suspense fallback={renderLoader()}>   
+                        <VideoVimeo  {...isCandidature == 'true' ? 'classes={{ video: classes.videoOffre }}' : ''} videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} autoplay='1' />
+                    </Suspense>            
                     <div className={classes.container}>
                         <Hidden mdUp>
                             <section className={classes.headerContainer}>
@@ -400,7 +458,9 @@ function OffreDetail(props) {
                             <section className={classes.IconTextContainer}>
                                 {offre.is_promoted && (<Chip label="Pourvue" className={classes.chip} />)}
                                 {offre.extra && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="assignment" text={offre.extra.contract_type} />)}
+                                {tempsTypeFr && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={tempsTypeFr} />)}
                                 {offre.location && offre.location.gmap_address && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={offre.location.gmap_address.formatted_address} />)}
+                                {offre.beneficiaire  && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={offre.beneficiaire} />)}
                             </section>
                         </Hidden>
 
@@ -412,6 +472,7 @@ function OffreDetail(props) {
                             <Hidden smDown>
                                 <section className={classes.IconTextContainerDesktop}>
                                     <IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="assignment" text={offre.extra.contract_type} />
+                                    {tempsTypeFr ?<IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={tempsTypeFr } />:""}
                                     <IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={offre.location.gmap_address.formatted_address} />
                                     {offre.beneficiaire && (<IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={offre.beneficiaire} /> )}
                                 </section>
@@ -455,8 +516,8 @@ function OffreDetail(props) {
                     {offre.company.presentation_video && !offre.is_promoted && (
                         <div className={classes.container + ' ' + classes.discoverContainerCompany}>
                             <section>
-                                <Typography gutterBottom className={classes.title + ' ' + classes.discoverTitle} align="center">
-                                    Découvrir l'entreprise <span className={classes.primary}>{offre.company.brand_name && offre.company.brand_name}</span>
+                                <Typography gutterBottom className={classes.title + ' ' + classes.voirEntreprise} align="center">
+                                    Voir l'entreprise <span className={classes.primary}>{offre.company.brand_name && offre.company.brand_name}</span>
                                 </Typography>
 
                                 <a href={entrepriseLink}>
@@ -475,7 +536,9 @@ function OffreDetail(props) {
                                     Découvrir le <span className={classes.primary}>territoire</span>
                                 </Typography>
                                 <section className={classes.discoverTerritoryContentContainer}>
-                                    <VideoVimeo classesOverride={classes.videoTerritory} videoId={territoryVideoId} autoplay='0' />
+                                    <Suspense fallback={renderLoader()}>
+                                        <VideoVimeo classesOverride={classes.videoTerritory} videoId={territoryVideoId} autoplay='0' />
+                                    </Suspense>
                                     <Typography className={classes.territoryTitle}>
                                         {(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''}
                                     </Typography>

nextjs/components/organisms/SocialShare.js

@@ -51,17 +51,17 @@ export default function SocialShare(props) {
 
     return (
         <div className={classes.root}>
-            <a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)}>
+            <a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)} target="_blank">
                 <Icon className={clsx(classes.icon, classes.FacebookIcon, 'fab fa-facebook-f')} color="secondary" />
             </a>
-            <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)}>
+            <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} target="_blank">
                 <Icon className={clsx(classes.icon, classes.TwitterIcon, 'fab fa-twitter')} color="secondary" />
             </a>
-            <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talent's Tube")}>
+            <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talent's Tube")} target="_blank">
                 <Icon className={clsx(classes.icon, classes.LinkedinIcon, 'fab fa-linkedin-in')} color="secondary" />
             </a>
             {/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
-            <a href={"mailto:?subject=Offre d'emploi Talent's Tube&body=Regardez cette offre : " + props.url} >
+            <a href={"mailto:?subject=Offre d'emploi Talent's Tube&body=Regardez cette offre : " + props.url} target="_blank"s>
                 <Icon className={clsx(classes.icon, classes.MailIcon, 'fas fa-envelope')} color="secondary" />
             </a>
         </div>

nextjs/components/organisms/VideoPlayer.js

@@ -1,5 +1,6 @@
-import React from 'react';
-import videojs from 'video.js'
+import React, { lazy } from 'react';
+const videojs = lazy(() => import('video.js'));
+//import videojs from 'video.js'
 
 export default class VideoPlayer extends React.Component {
   componentDidMount() {

nextjs/components/templates/Grid.js

@@ -85,10 +85,16 @@ class Grid extends Component {
     async componentDidMount() {
         
         this.setState({pageSize:this.props.limit})
-
+        let data = sessionStorage.getItem(this.props.type+'_currentPage');
+        let current;
+        if(data){
+            current=data;
+        }else{
+            current=this.state.currentPage;
+        }
         this.props.dataFetcher(
             {
-                offset: this.state.currentPage,
+                offset: ((current-1)*this.props.limit)+1,
                 limit: this.props.limit
             }
         );
@@ -106,10 +112,17 @@ class Grid extends Component {
         const { currentPage, pageSize, filterText, promoted } = this.state;
 
         if (nextProps.promoted != this.state.promoted) {
+            let data = sessionStorage.getItem(this.props.type+'_currentPage');
+            let current;
+            if(data){
+                current=data;
+            }else{
+                current=this.state.currentPage;
+            }
             this.setState({ promoted: nextProps.promoted });
             this.props.dataFetcher(
                 {
-                    offset: this.state.currentPage,
+                    offset: ((current-1)*(this.state.pageSize+1))+1,
                     limit: this.state.pageSize,
                     keyword: filterText,
                     isPromoted: nextProps.promoted
@@ -123,19 +136,25 @@ class Grid extends Component {
     _onNext = () => {
         const { currentPage, pageSize, filterText, promoted } = this.state;
         this.props.dataFetcher({ offset: currentPage * pageSize, limit: pageSize, keyword: filterText, isPromoted: promoted })
+        sessionStorage.setItem(this.props.type+'_currentPage', currentPage+1);
+
     };
 
     _onPrevious = () => {
         const { currentPage, pageSize, filterText, promoted } = this.state;
         this.props.dataFetcher({ offset: (currentPage - 2) * pageSize + 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
+        sessionStorage.setItem(this.props.type+'_currentPage', currentPage-1);
+
     };
 
     _onGetPage = pageNumber => {
         const { pageSize, filterText, promoted } = this.state;
         this.props.dataFetcher({ offset: (pageNumber - 1) * pageSize + 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
+        
     };
 
     _onFilter = filterText => {
+        sessionStorage.setItem(this.props.type+'_currentPage', 1);
         this.setState({ currentPage: 1 });
         const { currentPage, pageSize, promoted } = this.state;
         this.setState({ filterText });
@@ -148,7 +167,7 @@ class Grid extends Component {
 
     searchSubmit = () => {
         const { currentPage, pageSize, promoted, filterText } = this.state;
-
+        sessionStorage.setItem(this.props.type+'_currentPage', 1);
         this.props.dataFetcher({ offset: 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
     }
 

nextjs/components/templates/LayoutCompany.js

@@ -10,6 +10,7 @@ import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
 import Header from '../organisms/Header'
 import {AppBar,CssBaseline,Container,Toolbar,IconButton,Typography} from "@material-ui/core";
 import Hidden from '@material-ui/core/Hidden';
+import Link from 'next/link'
 
 const styles = theme => ({
   RootContainer: {
@@ -65,12 +66,21 @@ const styles = theme => ({
   },
   button: {
     textTransform: 'inherit',
-    marginLeft: theme.spacing(8),
-    marginRight: theme.spacing(8),
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     padding: theme.spacing(1.2, 2),
     color: theme.palette.secondary.main,
     backgroundColor: theme.palette.primary.important,
   },
+  voirOffre: {
+    textTransform: 'inherit',
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    padding: theme.spacing(1.2, 2),
+    color: '#BBBCBD',
+    backgroundColor: '#F3F3F4',
+    
+  },
 })
 
 function LayoutCompany(props) {
@@ -105,6 +115,13 @@ function LayoutCompany(props) {
           
           <Hidden mdUp>
           <div id="F" className={classes.foot}>
+          <Link href="#discover"  >
+            <Button
+                variant="contained"
+                className={classes.voirOffre + ' cypButtonApply'}
+            >Voir les offres</Button>
+                                            
+          </Link>
             <Button
               variant="contained"
               className={classes.button}

nextjs/components/templates/LayoutOffre.js

@@ -8,6 +8,7 @@ import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import Header from '../organisms/Header'
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
 import Hidden from '@material-ui/core/Hidden';
+import Link from 'next/link'
 
 const styles = theme => ({
   foot: {
@@ -62,11 +63,20 @@ const styles = theme => ({
     color: theme.palette.secondary.main,
     backgroundColor: theme.palette.primary.important,
   },
+  voirEntreprise: {
+    textTransform: 'inherit',
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    padding: theme.spacing(1.2, 2),
+    color: '#BBBCBD',
+    backgroundColor: '#F3F3F4',
+
+  },
 })
 
 function LayoutOffre(props) {
 
-  const { classes, offreId, isProvided } = props;
+  const { classes, offreId, offre, isProvided } = props;
   const contentClass = (!isProvided) ? classes.contentDefault : classes.contentProvided
 
   return (
@@ -91,6 +101,14 @@ function LayoutOffre(props) {
           <div id="F" className={classes.foot}>
             {/* <div className={classes.inner}>
           <div className={classes.grow} /> */}
+            <Link href={`/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`} >
+              <Button
+                  variant="contained"
+                  className={classes.voirEntreprise + ' cypButtonApply'}
+              >Voir l'entreprise</Button>
+                                    
+             </Link>
+            
             <Button
               variant="contained"
               className={classes.button + ' cypButtonApply'}

nextjs/components/templates/loader.js

@@ -20,7 +20,7 @@ class Loader extends React.Component {
   render() {
     const { classes } = this.props;
     return (
-      <div className={classes.loader + ' ' + 'alert alert-info'}><CircularProgress color="primary" />Chargement... <br/>Le temps de chargement peut varier de quelques secondes à <b>plusieurs minutes</b> en fonction de la qualité de votre connexion internet.<br/></div>
+      <div className={classes.loader + ' ' + 'alert alert-info'}><CircularProgress color="primary" />Chargement... </div>
     )
 
   }

nextjs/components/templates/loaderVideo.js

@@ -0,0 +1,29 @@
+import React, { Fragment } from 'react'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import { withStyles } from '@material-ui/core/styles'
+const styles = theme => ({
+  loader: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    textAlign: 'center',
+    justifyContent: 'center',
+    fontFamily: 'Dosis',
+    fontWeight: '500',
+    fontSize: '1em',
+    padding: theme.spacing(6,0),
+    color: theme.palette.primary.main,
+  },
+})
+
+class LoaderVideo extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className={classes.loader + ' ' + 'alert alert-info'}><CircularProgress color="primary" />Chargement... <br/>Le temps de chargement peut varier de quelques secondes à <b>plusieurs minutes</b> en fonction de la qualité de votre connexion internet.<br/></div>
+    )
+
+  }
+}
+
+export default withStyles(styles)(LoaderVideo)

nextjs/next.config.js

@@ -40,10 +40,21 @@ module.exports = withPlugins(
     }],
     [{
       publicRuntimeConfig: {
-        symphonyUrl: 'https://pp.talentstube.com',
+        // DEV
+        // symphonyUrl: 'http://localhost/app_dev.php/',
+        // blogUrl: 'https://blog.talentstube.com',
+        // frontServerUrl: 'http://localhost:3000',
+        // cvThequeUrl: 'https://recruteur.talentstube.com',
+        // PROD
+        // symphonyUrl: 'https://recruteur.talentstube.com/',
+        // blogUrl: 'https://blog.talentstube.com',
+        // frontServerUrl: 'https://www.talentstube.com/',
+        // cvThequeUrl: 'https://recruteur.talentstube.com',
+        // PRE PROD
+        symphonyUrl: 'https://pp.talentstube.com/',
         blogUrl: 'https://blog.talentstube.com',
-        frontServerUrl: 'https://pp.app.talentstube.com',
-        cvThequeUrl: 'https://cvtheque.talentstube.com/',
+        frontServerUrl: 'https://pp.app.talentstube.com/',
+        cvThequeUrl: 'https://recruteur.talentstube.com',
         adListDefaultUrl: '/statique/images/default/default_picture_company.svg',
         cachedMediaUrl: '/media/cache/profile_thumb/uploads/img/',
         postedContentUrl: '/uploads/img/',
@@ -52,6 +63,7 @@ module.exports = withPlugins(
           "siteKey": "6LdyqLwUAAAAADKI5uC7d5W9VqVgzd8VEmMU2Yi-"
         },
         applicationServerPublicKey: 'BNFyiyPiLH97Dgc0m1vXluUNaCN6y3Hkgd4YcqS2lVkP8my3tq2D5gM5g7cY6R4VxC7GljSzkLRu+k+oO+2TtjU='
+        //applicationServerPublicKey: 'BG2lV673DvB67dzEwX9GKfds3sXaEdtZo2oWO1cO2xUdTJAFZ_rV_UrP1nHQz-F8LJNO9HxG0kmQRIb54JL1ZCA'
       }
     }]
   ],

nextjs/package.json

@@ -11,6 +11,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@ostai/next-css": "^1.0.2",
+    "autosuggest-highlight": "^3.1.1",
     "axios": "^0.18.0",
     "connect-mongo": "^2.0.1",
     "cross-env": "^5.2.0",
@@ -47,6 +48,7 @@
     "prop-types": "latest",
     "react": "^16.9.0",
     "react-ad-block-detect": "^1.0.1",
+    "react-autosuggest": "^10.0.2",
     "react-dom": "^16.9.0",
     "react-ga": "^2.5.7",
     "react-google-recaptcha": "^2.0.1",

nextjs/pages/ConfirmAccount.js

@@ -84,10 +84,20 @@ class ConfirmAccount extends Component {
                                 e-mail validé
                             </Typography>
                             <Typography gutterBottom align="left" className={classes.text}>
-                                Votre email a bien été validé.
+                                Votre email a bien été validé. 
+                                
                             </Typography>
                             <Typography gutterBottom align="left" className={classes.text}>
                                 Vous pouvez maintenant vous connecter.
+                                <Button
+                                    variant="contained"
+                                    className={classes.button}
+                                    classes={{ root: classes.rootButton }}
+                                    onClick={() => Router.push('/Login')}
+                                >
+                                    Connexion
+                                </Button>
+
                             </Typography>
                             <section className={classes.bottomContainer}>
                                 <Button

nextjs/pages/Entreprise.js

@@ -1,5 +1,5 @@
 
-import React, { Fragment } from 'react'
+import React, { Fragment,lazy, Suspense } from 'react'
 import Router from 'next/router'
 import { connect } from "react-redux"
 import PropTypes from 'prop-types'
@@ -16,7 +16,8 @@ import { fetchCompanyRequest, clearCompany, countCompanyViewRequest } from '../a
 import IconText from '../components/atoms/IconText'
 import IconTextInline from '../components/atoms/IconTextInline'
 import SimpleCollapse from '../components/atoms/SimpleCollapse'
-import VideoVimeo from '../components/atoms/VideoVimeo'
+const VideoVimeo = lazy(() => import('../components/atoms/VideoVimeo'));
+//import VideoVimeo from '../components/atoms/VideoVimeo'
 import SocialShare from '../components/organisms/SocialShare'
 import Loader from '../components/templates/loader'
 import _ from "lodash"
@@ -25,7 +26,7 @@ import withWidth from '@material-ui/core/withWidth'
 import Hidden from '@material-ui/core/Hidden';
 import NoResult from '../components/atoms/NoResult';
 import OgHead from '../components/atoms/OgHead';
-
+const renderLoader = () => <p>Chargement</p>;
 const styles = theme => ({
     companyContainer: {
         [theme.breakpoints.up('md')]: {
@@ -278,13 +279,25 @@ const styles = theme => ({
     },
     button: {
         textTransform: 'inherit',
-        marginLeft: theme.spacing(4),
-        marginRight: theme.spacing(4),
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
         padding: theme.spacing(1.2, 2),
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.important,
         alignSelf: 'center',
     },
+    voirOffre: {
+        textTransform: 'inherit',
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        padding: theme.spacing(1.2, 2),
+        color: '#BBBCBD',
+        backgroundColor: '#F3F3F4',
+
+    },
+    buttonContainer: {
+        alignItems: 'right',
+    },
     chip: {
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.main,
@@ -415,17 +428,28 @@ class Entreprise extends React.Component {
                                             :
                                             (<Chip label={nbOffre} className={classes.chip + ' ' + classes.chipHeader} />)
                                         }
+                                        
                                         {/* ville */}
                                     </div>
                                 </div>
+                                <div className={classes.buttonContainer}>
+                                
+                                <Link href="#discover"  >
+                                            <Button
+                                                variant="contained"
+                                                className={classes.voirOffre + ' cypButtonApply'}
+                                            >Voir les offres</Button>
+                                            
+                                </Link>
                                 <Button
                                     variant="contained"
                                     className={classes.button}
                                     onClick={() => Router.push(`/Reponse?companyId=${company.id}`)}
                                 >Candidature spontanée</Button>
+                                </div>
                             </section>
                         </Hidden>
-                        {company.presentation_video && <VideoVimeo videoId={Ar.last(_.split(company.presentation_video.cdn_url, '/'))} autoplay='1' />}
+                        {company.presentation_video &&  <Suspense fallback={renderLoader()}><VideoVimeo videoId={Ar.last(_.split(company.presentation_video.cdn_url, '/'))} autoplay='1' /></Suspense>}
                         <div className={classes.container}>
                             <Hidden mdUp>
                                 <section className={classes.headerContainer}>
@@ -504,6 +528,7 @@ class Entreprise extends React.Component {
                                         className={classes.button}
                                         onClick={() => Router.push(`/Reponse?companyId=${company.id}`)}
                                     >Candidature spontanée</Button>
+                                    
                                     <Typography className={classes.contentCondition}>
                                         ou
                                     </Typography>
@@ -544,7 +569,7 @@ class Entreprise extends React.Component {
                                             Découvrir le <span className={classes.primary}>territoire</span>
                                         </Typography>
                                         <section className={classes.discoverTerritoryContentContainer}>
-                                            <VideoVimeo classesOverride={classes.videoVimeo} videoId={territoryVideoId} autoplay='0' />
+                                            <Suspense fallback={renderLoader()}><VideoVimeo classesOverride={classes.videoVimeo} videoId={territoryVideoId} autoplay='0' /></Suspense>
                                             <Typography className={classes.territoryTitle}>
                                                 {(company.territories) ? company.territories[0].territory.brand_name : ''}
                                             </Typography>

nextjs/pages/Entreprises.js

@@ -112,6 +112,7 @@ class Entreprises extends React.Component {
             currentPage={this.props.currentPage}
             recordCount={this.props.recordCount}
             loading={this.props.loading}
+            type="entreprises"
             limit={12}
             placeholder={"Rechercher une entreprise"}
           />

nextjs/pages/Offre.js

@@ -1,14 +1,15 @@
 
-import React from 'react';
+import React, { Fragment,lazy, Suspense } from 'react'
 import { connect } from "react-redux";
 import PropTypes from 'prop-types';
 import getConfig from 'next/config'
 import { withStyles } from '@material-ui/core/styles';
 import LayoutOffre from "../components/templates/LayoutOffre";
-import OffreDetail   from "../components/organisms/OffreDetail";
+const OffreDetail = lazy(() => import('../components/organisms/OffreDetail'));
+//import OffreDetail   from "../components/organisms/OffreDetail";
 import { fetchJobRequest, clearAd, countAdViewRequest } from '../actions/ads'
 import _ from "lodash/string";
-
+const renderLoader = () => <p>Chargement</p>;
 const styles = theme => ({
 
 });
@@ -31,8 +32,8 @@ class Offre extends React.Component {
         const { classes, offre } = this.props;
 
         return (
-            <LayoutOffre backLink="/Offres" offreId={offre.id} isProvided={offre.is_promoted}>
-                <OffreDetail offre={offre}/>
+            <LayoutOffre backLink="/Offres" offreId={offre.id} offre={offre} isProvided={offre.is_promoted}>
+                <Suspense fallback={renderLoader()}><OffreDetail offre={offre}/></Suspense>
             </LayoutOffre>
         );
     }

nextjs/pages/Offres.js

@@ -80,9 +80,21 @@ class Offres extends React.Component {
 
   constructor(props) {
     super(props);
+    
+  }
+  voirOffre(){
+    this.props.togglePromotedFilterRequest()
+    sessionStorage.setItem('offres_currentPage',1);
+  }
+
+  static getInitialProps({ query }) {
+    const { init } = query
+    //this.props.promotedFilter =init
+    return { init };
   }
 
   render() {
+    
     const { classes } = this.props;
     const countColor = this.props.promotedFilter ? classes.provided : classes.primary;
     const btnClass = this.props.promotedFilter ? classes.buttonDefault : classes.buttonProvided;
@@ -113,12 +125,14 @@ class Offres extends React.Component {
             recordCount={this.props.recordCount}
             promoted={this.props.promotedFilter}
             loading={this.props.loading}
+            type="offres"
             placeholder={"Rechercher un job"}
           />
           <Button
           name="Rechercher un job"
             variant="outlined"
-            onClick={() => this.props.togglePromotedFilterRequest()}
+            onClick={() => this.voirOffre()
+            }
             className={classes.button + ' ' + btnClass}>
             {this.props.promotedFilter? 'Voir les offres en cours' : 'Voir les offres pourvues'}
           </Button>

nextjs/pages/Reponse.js

@@ -9,7 +9,7 @@ import { fetchJobRequest } from '../actions/ads'
 import { fetchCompanyRequest } from '../actions/companies'
 import { fetchCurrentUserRequest } from '../actions/user'
 import { uploadMedia } from '../actions/media'
-import Loader from './../components/templates/loader'
+import LoaderVideo from './../components/templates/loaderVideo'
 import Answer from '../components/organisms/Answer'
 import LayoutBack from '../components/templates/LayoutBack'
 import { withStyles } from '@material-ui/core/styles'
@@ -286,7 +286,7 @@ class Reponse extends React.Component {
         </Head>
         {/* https://codesandbox.io/s/ii0us */}
        { loading ? 
-        <Loader /> :
+        <LoaderVideo /> :
        <Fragment>
         
         <section className={classes.headerContainer}>
@@ -407,7 +407,8 @@ class Reponse extends React.Component {
           (
             <Answer mediaId={!!this.props.media && this.props.media.id}
              companyId={!!offre.company ? offre.company.id : !!company.brand_name ? company.id : null}
-             adId={offre.id}>
+             adId={offre.id}
+             >
              </Answer>
           )}
            <Snack variant="error" message={!!!_.isEmpty(this.state.errors) && this.state.errors.message }

nextjs/pages/VerifyEmail.js

@@ -65,15 +65,18 @@ class VerifyEmail extends Component {
                 <div className={classes.container}>
                     <Typography gutterBottom align="center" className={classes.title}>
                         Consultez vos e-mails
-                </Typography>
+                    </Typography>
                     <Typography gutterBottom align="left" className={classes.text}>
                         Un e-mail a été envoyé à l'adresse <span className={classes.email}>{email}</span>
                     </Typography>
                     <Typography gutterBottom align="left" className={classes.text}>
                         Cliquez sur le lien dans l'e-mail que nous vous avons envoyé pour activer votre compte.
-                </Typography>
+                    </Typography>
+                    <Typography gutterBottom align="left" className={classes.text}>
+                    N'oubliez pas de consulter vos spams, si vous ne trouvez pas le lien d'activation dans votre boite de réception.
+                    </Typography>
                     <section className={classes.bottomContainer}>
-                        <Typography gutterBottom align="center" className={classes.bottomText}>
+                        {/* <Typography gutterBottom align="center" className={classes.bottomText}>
                             Cliquez sur suivant pour continuer votre candidature
                         </Typography>
                         <Button
@@ -83,7 +86,7 @@ class VerifyEmail extends Component {
                             onClick={() => Router.push('/Login')}
                         >
                             Suivant
-                </Button>
+                        </Button> */}
                     </section>
                 </div>
             </Layout>

nextjs/pages/_document.js

@@ -32,7 +32,7 @@ class MyDocument extends Document {
           {/* PWA primary color */}
           <meta name="theme-color" content={theme.palette.primary.main} />
 
-          <link href="https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
+          <link href="https://fonts.googleapis.com/css?family=Dosis:600|Roboto:100,300,400,500,700,900&display=swap" rel="stylesheet">
           </link>
 
           <script type="text/javascript" src="/static/js/pwaInstaller.js" ></script>

nextjs/pages/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
-import React, {Fragment} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Layout from "../components/templates/Layout"
@@ -8,12 +8,14 @@ import { Typography } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
 import Router from 'next/router'
 import { connect } from 'react-redux'
+//const fetchEmphasisJobsRequest = lazy(() => import('../actions/ads'));
 import { fetchEmphasisJobsRequest } from "../actions/ads";
+//const fetchEmphasisCompaniesRequest = lazy(() => import('../actions/companies'));
 import { fetchEmphasisCompaniesRequest } from "../actions/companies";
 import Loader from './../components/templates/loader'
 import { isEmpty } from "lodash"
 import NoResult from './../components/atoms/NoResult';
-import Head from 'next/head'
+// import Head from 'next/head'
 import dynamic from 'next/dynamic'
 import OgHead from '../components/atoms/OgHead';
 import getConfig from 'next/config'
@@ -163,7 +165,7 @@ class Index extends React.Component {
     const imgUrl =  DefaultUrl
     return (
       <Layout>
-        <OgHead seo_title="Talents Tube - Plateforme de recrutement en vidéo"
+        <OgHead seo_title="Espace candidat - Plateforme de recrutement en vidéo | Talents Tube"
                     seo_description="Talents Tube est la première plateforme réservée aux offres d'emploi vidéo, vidéo marque employeur et aux CV vidéos. Découvrez une nouvelle méthode de recrutement."
                     seo_url={socialShareUrl}
                     image={imgUrl}

nextjs/pages/test2.js

@@ -0,0 +1,164 @@
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import parse from 'autosuggest-highlight/parse';
+import throttle from 'lodash/throttle';
+
+function loadScript(src, position, id) {
+  if (!position) {
+    return;
+  }
+
+  const script = document.createElement('script');
+  script.setAttribute('async', '');
+  script.setAttribute('id', id);
+  script.src = src;
+  position.appendChild(script);
+}
+
+const autocompleteService = { current: null };
+
+const useStyles = makeStyles((theme) => ({
+  icon: {
+    color: theme.palette.text.secondary,
+    marginRight: theme.spacing(2),
+  },
+}));
+
+export default function GoogleMaps() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(null);
+  const [inputValue, setInputValue] = React.useState('');
+  const [options, setOptions] = React.useState([]);
+  const loaded = React.useRef(false);
+
+  if (typeof window !== 'undefined' && !loaded.current) {
+    if (!document.querySelector('#google-maps')) {
+      loadScript(
+        'https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places',
+        document.querySelector('head'),
+        'google-maps',
+      );
+    }
+
+    loaded.current = true;
+  }
+
+  const fetch = React.useMemo(
+    () =>
+      throttle((request, callback) => {
+        autocompleteService.current.getPlacePredictions(request, callback);
+        
+      }, 200),
+    [],
+  );
+
+  React.useEffect(() => {
+    let active = true;
+
+    if (!autocompleteService.current && window.google) {
+      autocompleteService.current = new window.google.maps.places.AutocompleteService();
+      // console.log('autocompleteService.current');
+      // console.log(autocompleteService.current);
+    }
+    if (!autocompleteService.current) {
+      return undefined;
+    }
+
+    if (inputValue === '') {
+      setOptions(value ? [value] : []);
+      return undefined;
+    }
+
+    fetch({ input: inputValue }, (results) => {
+      if (active) {
+        let newOptions = [];
+
+        if (value) {
+          newOptions = [value];
+        }
+
+        if (results) {
+          newOptions = [...newOptions, ...results];
+        }
+
+        setOptions(newOptions);
+      }
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [value, inputValue, fetch]);
+
+  return (
+    <Autocomplete
+      id="google-map-demo"
+      style={{ width: 300 }}
+      getOptionLabel={(option) => (typeof option === 'string' ? option : option.description)}
+      filterOptions={(x) => x}
+      options={options}
+      autoComplete
+      includeInputInList
+      filterSelectedOptions
+      value={value}
+      onChange={(event, newValue) => {
+        setOptions(newValue ? [newValue, ...options] : options);
+        setValue(newValue);
+        console.log("newValue");
+        // console.log(newValue);
+        console.log(newValue.description)
+         let geocoder = new google.maps.Geocoder();
+         let addresses = {};
+        geocoder.geocode({ 'address': newValue.description   }, function(results, status) {
+          results.map((index, value) => [
+            console.log(index.geometry.location.lat()+" "+index.geometry.location.lng())
+          ]);
+          
+          
+        });
+        
+      }}
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+        console.log('newInputValue');
+        console.log(newInputValue);
+      }}
+      renderInput={(params) => (
+        <TextField {...params} label="Tapez une adresse" variant="outlined" fullWidth />
+      )}
+      renderOption={(option) => {
+        // console.log('option');
+        // console.log(option);
+        const matches = option.structured_formatting.main_text_matched_substrings;
+        const parts = parse(
+          option.structured_formatting.main_text,
+          matches.map((match) => [match.offset, match.offset + match.length]),
+        );
+
+        return (
+          <Grid container alignItems="center">
+            <Grid item>
+              <LocationOnIcon className={classes.icon} />
+            </Grid>
+            <Grid item xs>
+              {parts.map((part, index) => (
+                <span key={index} style={{ fontWeight: part.highlight ? 700 : 400 }}>
+                  {part.text}
+                </span>
+              ))}
+
+              <Typography variant="body2" color="textSecondary">
+                {option.structured_formatting.secondary_text}
+              </Typography>
+            </Grid>
+          </Grid>
+        );
+      }}
+    />
+  );
+}

nextjs/pages/test3.js

@@ -0,0 +1,92 @@
+// server.autosuggest.js
+import React from 'react';
+import Autosuggest from 'react-autosuggest';
+// import './autosuggest.css';
+
+class ServerAutoSuggest extends React.Component {
+    constructor() {
+        super();
+
+        //Define state for value and suggestion collection
+        this.state = {
+            value: '',
+            suggestions: []
+        };
+    }
+
+    // Filter logic
+    getSuggestions = async (value) => {
+        const inputValue = value.trim().toLowerCase();
+        let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
+        let data = await response.json()
+        return data;
+    };
+
+    // Trigger suggestions
+    getSuggestionValue = suggestion => suggestion.Title;
+
+    // Render Each Option
+    renderSuggestion = suggestion => (
+        <span className="sugg-option">
+            <span className="icon-wrap"><img src={suggestion.Poster} /></span>
+            <span className="name">
+                {suggestion.Title}
+            </span>
+        </span>
+    );
+
+    // OnChange event handler
+    onChange = (event, { newValue }) => {
+        this.setState({
+            value: newValue
+        });
+    };
+
+    // Suggestion rerender when user types
+    onSuggestionsFetchRequested = ({ value }) => {
+        this.getSuggestions(value)
+            .then(data => {
+                if (data.Error) {
+                    this.setState({
+                        suggestions: []
+                    });
+                } else {
+                    this.setState({
+                        suggestions: data.Search
+                    });
+                }
+            })
+    };
+
+    // Triggered on clear
+    onSuggestionsClearRequested = () => {
+        this.setState({
+            suggestions: []
+        });
+    };
+
+    render() {
+        const { value, suggestions } = this.state;
+
+        // Option props
+        const inputProps = {
+            placeholder: 'Type movie name',
+            value,
+            onChange: this.onChange
+        };
+
+        // Adding AutoSuggest component
+        return (
+            <Autosuggest
+                suggestions={suggestions}
+                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                getSuggestionValue={this.getSuggestionValue}
+                renderSuggestion={this.renderSuggestion}
+                inputProps={inputProps}
+            />
+        );
+    }
+}
+
+export default ServerAutoSuggest;

nextjs/pages/test4.js

@@ -0,0 +1,342 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React, {Fragment} from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Layout from "../components/templates/Layout"
+import { Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Router from 'next/router'
+import { connect } from 'react-redux'
+import Loader from './../components/templates/loader'
+import { isEmpty } from "lodash"
+import NoResult from './../components/atoms/NoResult';
+import Head from 'next/head'
+import dynamic from 'next/dynamic'
+import OgHead from '../components/atoms/OgHead';
+import getConfig from 'next/config'
+
+import Autosuggest from 'react-autosuggest';
+
+// const VideoSlider = dynamic(() => import('../components/organisms/ShortVideoHooker'), {
+//   ssr: false
+// });
+const HorizontalScroller = dynamic(() => import('../components/organisms/HorizontalScroller'), {
+  ssr: false
+});
+
+const TileCompany = dynamic(() => import('../components/organisms/TileCompany'), {
+  ssr: false
+});
+
+const TileOffre = dynamic(() => import('../components/organisms/TileOffre'), {
+  ssr: false
+});
+
+const Footer = dynamic(() => import('../components/organisms/Footer'), {
+  ssr: false
+});
+const { publicRuntimeConfig } = getConfig();
+const styles = theme => ({
+  root: {
+    position: 'relative',
+    textAlign: 'center',
+    paddingTop: theme.spacing(20),
+    justifyContent: 'center',
+  },
+  primary: {
+    color: theme.palette.primary.main,
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  scrollerSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBottom: theme.spacing(6),
+    '&>div': {
+      paddingBottom: theme.spacing(3),
+    },
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(2, 10),
+      paddingBottom: theme.spacing(9),
+    },
+    [theme.breakpoints.up('lg')]: {
+      padding: theme.spacing(2, 30),
+      paddingBottom: theme.spacing(9),
+    },
+    [theme.breakpoints.up('xl')]: {
+      padding: theme.spacing(2, 55),
+    },
+  },
+  scrollerSectionOffer: {
+    backgroundColor: theme.palette.secondary.main,
+  },
+  scrollerSectionCompany: {
+    backgroundColor: theme.palette.background.grey,
+  },
+  card: {
+    margin: theme.spacing(1),
+    width: '96%',
+    height: '100%',
+    maxWidth: '640px',
+    maxheight: '360px',
+
+  },
+  HorizontalScroller: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(4),
+  },
+  paper: {
+    margin: theme.spacing(1),
+    width: '96%',
+    height: '100%',
+  },
+  media: {
+  },
+  svg: {
+    width: 100,
+    height: 100,
+  },
+  polygon: {
+    fill: theme.palette.common.white,
+    stroke: theme.palette.divider,
+    strokeWidth: 4,
+  },
+  img: {
+    maxWidth: '100%',
+
+  },
+  titleContainer: {
+    marginTop: theme.spacing(4),
+    marginBottom: theme.spacing(3),
+  },
+  beforeTitle: {
+    fontSize: '0.8em',
+    fontWeight: '300',
+    textAlign: 'center',
+    textTransform: 'uppercase',
+    color: theme.palette.secondary.text,
+  },
+  title: {
+    fontFamily: 'Dosis',
+    fontSize: '1.5em',
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  white: {
+    color: theme.palette.common.white
+  },
+  button: {
+    textTransform: 'inherit',
+    margin: theme.spacing(0, 8),
+    padding: theme.spacing(1.2, 2),
+    [theme.breakpoints.up('sm')]: {
+      margin: 'auto',
+    },
+  },
+});
+
+class Index extends React.Component {
+  constructor() {
+    super();
+
+    //Define state for value and suggestion collection
+    this.state = {
+        value: '',
+        suggestions: [],
+        valueMetier: '',
+        suggestionsMetier: [],
+    };
+  }
+
+  componentDidMount() {
+    localStorage.setItem("loginRedirect", "/")
+    
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      
+    })
+  }
+
+  // Filter logic
+  getSuggestions = async (value) => {
+    const inputValue = value.trim().toLowerCase();
+    let response = await fetch(publicRuntimeConfig.symphonyUrl+"/api/getCompetences?q=" + inputValue );
+    // let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
+    let data = await response.json()
+    return data;
+  };
+
+  // Trigger suggestions
+  getSuggestionValue = suggestion => suggestion.libelle;
+  // Render Each Option
+  renderSuggestion = suggestion => (
+      <span className="sugg-option">
+          
+          <span className="name">
+              {suggestion.libelle} ({suggestion.code})
+          </span>
+      </span>
+  );
+
+  // OnChange event handler
+  onChange = (event, { newValue }) => {
+      this.setState({
+          value: newValue
+      });
+  };
+
+  // Suggestion rerender when user types
+  onSuggestionsFetchRequested = ({ value }) => {
+      this.getSuggestions(value)
+          .then(data => {
+              if (data.Error) {
+                  this.setState({
+                      suggestions: []
+                  });
+              } else {
+                  this.setState({
+                      suggestions: data
+                  });
+              }
+          })
+  };
+
+  // Triggered on clear
+  onSuggestionsClearRequested = () => {
+      this.setState({
+          suggestions: []
+      });
+  };
+
+
+  // METIER
+  // Filter logic
+  getSuggestionsMetier = async (valueMetier) => {
+    const inputValue = valueMetier.trim().toLowerCase();
+    let response = await fetch(publicRuntimeConfig.symphonyUrl+"api/getAppelationsLibelle?q=" + inputValue );
+    // let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
+    let data = await response.json()
+    return data;
+  };
+
+  // Trigger suggestions
+  getSuggestionMetierValue = suggestion => suggestion.libelle;
+  // Render Each Option
+  renderSuggestionMetier = suggestion => (
+      <span className="sugg-option">
+          
+          <span className="name">
+              {suggestion.libelle} ({suggestion.code})
+          </span>
+      </span>
+  );
+
+  // OnChange event handler
+  onChangeMetier = (event, { newValue }) => {
+      this.setState({
+          valueMetier: newValue
+      });
+  };
+
+  // Suggestion rerender when user types
+  onSuggestionsMetierFetchRequested = ({ value }) => {
+      this.getSuggestionsMetier(value)
+          .then(data => {
+              if (data.Error) {
+                  this.setState({
+                      suggestionsMetier: []
+                  });
+              } else {
+                  this.setState({
+                      suggestionsMetier: data
+                  });
+              }
+          })
+  };
+
+  // Triggered on clear
+  onSuggestionsMetierClearRequested = () => {
+      this.setState({
+          suggestionsMetier: []
+      });
+  };
+
+
+
+  render() {
+    const { classes } = this.props;
+    const { value, suggestions, valueMetier, suggestionsMetier } = this.state;
+    // Option props
+    const inputProps = {
+      placeholder: 'Saisir une compétence',
+      value,
+      onChange: this.onChange
+    };
+
+    const inputPropsMetier = {
+      placeholder: 'Saisir un métier',
+      value:valueMetier,
+      onChange: this.onChangeMetier
+    };
+    const socialShareUrl = typeof window !== 'undefined' ? window.location
+            : publicRuntimeConfig.frontServerUrl ;
+    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
+    const imgUrl =  DefaultUrl
+    return (
+      <Layout>
+        <OgHead seo_title="Talents Tube - Plateforme de recrutement en vidéo"
+                    seo_description="Talents Tube est la première plateforme réservée aux offres d'emploi vidéo, vidéo marque employeur et aux CV vidéos. Découvrez une nouvelle méthode de recrutement."
+                    seo_url={socialShareUrl}
+                    image={imgUrl}
+                    seo_key="Recrutement, video"
+
+        ></OgHead>
+        <div className={classes.container}>
+
+          {/* <VideoSlider /> */}
+
+          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionOffer}>
+            
+
+            
+            <Autosuggest
+                suggestions={suggestions}
+                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                getSuggestionValue={this.getSuggestionValue}
+                renderSuggestion={this.renderSuggestion}
+                inputProps={inputProps}
+            />
+            <Autosuggest
+                suggestions={suggestionsMetier}
+                onSuggestionsFetchRequested={this.onSuggestionsMetierFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsMetierClearRequested}
+                getSuggestionValue={this.getSuggestionMetierValue}
+                renderSuggestion={this.renderSuggestionMetier}
+                inputProps={inputPropsMetier}
+            />
+          </section>
+
+          
+          <Footer />
+        </div>
+      </Layout>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    
+  };
+}
+
+Index.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default (connect(mapStateToProps, { })(withStyles(styles)(Index)));