V2.8.2

nextjs/components/atoms/ChatCard.js

@@ -69,7 +69,17 @@ export default function ChatCard(props) {
     
     return (
         <Fragment>
-            <ChatCardMessage side={bubbleSide} firstname={props.message.sender.firstname} lastname={props.message.sender.lastname} picture={userPicture} video={(props.message.video) ? true : false} message={(props.message.video) ? (<VideoVimeo classesOverride={ classes.videoVimeo } videoId={Ar.last(_.split(props.message.video.cdn_url, '/'))} />) : props.message.content} messageSenderClass={messageSenderClass} bubbleClass={bubbleClass}/>
+            <ChatCardMessage side={bubbleSide} firstname={props.message.sender.firstname} lastname={props.message.sender.lastname} picture={userPicture} 
+            video={
+                (props.message.video) 
+                ? true :
+                 false} 
+            message={
+                (props.message.video) 
+                ? (<VideoVimeo classesOverride={ classes.videoVimeo } videoId={Ar.last(_.split(props.message.video.cdn_url, '/'))} />) 
+                : props.message.content}
+            messageTexte = {props.message.content} 
+            messageSenderClass={messageSenderClass} bubbleClass={bubbleClass}/>
 
             <Typography
                 className={classes.messageDate}

nextjs/components/atoms/ChatCardMessage.js

@@ -61,7 +61,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function ChatCardMessage(props) {
-    const { side, firstname, lastname, picture, message, video, messageSenderClass, bubbleClass } = props;
+    const { side, firstname, lastname, picture, message, messageTexte, video, messageSenderClass, bubbleClass } = props;
     const classes = useStyles();
 
     const userBubble = (video) ? classes.userBubble +' '+ classes.userBubbleVideo : classes.userBubble
@@ -69,7 +69,7 @@ export default function ChatCardMessage(props) {
             <section className={(side==='left')? classes.userMessageLeft : classes.userMessageRight }>
                 
                 {picture ?
-                    <img alt="talents-tube" src={`http://localhost/uploads/img/${picture}`} className={(side==='left')? classes.first+' '+classes.avatar : classes.second +' '+classes.avatar} />
+                    <img alt="talents-tube" src={`http://recruteur.talentstube.com/uploads/img/${picture}`} className={(side==='left')? classes.first+' '+classes.avatar : classes.second +' '+classes.avatar} />
                     :
                     <img alt="talents-tube" src='/static/images/default/account-avatar-default.svg' className={(side==='left')? classes.first +' '+ classes.avatar : classes.second+' '+classes.avatar } />
                 }
@@ -84,6 +84,7 @@ export default function ChatCardMessage(props) {
                             className={classes.messageContent}
                         >
                             {message}
+                            {messageTexte}
                         </Typography>
                     </div>
                 </div>

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/Header.js

@@ -363,7 +363,7 @@ class Header extends React.Component {
             <div className={classes.fullList + ' ' + classes.lightFullList}>
               <List className={classes.List}>
 
-                <Link href="/indexTalent"  >
+                <Link href="/"  >
                   <a className={classes.darkMenuItem}><ListItem classes={{ root: classes.rootListItem }}>
                     <img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.menuLogo} />
                   </ListItem></a>
@@ -579,7 +579,7 @@ class Header extends React.Component {
           (<AppBar position="static" className={classes.appBar}>
             <Toolbar disableGutters={true} className={classes.toolbarDesktop}>
               <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection1}>
-                <Link href="/indexTalent"  >
+                <Link href="/"  >
                   <a className={classes.darkMenuItem}>
                     <ListItem classes={{ root: classes.rootListItemDesktop }}>
                       <img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.desktopMenuLogo} />
@@ -666,14 +666,14 @@ class Header extends React.Component {
                   </div>
                 </List>
               </section>
-              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
+              {/* <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
 
                 <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
                   <ListItemText primary='Espace recruteurs'>
                   </ListItemText>
                   <ArrowForward className={classes.icon} />
                 </a>
-              </section>
+              </section> */}
             </Toolbar>
           </AppBar>)
           :
@@ -685,7 +685,7 @@ class Header extends React.Component {
                   <MenuIcon />
                 </IconButton>
                 <div className={classes.grow} />
-                <Link href="/indexTalent"  >
+                <Link href="/"  >
                   <a><img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.menuLogo} /></a>
                 </Link>
                 <div className={classes.grow} />

nextjs/components/organisms/HeaderPersonnalise.js

@@ -488,7 +488,7 @@ class HeaderPersonnalise extends React.Component {
           (<AppBar position="static" className={classes.appBar}>
             <Toolbar disableGutters={true} className={classes.toolbarDesktop}>
               <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection1}>
-                <Link href="/indexTalent"  >
+                <Link href="/"  >
                   <a className={classes.darkMenuItem}>
                     <ListItem classes={{ root: classes.rootListItemDesktop }}>
                       <img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.desktopMenuLogo} />
@@ -575,14 +575,14 @@ class HeaderPersonnalise extends React.Component {
                   </div>
                 </List>
               </section>
-              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
+              {/* <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
 
                 <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
                   <ListItemText primary='Espace recruteurs'>
                   </ListItemText>
                   <ArrowForward className={classes.icon} />
                 </a>
-              </section>
+              </section> */}
             </Toolbar>
           </AppBar>)
           :
@@ -601,7 +601,7 @@ class HeaderPersonnalise extends React.Component {
                   <ArrowLeft color="primary" classes={{ root: classes.icon }}></ArrowLeft>
                 </ButtonBase>
                 <div className={classes.grow} />
-                <Link href="/indexTalent"  >
+                <Link href="/"  >
                   <a><img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.menuLogo} /></a>
                 </Link>
                 <div className={classes.grow} />

nextjs/components/organisms/Register.js

@@ -32,6 +32,26 @@ const styles = theme => ({
         display: 'flex',
         flexDirection: 'column',
     },
+    connexionRecruteur:{
+        textAlign : "center",
+        marginTop:"40px",
+        backgroundColor:"#1E2327",
+        padding:"30px 0",
+        width:"100%",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '300',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+
+    },
+    enSavoirPlus:{
+        textAlign : "center",
+        textDecoration :"none",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '600',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    },
     formText: {
         padding: theme.spacing(0, 2),
         paddingTop: theme.spacing(3),
@@ -101,6 +121,18 @@ const styles = theme => ({
         marginTop: theme.spacing(6),
         marginBottom: theme.spacing(2),
     },
+    titre: {
+        fontWeight: 600,
+        fontSize: "1.875em",
+        marginBottom:"20px",
+        fontFamily: "Roboto",
+    },
+    cgu: {
+        fontFamily: "Roboto",
+        fontSize: "1em",
+        fontWeight: "300",
+
+    },
 });
 
 class Register extends React.Component {
@@ -199,7 +231,12 @@ class Register extends React.Component {
 
                 <form className={classes.form}>
 
-                    
+                    <Typography
+                        className={classes.titre}    
+                        align="left"
+                    >
+                        Inscription   
+                    </Typography>
                     <TextField
                         value={data.firstname}
                         onChange={this.onChange}
@@ -310,7 +347,7 @@ class Register extends React.Component {
                         label="Je déclare avoir pris connaissance et accepte les termes et les CGU *"
                         required
                     />
-                    <Link href={`/Cgu`} >Lien vers les CGU</Link>
+                    <Link href={`/Cgu`} className={classes.cgu}>Lire les CGU</Link>
                     <Button type="submit" variant="contained" className={classes.button + ' ' + classes.buttonImportant + ' cypButtonRegister'} onClick={this.onRegister}>
                         S'inscrire
                     </Button>
@@ -338,6 +375,9 @@ class Register extends React.Component {
                         </Link>
                     </Typography>
                 </div>
+                <div className={classes.connexionRecruteur}>
+                    Vous êtes recruteur ? <a className={classes.enSavoirPlus} href='https://recruteur.talentstube.com'><span >En savoir plus</span></a>
+                </div>
                 <Snack name= 'snackWarning'
                     variant= 'warning'
                     message={errors.message}

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.7.4',
+        version : 'V2.8.2',
         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>
@@ -159,11 +164,6 @@
     <lastmod>2021-01-18</lastmod>
     <priority>1.00</priority>
   </url>
-  <url>
-    <loc>https://www.talentstube.com/indexTalent</loc>
-    <lastmod>2021-03-09</lastmod>
-    <priority>1.00</priority>
-  </url>
   <url>
     <loc>https://www.talentstube.com</loc>
     <lastmod>2021-03-09</lastmod>

nextjs/package.json

@@ -62,6 +62,7 @@
     "react-redux-loading-bar": "^5.0.0",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.1",
+    "react-slick": "^0.28.1",
     "react-sticky-box": "^0.9.3",
     "react-swipeable-views": "^0.13.3",
     "reactstrap": "^6.4.0",

nextjs/pages/Inscription.js

@@ -136,7 +136,7 @@ const styles = theme => ({
     },
     buttonImportant: {
         marginTop: theme.spacing(6),
-    },
+    }
 });
 
 const recaptchaRef = React.createRef();
@@ -232,15 +232,9 @@ class LoginPage extends React.Component {
                         <Loader />
                     )}
                     {!loading && (
-                        <Fragment>
-                            
-                           
-
-                                
-                                    <Register linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} erreurs={errors.message} />
-                                
-                            
-                        </Fragment>
+                        <Fragment> 
+                             <Register linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} erreurs={errors.message} />
+                        </Fragment> 
                     )}
                 </div>
                 {/* <Snack name={success ? 'snackSuccess' : 'snackWarning'}

nextjs/pages/Login.js

@@ -83,7 +83,7 @@ const styles = theme => ({
     formLink: {
         paddingLeft: theme.spacing(1),
         fontWeight: '500',
-        cursor: 'pointer',
+        color: theme.palette.primary.dark,
     },
     forgetPasswordText: {
         marginTop: theme.spacing(2),
@@ -138,6 +138,32 @@ const styles = theme => ({
     buttonImportant: {
         marginTop: theme.spacing(6),
     },
+    titre: {
+        fontWeight: 600,
+        fontSize: "1.875em",
+        marginBottom:"20px",
+        fontFamily: "Roboto",
+    },
+    connexionRecruteur:{
+        textAlign : "center",
+        marginTop:"40px",
+        backgroundColor:"#1E2327",
+        padding:"30px 0",
+        width:"100%",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '300',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+
+    },
+    enSavoirPlus:{
+        textAlign : "center",
+        textDecoration :"none",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '600',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    },
 });
 
 const recaptchaRef = React.createRef();
@@ -273,6 +299,12 @@ class LoginPage extends React.Component {
                                 <TabContainer dir={'x'}>
                                     <div className={classes.tabContainer}>
                                         <form className={classes.form} onSubmit={this.onSubmit}>
+                                            <Typography
+                                                className={classes.titre}    
+                                                align="left"
+                                            >
+                                                   Connexion   
+                                            </Typography>
                                             <TextField
                                                 value={data.email}
                                                 id="email"
@@ -345,16 +377,22 @@ class LoginPage extends React.Component {
                                         {/* <SocialButtonsAuth linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} /> */}
 
                                         <div className={classes.form}>
-                                            <Typography
-                                                paragraph={true}
-                                                align="center"
-                                                className={classes.formText}
-                                            >Je ne possède pas de compte Talents Tube ?
-                                        
-                                                    <Link href="/Inscription">S'inscrire</Link>
-                                        
-                                            </Typography>
+                                        <Typography
+                                            paragraph={true}
+                                            align="center"
+                                            className={classes.formText}
+                                        >Je ne possède pas de compte Talents Tube ? 
+                                            <Link href={"/Inscription"} >
+                                                <span className={classes.formLink}>
+                                                    S'inscrire
+                                                </span>
+                                            </Link>
+                                        </Typography>
+                    
 
+                                        </div>
+                                        <div className={classes.connexionRecruteur}>
+                                            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/_document.js

@@ -32,7 +32,11 @@ class MyDocument extends Document {
           {/* PWA primary color */}
           <meta name="theme-color" content={theme.palette.primary.main} />
           <link rel="preload" href="/statique/css/fonts.css" rel="stylesheet">
+
           </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/indexTalent.js

@@ -1,302 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
-import React 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'
-//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 dynamic from 'next/dynamic'
-import OgHead from '../components/atoms/OgHead';
-import getConfig from 'next/config'
-import { BreadcrumbJsonLd } from 'next-seo';
-
-// 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: '"Roboto", "Helvetica", "Arial", "sans-serif"',
-    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 {
-  state = {
-    emphasisJobs: [],
-    emphasisCompanies: []
-  }
-  componentDidMount() {
-    localStorage.setItem("loginRedirect", "/")
-    this.props.fetchEmphasisJobsRequest({ isEmphasis: 1 })
-    this.props.fetchEmphasisCompaniesRequest({ isEmphasis: 1 })
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      emphasisJobs: nextProps.emphasisJobs,
-      emphasisCompanies: nextProps.emphasisCompanies
-    })
-  }
-  render() {
-    const { classes } = this.props;
-    
-    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="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}
-                    seo_key="Recrutement, video"
-
-        ></OgHead>
-        <BreadcrumbJsonLd
-      itemListElements={[
-        {
-          position: 1,
-          name: 'Offres',
-          item: 'https://www.talentstube.com/Offres',
-        },
-        {
-          position: 2,
-          name: 'Entreprises',
-          item: 'https://www.talentstube.com/Offres',
-        },
-        {
-          position: 3,
-          name: 'Espace recruteur',
-          item: 'https://recruteur.talentstube.com/',
-        },
-        {
-          position: 4,
-          name: "Blog sur l'emploi",
-          item: 'https://blog.talentstube.com/',
-        },
-      ]}
-    />
-        <div className={classes.container}>
-
-          {/* <VideoSlider /> */}
-
-          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionOffer}>
-            <div
-              className={classes.HorizontalScrollerOffre}
-            >
-              <div className={classes.titleContainer}>
-                <Typography gutterBottom
-                  className={classes.beforeTitle}>
-                  à la une
-              </Typography>
-                <Typography gutterBottom component="h1"
-                  className={classes.title}>
-                  Les offres d'emploi en <span className={classes.primary}>vidéo</span>
-                </Typography>
-              </div>
-
-              {this.state.emphasisJobs.loading ?
-                (<Loader />)
-                : !isEmpty(this.state.emphasisJobs.data) ? (
-                    <HorizontalScroller
-                      data={this.state.emphasisJobs.data}
-                      className={classes.HorizontalScroller}
-                      type="offre"
-                    >
-                      <TileOffre />
-                    </HorizontalScroller>
-                ) : (<NoResult text='Aucun résultat.' />)}
-            </div>
-
-            <Button
-              variant="contained"
-              name="Offres"
-              color="primary"
-              onClick={() => Router.push('/Offres')}
-              className={classes.button + ' cypButtonOffers'}
-            >
-              Toutes les offres
-          </Button>
-          </section>
-
-          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionCompany}>
-            <div
-              className={classes.HorizontalScrollerOffre}
-            >
-              <div className={classes.titleContainer}>
-                <Typography gutterBottom
-                  className={classes.beforeTitle}>
-                  à la une
-              </Typography>
-                <Typography gutterBottom component="h1"
-                  className={classes.title}>
-                  Les entreprises en <span className={classes.primary}>vidéo</span>
-                </Typography>
-              </div>
-
-              {this.state.emphasisCompanies.loading ?
-                (<Loader />)
-                : !isEmpty(this.state.emphasisCompanies.data) ? (
-
-                  <HorizontalScroller
-                    data={this.state.emphasisCompanies.data}
-                    className={classes.HorizontalScroller}
-                    type="entreprise"
-                  >
-                    <TileCompany />
-                  </HorizontalScroller>
-                ) : (<NoResult text='Aucun résultat.' />)}
-            </div>
-
-            <Button
-
-              name="Entreprises"
-              variant="contained"
-              color="primary"
-              onClick={() => Router.push('/Entreprises')}
-              className={classes.button}
-            >
-              Toutes les entreprises
-          </Button>
-          </section>
-
-          <Footer />
-        </div>
-      </Layout>
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  return {
-    emphasisJobs: state.emphasisJobs,
-    emphasisCompanies: state.emphasisCompanies
-  };
-}
-
-Index.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default (connect(mapStateToProps, { fetchEmphasisJobsRequest, fetchEmphasisCompaniesRequest })(withStyles(styles)(Index)));

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,98 @@
+.react-autosuggest__container {
+  position: relative;
+}
+
+.react-autosuggest__input {
+  width: 240px;
+  height: 30px;
+  padding: 10px 20px;
+  font-family: Helvetica, sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  border: 1px solid #aaa;
+  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: Helvetica, sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  z-index: 2;
+}
+
+.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;
+}