Bug 239

nextjs/components/atoms/OgHead.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Head from 'next/head'
+const urlEnv = process.env.NODE_ENV;
 
 const OgHead = props => {
     return (
@@ -27,7 +28,11 @@ const OgHead = props => {
             <meta name="twitter:title" content={props.seo_title}/>
             <meta name="twitter:description" content={props.seo_description}/>
             <meta name="twitter:image" content={props.image}/>
-            <meta name="robots" content="noindex, nofollow"></meta>
+            
+            if (urlEnv=="development") {
+                <meta name="robots" content="noindex, nofollow"></meta>
+            }
+            
             {/* <meta httpEquiv='cache-control' content='no-store,no-cache'></meta>
             <meta httpEquiv='expires' content='0'></meta>
             <meta httpEquiv='pragma' content='no-cache'></meta> */}

nextjs/components/organisms/AccountEtape1.js

@@ -12,6 +12,13 @@ import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from
 import {
     Button,
 } from '@material-ui/core';
+import Link from 'next/link'
+//US475
+import GooglePlaceAutocomplete from 'mui-places-autocomplete'
+import { geocodeByAddress } from 'react-places-autocomplete'
+//US487
+import Autosuggest from 'react-autosuggest';
+
 
 const styles = theme => ({
     container: {
@@ -56,6 +63,24 @@ const styles = theme => ({
         },
         padding: '5px',
     },
+    labelGeoloc:{
+        paddingLeft:"14px",
+        fontSize: "0.8rem",
+        color:"#1E2327",
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontWeight: "400",
+        lineHeight: "1",
+        letterSpacing: "0.00938em",    }
+    ,conteneurGoogle:{
+        border:"1px solid rgb(200, 200, 200)",
+        borderRadius :"5px",
+        padding:"5px 0px",
+        
+
+    },
+    conteneurGoogleComposant:{
+        paddingLeft:"14px"
+    }
 });
 
 const { publicRuntimeConfig } = getConfig();
@@ -71,6 +96,9 @@ class AccountEtape1 extends Component {
         this.handleClose = this.handleClose.bind(this);
         this.onBlur = this.onBlur.bind(this)
         this.onSubmit = this.onSubmit.bind(this);
+        this.choisirMetier = this.choisirMetier.bind(this);
+        this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
+        this.onChange = this.onChange.bind(this);
     }
 
     state = {
@@ -90,7 +118,24 @@ class AccountEtape1 extends Component {
         website: '',
         mediaId: null,
         companyId: null,
-        
+        geoloc: '',
+        value:'',
+        route: '',
+        street_number: '',
+        locality: '',
+        administrative_area_level_2: '',
+        administrative_area_level_1: '',
+        country: '',
+        postal_code: '',
+        formatted_address:"",
+        lat:"",
+        lng:"",
+        appellationId:"",
+        appellationLibelle:"",
+        value: '',
+        suggestions: [],
+        valueMetier: '',
+        suggestionsMetier: [],
     };
 
     handleChange = (e) => {
@@ -110,12 +155,7 @@ class AccountEtape1 extends Component {
       //setOpen(false);
     };
 
-    onBlur(e) {
-        console.log("blur")
-        this.setState({ [e.target.name]: e.target.value });
-        
-        this.soumettre(e.target.name, "unitaire");
-      }     
+    
     
 
     UNSAFE_componentWillReceiveProps(nextProps) {
@@ -124,21 +164,22 @@ class AccountEtape1 extends Component {
             lastname: nextProps.user.lastname,
             phone: nextProps.user.phone,
             email: nextProps.user.email,
-            currentJob: nextProps.user.currentJob,
-            address1 : nextProps.user.address1,
-            address2 : nextProps.user.address2,
-            zipCode : nextProps.user.zipCode,
-            city : nextProps.user.city,
-            country : nextProps.user.country,
             linkedin: nextProps.user.linkedin,
             twitter: nextProps.user.twitter,
             website: nextProps.user.website,
             companyId: nextProps.companyId,
+            value: nextProps.user.geoloc && nextProps.user.geoloc[0].formatted_address ? nextProps.user.geoloc[0].formatted_address :"",
+            valueMetier: nextProps.user.appellationLibelle  ? nextProps.user.appellationLibelle :"",
+            geoloc: nextProps.user.geoloc && nextProps.user.geoloc[0].formatted_address ? nextProps.user.geoloc[0].formatted_address :"",
+            formatted_address:nextProps.user.geoloc && nextProps.user.geoloc[0].formatted_address ? nextProps.user.geoloc[0].formatted_address :"",
+            appellationLibelle:nextProps.user.appellationLibelle  ? nextProps.user.appellationLibelle :"",
             errors: !!!nextProps.errors ? { errors: { message: "" } } : nextProps.errors,
         })
     }
 
     componentDidMount() {
+        console.log("USER ................................");
+        console.log(this.props.user);
         this.setState({
             firstname: this.props.user.firstname,
             lastname: this.props.user.lastname,
@@ -153,10 +194,144 @@ class AccountEtape1 extends Component {
             linkedin: this.props.user.linkedin,
             twitter: this.props.user.twitter,
             website: this.props.user.website,
+            value: this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
+            valueMetier: this.props.user.appellationLibelle  ? this.props.user.appellationLibelle :"",
+            geoloc: this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
+            route: "",
+            street_number: "",
+            locality: "",
+            administrative_area_level_2: "",
+            administrative_area_level_1: "",
+            country: "",
+            postal_code: "",
+            formatted_address:this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
+            lat:"",
+            lng:"",
+            appellationId:"",
+            appellationLibelle:this.props.user.appellationLibelle  ? this.props.user.appellationLibelle :"",
         })
         
     }
 
+    
+    
+
+    remplirLocation = (typeDonnee, donnee) =>{
+        console.log("DEBUT remplirLocation");
+        console.log(typeDonnee);
+        console.log(donnee);
+        if(typeDonnee=='"street_number"') {
+            this.setState({ street_number: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"route"') {
+            this.setState({ route: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"locality"') {
+            this.setState({ locality: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"administrative_area_level_2"') {
+            this.setState({ administrative_area_level_2: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"administrative_area_level_1"') {
+            this.setState({ administrative_area_level_1: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"country"') {
+            this.setState({ country: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"postal_code"') {
+            this.setState({ postal_code: donnee.replace('"', '') }) 
+        }
+        console.log("FIN remplirLocation");  
+        
+    }
+
+    onSuggestionSelected = (suggestion) => {
+        
+        console.log('Selected suggestion:', suggestion)
+        let address = suggestion.description;
+        var words = address.split(',');
+        if(words.length<3){
+            address = "mairie de "+address;
+        }
+        this.setState({ geoloc: address})
+        this.setState({
+            value: address
+        });
+
+        geocodeByAddress(address)
+            .then(address => {
+                console.log("ADRESSE");
+                console.log(address);
+                if(address[0].address_components[0]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[0].types[0]), JSON.stringify(address[0].address_components[0].long_name))
+                }
+                if(address[0].address_components[1]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[1].types[0]), JSON.stringify(address[0].address_components[1].long_name))
+                }
+                if(address[0].address_components[2]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[2].types[0]), JSON.stringify(address[0].address_components[2].long_name))
+                }
+                if(address[0].address_components[3]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[3].types[0]), JSON.stringify(address[0].address_components[3].long_name))
+                }
+                if(address[0].address_components[4]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[4].types[0]), JSON.stringify(address[0].address_components[4].long_name))
+                }
+                if(address[0].address_components[5]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[5].types[0]), JSON.stringify(address[0].address_components[5].long_name))
+                }
+                if(address[0].address_components[6]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[6].types[0]), JSON.stringify(address[0].address_components[6].long_name))
+                }
+                if(address[0].geometry){
+
+                    console.log(address[0].geometry.location_type);
+                    let gps =JSON.stringify(address[0].geometry.location);
+                    const obj = JSON.parse(gps);  
+                    this.setState({ formatted_address: JSON.stringify(address[0].formatted_address) })     
+                    this.setState({ lat: obj.lat.toString()})     
+                    this.setState({ lng: obj.lng.toString()})     
+                }
+                
+                
+                // console.log("GEOLOC ON geocodeByAddress")
+                // console.log(this.state.geoloc)
+                // document.getElementById("geoloc").value =JSON.stringify(address[0]);
+                // this.props.onSelectionChanged(address[0]);
+            })
+            .catch(error => console.error('Error', error))
+    }
+
+    onSuggestionSelected(suggestion) {
+        
+        // Add your business logic here. In this case we just log...
+        console.log('Selected suggestion:', suggestion)
+      }
+
+    renderFunc = ({ getInputProps, getSuggestionItemProps, suggestions, loading }) => (
+        <div>
+          <input className={styles.inputSearchBar}  {...getInputProps()} />
+          <div >
+            {loading && <div>Loading...</div>}
+            {suggestions.map(suggestion => {
+              const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';
+              const style = suggestion.active
+                      ? { backgroundColor: 'red', cursor: 'pointer',border: '1px solid' }
+                      : { backgroundColor: '#123456', cursor: 'pointer',border: '1px solid' };
+              return (<div {...getSuggestionItemProps(suggestion,{className,style})}>
+                <span >{suggestion.description}</span> 
+              </div>
+              )
+            })}
+          </div>
+        </div>
+      );
+
+
+    callbackFunc  = ( autoCompleteData ) => {
+		//You can use the address data, passed by autocomplete as you want.
+	}
+
+
+
+    handleChange = (e) => {    
+        this.setState({ [e.target.name]: e.target.value })
+    }
+    
     onSubmit = (e) => {
         
         e.preventDefault();
@@ -166,6 +341,28 @@ class AccountEtape1 extends Component {
         this.soumettre(e.target.name, "global")
         
     }
+
+    onChange = (e) => {
+
+        this.setState({
+            value: e.target.value
+        });
+
+        if (e.target.value === '') {
+            console.log('cleared');
+            //this.props.onSelectionChanged('');
+        }
+    }
+
+    onBlur(e) {
+        console.log("blur");
+        console.log(e.target.value);
+        console.log(e.target.name);
+        this.setState({ [e.target.name]: e.target.value });
+        
+        this.soumettre(e.target.name, "unitaire");
+    }     
+
     soumettre(champ, type){
         console.log("soumettre");
         console.log(champ);
@@ -190,7 +387,25 @@ class AccountEtape1 extends Component {
             data.append('linkedin', this.state.linkedin)
             data.append('twitter', this.state.twitter)
             data.append('website', this.state.website)
+            console.log("GEOLOC ON SUBMIT")
+            console.log(this.state)
+            data.append('geoloc', this.state.geoloc)
             
+            data.append('street_number', this.state.street_number.replace('"', ''))
+            data.append('route', this.state.route.replace('"', ''))
+            data.append('locality', this.state.locality.replace('"', ''))
+            data.append('administrative_area_level_2', this.state.administrative_area_level_2.replace('"', ''))
+            data.append('administrative_area_level_1', this.state.administrative_area_level_1.replace('"', ''))
+            data.append('country', this.state.country.replace('"', ''))
+            data.append('postal_code', this.state.postal_code.replace('"', ''))
+            data.append('formatted_address', this.state.formatted_address.replace('"', ''))
+            data.append('lat', this.state.lat)
+            data.append('lng', this.state.lng)
+            //Compétences
+            data.append('appellationId', this.state.appellationId)
+            data.append('appellationLibelle', this.state.appellationLibelle)
+
+
             //TODO:maybe add this two in a single transactionnal saga
             this.props.updateUserRequest(data) 
             
@@ -207,7 +422,7 @@ class AccountEtape1 extends Component {
         if (type=="global" || (champ=="lastname" &&  data.lastname=="")) errors.message += " Veuillez saisir votre nom<br />";
         if (type=="global" || (champ=="phone" && data.phone=="")) errors.message += "Veuillez saisir un numéro de téléphone<br />";
         if (type=="global" || (champ=="currentJob" &&  data.currentJob=="")) errors.message += "Veuillez saisir votre intitulé de poste actuel ou poste recherché<br />";
-        if (type=="global" || (champ=="zipCode" && (data.zipCode && data.zipCode!="") && !Validator.isPostalCode(data.zipCode, "FR"))) errors.message += "Le code postal n'est pas correct<br />";
+        // if (type=="global" || (champ=="zipCode" && (data.zipCode && data.zipCode!="") && !Validator.isPostalCode(data.zipCode, "FR"))) errors.message += "Le code postal n'est pas correct<br />";
         // if ((data.website && data.website!="") && !Validator.isURL(data.website)) errors.message += " Veuillez ajouter un site internet avec une url valide<br />";
          if (!Validator.isMobilePhone(data.phone, "fr-FR") && !Validator.isNumeric(data.phone, "fr-FR")) errors.message += "Le téléphone n'est pas correct<br />";
         //console.log(errors.email);
@@ -258,10 +473,108 @@ class AccountEtape1 extends Component {
         this.props.updateUserPictureRequest(data)
     }
 
+    // METIER
+    // Filter logic
+    getSuggestionsMetier = async (valueMetier) => {
+        console.log("getSuggestionsMetier");
+        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 => {
+        console.log('getSuggestionMetierValue Le code : '+suggestion.code);
+        console.log('getSuggestionMetierValue Le libellé : '+suggestion.libelle);
+        document.getElementById('appellation_id').value =suggestion.code;
+        document.getElementById('appellation_libelle').value = suggestion.libelle;
+        this.setState({ appellationId: suggestion.code }) 
+        this.setState({ appellationLibelle: suggestion.libelle }) 
+        this.soumettre("appellation", "unitaire") 
+        return suggestion.libelle;
+    }
+    // Render Each Option
+    renderSuggestionMetier = suggestion => (
+    //     <div style="position: absolute; right: 0px; z-index: 1; will-change: transform; top: 0px; left: 0px; transform: translate3d(14px, 53px, 0px);" data-placement="bottom-start">
+    //     <div class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded" style="opacity: 1; transform: none; transform-origin: 0px 0px 0px; transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
+    //       <ul class="MuiList-root MuiList-padding" role="menu" tabindex="-1">
+    //       <div class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" tabindex="0" role="menuitem" aria-disabled="false" id="downshift-0-item-0">
+    //         <div>
+    //           <strong style="font-weight: 500;">{suggestion.libelle} </strong>
+    //           <span style="font-weight: 300;">, {suggestion.code}</span>
+    //         </div>
+    //         <span class="MuiTouchRipple-root"></span>
+    //       </div>
+    //       </ul>
+    //     </div>
+    // </div>
+
+        <span className="suggestion-content" >
+            
+            <span className="name" >
+                {suggestion.libelle} 
+            </span>
+        </span>
+    );
+    refreshPage() {
+        window.location.replace("/profileStep");
+    }
+
+    choisirMetier = (code) =>{
+        console.log("choisir metier "+code);
+    }
+
+    handleClick(code, libelle) {
+
+        //console.log('Le code : '+code);
+        // document.getElementById('appellation_id').value =code;
+        // document.getElementById('appellation_libelle').value = libelle;
+        // this.setState({ appellationId: code }) 
+        // this.setState({ appellationLibelle: libelle }) 
+        // this.soumettre("appellation", "unitaire")
+         //console.log('Le libellé : '+libelle);
+      }
+
+        // OnChange event handler
+    onChangeMetier = (event, { newValue }) => {
+        console.log("newValue "+newValue);
+        this.setState({
+            valueMetier: newValue
+        });
+    };
+
+    // Suggestion rerender when user types
+    onSuggestionsMetierFetchRequested = ({ value }) => {
+        this.getSuggestionsMetier(value)
+            .then(data => {
+                if (data.Error) {
+                    this.setState({
+                        suggestionsMetier: []
+                    });
+                } else {
+                    console.log("onSuggestionsMetierFetchRequested"+data);
+                    console.log("onSuggestionsMetierFetchRequested"+value);
+                    this.setState({
+                        suggestionsMetier: data
+                    });
+                }
+            })
+    };
+
+    // Triggered on clear
+    onSuggestionsMetierClearRequested = () => {
+        this.setState({
+            suggestionsMetier: []
+        });
+    };
+
     
 
     render() {
         const { classes, user } = this.props
+        const {  valueMetier, suggestionsMetier } = this.state;
         const logoUrl = user.picture;
         function refresh() {
             document
@@ -269,6 +582,22 @@ class AccountEtape1 extends Component {
                 .reload(true);
             
         }
+
+        const inputPropsMetier = {
+            placeholder: 'Saisir un métier',
+            value:this.state.valueMetier,
+            onChange: this.onChangeMetier
+          };
+
+        const inputProps = {
+            value: this.state.address,
+            onChange: this.onChange,
+          }
+
+        const searchOptions = {
+        componentRestrictions: { country: ['fr'] },
+        }
+
         return (
           <section className={classes.container}>
             <form className={classes.form}
@@ -358,9 +687,18 @@ class AccountEtape1 extends Component {
                         onBlur={this.onBlur} 
                     />
 
-                    
+                    <Autosuggest
+                    suggestions={suggestionsMetier}
+                    onSuggestionsFetchRequested={this.onSuggestionsMetierFetchRequested}
+                    onSuggestionsClearRequested={this.onSuggestionsMetierClearRequested}
+                    getSuggestionValue={this.getSuggestionMetierValue}
+                    renderSuggestion={this.renderSuggestionMetier}
+                    inputProps={inputPropsMetier}
+                    />
+                    <input type="hidden" id="appellation_id" value={this.state.appellationId =='null' || this.state.appellationId ==''  ? '' :this.state.appellationId}></input>
+                    <input type="hidden" id="appellation_libelle" value={this.state.appellationLibelle =='null' || this.state.appellationLibelle ==''  ? '' :this.state.appellationLibelle}></input>
 
-                    <TextField
+                    {/* <TextField
                         name="currentJob"
                         id="outlined"
                         label="Poste actuel"
@@ -371,9 +709,56 @@ class AccountEtape1 extends Component {
                         value={this.state.currentJob =='null' || this.state.currentJob ==''  ? '' :this.state.currentJob}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
-                    />
+                    /> */}
+                    <div className={classes.container}>
+                        <div 
+                        className={classes.conteneurGoogle}
+                        classes={{ root: classes.rootTextfield }} 
+                        style={{ position: 'relative', zIndex:2, width: '100%' }}>
+                            <label htmlFor="outlined-required"
+                            className={classes.labelGeoloc}>
+                                Adresse
+                            </label>
+                            <div className={classes.conteneurGoogleComposant}>
+                                <GooglePlaceAutocomplete
+                                    style={{ paddingLeft:'14px !important', left: 0, right: 0, zIndex: '2 !important', width: '100%' }}
+                                    name="location"
+                                    label="Location"
+                                    id="outlined-required"
+                                    variant="outlined"
+                                    textFieldProps={{ id: "outlined-required" }}
+                                    className={classes.textField}
+                                    value="test"
+                                    classes={{ root: classes.rootTextfield }} 
+                                    options={this.searchOptions}
+                                    onSuggestionSelected={this.onSuggestionSelected}
+                                    textFieldProps={{ onChange: (e) => this.onChange(e), value: this.state.value, placeholder: 'Ex : Rue de Rivoli, Paris, France', fullWidth: true, size:"small"}}
+                                    types={['(regions)']}
+                                    componentRestrictions={{country: 'fr'}}
+                                    renderTarget={() => (
+                                        <div   
+                                        style={{
+                                            
+                                            width: '100%',
+                                            zIndex:9
+                                        }}
+                                        >
+                                        </div>
+                                    )}
+                                />
+                            </div>
+                        </div>
+                        {/* <Input 
+                        name="geoloc" 
+                        id="geoloc" 
+                        label="geoloc" 
+                        ref="geoloc" 
+                        onChange={this.handleChange}
+                        value={this.state.geoloc =='null' || this.state.geoloc ==''  ? '' :this.state.geoloc}
+                        /> */}
+                    </div>
 
-                    <TextField
+                    {/* <TextField
                         name="address1"
                         id="outlined"
                         label="Adresse"
@@ -383,9 +768,9 @@ class AccountEtape1 extends Component {
                         value={this.state.address1 ? this.state.address1 : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
-                    />
+                    /> */}
 
-                    <TextField
+                    {/* <TextField
                         name="address2"
                         id="outlined"
                         label="Adresse complémentaire"
@@ -395,9 +780,9 @@ class AccountEtape1 extends Component {
                         value={this.state.address2 ? this.state.address2  : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
-                    />    
-                    <div className={classes.container}>
-                    <TextField
+                    />     */}
+                    {/* <div className={classes.container}> */}
+                    {/* <TextField
                         name="zipCode"
                         id="outlined"
                         label="Code postal"
@@ -407,9 +792,9 @@ class AccountEtape1 extends Component {
                         value={this.state.zipCode ? this.state.zipCode : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
-                    /> 
+                    />  */}
 
-                    <TextField
+                    {/* <TextField
                         name="city"
                         id="outlined"
                         label="Ville"
@@ -419,9 +804,9 @@ class AccountEtape1 extends Component {
                         value={this.state.city ? this.state.city : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
-                    />      
+                    />       */}
 
-                    <TextField
+                    {/* <TextField
                         name="country"
                         id="outlined"
                         label="Pays"
@@ -431,8 +816,8 @@ class AccountEtape1 extends Component {
                         value={this.state.country ? this.state.country : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
-                    />
-                    </div>           
+                    /> */}
+                    {/* </div>            */}
 
                     <TextField
                         name="linkedin"
@@ -474,13 +859,14 @@ class AccountEtape1 extends Component {
                         onBlur={this.onBlur} 
                     />
                     <Button
-                            type="submit"
+                            onClick={this.refreshPage}
                             variant="contained"
                             color="primary"
                             
                             className={classes.button}>
                             Enregistrer
                         </Button>
+                        
                 </form>
                 {/* <div id="F" className={classes.foot}>
                     <Button variant="contained" className={classes.button + ' cypButtonSendApplication'} onClick={this.onSubmit}>Mettre à jour!</Button>

nextjs/components/organisms/AccountProfile.js

@@ -26,7 +26,7 @@ import BottomNavigation from '@material-ui/core/BottomNavigation';
 import RefreshIcon from '@material-ui/icons/Refresh';
 // import FavoriteIcon from '@material-ui/icons/Favorite'; import LocationOnIcon
 // from '@material-ui/icons/LocationOn';
-
+import Link from 'next/link'
 import Box from '@material-ui/core/Box';
 
 import {

nextjs/components/organisms/Header.js

@@ -485,12 +485,12 @@ class Header extends React.Component {
                   <Divider light={true} />
 
                   <div className={classes.linkGroup}>
-                    <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
+                    {/* <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
                       <WorkOutlineIcon className={classes.icon} />
                       <ListItemText primary='Connexion recruteurs'>
                       </ListItemText>
                     </ListItem>
-                    </a>
+                    </a> */}
                   </div>
                 </List>
               </div>

nextjs/components/organisms/HeaderPersonnalise.js

@@ -397,12 +397,12 @@ class HeaderPersonnalise extends React.Component {
                   <Divider light={true} />
 
                   <div className={classes.linkGroup}>
-                    <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
+                    {/* <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
                       <WorkOutlineIcon className={classes.icon} />
                       <ListItemText primary='Connexion recruteurs'>
                       </ListItemText>
                     </ListItem>
-                    </a>
+                    </a> */}
                   </div>
                 </List>
               </div>}

nextjs/components/organisms/Register.js

@@ -46,6 +46,7 @@ const styles = theme => ({
     },
     enSavoirPlus:{
         textAlign : "center",
+        textDecoration :"none",
         color:"#fff",
         fontSize: '1em',
         fontWeight: '600',
@@ -375,7 +376,7 @@ class Register extends React.Component {
                     </Typography>
                 </div>
                 <div className={classes.connexionRecruteur}>
-                    Vous êtes recruteur ? <a href='https://recruteur.talentstube.com'><span className={classes.enSavoirPlus}>En savoir plus</span></a>
+                    Vous êtes recruteur ? <a className={classes.enSavoirPlus} href='https://recruteur.talentstube.com'><span >En savoir plus</span></a>
                 </div>
                 <Snack name= 'snackWarning'
                     variant= 'warning'

nextjs/next.config.js

@@ -55,7 +55,7 @@ module.exports = withPlugins(
         blogUrl: 'https://blog.talentstube.com',
         frontServerUrl: 'https://pp.app.talentstube.com/',
         cvThequeUrl: 'https://recruteur.talentstube.com',
-        version : 'V2.8.1',
+        version : 'V2.9.1',
         adListDefaultUrl: '/statique/images/default/default_picture_company.jpg',
         cachedMediaUrl: '/media/cache/profile_thumb/uploads/img/',
         postedContentUrl: '/uploads/img/',

nextjs/out/sitemap_local.xml

@@ -1,5 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
+  <url>
+    <loc>https://www.talentstube.com/Offre/142-charge-daffaires-f-h</loc>
+    <lastmod>2021-03-24</lastmod>
+    <priority>1.00</priority>
+  </url>
   <url>
     <loc>https://www.talentstube.com/Player?id=135&amp;url=/Offre/135-commercial-b-to-c-f-h&amp;videoId=502499843&amp;typeEntite=Offre&amp;nameCompany=Fym%20Action&amp;nameOffre=Commercial%20B%20to%20C%20(F/H)</loc>
     <lastmod>2021-02-10</lastmod>
@@ -144,7 +149,13 @@
     <loc>https://www.talentstube.com/Player?id=12480&amp;url=/Entreprise/12480-fym-action&amp;videoId=345898361&amp;typeEntite=Entreprise&amp;nameCompany=Fym%20Action&amp;nameOffre=</loc>
     <lastmod>2021-02-10</lastmod>
     <priority>1.00</priority>
-  </url><url>
+  </url>
+   <url>
+    <loc>https://www.talentstube.com/Offre/143-dessinateur-3d-f-h</loc>
+    <lastmod>2021-03-31</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
     <loc>https://www.talentstube.com/Offre/140-aide-a-domicile-f-h</loc>
     <lastmod>2021-02-10</lastmod>
     <priority>1.00</priority>

nextjs/pages/Login.js

@@ -158,6 +158,7 @@ const styles = theme => ({
     },
     enSavoirPlus:{
         textAlign : "center",
+        textDecoration :"none",
         color:"#fff",
         fontSize: '1em',
         fontWeight: '600',
@@ -391,7 +392,7 @@ class LoginPage extends React.Component {
 
                                         </div>
                                         <div className={classes.connexionRecruteur}>
-                                            Vous êtes recruteur ? <a href='https://recruteur.talentstube.com'><span className={classes.enSavoirPlus}>Connexion</span></a>
+                                            Vous êtes recruteur ? <a className={classes.enSavoirPlus} href='https://recruteur.talentstube.com'><span >Connexion</span></a>
                                         </div>
                                         <div className={classes.form}>
                                             <Typography

nextjs/pages/Player.js

@@ -70,7 +70,9 @@ class Player extends Component {
     }
     render() {
         const { classes, id, url, typeEntite, videoId, nameCompany, nameOffre } = this.props
-        
+        const urlEnv = process.env.NODE_ENV;
+        let nofollow = true;
+        urlEnv == "development" ? nofollow = true : nofollow = false;
         
         console.log(id);
         console.log(typeEntite);
@@ -94,8 +96,8 @@ class Player extends Component {
                 <NextSeo
                 title={titleVideo}
                 description={descriptionVideo}
-                noindex={true}
-                nofollow={true}
+                noindex={nofollow}
+                nofollow={nofollow}
                 openGraph={{
                     title: titleVideo,
                     description: descriptionVideo,

nextjs/pages/ResetPassword.js

@@ -116,7 +116,7 @@ class ResetPassword extends Component {
                         align="center"
                         variant="h5"
                     >
-                        Réinitialisation du mot de passe
+                        Modifier mot de passe
                     </Typography>
 
                     {loading && (

nextjs/pages/_document.js

@@ -36,6 +36,7 @@ class MyDocument extends Document {
           </link>
           <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
           <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
+          <link rel="stylesheet" type="text/css" href="/statique/css/autocomplete.css" />
           <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places"></script>
           <script async type="text/javascript" src="/static/js/pwaInstaller.js" ></script>
           {/* Global Site Tag (gtag.js) - Google Analytics */}

nextjs/pages/index.js

@@ -21,6 +21,7 @@ import OgHead from '../components/atoms/OgHead';
 import getConfig from 'next/config'
 import { BreadcrumbJsonLd } from 'next-seo';
 import Slider from "react-slick";
+import Hidden from '@material-ui/core/Hidden';
 // const VideoSlider = dynamic(() => import('../components/organisms/ShortVideoHooker'), {
 //   ssr: false
 // });
@@ -152,6 +153,14 @@ const styles = theme => ({
     display: "flex",
     alignItems: "flex-start"
   },
+  choixMobile: {
+    color:"#fff",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+
+  },
   containerVideoGauche :{
     position: "relative",
     height:"100%",
@@ -175,13 +184,29 @@ const styles = theme => ({
     backgroundPosition: "center",
     backgroundSize: "cover",
     backgroundBlendMode: 'darken',
-        backgroundColor: 'rgba(30,35,39,0.4)',
+    backgroundColor: 'rgba(30,35,39,0.5)',
+  },
+  containerVideoMobile :{
+    height:"100%",
+    width:"100%",
+    backgroundImage: 'url("/statique/images/accueil/trouver-un-job.jpg")',
+    padding :"0 30px",
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    backgroundBlendMode: 'darken',
+    backgroundColor: 'rgba(30,35,39,0.5)',
   },
   containerTitre :{
-    backgroundColor:"pink",
+
   },
   wrap :{
-    height: "75%",
+    [theme.breakpoints.up('md')]: {
+      height: "85%",
+      width: "100%",
+      position: "relative",
+    },
+    height: "100%",
     width: "100%",
     position: "relative",
   },
@@ -190,11 +215,17 @@ const styles = theme => ({
     height: "100px",
     width: "100%",
     position: "absolute",
-    top: "80px",
+    top: "30px",
     textAlign:"center",
     color:"#fff",
     zIndex : "1000"
   },
+  headerTitreMobile :{
+    width: "100%",
+    textAlign:"center",
+    color:"#fff",
+    marginBottom:"30px"
+  },
   blocRecruteur:{
     backgroundColor:"#fff",
     bottom:"40px", 
@@ -215,16 +246,48 @@ const styles = theme => ({
     minWidth:"40%",
     borderRadius:"5px",
   },
+  blocRecruteurMobile:{
+    backgroundColor:"#fff",
+    padding:"20px",
+    fontWeight: "600",
+    minWidth:"90%",
+    borderRadius:"5px",
+    margin :"15px 0"
+  },
+  blocCandidatMobile:{
+    backgroundColor:"#fff",
+    padding:"20px",
+    fontWeight: "600",
+    minWidth:"90%",
+    borderRadius:"5px",
+    margin :"60px 0 15px 0"
+  },
   titreAccueil:{
-    fontSize:"3em",
+    fontSize:"2.5em",
     textAlign:"center",
     color:"#fff",
-    paddingTop:"40px",
+    paddingTop:"0px",
     fontWeight: "600",
     fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
   },
   titreAccueil2:{
-    fontSize:"2em",
+    fontSize:"1.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"40px",
+    fontWeight: "400",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  titreAccueilMobile:{
+    fontSize:"2.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"0px",
+    fontWeight: "600",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  titreAccueil2Mobile:{
+    fontSize:"1.5em",
     textAlign:"center",
     color:"#fff",
     paddingTop:"40px",
@@ -240,6 +303,15 @@ const styles = theme => ({
     fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     marginBottom:"1em"
   },
+  jeSuisMobile:{
+    fontSize:"1em",
+    textTransform: "uppercase",
+    color:"#1E2327",
+    textAlign: "center",
+    fontWeight: "300",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    marginBottom:"1em"
+  },
   action:{
     fontSize:"1.5em",
     color:"#1E2327",
@@ -256,6 +328,16 @@ const styles = theme => ({
     color: theme.palette.secondary.main,
     backgroundColor: theme.palette.primary.important,
   },
+  boutonCandidatMobile:{
+    width:"100%",
+    margin : "0px !important"
+  },
+  boutonRecruteurMobile:{
+    width:"100%",
+    color: theme.palette.secondary.main,
+    backgroundColor: theme.palette.primary.important,
+    margin : "0px !important"
+  },
   temoignage:{
     textAlign:"center"
   },
@@ -264,7 +346,27 @@ const styles = theme => ({
     color:'#fff'
   },
   alignVertical:{
-    verticalAlign:"middle !important"
+    verticalAlign:"middle !important",
+    maxHeight :"80px",
+    minHeight :"60px",
+    
+  },
+  alignVerticalMobile:{
+    verticalAlign:"middle !important",
+    maxHeight :"70px",
+    minHeight :"70px",
+    
+  },
+  sliderDiv:{
+    padding:"30px"
+  },
+  sliderDivMobile:{
+    display: "inline !important",
+    padding:"10px",
+    
+  },
+  sliderContainerMobile:{
+    textAlign:"center"
   }
 });
 ///
@@ -295,6 +397,14 @@ class Index extends React.Component {
       autoplay: true,
       autoplaySpeed: 2000
     };
+    const settingsMobile = {
+      dots: false,
+      infinite: true,
+      slidesToShow: 2,
+      slidesToScroll: 2,
+      autoplay: true,
+      autoplaySpeed: 2000
+    };
     const socialShareUrl = typeof window !== 'undefined' ? window.location
             : publicRuntimeConfig.frontServerUrl ;
     const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
@@ -333,45 +443,84 @@ class Index extends React.Component {
       ]}
     />
         <div className={classes.wrap}>
-            <header className={classes.headerTitre}>
-                <h1 className={classes.titreAccueil}>La rencontre d’offres d’emploi et de candidatures en vidéo</h1>
-                <span className={classes.titreAccueil2}>
-                Parce que vous méritez mieux que du texte !
-                </span>
-            </header>
-            <section className={classes.choix}>
+            
+            <Hidden smDown>
+              <header className={classes.headerTitre}>
+                  <h1 className={classes.titreAccueil}>La rencontre d’offres d’emploi et de candidatures en vidéo</h1>
+                  <span className={classes.titreAccueil2}>
+                  Parce que vous méritez mieux que du texte !
+                  </span>
+              </header>
+              <section className={classes.choix}>
               
-              <div className={classes.containerVideoGauche}>
-                  
-                  <div className={classes.blocCandidat}>
-                      <div className={classes.jeSuis}>JE SUIS CANDIDAT</div>
-                      <div className={classes.action}>Je trouve un job</div>
-                      <Button
-                        variant="contained"
-                        color="primary"
-                        onClick={() => Router.push('/Offres')}
-                        className={classes.button + ' ' + classes.boutonCandidat}
-                      >Découvrir les offres
-                      </Button>
+                <div className={classes.containerVideoGauche}>
+                    
+                    <div className={classes.blocCandidat}>
+                        <div className={classes.jeSuis}>JE SUIS CANDIDAT</div>
+                        <div className={classes.action}>Je trouve un job</div>
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => Router.push('/Offres')}
+                          className={classes.button + ' ' + classes.boutonCandidat}
+                        >Découvrir les offres
+                        </Button>
 
 
-                  </div>
-              </div>
-              <div className={classes.containerVideoDroite}>
-                
-                <div className={classes.blocRecruteur}>
-                  <div className={classes.jeSuis}>JE SUIS recruteur</div>
-                  <div className={classes.action}>Je recrute des talents</div>
-                  <a href='https://recruteur.talentstube.com' className={classes.lien}>
-                    <Button
-                        variant="contained"
-                        className={classes.button + ' ' + classes.boutonRecruteur}
-                      >Déposer une offre
-                  </Button>
-                  </a>
+                    </div>
                 </div>
-              </div>
-            </section>
+                <div className={classes.containerVideoDroite}>
+                  
+                  <div className={classes.blocRecruteur}>
+                    <div className={classes.jeSuis}>JE SUIS recruteur</div>
+                    <div className={classes.action}>Je recrute des talents</div>
+                    <a href='https://recruteur.talentstube.com' className={classes.lien}>
+                      <Button
+                          variant="contained"
+                          className={classes.button + ' ' + classes.boutonRecruteur}
+                        >Déposer une offre
+                    </Button>
+                    </a>
+                  </div>
+                </div>
+              </section>
+            </Hidden>
+            {/* PARTIE MOBILE */}   
+            <Hidden mdUp>
+              
+              <section className={classes.choixMobile}>
+                  
+                  <div className={classes.containerVideoMobile}>
+                    <div className={classes.headerTitreMobile}>
+                      <h1 className={classes.titreAccueilMobile}>La rencontre d’offres d’emploi et de candidatures en vidéo</h1>
+                        <span className={classes.titreAccueil2Mobile}>
+                        Parce que vous méritez mieux que du texte !
+                        </span>
+                    </div>
+                    <div className={classes.blocCandidatMobile}>
+                        <div className={classes.jeSuisMobile}>JE SUIS CANDIDAT</div>
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => Router.push('/Offres')}
+                          className={classes.button + ' ' + classes.boutonCandidatMobile}
+                        >Je trouve un job
+                        </Button>
+                    </div>
+                    <div className={classes.blocRecruteurMobile}>
+                      <div className={classes.jeSuisMobile}>JE SUIS recruteur</div>
+                      
+                      <a href='https://recruteur.talentstube.com' className={classes.lien}>
+                        <Button
+                            variant="contained"
+                            className={classes.button + ' ' + classes.boutonRecruteurMobile}
+                          >Je recrute des talents
+                      </Button>
+                      </a>
+                    </div>
+                  </div>
+              </section>  
+            </Hidden>
           </div>
         <div className={classes.container}>
 
@@ -386,7 +535,7 @@ class Index extends React.Component {
                   className={classes.beforeTitle}>
                   à la une
               </Typography>
-                <Typography gutterBottom component="h1"
+                <Typography gutterBottom component="h2"
                   className={classes.title}>
                   Les offres d'emploi en <span className={classes.primary}>vidéo</span>
                 </Typography>
@@ -425,7 +574,7 @@ class Index extends React.Component {
                   className={classes.beforeTitle}>
                   à la une
               </Typography>
-                <Typography gutterBottom component="h1"
+                <Typography gutterBottom component="h2"
                   className={classes.title}>
                   Les entreprises en <span className={classes.primary}>vidéo</span>
                 </Typography>
@@ -466,18 +615,27 @@ class Index extends React.Component {
                   className={classes.beforeTitle}>
                   Témoignage
               </Typography>
-                <Typography gutterBottom component="h1"
+                <Typography gutterBottom component="h2"
                   className={classes.title}>
                   Le recrutement en <span className={classes.primary}>vidéo</span>
                 </Typography>
               </div>
               <div className={classes.temoignage}>
-                <iframe width="70%" height="450" src="https://www.youtube.com/embed/sKh0u7Mbdps" 
-                frameborder="0" 
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                allowfullscreen>
-                  
-                </iframe>
+                {/* PARTIE DEsktop */}   
+                <Hidden smDown>
+                  <iframe width="70%" height="450" src="https://www.youtube.com/embed/sKh0u7Mbdps" 
+                  frameborder="0" 
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                  allowfullscreen></iframe>
+                </Hidden>
+                {/* PARTIE MOBILE */}   
+                <Hidden mdUp>
+                <iframe width="90%" height="450" src="https://www.youtube.com/embed/sKh0u7Mbdps" 
+                  frameborder="0" 
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                  allowfullscreen></iframe>
+                </Hidden>
+
               </div>    
               
             </div>
@@ -485,48 +643,147 @@ class Index extends React.Component {
             
           </section>
           <section className={classes.scrollerSection + ' ' + classes.scrollerSectionSlider}>
-          <Slider ref={slider => (this.slider = slider)} {...settings}>
-          <div className={classes.alignVertical}>
-            <img src="https://recruteur.talentstube.com/media/cache/profile_thumb/uploads/img/0dc350ae6a639b3671b7a262e51ad581.jpeg"></img>
+          {/* PARTIE DEsktop */}   
+          <Hidden smDown>
+            <Slider ref={slider => (this.slider = slider)} {...settings}>
+            <a href="/Entreprise/21247-lactalis-logistique-et-transports">        
+              <div className={classes.sliderDiv}>
+                <img className={classes.alignVertical} alt="Offres d'emploi Lactalis" src="/statique/images/logos/recrutement-video-lactalis.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/28481-onela"> 
+              <div className={classes.sliderDiv}>
+                <img className={classes.alignVertical} alt="Offres d'emploi Onela" src="/statique/images/logos/recrutement-video-onela-service-a-domicile.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/19205-intermarche-logistique-alimentaire-international"> 
+              <div className={classes.sliderDiv}>
+              <img  className={classes.alignVertical} alt="Offres d'emploi Intermarché" src="/statique/images/logos/recrutement-video-intermarche.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/4059-eiffage-construction-grand-ouest"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Eiffage" src="/statique/images/logos/recrutement-video-eiffage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/8639-mma-questembert"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi MMA" src="/statique/images/logos/recrutement-video-mma-assurances.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32987-admr-56"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi ADMR" src="/statique/images/logos/recrutement-video-ADMR.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/13464-jpa"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi JPA" src="/statique/images/logos/recrutement-video-jpa.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/2527-groupe-mousset"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Groupe Mousset" src="/statique/images/logos/recrutement-video-groupe-mousset.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/1467-groupe-rocher-operations"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Groupe Rocher" src="/statique/images/logos/recrutement-video-groupe-rocher.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/26064-aer-recyclage"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi AER Recyclage" src="/statique/images/logos/recrutement-video-aer-recyclage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/46-actual"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Actual" src="/statique/images/logos/recrutement-video-actual.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/31934-la-centrale-des-ramoneurs"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi La centrale des ramoneurs" src="/statique/images/logos/recrutement-video-la-centrale-des-ramoneurs.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32507-tpc-ouest">
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi TPC Ouest" src="/statique/images/logos/recrutement-video-tpc-ouest-btp.jpg"></img>
+              </div>
+            </a>
+            
+          </Slider>
+        </Hidden>
+        {/* PARTIE Mobile */}   
+        <Hidden mdUp>
+          <div  className={classes.sliderContainerMobile}>
+          <a href="/Entreprise/21247-lactalis-logistique-et-transports" >        
+              <div className={classes.sliderDivMobile}>
+                <img className={classes.alignVerticalMobile} alt="Offres d'emploi Lactalis" src="/statique/images/logos/recrutement-video-lactalis.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/28481-onela" > 
+              <div className={classes.sliderDivMobile}>
+                <img className={classes.alignVerticalMobile} alt="Offres d'emploi Onela" src="/statique/images/logos/recrutement-video-onela-service-a-domicile.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/19205-intermarche-logistique-alimentaire-international" > 
+              <div className={classes.sliderDivMobile}>
+              <img  className={classes.alignVerticalMobile} alt="Offres d'emploi Intermarché" src="/statique/images/logos/recrutement-video-intermarche.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/4059-eiffage-construction-grand-ouest" > 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Eiffage" src="/statique/images/logos/recrutement-video-eiffage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/8639-mma-questembert" > 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi MMA" src="/statique/images/logos/recrutement-video-mma-assurances.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32987-admr-56" > 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi ADMR" src="/statique/images/logos/recrutement-video-ADMR.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/13464-jpa"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi JPA" src="/statique/images/logos/recrutement-video-jpa.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/2527-groupe-mousset"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Groupe Mousset" src="/statique/images/logos/recrutement-video-groupe-mousset.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/1467-groupe-rocher-operations"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Groupe Rocher" src="/statique/images/logos/recrutement-video-groupe-rocher.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/26064-aer-recyclage"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi AER" src="/statique/images/logos/recrutement-video-aer-recyclage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/46-actual"> 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Actual" src="/statique/images/logos/recrutement-video-actual.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/31934-la-centrale-des-ramoneurs"> 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi La centrale des ramoneurs" src="/statique/images/logos/recrutement-video-la-centrale-des-ramoneurs.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32507-tpc-ouest">
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="TPC Ouest" src="/statique/images/logos/recrutement-video-tpc-ouest-btp.jpg"></img>
+              </div>
+            </a>   
           </div>
-          <div className={classes.alignVertical}>
-            <img src="https://recruteur.talentstube.com/media/cache/profile_thumb/uploads/img/7f039d43138fda1959959f1fe6539c27.jpeg"></img>
-          </div>
-          <div className={classes.alignVertical}>
-          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/62206ab199713e2828e409f705b9ec9d.png"></img>
-          </div>
-          <div className={classes.alignVertical}>
-          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/4f3dba583fea12c01a9c708772b1e0ac.jpeg"></img>
-          </div>
-          <div className={classes.alignVertical}>
-          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/60ac27698d9f443a1acc4fbdebd07a9e.png"></img>
-          </div>
-          <div className={classes.alignVertical}>
-          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/6f80c41422367911f0e1da5c40c3da4f.png"></img>
-          </div>
-          <div className={classes.alignVertical}>
-          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/1f1a4e3f66dc6ec7ac4c650fe317762a.png"></img>
-          </div>
-          <div className={classes.alignVertical}>
-          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/b91b7247132926320e15f047962300bf.png"></img>
-          </div>
-          <div className={classes.alignVertical}>
-          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/be618ebff241f1755525bb942e7008e9.jpeg"></img>
-          </div>
-          <div className={classes.alignVertical}>
-          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/ce3e28e13be1bd90f9028bf73828572f.jpeg"></img>
-          </div>
-          <div className={classes.alignVertical}>
-          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/94c787c21c93a6b905eca6b739eedbf2.png"></img>
-          </div>
-          <div className={classes.alignVertical}>
-          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/7700369aae83d9b84ac0f42a0e63277f.jpeg"></img>
-          </div>
-          <div className={classes.alignVertical}>
-          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/58d59033851aa9d4d633cd895d794fcf.jpeg"></img>
-          </div>
-          
-        </Slider>
+        </Hidden>
         </section>        
           <Footer />
         </div>

nextjs/pages/test4.js

@@ -136,6 +136,9 @@ const styles = theme => ({
       margin: 'auto',
     },
   },
+  container: {
+    
+  },
 });
 
 class Index extends React.Component {
@@ -176,12 +179,19 @@ class Index extends React.Component {
   getSuggestionValue = suggestion => suggestion.libelle;
   // Render Each Option
   renderSuggestion = suggestion => (
-      <span className="sugg-option">
-          
-          <span className="name">
-              {suggestion.libelle} ({suggestion.code})
-          </span>
-      </span>
+    <span className={'suggestion-content ' + suggestion.twitter}>
+    <span className="name">
+      {
+        parts.map((part, index) => {
+          const className = part.highlight ? 'highlight' : null;
+
+          return (
+            <span className={className} key={index}>{part.text}</span>
+          );
+        })
+      }
+    </span>
+  </span>
   );
 
   // OnChange event handler
@@ -229,10 +239,23 @@ class Index extends React.Component {
   getSuggestionMetierValue = suggestion => suggestion.libelle;
   // Render Each Option
   renderSuggestionMetier = suggestion => (
-      <span className="sugg-option">
+//     <div style="position: absolute; right: 0px; z-index: 1; will-change: transform; top: 0px; left: 0px; transform: translate3d(14px, 53px, 0px);" data-placement="bottom-start">
+//     <div class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded" style="opacity: 1; transform: none; transform-origin: 0px 0px 0px; transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
+//       <ul class="MuiList-root MuiList-padding" role="menu" tabindex="-1">
+//       <div class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" tabindex="0" role="menuitem" aria-disabled="false" id="downshift-0-item-0">
+//         <div>
+//           <strong style="font-weight: 500;">{suggestion.libelle} </strong>
+//           <span style="font-weight: 300;">, {suggestion.code}</span>
+//         </div>
+//         <span class="MuiTouchRipple-root"></span>
+//       </div>
+//       </ul>
+//     </div>
+// </div>
+<span className="suggestion-content">
           
           <span className="name">
-              {suggestion.libelle} ({suggestion.code})
+              {suggestion.libelle} 
           </span>
       </span>
   );
@@ -282,10 +305,11 @@ class Index extends React.Component {
   getSuggestionMetierCompetenceValue = suggestion => suggestion.libelle;
   // Render Each Option
   renderSuggestionMetierCompetence = suggestion => (
+    
       <span className="sugg-option">
           
           <span className="name">
-              {suggestion.libelle} ({suggestion.code})
+              {suggestion.libelle}
           </span>
       </span>
   );

nextjs/public/statique/css/autocomplete.css

@@ -0,0 +1,101 @@
+.react-autosuggest__container {
+  position: relative;
+  width: 85%;
+}
+
+.react-autosuggest__input {
+  width: 100%;
+  
+  height: 30px;
+  padding: 10px 0;
+  font-family: Roboto;
+  font-weight: 400;
+  font-size: 16px;
+  border: 1px solid;
+  border-color: rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+}
+
+.react-autosuggest__input:focus {
+  outline: none;
+}
+
+.react-autosuggest__container--open .react-autosuggest__input {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.react-autosuggest__suggestions-container {
+  display: none;
+}
+
+.react-autosuggest__container--open .react-autosuggest__suggestions-container {
+  display: block;
+  position: absolute;
+  top: 51px;
+  width: 280px;
+  border: 1px solid #aaa;
+  background-color: #fff;
+  font-family: Roboto;
+  font-weight: 300;
+  font-size: 16px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  z-index: 10;
+}
+
+.react-autosuggest__suggestions-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.react-autosuggest__suggestion {
+  cursor: pointer;
+  padding: 10px 20px;
+}
+
+.react-autosuggest__suggestion:not(:first-child) {
+  border-top: 1px solid #ddd;
+}
+
+.react-autosuggest__suggestion--focused {
+  background-color: #0C7EAF;
+  color: #fff;
+}
+
+.suggestion-content {
+  display: flex;
+  align-items: center;
+  background-repeat: no-repeat;
+}
+
+.dancounsell {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/dancounsell/48.jpg);
+}
+
+.ladylexy {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/48.jpg);
+}
+
+.mtnmissy {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/mtnmissy/48.jpg);
+}
+
+.steveodom {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/steveodom/48.jpg);
+}
+
+.name {
+  margin-left: 8px;
+  line-height: 15px;
+}
+
+.highlight {
+  color: #ee0000;
+  font-weight: bold;
+}
+
+.react-autosuggest__suggestion--focused .highlight {
+  color: #120000;
+}