Bug video territoire

: http://localhost:3000/Reponse?adId=80

nextjs/.gitignore

@@ -1,4 +1,3 @@
-
 /node_modules/
 .next/
 .env

nextjs/Dockerfile

@@ -14,5 +14,5 @@ RUN apk add --no-cache bash
 
 RUN apk add --no-cache yarn
 
-CMD cd /home/app/nextjs && yarn cache dir && yarn cache clean && yarn build && pm2 startOrReload ecosystem.config.js --env production --no-daemon
+CMD cd /home/app/nextjs && yarn cache dir && yarn cache clean && yarn install && yarn build && pm2 startOrReload ecosystem.config.js --env production --no-daemon
 

nextjs/README.md

@@ -5,7 +5,7 @@
 Download the example [or clone the repo](https://git.e-declic.net/talents-tube/app.git):
 
 ```bash
-git clone 
+git clone
 ```
 
 Install it and run:
@@ -27,10 +27,11 @@ https://redux-saga.js.org/docs/basics/ErrorHandling.html
 is a library that aims to make application side effect asynchronous things like data fetching and impure things like accessing the browser cache
 
 ## Integration
-### Naming conventions
-style classes name syntax : Camel case
-Try to name without too much precision 
 
+### Naming conventions
+
+style classes name syntax : Camel case
+Try to name without too much precision
 
 ### Material UI
 
@@ -39,17 +40,29 @@ Try to name without too much precision
 [components/organisms] General components
 [components/templates] Layouts components
 
+## MEP
+
+=================================
+Mise en PRE-production de l’application PWA
+=================================
+Aller dans la preproduction et git pull dans le répertoire /app (pas www)
+Possibilité de devoir git stash
+Attention de bien avoir le .env
+Restart docker preproduction (sudo make ENV=preprod docker-restart)
+sudo docker exec -it frontnginx.nginx bash
+nginx -t && nginx -s reload
+
 ## Test
+
 ### Cypress
 
 [Gmail-tester]
 https://github.com/levz0r/gmail-tester
 
 ## Continuous Integration
+
 ### Jenkins
 
->in case of emergency
-make docker-restart ENV=dev
-
-adduser jenkins root
-
+> in case of emergency
+> make docker-restart ENV=dev
+> adduser jenkins root

nextjs/actions/ads.js

@@ -1,15 +1,16 @@
 import {
-  FETCH_ADS_REQUEST,
-  FETCH_ADS_SUCCESS,
-  FETCH_ADS_FAILURE,
-  FETCH_AD_REQUEST,
-  FETCH_AD_SUCCESS,
-  FETCH_AD_FAILURE,
-  FETCH_EMPHASIS_ADS_REQUEST,
-  FETCH_EMPHASIS_ADS_SUCCESS,
-  FETCH_EMPHASIS_ADS_FAILURE,
+  FETCH_JOBS_REQUEST,
+  FETCH_JOBS_SUCCESS,
+  FETCH_JOBS_FAILURE,
+  FETCH_JOB_REQUEST,
+  FETCH_JOB_SUCCESS,
+  FETCH_JOB_FAILURE,
+  FETCH_EMPHASIS_JOBS_REQUEST,
+  FETCH_EMPHASIS_JOBS_SUCCESS,
+  FETCH_EMPHASIS_JOBS_FAILURE,
   CLEAR_AD,
-  COUNT_AD_VIEW
+  COUNT_AD_VIEW,
+  TOGGLE_PROMOTED_FILTER_ADS
 } from '../types'
 
 //Ads stat count
@@ -19,54 +20,60 @@ export const countAdViewRequest = (id) => ({
   id
 });
 
+//Is ads promoted?
+
+export const togglePromotedFilterRequest = () => ({
+  type: TOGGLE_PROMOTED_FILTER_ADS
+});
+
 //Ads list
 
-export const fetchAdsRequest = (payload) => ({
-    type: FETCH_ADS_REQUEST,
+export const fetchJobsRequest = (payload) => ({
+    type: FETCH_JOBS_REQUEST,
     payload
   });
   
-  export const fetchAdsSuccess = res => ({
-    type: FETCH_ADS_SUCCESS,
+  export const fetchJobsSuccess = res => ({
+    type: FETCH_JOBS_SUCCESS,
     res
   });
   
-  export const fetchAdsFailure = res => ({
-    type: FETCH_ADS_FAILURE,
+  export const fetchJobsFailure = res => ({
+    type: FETCH_JOBS_FAILURE,
     res
   });
 
   //Ads list
   
-  export const fetchEmphasisAdsRequest = (payload) => ({
-      type: FETCH_EMPHASIS_ADS_REQUEST,
+  export const fetchEmphasisJobsRequest = (payload) => ({
+      type: FETCH_EMPHASIS_JOBS_REQUEST,
       payload
     });
     
-    export const fetchEmphasisAdsSuccess = res => ({
-      type: FETCH_EMPHASIS_ADS_SUCCESS,
+    export const fetchEmphasisJobsSuccess = res => ({
+      type: FETCH_EMPHASIS_JOBS_SUCCESS,
       res
     });
     
-    export const fetchEmphasisAdsFailure = res => ({
-      type: FETCH_EMPHASIS_ADS_FAILURE,
+    export const fetchEmphasisJobsFailure = res => ({
+      type: FETCH_EMPHASIS_JOBS_FAILURE,
       res
     });
 
   //Single ad
 
-  export const fetchAdRequest = payload => ({
-    type: FETCH_AD_REQUEST,
+  export const fetchJobRequest = payload => ({
+    type: FETCH_JOB_REQUEST,
     payload
   });
   
-  export const fetchAdSuccess = res => ({
-    type: FETCH_AD_SUCCESS,
+  export const fetchJobSuccess = res => ({
+    type: FETCH_JOB_SUCCESS,
     res
   });
   
-  export const fetchAdFailure = res => ({
-    type: FETCH_AD_FAILURE,
+  export const fetchJobFailure = res => ({
+    type: FETCH_JOB_FAILURE,
     res
   });
 

nextjs/actions/answer.js

@@ -2,9 +2,9 @@ import {
   POST_AD_ANSWER_REQUEST,
   POST_AD_ANSWER_FAILURE,
   POST_AD_ANSWER_SUCCESS,
-  FETCH_ADS_ANSWER_REQUEST,
-  FETCH_ADS_ANSWER_SUCCESS,
-  FETCH_ADS_ANSWER_FAILURE,
+  FETCH_JOBS_ANSWER_REQUEST,
+  FETCH_JOBS_ANSWER_SUCCESS,
+  FETCH_JOBS_ANSWER_FAILURE,
   FETCH_ANSWER_REQUEST,
   FETCH_ANSWER_SUCCESS,
   FETCH_ANSWER_FAILURE,
@@ -47,19 +47,19 @@ export const postMessageAnswerSuccess = res => ({
 });
 
 
-export const fetchAdsAnsweredRequest = payload => ({
-  type: FETCH_ADS_ANSWER_REQUEST,
+export const fetchJobsAnsweredRequest = payload => ({
+  type: FETCH_JOBS_ANSWER_REQUEST,
   payload
 });
 
-export const fetchAdsAnsweredSuccess = res => ({
-  type: FETCH_ADS_ANSWER_SUCCESS,
+export const fetchJobsAnsweredSuccess = res => ({
+  type: FETCH_JOBS_ANSWER_SUCCESS,
   res
 });
 
 
-export const fetchAdsAnsweredFailure = errors => ({
-  type: FETCH_ADS_ANSWER_FAILURE,
+export const fetchJobsAnsweredFailure = errors => ({
+  type: FETCH_JOBS_ANSWER_FAILURE,
   errors
 });
 

nextjs/actions/media.js

@@ -1,7 +1,14 @@
 import {
     UPLOAD_MEDIA_REQUEST,
     UPLOAD_MEDIA_FAILURE,
-    UPLOAD_MEDIA_SUCCESS
+    UPLOAD_MEDIA_SUCCESS,
+    UPLOAD_MEDIA_PRES_REQUEST,
+    UPLOAD_MEDIA_PRES_FAILURE,
+    UPLOAD_MEDIA_PRES_SUCCESS,
+    UPLOAD_MEDIA_CV_REQUEST,
+    UPLOAD_MEDIA_CV_FAILURE,
+    UPLOAD_MEDIA_CV_SUCCESS,
+  
   } from "../types";
   
   export const uploadMedia = payload => ({
@@ -18,6 +25,35 @@ import {
     type: UPLOAD_MEDIA_SUCCESS,
     res
   });
+
+  export const uploadMediaPres = payload => ({
+    type: UPLOAD_MEDIA_PRES_REQUEST,
+    payload
+  });
   
+  export const uploadMediaPresFailure = errors => ({
+    type: UPLOAD_MEDIA_PRES_FAILURE,
+    errors
+  });
   
-  
+  export const uploadMediaPresSuccess = res => ({
+    type: UPLOAD_MEDIA_PRES_SUCCESS,
+    res
+  });
+
+  export const uploadMediaCv = payload => ({
+    type: UPLOAD_MEDIA_CV_REQUEST,
+    payload
+  });
+  
+  export const uploadMediaCvFailure = errors => ({
+    type: UPLOAD_MEDIA_CV_FAILURE,
+    errors
+  });
+  
+  export const uploadMediaCvSuccess = res => ({
+    type: UPLOAD_MEDIA_CV_SUCCESS,
+    res
+  });
+  
+

nextjs/components/atoms/ChatCard.js

@@ -75,7 +75,7 @@ export default function ChatCard(props) {
                 className={classes.messageDate}
                 align="center"
             >
-                Envoyée le  {(new Date(props.message.c_time)).toLocaleDateString("fr-FR")} à {(new Date(props.message.c_time)).toLocaleTimeString("fr-FR")}
+                Envoyé le  {(new Date(props.message.c_time)).toLocaleDateString("fr-FR")} à {(new Date(props.message.c_time)).toLocaleTimeString("fr-FR")}
             </Typography>
         </Fragment>
     )

nextjs/components/atoms/IconText.js

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

nextjs/components/atoms/IconTextInline.js

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

nextjs/components/atoms/JobPosting.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { JobPostingJsonLd } from 'next-seo';
+
+const JobPosting = props => {
+    return (
+        
+            <JobPostingJsonLd
+        datePosted={props.job_date}
+        description={props.job_description}
+        hiringOrganization={{
+            name: props.job_brand,
+            sameAs: props.job_brand_link,
+        }}
+        jobLocation={{
+            addressLocality: props.job_ville,
+            addressRegion: props.job_dept,
+            // postalCode: props.job_location,
+            streetAddress: props.job_location,
+            addressCountry: props.job_pays,
+
+        }}
+        title={props.job_title}
+        validThrough={props.job_date_fin}
+        applicantLocationRequirements="FR"
+        employmentType = {props.job_contract_type + ","+props.job_temps_type }
+        />
+        
+        
+    )
+}
+
+JobPosting.propTypes = {
+    // seo_title: PropTypes.string.isRequired,
+    // seo_description: PropTypes.string.isRequired,
+    // seo_url: PropTypes.string.isRequired,
+    // image: PropTypes.string.isRequired,
+}
+
+export default JobPosting

nextjs/components/atoms/Messager.js

@@ -4,8 +4,6 @@ import { withStyles } from '@material-ui/core/styles'
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 
-import Link from 'next/link'
-
 const styles = theme => ({
     close: {
         padding: theme.spacing.unit / 2,
@@ -96,7 +94,7 @@ class Messager extends Component {
                     }}
                     message={<span id="message-id">{this.state.title + " : " + this.state.body}</span>}
                     action={[
-                        <Link href={this.state.link}><a>Voir</a></Link>,
+                        <a href={this.state.link}>Voir</a>,
                         <IconButton
                             key="close"
                             aria-label="Close"

nextjs/components/atoms/OgHead.js

@@ -6,8 +6,9 @@ const OgHead = props => {
     return (
         <Head>
             <title key="title">{props.seo_title}</title>
-            <meta name="description" key="description" content={props.seo_description} />
-
+            <meta name="robots" content="noindex, nofollow"></meta>
+            <meta name="description" kenoindexy="description" content={props.seo_description} />
+            <meta name="keywords" content={props.seo_key}/>
             <meta key="og:url" property="og:url" content={props.seo_url} />
             <meta key="og:type" property="og:type" content="article" />
             <meta key="og:title" property="og:title" content={props.seo_title} />
@@ -16,10 +17,20 @@ const OgHead = props => {
                 property="og:description"
                 content={props.seo_description}
             />
+            <meta name="keywords" content={props.seo_key}/>
             <meta key="og:image" property="og:image" content={props.image} />
-
-            <link rel="canonical" href={"https://www.application.bzh/" + props.seo_url} />
+            <meta name="twitter:card" content="summary"/>
+            <meta name="twitter:site" content="@TalentsTube"/>
+            <meta name="twitter:title" content={props.seo_title}/>
+            <meta name="twitter:description" content={props.seo_description}/>
+            <meta name="twitter:image" content={props.image}/>
+            {/* <meta httpEquiv='cache-control' content='no-store,no-cache'></meta>
+            <meta httpEquiv='expires' content='0'></meta>
+            <meta httpEquiv='pragma' content='no-cache'></meta> */}
+            {/* <link rel="canonical" href={ props.seo_url} />     */}
+            
         </Head>
+        
     )
 }
 

nextjs/components/atoms/SimpleCollapse.js

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

nextjs/components/atoms/VideoVimeo.js

@@ -30,6 +30,32 @@ const useStyles = makeStyles(theme => ({
                 height: '100%',
             },
         },
+    },
+    videoPresentation: {
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        paddingBottom: '56%', /* 16:9  58%*/
+        '& iframe': {
+            position: 'absolute',
+            top: 0,
+            left: 'calc(50% - 50vw)',
+            width: '100vw',
+            height: '100%',
+        },
+        [theme.breakpoints.up('md')]: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            paddingBottom: '56.5%', /* 16:9 */
+            '& iframe': {
+                position: 'absolute',
+                top: 0,
+                left: 'calc(50% - 32vw)',
+                width: '64vw',
+                height: '100%',
+            },
+        },
     }
 }));
 
@@ -37,14 +63,20 @@ export default function VideoVimeo(props) {
 
     const {videoId, title, options, classesOverride, autoplay} = props;
     const classes = useStyles();
-
+    let className = classes.video;
+    if (classesOverride) {
+        className = classes.videoPresentation;
+    }
+  
     return (
-        <section className={classes.video +' '+classesOverride}>
+        
+        <section className={className +' '+classesOverride}>
             <iframe className='player' 
             src={"https://player.vimeo.com/video/"+ videoId + options+"?autoplay="+autoplay} 
             frameBorder="0" 
             title={title} 
             webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen></iframe>
+            
         </section>
     )
 }

nextjs/components/atoms/Webpush.js

@@ -2,14 +2,13 @@ import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from "react-redux";
 import { subscribeUserToPushRequest } from '../../actions/user'
+import getConfig from 'next/config'
+
 
 import { urlB64ToUint8Array, payloadFromSubscription } from './Utility'
 
 var swRegistration = null
 
-//TODO: put in config
-const applicationServerPublicKey = 'BNFyiyPiLH97Dgc0m1vXluUNaCN6y3Hkgd4YcqS2lVkP8my3tq2D5gM5g7cY6R4VxC7GljSzkLRu+k+oO+2TtjU=';
-
 const WebPushContext = React.createContext()
 
 function WebPushConsumer(props) {
@@ -26,6 +25,8 @@ function WebPushConsumer(props) {
     </WebPushContext.Consumer>
   )
 }
+
+const { publicRuntimeConfig } = getConfig()
 class WebPush extends Component {
   static Consumer = WebPushConsumer;
 
@@ -35,7 +36,7 @@ class WebPush extends Component {
 
   constructor(props) {
     super(props)
- }
+  }
 
   componentDidMount() {
     if (swRegistration === null) {
@@ -44,12 +45,12 @@ class WebPush extends Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
+    console.log("isUserSubscribedToPush ::: " + nextProps.isUserSubscribedToPush);
     if (this.props.subscriveUserEnabled != nextProps.subscriveUserEnabled && nextProps.subscriveUserEnabled) {
       this.onSubscribeUser()
     }
-
-    if(!!nextProps.isUserSubscribedToPush){
-      this.setState({on: true})
+    if (!!nextProps.isUserSubscribedToPush) {
+      this.setState({ on: true })
     }
   }
 
@@ -80,99 +81,97 @@ class WebPush extends Component {
     }
   }
 
-onSubscribeUser = () => {
-  if (swRegistration == null) {
-    return
+  onSubscribeUser = () => {
+    if (swRegistration == null) {
+      return
+    }
+
+    swRegistration.pushManager.getSubscription()
+      .then((subscription) => {
+        var isSubscribed = !(subscription === null)
+        if (isSubscribed) {
+          this.onUpdateSubscriptionOnServer(subscription)
+        } else {
+          const applicationServerKey = urlB64ToUint8Array(publicRuntimeConfig.applicationServerPublicKey)
+          swRegistration.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: applicationServerKey
+          })
+            .then((subscription) => {
+              console.log('User is subscribed.')
+              if (this.onUpdateSubscriptionOnServer) {
+                this.onUpdateSubscriptionOnServer(subscription)
+              }
+            })
+            .catch((err) => {
+              console.log('Failed to subscribe the user: ', err)
+              if (onSubscribeFailed) {
+                this.onSubscriptionFailed(err)
+              }
+            });
+        }
+      })
   }
 
-  swRegistration.pushManager.getSubscription()
-    .then((subscription) => {
-      var isSubscribed = !(subscription === null)
-      if (isSubscribed) {
-        this.onUpdateSubscriptionOnServer(subscription)
-      } else {
-        const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey)
-        swRegistration.pushManager.subscribe({
-          userVisibleOnly: true,
-          applicationServerKey: applicationServerKey
-        })
-          .then((subscription) => {
-            console.log('User is subscribed.')
-            if (this.onUpdateSubscriptionOnServer) {
-              this.onUpdateSubscriptionOnServer(subscription)
-            }
-          })
-          .catch((err) => {
-            console.log('Failed to subscribe the user: ', err)
-            if (onSubscribeFailed) {
-              this.onSubscriptionFailed(err)
-            }
-          });
-      }
-    })
-}
+  onUnSubscribeUser = () => {
+    swRegistration.pushManager.getSubscription()
 
-onUnSubscribeUser = () => {
-  swRegistration.pushManager.getSubscription()
+      .then((subscription) => {
+        if (subscription) {
 
-    .then((subscription) => {
-      if (subscription) {
+          return subscription.unsubscribe();
+        }
+      })
+      .then(() =>
+        this.setState(({ on }) => ({ on: false })))
+      //TODO: facultatif update DB
+      // .then(() => {
+      //   return fetch(//, {
+      //     method: 'POST',
+      //     headers: {
+      //       'Content-Type': 'application/json'
+      //     },
+      //     body: JSON.stringify(subscription)
+      //   })
+      //     .then((response) => {
+      //       if (!response.ok) {
+      //         throw new Error('Bad status code from server.');
+      //       }
+      //       ///TODO bind UI
+      //       return true;
+      //     })
 
-        return subscription.unsubscribe();
-      }
-    })
-    .then(() =>
-      this.setState(({ on }) => ({ on: false })))
-    //TODO: facultatif update DB
-    // .then(() => {
-    //   return fetch(//, {
-    //     method: 'POST',
-    //     headers: {
-    //       'Content-Type': 'application/json'
-    //     },
-    //     body: JSON.stringify(subscription)
-    //   })
-    //     .then((response) => {
-    //       if (!response.ok) {
-    //         throw new Error('Bad status code from server.');
-    //       }
-    //       ///TODO bind UI
-    //       return true;
-    //     })
+      // })
+      .catch((err) => {
+        console.error('Failed to unsubscribe the user.', err);
 
-    // })
-    .catch((err) => {
-      console.error('Failed to unsubscribe the user.', err);
+      });
+  }
 
-    });
-}
+  onRegisterServiceWorker = () => {
+    navigator.serviceWorker.register('/static/js/Edeclic-service-worker.js')
+      .then(function (swReg) {
+        console.info('Service Worker is registered', swReg);
 
-onRegisterServiceWorker = () => {
-  navigator.serviceWorker.register('/static/js/Edeclic-service-worker.js')
-    .then(function (swReg) {
-      console.info('Service Worker is registered', swReg);
+        swRegistration = swReg;
+      })
+  }
 
-      swRegistration = swReg;
-    })
-}
-
-render() {
-  return (<WebPushContext.Provider
-    value={{ on: this.state.on, toggleSubscription: this.toggleSubscription }}
-    {...this.props}
-  />)
-}
+  render() {
+    return (<WebPushContext.Provider
+      value={{ on: this.state.on, toggleSubscription: this.toggleSubscription }}
+      {...this.props}
+    />)
+  }
 }
 
 WebPush.propTypes = {
 }
 
 function mapStateToProps(state) {
-
-
   return {
-    isUserSubscribedToPush: state.isUserSubscribedToPush
-};
+    isUserSubscribedToPush: state.user.isUserSubscribedToPush
+  };
 }
 
 export default connect(mapStateToProps, { subscribeUserToPushRequest })(WebPush);

nextjs/components/organisms/AccountEtape1.js

@@ -0,0 +1,503 @@
+import React, { useState, Component, Fragment } from 'react'
+import { withStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import { Alert, AlertTitle } from '@material-ui/lab';
+import Snackbar from '@material-ui/core/Snackbar';
+import { connect } from 'react-redux'
+import { updateUserRequest } from '../../actions/user'
+import getConfig from 'next/config'
+import Validator from "validator";
+import AccountProfile from '../organisms/AccountProfile';
+import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
+import {
+    Button,
+} from '@material-ui/core';
+
+const styles = theme => ({
+    container: {
+        width: '85%',
+    },
+    form: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '24px',
+        paddingBottom: theme.spacing(8),
+        marginBottom: theme.spacing(8),
+        '&>div': {
+            marginTop: theme.spacing(1.5),
+            marginBottom: theme.spacing(1.5),
+        }
+
+    },
+    textField: {
+        width: '85%',
+        '&:disabled': {
+            color: theme.palette.secondary.dark,
+        },
+        '& label': {
+            color: theme.palette.primary.dark,
+        },
+        '& fieldset:hover': {
+            borderColor: theme.palette.primary.main + ' !important',
+        },
+    },
+    textFieldSmall: {
+        width: '48%',
+        '&:disabled': {
+            color: theme.palette.secondary.dark,
+        },
+        '& label': {
+            color: theme.palette.primary.dark,
+        },
+        '& fieldset:hover': {
+            borderColor: theme.palette.primary.main + ' !important',
+        },
+        padding: '5px',
+    },
+});
+
+const { publicRuntimeConfig } = getConfig();
+
+//https://xd.adobe.com/view/ba98331a-9145-4d67-7e27-25a36e519ef4-cca9/screen/a96779d7-bdb3-410a-8f19-e6987acb98ee/Candidature-Step-3
+class AccountEtape1 extends Component {
+
+    constructor(props) {
+        super(props);
+        
+        // This binding is necessary to make `this` work in the callback
+        this.handleChange = this.handleChange.bind(this);
+        this.handleClose = this.handleClose.bind(this);
+        this.onBlur = this.onBlur.bind(this)
+        this.onSubmit = this.onSubmit.bind(this);
+    }
+
+    state = {
+        file: null,
+        firstname: '',
+        lastname: '',
+        email:'',
+        phone: '',
+        currentJob: '',
+        address1:'',
+        address2 : '',
+        zipCode : '',
+        city : '',
+        country : '',
+        linkedin: '',
+        twitter: '',
+        website: '',
+        mediaId: null,
+        companyId: null,
+        
+    };
+
+    handleChange = (e) => {
+        this.setState({ [e.target.name]: e.target.value });
+
+        //console.log(this.refs.myTextField.input.value);
+        //this.soumettre(e);
+       
+    }
+    
+    handleClose = (e, reason) => {
+      
+      if (reason === 'clickaway') {
+        return;
+      }
+  
+      //setOpen(false);
+    };
+
+    onBlur(e) {
+        console.log("blur")
+        this.setState({ [e.target.name]: e.target.value });
+        
+        this.soumettre(e.target.name, "unitaire");
+      }     
+    
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        this.setState({
+            firstname: nextProps.user.firstname,
+            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,
+            errors: !!!nextProps.errors ? { errors: { message: "" } } : nextProps.errors,
+        })
+    }
+
+    componentDidMount() {
+        this.setState({
+            firstname: this.props.user.firstname,
+            lastname: this.props.user.lastname,
+            phone: this.props.user.phone,
+            email: this.props.user.email,
+            address1: this.props.user.address1,
+            address2 : this.props.user.address2,
+            zipCode : this.props.user.zipCode,
+            city : this.props.user.city,
+            country : this.props.user.country,
+            currentJob: this.props.user.currentJob,
+            linkedin: this.props.user.linkedin,
+            twitter: this.props.user.twitter,
+            website: this.props.user.website,
+        })
+        
+    }
+
+    onSubmit = (e) => {
+        
+        e.preventDefault();
+        console.log("submit")
+        console.log(e.keyCode)
+        
+        this.soumettre(e.target.name, "global")
+        
+    }
+    soumettre(champ, type){
+        console.log("soumettre");
+        console.log(champ);
+        const errors = this.validate(this.state, champ, type);
+        const success = {};
+        this.setState({ errors });
+        if (!this.state.errors || !this.state.errors.message){
+            
+            success.message ="Profil mis à jour";
+            this.setState({ success });
+            const data = new FormData()
+            data.append('firstname', this.state.firstname)
+            data.append('lastname', this.state.lastname)
+            data.append('phone', this.state.phone)
+            //data.append('email', this.state.email)
+            data.append('currentJob', this.state.currentJob)
+            data.append('address1', this.state.address1)
+            data.append('address2', this.state.address2)
+            data.append('zipCode', this.state.zipCode)
+            data.append('city', this.state.city)
+            data.append('country', this.state.country)
+            data.append('linkedin', this.state.linkedin)
+            data.append('twitter', this.state.twitter)
+            data.append('website', this.state.website)
+            
+            //TODO:maybe add this two in a single transactionnal saga
+            this.props.updateUserRequest(data) 
+            
+            
+        }
+    }
+    validate(data,champ, type){
+        console.log("valdiate")
+        console.log(champ);
+        const errors = {};
+        errors.message ="";
+        //if (!Validator.isEmail(data.currentJob)) errors.message += "Le poste actuel doit etre un email\n";
+        if (type=="global" || (champ=="firstname" &&  data.firstname=="")) errors.message += "Veuillez saisir votre prénom<br />";
+        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 ((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);
+        
+        return errors;
+    };
+    AfficherErreurs() {
+        if (!this.state.errors || !this.state.errors.message){
+            return "";
+        }else if (this.state.errors.length != 0 && this.state.errors.message!="") {
+            return (
+            <Alert severity="error">
+               { ReactHtmlParser(this.state.errors.message)} 
+            </Alert>
+            );
+        }
+        return ""; 
+    }
+
+    
+
+    AfficherSuccess() {
+    //   if (this.state.success && this.state.success.length != 0 && this.state.success.message != "") {      
+    //       return (
+    //         <Snackbar open={open} autoHideDuration={1000} onClose={() => this.setState({open: false})}>
+    //           <Alert onClose={() => this.setState({open: false})} severity="success">
+    //             {ReactHtmlParser(this.state.success.message)}
+    //           </Alert>
+    //         </Snackbar>
+            
+              
+    //       );
+        
+    //   }
+      return "";
+    }
+
+    
+
+    inputFilesystemChange = (e) => {
+
+        console.log("inputFilesystemChange");
+        var file = e.target.files[0]
+        this.setState({ picture: file })
+
+        const data = new FormData()
+        data.append('file', file)
+        this.props.updateUserPictureRequest(data)
+    }
+
+    
+
+    render() {
+        const { classes, user } = this.props
+        const logoUrl = user.picture;
+        function refresh() {
+            document
+                .location
+                .reload(true);
+            
+        }
+        return (
+          <section className={classes.container}>
+            <form className={classes.form}
+                    autoComplete="off" focused="true" name="monForm" ref="formToSubmit">
+                    {/* {!!logoUrl && <Avatar className={classes.logo}
+                        classes={{ img: classes.MuiAvatarImg }}
+                        src={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentUrl + logoUrl} alt="candidatLogo" />} */}
+
+                    {/* {!!user.pictureLoading && <Loader />}    
+                    {!!!user.pictureLoading && !!!logoUrl &&
+                        (<Fragment><input
+                            type="file" accept="image/*" capture="filesystem"
+                            className={classes.input}
+                            style={{ display: 'none' }}
+                            id="raised-button-file"
+                            multiple
+                            type="file"
+                            onChange={this.inputFilesystemChange}
+                        />
+                            <label htmlFor="raised-button-file">
+                                <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
+                                    <img alt="talents-tube" src='/static/images/default/account-avatar-default.svg'
+                                        className={classes.iconButton} />
+                                    <Typography align="left" className={classes.textButton}>
+                                        J'<span className={classes.underlined}>importe</span> ma photo de profil
+                                    </Typography>
+                                    <KeyboardArrowRightIcon className={classes.InputKeyboardArrowRightIcon} />
+                                </Button>
+                            </label></Fragment>)
+                    } */}
+                    {this.AfficherErreurs()}
+                    {this.AfficherSuccess()}
+                    
+
+                    <TextField
+                        name="firstname"
+                        required
+                        id="outlined-required"
+                        label="Prénom"
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        value={this.state.firstname}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur} 
+                    />
+
+                    <TextField
+                        name="lastname"
+                        required
+                        id="outlined-required"
+                        label="Nom"
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        value={this.state.lastname}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur} 
+                    />
+
+                    <TextField
+                        disabled
+                        name="email"
+                        id="outlined"
+                        label="E-mail"
+                        required
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        value={this.state.email}
+                        onChange={this.handleChange}
+                        type="mail"
+                        onBlur={this.onBlur} 
+                    />
+
+                    <TextField
+                        name="phone"
+                        id="outlined"
+                        label="Téléphone"
+                        required
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        value={this.state.phone ? this.state.phone: ''}
+                        onChange={this.handleChange}
+                        type="tel"
+                        onBlur={this.onBlur} 
+                    />
+
+                    
+
+                    <TextField
+                        name="currentJob"
+                        id="outlined"
+                        label="Poste actuel"
+                        required
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        value={this.state.currentJob  ? this.state.currentJob : ''}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur} 
+                    />
+
+                    <TextField
+                        name="address1"
+                        id="outlined"
+                        label="Adresse"
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        value={this.state.address1 ? this.state.address1 : ''}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur} 
+                    />
+
+                    <TextField
+                        name="address2"
+                        id="outlined"
+                        label="Adresse complémentaire"
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        value={this.state.address2 ? this.state.address2  : ''}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur} 
+                    />    
+                    <div className={classes.container}>
+                    <TextField
+                        name="zipCode"
+                        id="outlined"
+                        label="Code postal"
+                        className={classes.textField}
+                        classes={{ root: classes.textFieldSmall }}
+                        variant="outlined"
+                        value={this.state.zipCode ? this.state.zipCode : ''}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur} 
+                    /> 
+
+                    <TextField
+                        name="city"
+                        id="outlined"
+                        label="Ville"
+                        className={classes.textField}
+                        classes={{ root: classes.textFieldSmall }}
+                        variant="outlined"
+                        value={this.state.city ? this.state.city : ''}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur} 
+                    />      
+
+                    <TextField
+                        name="country"
+                        id="outlined"
+                        label="Pays"
+                        className={classes.textField}
+                        classes={{ root: classes.textFieldSmall }}
+                        variant="outlined"
+                        value={this.state.country ? this.state.country : ''}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur} 
+                    />
+                    </div>           
+
+                    <TextField
+                        name="linkedin"
+                        id="outlined"
+                        label="Linkedin"
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        placeholder="http://www.linkedin.com/in/"
+                        value={this.state.linkedin  ? this.state.linkedin : ''}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur} 
+
+                    />
+
+                    <TextField
+                        name="twitter"
+                        id="outlined"
+                        label="Twitter"
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        placeholder="http://twitter.com/.."
+                        value={this.state.twitter   ? this.state.twitter : ''}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur} 
+                    />
+
+                    <TextField
+                        name="website"
+                        id="outlined"
+                        label="Site internet"
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        placeholder="http://monsite.fr"
+                        value={this.state.website ? this.state.website : ''}
+                        onChange={this.handleChange}
+                        onBlur={this.onBlur} 
+                    />
+                    <Button
+                            type="submit"
+                            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>
+                </div> */}
+            </section>
+        )
+    }
+}
+
+function mapStateToProps(state, ownProps) {
+    return {
+        user: state.user ,
+        loading: !!state.user.loading,
+        pictureLoading: !!state.user.pictureLoading,
+        errors: state.user.errors || ownProps.errors,
+        mediaId: state.media.message && state.media.message.mediaId,
+    };
+}
+
+export default withStyles(styles)(connect(mapStateToProps, {  updateUserRequest })(AccountEtape1));

nextjs/components/organisms/AccountEtape2.js

@@ -0,0 +1,357 @@
+import React, {Fragment} from 'react'
+import {connect} from "react-redux";
+import {makeStyles} from '@material-ui/styles';
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import {Button, Typography} from '@material-ui/core';
+import dynamic from 'next/dynamic'
+import {withStyles} from '@material-ui/core/styles'
+import {uploadMediaPres} from '../../actions/media'
+import {errorMessageSelector} from '../../reducers/media'
+import {fetchCompanyRequest} from '../../actions/companies'
+import {fetchCurrentUserRequest} from '../../actions/user'
+import VideoVimeo from '../atoms/VideoVimeo'
+import Router from 'next/router'
+import LoaderVideo from '../templates/loaderVideo'
+import Ar from "lodash/array"
+import Snackbar from '@material-ui/core/Snackbar';
+import { Alert, AlertTitle } from '@material-ui/lab';
+import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
+import Grid from '@material-ui/core/Grid';
+import Container from '@material-ui/core/Container';
+import Hidden from '@material-ui/core/Hidden';
+
+const styles = theme => ({
+    container: {
+        width: '100%',
+    },
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        margin: theme.spacing(1),
+        flexWrap: 'wrap',
+        overflow: 'hidden',
+        backgroundColor: theme.palette.background.paper,
+    },
+    
+    recorderContainer: {
+        //display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%'
+    },
+    rootButton: {
+        textTransform: 'inherit'
+    },
+    underlined: {
+        textDecoration: 'underline'
+    },
+    textButton: {
+        fontWeight: '700',
+        fontSize: '1.15em',
+        paddingLeft: theme.spacing(2)
+    },
+    videoPresentation: {    
+        width: "100%",
+        height: "100%"
+    },
+    conseilButton: {
+        color: "#ffffff",
+        backgroundColor:  "#25D89A",
+        padding: theme.spacing(3, 2),
+        margin: theme.spacing(1),
+        width: "100%",
+        textAlign: "right",
+        boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
+                'px rgba(0, 0, 0, 0.14)',
+        '&:hover': {
+            color: "#ffffff",
+            backgroundColor:  "#25D89A",
+        }
+    },
+    captureButton: {
+        color: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.main,
+        padding: theme.spacing(5, 2),
+        margin: theme.spacing(1),
+        boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.14)',
+        '&:hover': {
+          backgroundColor: theme.palette.primary.main,
+        },
+      },
+    importButton: {
+        color: theme.palette.primary.main,
+        backgroundColor:  theme.palette.secondary.main,
+        padding: theme.spacing(3, 2),
+        margin: theme.spacing(1),
+        width: "100%",
+        textAlign: "right",
+        boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
+                'px rgba(0, 0, 0, 0.14)',
+        '&:hover': {
+            color: theme.palette.primary.main,
+            backgroundColor:  theme.palette.secondary.main,
+        }
+    },
+    InputKeyboardArrowDownIconBlank: {
+        fontSize: '2.5em',
+        color: "#ffffff",
+        textAlign: "right"
+    },
+    InputKeyboardArrowDownIcon: {
+        fontSize: '2.5em',
+        color: "#1689FB",
+        textAlign: "right"
+    }
+});
+const Recorder = dynamic(() => import ('../organisms/Recorder'), {ssr: false})
+class Etape2 extends React.Component {
+    state = {
+        loading: true,
+        activeStep: 0,
+        data: {},
+        openSnack: false,
+        errors: {},
+        success : {}
+    };
+    
+
+    componentDidMount() {
+        localStorage.setItem('loginRedirect', window.location)
+
+        if (!!!localStorage.getItem('ttJWT')) {
+            Router.push("/Login")
+        } else 
+            this.setState({loading: false, firstname: this.props.user.firstname, videoPres: this.props.user.videoPres, video: this.props.user.presentation_video_id})
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+
+        this.setState({
+            loading: nextProps.loading,
+            openSnack: !!!_.isEmpty(nextProps.errors),
+            errors: !!!nextProps.errors
+                ? {
+                    errors: {
+                        message: ""
+                    }
+                }
+                : nextProps.errors,
+            videoPres: nextProps.videoPres,
+            video: nextProps.video
+        })
+        //window.location.reload(false);
+        if (nextProps.media.status === 'success') {
+            const success = {};
+            success.message ="Vidéo mise à jour";
+            this.setState({ success });
+            this.setActiveStep(1);
+        }
+    }
+
+    setActiveStep = (step) => {
+        this.setState({activeStep: step})
+    }
+
+    inputFilesystemChange = (e) => {
+        this.uploadMediaPres(e)
+    }
+
+    inputCamRecorderChange = (e) => {
+        this.uploadMediaPres(e)
+    }
+
+    uploadMediaPres = (e) => {
+        var file = e.target.files[0]
+
+        const data = new FormData()
+        data.append('upload', file)
+        //this.setState({ videoPres: videoPres })
+        
+        this
+            .props
+            .uploadMediaPres(data)
+    }
+
+    AfficherSuccess() {
+      if (!this.state.success || !this.state.success.message) { 
+          
+      } else if (this.state.success.length != 0 && this.state.success.message != "") {
+          return (  
+            <Snackbar open={open} autoHideDuration={1000} onClose={() => this.setState({open: false})}>
+              <Alert onClose={() => this.setState({open: false})} severity="success">
+                {ReactHtmlParser(this.state.success.message)}
+              </Alert>
+            </Snackbar> 
+          );
+      }
+      return "";
+    }
+
+    handleClose = (event, reason) => {
+        this.setState({openSnack: false});
+    }
+   
+    render() {
+        const {classes, company} = this.props;
+        const {loading, activeStep} = this.state;
+        let video;
+        if (this.state.videoPres) {
+            video = <VideoVimeo videoId={Ar.last(_.split(this.state.videoPres, '/'))}  autoplay='1' classesOverride="videoPresentation"/>;
+        } else {
+            video = "";
+        }
+        return (
+            <section className={classes.container}>
+                <Fragment>
+                    {this.AfficherSuccess()}
+                    { loading ? <LoaderVideo/>  : <div></div> }
+                    
+                    <div className={classes.root}>
+                    <Hidden xsUp>
+                            &nbsp;                   
+                        </Hidden>
+                    <Container maxWidth="md">
+                        
+                        <Grid container
+                            justify="center"
+                            alignItems="center" 
+                            spacing={2}>
+                            <Grid item xs={12} sm={12} md={12} lg={6} lg={6}>
+                                
+
+
+                            { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
+                                (
+                                    <Fragment>
+                                    <input
+                                        type="file" accept="video/*" capture="camcorder"
+                                        className={classes.input}
+                                        style={{ display: 'none' }}
+                                        id="record-button-file"
+                                        multiple
+                                        onChange={this.inputCamRecorderChange}
+                                    />
+                                    <label htmlFor="record-button-file">
+                                        <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
+                                        <img alt="talents-tube" src='/static/images/capture.svg' className={classes.iconButton} />
+                                        <Typography align="left" className={classes.textButton}>
+                                            Je <span className={classes.underlined}>réalise</span> ma vidéo de présentation
+                                        </Typography>
+                                        <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                                        </Button>
+                                    </label>
+                                    </Fragment>
+                                ):
+                                (
+
+                                
+                                <div className={classes.recorderContainer}>
+                                    <Recorder uploader={this.props.uploadMediaPres} titreBouton="Remplacer ma vidéo"/>
+                                </div>
+                                )
+                            }
+                            </Grid>
+                            <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
+                                <div> 
+                                    <label htmlFor="import-conseil">
+                                        <Button
+                                            component="span"
+                                            className={classes.conseilButton}
+                                            classes={{
+                                            root: classes.rootButton}}
+                                            onClick={() => Router.push(`/Conseils`)}>
+                                            <img
+                                                alt="talents-tube"
+                                                src='/statique/images/conseils-talentstube.svg'
+                                                className={classes.iconButton}/>
+                                            <Typography align="left" className={classes.textButton}>
+                                                <span className={classes.underlined}>Comment</span> créer ma vidéo 
+                                            </Typography>
+                                            <KeyboardArrowDownIcon className={classes.InputKeyboardArrowDownIconBlank}/>
+                                        </Button>
+                                    </label>
+                                </div>
+                                <div>
+                                        <input
+                                            type="file"
+                                            accept="video/*"
+                                            className={classes.input + ' cypButtonImportVid'}
+                                            style={{display: 'none'}}
+                                            id="import-button-file"
+                                            onChange={this.inputFilesystemChange}/>
+                                        <label htmlFor="import-button-file">
+                                            <Button
+                                                component="span"
+                                                className={classes.importButton}
+                                                classes={{
+                                                root: classes.rootButton}}>
+                                                <img
+                                                    alt="talents-tube"
+                                                    src='/statique/images/Import.svg'
+                                                    className={classes.iconButton}/>
+                                                <Typography align="left" className={classes.textButton}>
+                                                    J'<span className={classes.underlined}>importe</span> ma vidéo de présentation
+
+                                                </Typography>
+                                                <KeyboardArrowDownIcon className={classes.InputKeyboardArrowDownIcon}/>
+                                            </Button>
+                                        </label>
+                                    </div>
+                            
+                            </Grid> 
+                            <Hidden xsUp>
+                                &nbsp;                   
+                            </Hidden>
+                        
+                            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+                                <div className={classes.videoPresentation}>
+                                    {video}   
+                                </div>                
+                            </Grid>
+                            
+                        </Grid>
+                    </Container>      
+                    </div>
+                    {/* <div className={classes.textContainer}>
+                        
+                    </div> */}
+                            
+                </Fragment>
+            </section>
+
+        );
+    }
+
+}
+
+Etape2.getInitialProps = function (context) {
+
+    const {companyId} = context.query
+    const {res} = context
+    //TODO :really needed ?
+    context
+        .store
+        .dispatch(fetchCurrentUserRequest())
+
+    if (!!companyId) 
+        context.store.dispatch(fetchCompanyRequest(companyId))
+
+    return {}; //leave this please
+}
+
+function mapStateToProps(state) {
+
+    return {
+        loading: !!state.media.loading,
+        media: state.media,
+        offre: state.ad,
+        //errors:  errorMessageSelector(state),
+        user: state.user,
+        company: state.company
+    };
+}
+
+export default withStyles(styles)(connect(mapStateToProps, {fetchCurrentUserRequest, fetchCompanyRequest, uploadMediaPres})(Etape2));

nextjs/components/organisms/AccountEtape3.js

@@ -0,0 +1,257 @@
+import React, { Fragment } from 'react';
+import { connect } from "react-redux";
+import { fetchCurrentUserRequest } from '../../actions/user'
+import { fetchCompanyRequest } from '../../actions/companies'
+import { uploadMediaCv } from '../../actions/media'
+import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/styles';
+import { Button, Typography, Divider, Hidden } from '@material-ui/core';
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import LoaderVideo from '../../components/templates/loaderVideo'
+import Snack from '../../components/atoms/snack';
+import Snackbar from '@material-ui/core/Snackbar';
+import { Alert, AlertTitle } from '@material-ui/lab';
+import ReactHtmlParser from 'react-html-parser';
+import getConfig from 'next/config'
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    margin: theme.spacing(1),
+  },
+  rootButton: {
+    textTransform: 'inherit',
+  },
+  underlined: {
+    textDecoration: 'underline',
+  },
+  textButton: {
+    fontWeight: '700',
+    fontSize: '1.15em',
+    paddingLeft: theme.spacing(2),
+  },
+  InputKeyboardArrowDownIcon: {
+    fontSize: '2.5em',
+    color: theme.palette.primary.main,
+  },
+  importButton: {
+    color: theme.palette.primary.main,
+    backgroundColor:  theme.palette.secondary.main,
+    padding: theme.spacing(3, 2),
+    margin: theme.spacing(1),
+    width: "370px",
+    boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
+            'px rgba(0, 0, 0, 0.14)',
+    '&:hover': {
+        color: theme.palette.primary.main,
+        backgroundColor:  theme.palette.secondary.main,
+    }
+  },
+});
+
+
+const { publicRuntimeConfig } = getConfig();
+class Etape3 extends React.Component {
+  state = {
+    loading: true,
+    openSnack: false,
+    cv:false,
+    errors: {},
+    success : {}
+  };
+
+  componentDidMount() {
+    localStorage.setItem('loginRedirect', window.location)
+
+    if(!!!localStorage.getItem('ttJWT'))
+    {
+      Router.push("/Login")
+    }
+    else
+      this.setState({
+        loading: false,
+        cvLink: this.props.user.cv
+      })
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    
+    this.setState({
+        cvLink: nextProps.cvLink,
+        loading: nextProps.loading,
+        openSnack: !!!_.isEmpty(nextProps.errors),
+        errors: !!!nextProps.errors ? { errors: { message: "" } } : nextProps.errors,
+    })
+    this.state.cvLink = nextProps.cvLink;
+    if (nextProps.loading) {
+      const success = {};
+      success.message ="CV mis à jour";
+      console.log("CV mis à jour!!!")
+      if(this.state.cvLink) console.log(this.state.cvLink)
+      this.setState({ success });
+      
+    }
+
+    
+  }
+
+  inputFilesystemChange = (e) => {
+    this.uploadMediaCv(e)
+  }
+  
+  uploadMediaCv = (e) => {
+    var file = e.target.files[0]
+
+    const data = new FormData()
+    data.append('upload', file)
+
+    this.props.uploadMediaCv(data)
+  }
+
+  AfficherSuccess() {
+    if (!this.state.success || !this.state.success.message) {
+        console.log("Erreur Upload CV");
+        return "";
+    } else if (this.state.success.length != 0 && this.state.success.message != "") {
+        return (
+          <Snackbar open={open} autoHideDuration={1000} onClose={() => this.setState({open: false})}>
+            <Alert onClose={() => this.setState({open: false})} severity="success">
+              {ReactHtmlParser(this.state.success.message)}
+            </Alert>
+          </Snackbar>
+        );
+    }
+    return "";
+  }
+
+  AfficherLienCv() {
+    console.log("afficher lien");
+     if (this.state.cvLink !="") {
+      
+        return (
+          
+          <Fragment>
+            <Hidden>&nbsp;</Hidden>
+            <Hidden>&nbsp;</Hidden>
+            
+            <Hidden>&nbsp;</Hidden>
+            <Hidden>&nbsp;</Hidden>
+            <Card  variant="" style={{
+              width:370+"px", 
+              boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
+                      'px rgba(0, 0, 0, 0.14)',
+              marginLeft : '10px',
+              marginTop:'10px'
+              
+              }}>
+            <Hidden>&nbsp;</Hidden>
+              <CardActions>
+                <Button size="small">MON CV</Button>
+              </CardActions>
+              <CardContent>
+                <Typography >
+                  <a href={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink} 
+                  target="_blank"
+                  style={{ 
+                    color:'#1689FB',
+                    '&:hover': {
+                      color: '#1689FB',
+                    },
+                    fontWeight: '700',
+                    fontSize: '1em',
+                    }}
+                  >
+                    Visualiser mon CV
+                    </a>
+                    <br />
+                {/* <a href="https://www.permatheque.fr/PDF/mansobufukuoka-larevolutiondunseulbrindepaille.pdf" target="_blank">lien</a> */}
+                </Typography>
+              </CardContent>
+              
+            </Card>
+          </Fragment>
+            
+        );
+      
+    }
+    return "";
+  }
+
+  render() {
+    const { classes, company } = this.props;
+    const { loading } = this.state;
+    return (
+      <Fragment>
+      { loading ? 
+        <LoaderVideo /> :
+        <Fragment>
+          {this.AfficherSuccess()}
+          
+          <input
+            type="file" 
+            accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .pdf, .odt"
+            className={classes.input+' cypButtonImportVid'}
+            style={{ display: 'none' }}
+            id="import-button-file"
+            onChange={this.inputFilesystemChange}
+          />
+          <label htmlFor="import-button-file">
+            <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
+              <img alt="talents-tube" src='/statique/images/Import-cv-candidat.svg' className={classes.iconButton} />
+              <Typography  className={classes.textButton}>
+                J'<span className={classes.underlined}>importe</span> mon CV 
+              </Typography>
+              <KeyboardArrowDownIcon className={ classes. InputKeyboardArrowDownIcon }/>
+            </Button>
+            
+          </label>
+          <Hidden>&nbsp;</Hidden>
+          {this.AfficherLienCv()}
+          
+        </Fragment>
+    }
+    </Fragment>
+    ); 
+  }
+
+}
+
+Etape3.getInitialProps = function (context) {
+
+  const { adId, companyId } = context.query
+  const {res} = context
+    //TODO :really needed ?
+     context.store.dispatch(fetchCurrentUserRequest())
+
+  if(!!adId)
+    context.store.dispatch(fetchJobRequest(adId))
+  else if(!!companyId)
+    context.store.dispatch(fetchCompanyRequest(companyId))
+
+    return {};//leave this please
+}
+
+function mapStateToProps(state) {
+  // console.log("mapStateToProps")
+  // console.log(state.loading)
+  // console.log(state.user)
+  // console.log(state.media.message)
+  return {
+    user: state.user ,
+    cvLink : state.media.message,
+    loading: !!state.media.loading,
+    cv : true,
+    //errors:  errorMessageSelector(state),
+    user: state.user,
+    company: state.company
+  };
+}
+export default withStyles(styles)(connect(mapStateToProps, { fetchCurrentUserRequest, fetchCompanyRequest, uploadMediaCv })(Etape3));

nextjs/components/organisms/AccountProfile.js

@@ -0,0 +1,485 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+// import AccountStep from "../../components/organisms/AccountStep";
+import AccountEtape1 from '../organisms/AccountEtape1';
+import AccountEtape2 from '../organisms/AccountEtape2';
+import AccountEtape3 from '../organisms/AccountEtape3';
+import {withStyles} from '@material-ui/core/styles';
+// import Switch from '@material-ui/core/Switch';
+import PhoneIcon from '@material-ui/icons/Phone';
+import MailIcon from '@material-ui/icons/Mail';
+import PublicIcon from '@material-ui/icons/Public';
+import DuoIcon from '@material-ui/icons/Duo';
+import LinkedInIcon from '@material-ui/icons/LinkedIn';
+import Facebook from '@material-ui/icons/Facebook';
+// import FormGroup from '@material-ui/core/FormGroup'; import FormControlLabel
+// from '@material-ui/core/FormControlLabel'; import FormControl from
+// '@material-ui/core/FormControl';
+import {updateUserRequest, updateUserPictureRequest} from '../../actions/user'
+import {makeStyles} from '@material-ui/styles';
+import {connect} from 'react-redux'
+import getConfig from 'next/config'
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+// import BottomNavigationAction from
+// '@material-ui/core/BottomNavigationAction';
+import RefreshIcon from '@material-ui/icons/Refresh';
+// import FavoriteIcon from '@material-ui/icons/Favorite'; import LocationOnIcon
+// from '@material-ui/icons/LocationOn';
+
+import Box from '@material-ui/core/Box';
+
+import {
+    Card,
+    CardActions,
+    CardContent,
+    Avatar,
+    Typography,
+    Divider,
+    Button,
+    LinearProgress,
+    Stepper,
+    Step,
+    StepLabel,
+    StepContent,
+    StepButton,
+    Paper,
+    Grid
+} from '@material-ui/core';
+
+const styles = theme => ({
+    container: {
+        width: '100%'
+    },
+    button: {
+        textTransform: 'inherit',
+        marginLeft: theme.spacing(8),
+        marginRight: theme.spacing(8),
+        padding: theme.spacing(1.2, 2),
+        color: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.important
+    },
+    stickToBottom: {
+        width: '100%',
+        position: 'fixed',
+        bottom: 0
+    }
+});
+
+const useStyles = makeStyles(theme => ({
+    root: {},
+    details: {
+        display: 'flex'
+    },
+    avatar: {
+        marginLeft: 'auto',
+        height: 110,
+        width: 100,
+        flexShrink: 0,
+        flexGrow: 0
+    },
+    progress: {
+        marginTop: theme.spacing(2)
+    },
+    information: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.palette.primary.main,
+        [
+            theme
+                .breakpoints
+                .up('md')
+        ]: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'space-around',
+            backgroundColor: theme.palette.primary.main,
+            padding: theme.spacing(7, 7)
+        },
+        '& a': {
+            textDecoration: 'none'
+        }
+    },
+    texteBlanc: {
+        color: "#fff"
+    },
+    uploadButton: {
+        marginRight: theme.spacing(2)
+    },
+    button: {
+        marginTop: theme.spacing(1),
+        marginRight: theme.spacing(1)
+    },
+    actionsContainer: {
+        marginBottom: theme.spacing(2)
+    },
+    resetContainer: {
+        padding: theme.spacing(3)
+    }
+}));
+
+function getSteps() {
+    return ['Informations personnelles', 'Vidéo de présentation', 'Expériences professionnelles'];
+}
+
+function getStepContent(step) {
+    switch (step) {
+        case 0:
+            return <AccountEtape1 ></AccountEtape1>;
+        case 1:
+            return <AccountEtape2></AccountEtape2>;
+        case 2:
+            return <AccountEtape3></AccountEtape3>;
+        default:
+            return 'Unknown step';
+    }
+}
+
+const AccountProfile = props => {
+    const {
+        className,
+        user,
+        ...rest
+    } = props;
+    const logoUrl = user.picture;
+    const classes = useStyles();
+
+    // const user = {   name: 'Laurent Laniau',   city: 'Questembert',   country:
+    // 'France',   timezone: '',   avatar: '/images/avatars/avatar_11.png' };
+    const {publicRuntimeConfig} = getConfig()
+    const [activeStep,
+        setActiveStep] = React.useState(0);
+    const [completed,
+        setCompleted] = React.useState(new Set());
+    const [skipped,
+        setSkipped] = React.useState(new Set());
+    const [state,
+        setState] = React.useState({checkedA: true, checkedB: true});
+    const steps = getSteps();
+
+    const totalSteps = () => {
+        return getSteps().length;
+    };
+
+    const isStepOptional = (step) => {
+        return step === 4;
+    };
+
+    const handleSkip = () => {
+        if (!isStepOptional(activeStep)) {
+            // You probably want to guard against something like this it should never occur
+            // unless someone's actively trying to break something.
+            throw new Error("You can't skip a step that isn't optional.");
+        }
+
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+        setSkipped((prevSkipped) => {
+            const newSkipped = new Set(prevSkipped.values());
+            newSkipped.add(activeStep);
+            return newSkipped;
+        });
+    };
+
+    const skippedSteps = () => {
+        return skipped.size;
+    };
+
+    const completedSteps = () => {
+        return completed.size;
+    };
+
+    const allStepsCompleted = () => {
+        return completedSteps() === totalSteps() - skippedSteps();
+    };
+
+    const isLastStep = () => {
+        return activeStep === totalSteps() - 1;
+    };
+
+    const handleNext = () => {
+        const newActiveStep = isLastStep() && !allStepsCompleted()
+            ? // It's the last step, but not all steps have been completed
+            // find the first step that has been completed
+            steps.findIndex((step, i) => !completed.has(i))
+            : activeStep + 1;
+
+        setActiveStep(newActiveStep);
+    };
+
+    const handleBack = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+
+    const handleStep = (step) => () => {
+        console.log("step");
+        console.log(step);
+        setActiveStep(step);
+    };
+
+    const handleComplete = () => {
+        const newCompleted = new Set(completed);
+        newCompleted.add(activeStep);
+        setCompleted(newCompleted);
+
+        /**
+     * Sigh... it would be much nicer to replace the following if conditional with
+     * `if (!this.allStepsComplete())` however state is not set when we do this,
+     * thus we have to resort to not being very DRY.
+     */
+        if (completed.size !== totalSteps() - skippedSteps()) {
+            handleNext();
+        }
+    };
+
+    const handleReset = () => {
+        setActiveStep(0);
+        setCompleted(new Set());
+        setSkipped(new Set());
+    };
+
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+
+    const handleChange = (event) => {
+        setState({
+            ...state,
+            [event.target.name]: event.target.checked
+        });
+    };
+
+    function isStepComplete(step) {
+        return completed.has(step);
+    }
+    function refresh() {
+        document
+            .location
+            .reload(true);
+        console.log("refresh")
+    }
+
+    return (
+        <Grid
+            container
+            spacing={4}
+            direction="row"
+            justify="space-between"
+            alignItems="flex-start">
+            <Grid item lg={3} md={6} xl={4} xs={12}>
+                <Card {...rest} className={clsx(classes.root, className)}>
+                    <CardContent>
+                        <div id="fb-root"></div>
+                        <script
+                            async
+                            defer
+                            crossorigin="anonymous"
+                            src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v8.0&appId=2332071840142634&autoLogAppEvents=1"
+                            nonce="O28M4TTm"></script>
+                        <div className={classes.details}>
+                            <div>
+                                <Typography gutterBottom variant="h5">
+                                    {user.lastname}
+                                    &nbsp; {user.firstname}
+                                    <a href="#" onClick={refresh}><RefreshIcon className={classes.menuButton}/></a>
+                                </Typography>
+                                <Typography
+                                    className={classes.locationText}
+                                    color="textSecondary"
+                                    variant="body1">
+                                    <MailIcon className={classes.menuButton}/>
+                                    : {user.email}<br/>
+                                    <PhoneIcon className={classes.menuButton}/>
+                                    : {user.phone}<br/>
+                                    <LinkedInIcon className={classes.menuButton}/>
+                                    : {(user.linkedin && user.linkedin != '' && user.linkedin != 'null')
+                                        ? <a href={user.linkedin} target="_blank">Lien sur mon linkedIn</a>
+                                        : 'Non renseigné'}<br/>
+                                    <PublicIcon className={classes.menuButton}/>
+                                    : {(user.website && user.website != '' && user.website != 'null')
+                                        ? <a href={user.website} target="_blank">Lien sur mon site</a>
+                                        : 'Non renseigné'}<br/>
+                                    
+                                    
+                                    
+                                </Typography>
+                                
+                            </div>
+                            {/* <Avatar
+                                className={classes.avatar}
+                                src={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentUrl + logoUrl}/> */}
+                        </div>
+                        <div>
+                        <Box m={3}/>
+                        <Divider/>
+                        <Box m={3}/>
+                        <Typography
+                                    className={classes.locationText}
+                                    color="textSecondary"
+                                    variant="body1">
+                                    
+                                    <DuoIcon className={classes.menuButton}/>
+                                    : {(user.alias && user.alias != '' && user.alias != 'null')
+                                        ? <a
+                                                href={publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias}
+                                                target="_blank">Voir mon profil TalentsTube
+                                            </a>
+                                        : 'Non renseigné'}<br/>
+                                    <div
+                                        class="fb-share-button"
+                                        data-href={publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias}
+                                        data-layout="button_count"
+                                        data-size="small">
+
+                                        <Facebook className={classes.menuButton}/>
+                                        :
+                                        <a
+                                            target="_blank"
+                                            href={"https://www.facebook.com/sharer/sharer.php?u=" + publicRuntimeConfig.cvThequeUrl + "/talent/" + user.alias + "%2F&amp;src=sdkpreparse"}
+                                            class="fb-xfbml-parse-ignore"> Partager mon profil
+                                        </a>
+                                    </div>
+                                </Typography>
+                        </div>
+                        {/* <div className={classes.progress}>
+                            <Typography variant="body1">Etat du Profil: 70%</Typography>
+                            <LinearProgress value={70} variant="determinate"/>
+                        </div> */}
+
+                    </CardContent>
+                    <Box m={2}/>
+                    <Divider/>
+                    <Box m={2}/>
+                    <div className={classes.information}>
+                        <Typography className={classes.texteBlanc} align="left"></Typography>
+                    </div>
+                    {/* <CardActions>
+                        <Button className={classes.uploadButton} color="primary" variant="text">
+                            Remplacer une photo de profil
+                        </Button>
+                        <Button variant="text">Supprimer photo de profil</Button>
+                    </CardActions> */}
+                    <Box m={1}/>
+                    <Divider/>
+                     {/* <CardContent>
+                        <Typography variant="body1"></Typography>
+                        <FormControlLabel
+                            value="end"
+                            control={< Switch checked = {
+                            state.checkedA
+                        }
+                        onChange = {
+                            handleChange
+                        }
+                        name = "checkedA" color = "primary" />}
+                            label="Je souhaite afficher mon profil sur la CV Vidéothèque Talents Tube"
+                            labelPlacement="start"/>
+
+                    </CardContent> */}
+
+                    
+
+                    <CardActions>
+
+                        <Stepper nonLinear activeStep={activeStep} orientation="vertical">
+                            {steps.map((label, index) => {
+                                const stepProps = {};
+                                const buttonProps = {};
+                                if (isStepOptional(index)) {
+                                    buttonProps.optional = <Typography variant="caption">Optional</Typography>;
+                                }
+                                if (isStepSkipped(index)) {
+                                    stepProps.completed = false;
+                                }
+                                return (
+                                    <Step key={label} className={classes.actionsContainer} {...stepProps}>
+                                        <StepButton
+                                            onClick={handleStep(index)}
+                                            completed={isStepComplete(index)}
+                                            {...buttonProps}>
+                                            {label}
+                                        </StepButton>
+
+                                    </Step>
+                                );
+                            })}
+                        </Stepper>
+                    </CardActions>
+                    <Divider/>
+
+                    <div>
+
+                        <div>
+
+                            <div>
+
+                                {/* {isStepOptional(activeStep) && !completed.has(activeStep) && (
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      onClick={handleSkip}
+                      className={classes.button}
+                    >
+                      Skip
+                    </Button>
+                  )} */}
+
+                                {/* {activeStep !== steps.length &&
+                    (completed.has(activeStep) ? (
+                      <Typography variant="caption" className={classes.completed}>
+                        Step {activeStep + 1} already completed
+                      </Typography>
+                    ) : (
+                      <Button variant="contained" color="primary" onClick={handleComplete}>
+                        {completedSteps() === totalSteps() - 1 ? 'Finish' : 'Complete Step'}
+                      </Button>
+                    ))} */}
+                            </div>
+                        </div>
+
+                    </div>
+                    <Box m={2}/>
+                <CardContent>
+                    <BottomNavigation className={classes.stickToBottom}>
+                        <Button
+                            disabled={activeStep === 0}
+                            onClick={handleBack}
+                            className={classes.button}>
+                            Etape précédente
+                        </Button>
+                        <Button
+                            variant="contained"
+                            color="primary"
+                            onClick={handleNext}
+                            className={classes.button}>
+                            Etape suivante
+                        </Button>
+                        {/* <BottomNavigationAction label="Recents" icon={< RestoreIcon />}/>
+                      <BottomNavigationAction label="Favorites" icon={< FavoriteIcon />}/>
+                      <BottomNavigationAction label="Nearby" icon={< LocationOnIcon />}/> */}
+                    </BottomNavigation>
+                </CardContent>
+                </Card>
+                
+            </Grid>
+            <Grid item lg={9} md={6} xl={8} xs={12}>
+                {getStepContent(activeStep)}
+            </Grid>
+
+        </Grid>
+
+    );
+};
+
+AccountProfile.propTypes = {
+    className: PropTypes.string
+};
+function mapStateToProps(state, ownProps) {
+    return {
+        user: state.user,
+        loading: !!state.user.loading,
+        errors: state.user.errors || ownProps.errors
+    };
+}
+
+export default withStyles(styles)(connect(mapStateToProps, {updateUserRequest})(AccountProfile))

nextjs/components/organisms/AccountProfileCandidature.js

@@ -0,0 +1,218 @@
+import React, {Fragment} from 'react';
+import {Hidden} from '@material-ui/core';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+// import AccountStep from "../../components/organisms/AccountStep";
+import AccountEtape1 from './AccountEtape1';
+import AccountEtape2 from './AccountEtape2';
+import AccountEtape3 from './AccountEtape3';
+import {withStyles} from '@material-ui/core/styles';
+// import Switch from '@material-ui/core/Switch';
+import PhoneIcon from '@material-ui/icons/Phone';
+import MailIcon from '@material-ui/icons/Mail';
+import PublicIcon from '@material-ui/icons/Public';
+import DuoIcon from '@material-ui/icons/Duo';
+import LinkedInIcon from '@material-ui/icons/LinkedIn';
+import Facebook from '@material-ui/icons/Facebook';
+// import FormGroup from '@material-ui/core/FormGroup'; import FormControlLabel
+// from '@material-ui/core/FormControlLabel'; import FormControl from
+// '@material-ui/core/FormControl';
+import {updateUserRequest, updateUserPictureRequest} from '../../actions/user'
+import {makeStyles} from '@material-ui/styles';
+import {connect} from 'react-redux'
+import getConfig from 'next/config'
+import Router from 'next/router'
+
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+// import BottomNavigationAction from
+// '@material-ui/core/BottomNavigationAction';
+import RefreshIcon from '@material-ui/icons/Refresh';
+// import FavoriteIcon from '@material-ui/icons/Favorite'; import LocationOnIcon
+// from '@material-ui/icons/LocationOn';
+
+import Box from '@material-ui/core/Box';
+
+import {
+    Card,
+    CardActions,
+    CardContent,
+    Avatar,
+    Typography,
+    Divider,
+    Button,
+    LinearProgress,
+    Stepper,
+    Step,
+    StepLabel,
+    StepContent,
+    StepButton,
+    Paper,
+    Grid
+} from '@material-ui/core';
+
+const styles = theme => ({
+    container: {
+        width: '100%'
+    },
+    button: {
+        textTransform: 'inherit',
+        marginLeft: theme.spacing(8),
+        marginRight: theme.spacing(8),
+        padding: theme.spacing(1.2, 2),
+        color: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.important
+    },
+    stickToBottom: {
+        width: '100%',
+        position: 'fixed',
+        bottom: 0
+    }
+});
+
+const useStyles = makeStyles(theme => ({
+    root: {},
+    details: {
+        display: 'flex'
+    },
+    avatar: {
+        marginLeft: 'auto',
+        height: 110,
+        width: 100,
+        flexShrink: 0,
+        flexGrow: 0
+    },
+    progress: {
+        marginTop: theme.spacing(2)
+    },
+    information: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.palette.primary.main,
+        [
+            theme
+                .breakpoints
+                .up('md')
+        ]: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'space-around',
+            backgroundColor: theme.palette.primary.main,
+            padding: theme.spacing(7, 7)
+        },
+        '& a': {
+            textDecoration: 'none'
+        }
+    },
+    texteBlanc: {
+        color: "#fff"
+    },
+    uploadButton: {
+        marginRight: theme.spacing(2)
+    },
+    button: {
+        marginTop: theme.spacing(1),
+        marginRight: theme.spacing(1)
+    },
+    actionsContainer: {
+        marginBottom: theme.spacing(2)
+    },
+    resetContainer: {
+        padding: theme.spacing(3)
+    }
+}));
+
+const AccountProfile = props => {
+    const {
+        className,
+        user,
+        ...rest
+    } = props;
+    const logoUrl = user.picture;
+    const classes = useStyles();
+
+    // const user = {   name: 'Laurent Laniau',   city: 'Questembert',   country:
+    // 'France',   timezone: '',   avatar: '/images/avatars/avatar_11.png' };
+    const {publicRuntimeConfig} = getConfig()
+
+    return (
+        <Grid
+            container
+            spacing={4}
+            direction="row"
+            justify="space-between"
+            alignItems="flex-start">
+            
+            <Grid item lg={9} md={6} xl={8} xs={12}>
+                <Fragment>
+                    <Hidden>&nbsp;</Hidden>
+                    <Hidden>&nbsp;</Hidden>
+
+                    <Card
+                        variant="outlined"
+                        style={{
+                        width: 420 + "px",
+                        textAlign:"center"
+                    }}>
+                        <CardActions></CardActions>
+                        <CardContent>
+                            <Typography>
+                                Tu n'as pas tout dit dans ta vidéo?<br/>
+                                Pour mettre toutes les chances de ton côté, 
+                                <b> dépose ton CV old school (format pdf, word)!</b>
+                            </Typography>
+                        </CardContent>
+
+                    </Card>
+                    <Hidden>&nbsp;</Hidden>
+                    <Card
+                        variant="outlined"
+                        style={{
+                        width: 420 + "px",
+                        textAlign:"center"
+                    }}>
+                        <CardContent>
+                            <AccountEtape3></AccountEtape3>
+                        </CardContent>
+                    </Card>
+                    <Hidden>&nbsp;</Hidden>
+                    <Hidden>&nbsp;</Hidden>
+                    <Card
+                        variant="outlined"
+                        style={{
+                        width: 420 + "px",
+                        textAlign:"center"
+                    }}>
+                        <CardContent>
+                            
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                onClick={() => Router.push(`/Candidatures`)}
+                                className={classes.button}>
+                                Voir mes candidatures
+                            </Button>
+                        </CardContent>
+                    </Card>
+                </Fragment>
+
+            </Grid>
+            <Grid item lg={3} md={6} xl={4} xs={12}></Grid>
+
+        </Grid>
+
+    );
+};
+
+AccountProfile.propTypes = {
+    className: PropTypes.string
+};
+function mapStateToProps(state, ownProps) {
+    return {
+        user: state.user,
+        loading: !!state.user.loading,
+        errors: state.user.errors || ownProps.errors
+    };
+}
+
+export default withStyles(styles)(connect(mapStateToProps, {updateUserRequest})(AccountProfile))

nextjs/components/organisms/AccountStep.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepButton from '@material-ui/core/StepButton';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import AccountEtape1 from '../organisms/AccountEtape1';
+import AccountEtape2 from '../organisms/AccountEtape2';
+import AccountEtape3 from '../organisms/AccountEtape3';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+  },
+  button: {
+    marginRight: theme.spacing(1),
+  },
+  completed: {
+    display: 'inline-block',
+  },
+  instructions: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+}));
+
+function getSteps() {
+  return ['Informations personnelles', 'Vidéo de présentation', 'Expériences professionnelles'];
+}
+
+function getStepContent(step) {
+  switch (step) {
+    case 0:
+      return <AccountEtape1 ></AccountEtape1>;
+    case 1:
+      return <AccountEtape2></AccountEtape2>;
+    case 2:
+      return <AccountEtape3></AccountEtape3>;
+    default:
+      return 'Unknown step';
+  }
+}
+
+export default function HorizontalNonLinearStepper() {
+  const classes = useStyles();
+  const [activeStep, setActiveStep] = React.useState(0);
+  const [completed, setCompleted] = React.useState({});
+  const steps = getSteps();
+
+  const totalSteps = () => {
+    return steps.length;
+  };
+
+  const completedSteps = () => {
+    return Object.keys(completed).length;
+  };
+
+  const isLastStep = () => {
+    return activeStep === totalSteps() - 1;
+  };
+
+  const allStepsCompleted = () => {
+    return completedSteps() === totalSteps();
+  };
+
+  const handleNext = () => {
+    const newActiveStep =
+      isLastStep() && !allStepsCompleted()
+        ? // It's the last step, but not all steps have been completed,
+          // find the first step that has been completed
+          steps.findIndex((step, i) => !(i in completed))
+        : activeStep + 1;
+    setActiveStep(newActiveStep);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const handleStep = (step) => () => {
+    setActiveStep(step);
+  };
+
+  const handleComplete = () => {
+    const newCompleted = completed;
+    newCompleted[activeStep] = true;
+    setCompleted(newCompleted);
+    handleNext();
+  };
+
+  const handleReset = () => {
+    setActiveStep(0);
+    setCompleted({});
+  };
+
+  return (
+    <div className={classes.root}>
+      <Stepper alternativeLabel nonLinear activeStep={activeStep}>
+        {steps.map((label, index) => (
+          <Step key={label}>
+            <StepButton onClick={handleStep(index)} completed={completed[index]}>
+              {label}
+            </StepButton>
+          </Step>
+        ))}
+      </Stepper>
+      <div>
+        {allStepsCompleted() ? (
+          <div>
+            {/* <Typography className={classes.instructions}>
+              Toutes les étapes sont terminées - 
+            </Typography>
+            <Button onClick={handleReset}>Annuler</Button> */}
+          </div>
+        ) : (
+          <div>
+            <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
+            <div>
+              {/* <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
+                Précédent
+              </Button>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={handleNext}
+                className={classes.button}
+              >
+                Suivant
+              </Button> */}
+              {/* {activeStep !== steps.length &&
+                (completed[activeStep] ? (
+                  <Typography variant="caption" className={classes.completed}>
+                    Step {activeStep + 1} already completed
+                  </Typography>
+                ) : (
+                  <Button variant="contained" color="primary" onClick={handleComplete}>
+                    {completedSteps() === totalSteps() - 1 ? 'Etape valide' : 'Processus terminé'}
+                  </Button>
+                ))} */}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

nextjs/components/organisms/AccountVideoPres.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import Link from 'next/link';
+import ListItem from '@material-ui/core/ListItem';
+import Box from '@material-ui/core/Box';
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Divider,
+  Grid,
+  Button,
+  TextField
+} from '@material-ui/core';
+
+const useStyles = makeStyles(() => ({
+  root: {}
+}));
+
+const AccountVideoPres = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles();
+
+  return (
+    <Card
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+
+    </Card>
+  );
+};
+
+AccountVideoPres.propTypes = {
+  className: PropTypes.string
+};
+
+export default AccountVideoPres;

nextjs/components/organisms/Answer.js

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

nextjs/components/organisms/CompanyRow.js

@@ -151,7 +151,7 @@ class CompanyRowComponent extends React.Component {
     const nbOffre = (rowData.count_ads > 0) ? offre : 'Candidature spontanée';
 
     return (
-      <Link href={`/Entreprise/${rowData.id}-${_.kebabCase(rowData.brand_name)}-${_.kebabCase(rowData.addresses.billing.city)}`} >
+      <Link href={`/Entreprise/${rowData.id}-${_.kebabCase(rowData.brand_name)}`} >
         <Card className={classes.card + ' cypCardCompany'}>
           <CardContent className={classes.content}>
             <CardMedia

nextjs/components/organisms/Footer.js

@@ -243,6 +243,13 @@ function Footer(props) {
                             </Typography>
                         </a>
                     </Link>
+                    <Link href="" >
+                        <a href="https://blog.talentstube.com/contact" target="_blank">
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Contact
+                            </Typography>
+                        </a>
+                    </Link>
                 </section>
                 <section className={classes.container}>
                     <Typography color="secondary" component="p" className={classes.titleContainer}>
@@ -255,11 +262,11 @@ function Footer(props) {
                         56 000 Vannes
                 </Typography>
                     <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
-                        02.30.05.06.31
+                    <a href="tel:+33230050631"  >02.30.05.06.31 </a> 
                 </Typography>
-                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                    {/* <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                         contact@talentstube.com
-                </Typography>
+                </Typography> */}
                 </section>
 
             </div>
@@ -267,11 +274,9 @@ function Footer(props) {
                 <Typography gutterBottom component="p" className={classes.textContainerRegion} align="center" >
                     Entreprise soutenue par
                 </Typography>
-                <Link href="https://www.bretagne.bzh/"  >
-                    <a target="_blank" className={classes.darkMenuItem} rel="noopener">
-                        <img alt="Région Bretagne" src='/static/images/logos/Logo-region.svg' className={classes.footerLogo} />
-                    </a>
-                </Link>
+                <a href="https://www.bretagne.bzh/" target="_blank" className={classes.darkMenuItem} rel="noopener">
+                    <img alt="Région Bretagne" src='/static/images/logos/Logo-region.svg' className={classes.footerLogo} />
+                </a>
             </section>
         </div>
     );

nextjs/components/organisms/Header.js

@@ -20,6 +20,8 @@ import WorkOutlineIcon from '@material-ui/icons/WorkOutline';
 import AccountCircleOutlinedIcon from '@material-ui/icons/AccountCircleOutlined';
 import FolderSharedIcon from '@material-ui/icons/FolderShared';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import PermContactCalendar from '@material-ui/icons/PermContactCalendar';
+import VideoCam from '@material-ui/icons/Videocam';
 import SettingsIcon from '@material-ui/icons/Settings';
 import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
 import ArrowForward from '@material-ui/icons/ArrowForward';
@@ -35,6 +37,10 @@ import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
 import Typography from '@material-ui/core/Typography';
 import { withRouter } from "next/router";
 import ActiveLink from "./../atoms/Activelink";
+import axios from 'axios';
+import setAuthorizationHeader from "../../data/setAuthorizationHeader";
+import getConfig from 'next/config'
+
 const styles = theme => ({
   root: {
     width: '100%',
@@ -195,9 +201,9 @@ const styles = theme => ({
     },
   },
 
-  active: { 
+  active: {
     '& span, & svg': {
-      color: theme.palette.primary.main+ ' !important',
+      color: theme.palette.primary.main + ' !important',
     },
   },
 
@@ -288,6 +294,7 @@ const styles = theme => ({
     },
   },
 });
+let urlEnv;
 
 class Header extends React.Component {
   state = {
@@ -298,22 +305,34 @@ class Header extends React.Component {
     toggle: true
   };
 
+
+
   componentDidMount() {
 
   }
 
+  
+
   toggleDrawer = (side, open) => () => {
     this.setState({
       [side]: open,
     });
   };
 
+  onRedirectAccount = e => {
+      urlEnv = (process.env.NODE_ENV !== 'production') ? '//localhost/app_dev.php' : process.env.SERVER_URL;
+      e.preventDefault();
+      var redirectAccountUrl = urlEnv + "/api/talent?bearer=" + localStorage.getItem("ttJWT");
+      window.open(redirectAccountUrl);
+  }
+
   toggle = () => this.setState(state => ({ toggle: !state.toggle }))
 
   render() {
     const { classes } = this.props;
+    const { publicRuntimeConfig } = getConfig();
+
 
-  
     return (
       <div className={classes.root}>
         <Drawer anchor="left" open={this.state.left} onClose={this.toggleDrawer('left', false)}>
@@ -328,7 +347,7 @@ class Header extends React.Component {
 
                 <Link href="/"  >
                   <a className={classes.darkMenuItem}><ListItem classes={{ root: classes.rootListItem }}>
-                    <img alt="talents-tube" src='/static/images/logos/TalentsTube_logo-color.svg' className={classes.menuLogo} />
+                    <img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.menuLogo} />
                   </ListItem></a>
                 </Link>
 
@@ -336,63 +355,50 @@ class Header extends React.Component {
                 <Divider />
                 <div className={classes.links}>
                   <div className={classes.linkGroup}>
-                    <ActiveLink activeClassName={ classes.active } href="/"  >
+                    <ActiveLink activeClassName={classes.active} href="/"  >
                       <a className={classes.darkMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <HomeIcon className={classes.icon} />
                         <ListItemText classes={{ primary: classes.ListItemText }} primary='Accueil'>
                         </ListItemText>
                       </ListItem></a>
                     </ActiveLink>
-                    <ActiveLink activeClassName={ classes.active } href="/Offres"  >
-                      <a className={classes.darkMenuItem +' '+ classes.darkMenuItemSpecific}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                    <ActiveLink activeClassName={classes.active} href="/Offres"  >
+                      <a className={classes.darkMenuItem + ' ' + classes.darkMenuItemSpecific}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <OfferIcon className={classes.icon} />
                         <ListItemText classes={{ primary: classes.ListItemText }} primary={`Offres d'emploi`}>
                         </ListItemText>
                       </ListItem></a>
                     </ActiveLink>
-                    <ActiveLink activeClassName={ classes.active } href="/Entreprises"  >
-                      <a className={classes.darkMenuItem +' '+ classes.darkMenuItemSpecific}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                    <ActiveLink activeClassName={classes.active} href="/Entreprises"  >
+                      <a className={classes.darkMenuItem + ' ' + classes.darkMenuItemSpecific}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <CompanyIcon className={classes.icon} />
                         <ListItemText classes={{ primary: classes.ListItemText }} primary='Nos entreprises'>
                         </ListItemText>
                       </ListItem></a>
                     </ActiveLink>
-                    <ActiveLink activeClassName={ classes.active } href="/Help"  >
-                      <a className={classes.darkMenuItem +' '+ classes.darkMenuItemSpecific}><ListItem classes={{ root: classes.rootListItem }}>
+                    <ActiveLink activeClassName={classes.active} href="/Help"  >
+                      <a className={classes.darkMenuItem + ' ' + classes.darkMenuItemSpecific}><ListItem classes={{ root: classes.rootListItem }}>
                         <HelpIcon className={classes.icon} />
                         <ListItemText classes={{ primary: classes.ListItemText }} primary='Comment ça marche ?'>
                         </ListItemText>
                       </ListItem></a>
                     </ActiveLink>
                   </div>
-
                   <div>
-                    <div className={classes.videothequeLinkGroup}>
-                      <Link href="https://www.talentstube.com/faire-offre-emploi-video"  >
-                        <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                          <VideoIcon className={classes.icon} />
-                          <ListItemText classes={{ primary: classes.ListItemText }} primary='CV vidéothèque'>
-                          </ListItemText>
-                        </ListItem></a>
-                      </Link>
-                    </div>
                     <div className={classes.blogLinkGroup}>
-                      <Link href="https://blog.talentstube.com"  >
-                        <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                          <NotesIcon className={classes.icon} />
-                          <ListItemText classes={{ primary: classes.ListItemText }} primary='Blog'>
-                          </ListItemText>
-                        </ListItem></a>
-                      </Link>
+                      <a href={publicRuntimeConfig.blogUrl} className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <NotesIcon className={classes.icon} />
+                        <ListItemText classes={{ primary: classes.ListItemText }} primary='Blog'>
+                        </ListItemText>
+                      </ListItem>
+                      </a>
                     </div>
                     <div className={classes.recruteurLinkGroup}>
-                      <Link href="https://www.talentstube.com/faire-offre-emploi-video"  >
-                        <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                          <SupervisorAccountIcon className={classes.icon} />
-                          <ListItemText classes={{ primary: classes.ListItemText }} primary='Recruteurs'>
-                          </ListItemText>
-                        </ListItem></a>
-                      </Link>
+                      <a href={publicRuntimeConfig.symphonyUrl } className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <SupervisorAccountIcon className={classes.icon} />
+                        <ListItemText classes={{ primary: classes.ListItemText }} primary='Recruteurs'>
+                        </ListItemText>
+                      </ListItem></a>
                     </div>
                   </div>
 
@@ -418,7 +424,7 @@ class Header extends React.Component {
                 <List>
                   <Link href="/"  >
                     <a className={classes.darkMenuItem + ' cypFrontPage'}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                      <img alt="talents-tube" src='/static/images/logos/TalentsTube_logo-blanc.svg' className={classes.menuLogo} />
+                      <img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-blanc.svg' className={classes.menuLogo} />
                     </ListItem></a>
                   </Link>
 
@@ -446,20 +452,19 @@ class Header extends React.Component {
                   <Divider light={true} />
 
                   <div className={classes.linkGroup}>
-                    <Link href="https://www.talentstube.com/faire-offre-emploi-video" >
-                      <a className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
-                        <WorkOutlineIcon className={classes.icon} />
-                        <ListItemText primary='Connexion recruteurs'>
-                        </ListItemText>
-                      </ListItem></a>
-                    </Link>
+                    <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>
                   </div>
                 </List>
               </div>}
             {!!!this.props.loading && !!this.props.fetched &&
               <Fragment>
                 {this.props.user.picture ?
-                  <img alt="talents-tube" src={`http://localhost/uploads/img/${this.props.user.picture}`} className={classes.menuAvatar} />
+                  <img alt="talents-tube" src={publicRuntimeConfig.symphonyUrl +publicRuntimeConfig.postedContentUrl+ this.props.user.picture} className={classes.menuAvatar} />
                   :
                   <img alt="talents-tube" src='/static/images/default/account-avatar-default.svg' className={classes.menuAvatar} />
                 }
@@ -483,17 +488,18 @@ class Header extends React.Component {
                     </ListItemText>
                   </ListItem></a>
                 </Link>
-                <Link href="https://www.talentstube.com/login"  >
-                  <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                <Link href="/profileStep"  >
+                <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
                     <AccountCircleIcon className={classes.icon} />
                     <ListItemText primary='Mon compte'>
                     </ListItemText>
                   </ListItem></a>
                 </Link>
+                
                 <Link href="/Parametres"  >
                   <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
                     <SettingsIcon className={classes.icon} />
-                    <ListItemText primary='Paramètres'>
+                    <ListItemText primary='Paramètres de notification'>
                     </ListItemText>
                   </ListItem></a>
                 </Link>
@@ -519,7 +525,7 @@ class Header extends React.Component {
                 <Link href="/"  >
                   <a className={classes.darkMenuItem}>
                     <ListItem classes={{ root: classes.rootListItemDesktop }}>
-                      <img alt="talents-tube" src='/static/images/logos/TalentsTube_logo-color.svg' className={classes.desktopMenuLogo} />
+                      <img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.desktopMenuLogo} />
                     </ListItem>
                   </a>
                 </Link>
@@ -532,19 +538,19 @@ class Header extends React.Component {
 
                 <List className={classes.desktopMenuList}>
                   <div>
-                    <ActiveLink activeClassName={ classes.active } href="/Offres"  >
+                    <ActiveLink activeClassName={classes.active} href="/Offres"  >
                       <a className={classes.desktopMenuItem}>
                         <ListItemText primary="Offres d'emploi">
                         </ListItemText>
                       </a>
                     </ActiveLink>
-                    <ActiveLink activeClassName={ classes.active } href="/Entreprises"  >
+                    <ActiveLink activeClassName={classes.active} href="/Entreprises"  >
                       <a className={classes.desktopMenuItem}>
                         <ListItemText primary='Nos entreprises'>
                         </ListItemText>
                       </a>
                     </ActiveLink>
-                    <ActiveLink activeClassName={ classes.active } href="/Help"  >
+                    <ActiveLink activeClassName={classes.active} href="/Help"  >
                       <a className={classes.desktopMenuItem}>
                         <ListItemText primary='Comment ça marche ?'>
                         </ListItemText>
@@ -598,13 +604,12 @@ class Header extends React.Component {
                 </List>
               </section>
               <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
-                <Link href="https://www.talentstube.com/faire-offre-emploi-video"  >
-                  <a className={classes.desktopMenuItem}>
-                    <ListItemText primary='Espace recruteurs'>
-                    </ListItemText>
-                    <ArrowForward className={classes.icon} />
-                  </a>
-                </Link>
+
+                <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
+                  <ListItemText primary='Espace recruteurs'>
+                  </ListItemText>
+                  <ArrowForward className={classes.icon} />
+                </a>
               </section>
             </Toolbar>
           </AppBar>)
@@ -618,7 +623,7 @@ class Header extends React.Component {
                 </IconButton>
                 <div className={classes.grow} />
                 <Link href="/"  >
-                  <a><img alt="talents-tube" src='/static/images/logos/TalentsTube_logo-color.svg' className={classes.menuLogo} /></a>
+                  <a><img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.menuLogo} /></a>
                 </Link>
                 <div className={classes.grow} />
                 <IconButton

nextjs/components/organisms/OffreDetail.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { Fragment,lazy, Suspense } from 'react'
 import Router from 'next/router'
 import { withStyles } from '@material-ui/core/styles';
 import getConfig from 'next/config'
@@ -16,9 +16,12 @@ import Ar from "lodash/array";
 import Hidden from '@material-ui/core/Hidden';
 import Link from 'next/link'
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
-import VideoVimeo from '../atoms/VideoVimeo'
+const VideoVimeo = lazy(() => import('../atoms/VideoVimeo'));
+//import VideoVimeo from '../atoms/VideoVimeo'
 import OgHead from '../atoms/OgHead'
-
+import JobPosting from '../atoms/JobPosting'
+import Moment from 'react-moment';
+const renderLoader = () => <p>Chargement</p>;
 const styles = theme => ({
     primary: {
         color: theme.palette.primary.main,
@@ -56,6 +59,9 @@ const styles = theme => ({
     offerInfoContainer: {
         display: 'flex',
     },
+    buttonContainer: {
+        alignItems: 'right',
+    },
     infoContainer: {
         display: 'flex',
         flexDirection: 'column',
@@ -78,12 +84,14 @@ const styles = theme => ({
     },
     IconTextContainer: {
         paddingTop: theme.spacing(1.5, 0),
+        height: '100%',
     },
     IconTextContainerDesktop: {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'flex-start',
         width: '100%',
+        
     },
     contentContainer: {
         display: 'flex',
@@ -155,7 +163,7 @@ const styles = theme => ({
         objectFit: 'contain',
     },
     title: {
-        fontSize: '1em',
+        fontSize: '1.3em',
         fontWeight: '500',
         [theme.breakpoints.up('md')]: {
             paddingTop: theme.spacing(2),
@@ -163,13 +171,22 @@ const styles = theme => ({
     },
     offreTitle: {
         [theme.breakpoints.up('md')]: {
-            fontSize: '1.2em',
+            fontSize: '1.3em',
             fontWeight: '600',
         },
     },
     discoverTitle: {
         padding: theme.spacing(3, 0),
     },
+    voirEntreprise: {
+        textTransform: 'inherit',
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        padding: theme.spacing(1.2, 2),
+        color: '#BBBCBD',
+        backgroundColor: '#F3F3F4',
+
+    },
     contentText: {
         fontSize: '1em',
         fontWeight: '300',
@@ -190,7 +207,7 @@ const styles = theme => ({
         textAlign: 'center',
     },
     companyName: {
-        fontSize: '0.9em',
+        fontSize: '1.3em',
         fontWeight: '300',
         [theme.breakpoints.up('md')]: {
             fontSize: '1em',
@@ -209,18 +226,18 @@ const styles = theme => ({
     },
     iconTextIcon: {
         color: theme.palette.offerlistitem.icon,
-        fontSize: '1em',
+        fontSize: '1.3em',
     },
     iconTextText: {
         fontWeight: 'lighter',
         color: theme.palette.offerlistitem.text,
-        fontSize: '0.7em',
+        fontSize: '1em',
         paddingLeft: theme.spacing(1),
     },
     iconTextTextDesktop: {
         fontWeight: 'lighter',
         color: theme.palette.offerlistitem.text,
-        fontSize: '0.7em',
+        fontSize: '1em',
         paddingLeft: theme.spacing(1),
         width: '100%',
     },
@@ -245,12 +262,11 @@ const styles = theme => ({
     },
     button: {
         textTransform: 'inherit',
-        marginLeft: theme.spacing(8),
-        marginRight: theme.spacing(8),
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
         padding: theme.spacing(1.2, 2),
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.important,
-        alignSelf: 'center',
     },
     chip: {
         color: theme.palette.secondary.main,
@@ -268,9 +284,9 @@ const styles = theme => ({
         },
     },
     videoTerritory: {
-        paddingBottom: '56% !important', 
+        paddingBottom: '56% !important',
         [theme.breakpoints.up('md')]: {
-            paddingBottom: '56% !important', 
+            paddingBottom: '56% !important',
         }
     },
     territoryTitle: {
@@ -297,93 +313,154 @@ function OffreDetail(props) {
     const DefaultUrl = "/static/images/default/default_picture_company.svg"
     const imgUrl = (offre.company && offre.company.presentation_video && offre.company.presentation_video.thumbnails && offre.company.presentation_video.thumbnails[0] && offre.company.presentation_video.thumbnails[0].sizes[2]) ? offre.company.presentation_video.thumbnails[0].sizes[2].link : DefaultUrl
     const imgUrlDesktop = (offre.company && offre.company.presentation_video && offre.company.presentation_video.thumbnails && offre.company.presentation_video.thumbnails[0] && offre.company.presentation_video.thumbnails[0].sizes[4]) ? offre.company.presentation_video.thumbnails[0].sizes[4].link : DefaultUrl
-    const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Offre/${offre.id}-${_.kebabCase(offre.title)}-${_.kebabCase(offre.location.gmap_address.name)}`;
-    const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}-${_.kebabCase(offre.location.gmap_address.name)}`);
-    const territoryVideoUrlTab = (offre.territories && offre.territories[0] && offre.territories[0].territory)?offre.territories[0].territory.presentation_video.cdn_url.split('/'):'';
-        const territoryVideoId = territoryVideoUrlTab[2]
+    const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Offre/${offre.id}-${_.kebabCase(offre.title)}`;
+    const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`);
+    const territoryVideoUrlTab = (offre.territories && offre.territories[0] && offre.territories[0].territory) ? offre.territories[0].territory.presentation_video.cdn_url.split('/') : '';
+    const territoryVideoId = territoryVideoUrlTab[2]
+    let descriptionSEO = ""
+    let titleSEO = ""
+    offre.company.brand_name ? descriptionSEO += offre.company.brand_name : ""
+    descriptionSEO +=  " recrute en vidéo un(e) "+offre.title
+    titleSEO =  "Offre d'emploi vidéo "+offre.title 
+    offre.location.gmap_address.formatted_address ? descriptionSEO += ", "+offre.location.gmap_address.formatted_address : ""
+    offre.location.gmap_address.formatted_address ? titleSEO += ", "+offre.location.gmap_address.formatted_address : ""
+    offre.company.brand_name ? titleSEO += " - "+offre.company.brand_name : ""
+    descriptionSEO +=  ". Envoyez votre candidature en vidéo. "
+    titleSEO += " | Talents Tube "
+    let jobVille=""
+    let jobDpt=""
+    let jobPays=""
+    let  jobContract =""
+    let  tempsType =""
+    let  tempsTypeFr =""
+    offre.location.gmap_address.address_components[0] ? jobVille = offre.location.gmap_address.address_components[0].long_name: jobVille=""
+    offre.location.gmap_address.address_components[1] ? jobDpt = offre.location.gmap_address.address_components[1].long_name: jobDpt=""
+    offre.location.gmap_address.address_components[3] ? jobPays = offre.location.gmap_address.address_components[3].long_name: jobPays=""
+    // offre.location.gmap_address ? jobAdr = location.gmap_address.adr_address: jobAdr=""
+    offre.extra.contract_type ? jobContract = offre.extra.contract_type : jobContract =""
+    offre.extra.temps_type ? tempsType = offre.extra.temps_type : tempsType =""
+    if(tempsType=="PART_TIME"){
+        tempsTypeFr="Temps partiel"
+    }else if(tempsType=="FULL_TIME") {
+        tempsTypeFr="Plein temps"
+    }else if(tempsType=="MIX_TIME") {
 
+    }
     return (
         <Fragment>
-            <OgHead seo_title={offre.title}
-                seo_description={offre.description}
+            {/* {offre.public_tag.map((label, index) => {
+                 descriptionSEO += label+", "
+            })} */}
+            
+            <OgHead seo_title={titleSEO}
+                seo_description={descriptionSEO}
                 seo_url={socialShareUrl}
                 image={imgUrlDesktop}
             ></OgHead>
+            <JobPosting job_title={offre.title}
+                job_description={offre.description}
+                job_brand= {offre.company.brand_name && offre.company.brand_name}
+                job_brand_link= {entrepriseLink}
+                job_title = {offre.title}
+                job_location = {offre.location.gmap_address.formatted_address}
+                job_ville = {jobVille}
+                job_dept = {jobDpt}
+                job_pays = {jobPays}
+                job_adr = {offre.location.gmap_address.formatted_address}
+                job_date = {offre.published_at}
+                job_date_fin = {offre.unpublished_at}
+                job_temps_type= {tempsType}
+                job_contract_type= {jobContract}
+            ></JobPosting>
             {offre.video && (
                 <Fragment>
                     <Hidden smDown>
                         <section className={classes.headerContainerDesktop}>
                             <div className={classes.offerInfoContainer}>
-                                <Link href={entrepriseLink}  >
-                                    <a>
-                                        <div className={classes.logoContainer}>
 
-                                            <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }}
-                                                src={logoUrl} alt="companyLogo" />
+                                <a href={entrepriseLink} >
+                                    <div className={classes.logoContainer}>
 
-                                        </div>
-                                    </a>
-                                </Link>
+                                        <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }}
+                                            src={logoUrl} alt={offre.company.brand_name && offre.company.brand_name} />
+
+                                    </div>
+                                </a>
                                 <div className={classes.infoContainer}>
                                     <Typography gutterBottom className={classes.offreTitle}>
-                                        {offre.title}
+                                         {offre.title}   {/*- publié le <Moment format="DD/MM/YYYY" date={offre.published_at} /> */}
+                                         
                                     </Typography>
-                                    <Link href={entrepriseLink}  >
-                                        <a>
-                                            <Typography gutterBottom variant="subtitle1" className={classes.companyName}>
-                                                {offre.company.brand_name && offre.company.brand_name}
-                                            </Typography>
-                                        </a>
-                                    </Link>
+                                    <a href={entrepriseLink} >
+                                        <Typography gutterBottom variant="subtitle1" className={classes.companyName}>
+                                        {offre.company.brand_name  ? offre.company.brand_name  : ""}
+                                        </Typography>
+                                    </a>
                                     {offre.is_promoted && (
                                         <Chip label="Pourvue" className={classes.chip} />
                                     )}
                                     {/* ville */}
                                 </div>
                             </div>
+                            <div className={classes.buttonContainer}>
                             {!!!offre.is_promoted && (
-                                <Button
-                                    variant="contained"
-                                    className={classes.button + ' cypButtonApply'}
-                                    onClick={() => Router.push(`/Reponse?adId=${offre.id}`)}
-                                >Postuler</Button>
+                                <Link href={`/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`} >
+                                    <Button
+                                        variant="contained"
+                                        className={classes.voirEntreprise + ' cypButtonApply'}
+                                    >Voir l'entreprise</Button>
+                                    
+                                </Link>
+                                
+                                
                             )}
+                            {!!!offre.is_promoted && (
+                                <Link href={`/Reponse?adId=${offre.id}`}>
+                                    <Button
+                                        variant="contained"
+                                        className={classes.button + ' cypButtonApply'}
+                                    >Postuler</Button>
+                                    
+                                </Link>
+                                
+                                
+                            )}
+                            </div>
+                            
                         </section>
                     </Hidden>
-
-                    <VideoVimeo  {...isCandidature == 'true' ? 'classes={{ video: classes.videoOffre }}' : ''} videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} autoplay='1' />
-
+                    <Suspense fallback={renderLoader()}>   
+                        <VideoVimeo  {...isCandidature == 'true' ? 'classes={{ video: classes.videoOffre }}' : ''} videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} autoplay='1' />
+                    </Suspense>            
                     <div className={classes.container}>
                         <Hidden mdUp>
                             <section className={classes.headerContainer}>
-                                <Link href={entrepriseLink}  >
-                                    <div className={classes.logoContainer}>
+                                <div className={classes.logoContainer}>
 
-                                        <a>
-                                            <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }}
-                                                src={logoUrl} alt="companylogo" />
-                                        </a>
+                                    <a href={entrepriseLink} >
+                                        <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }}
+                                            src={logoUrl} alt="companylogo" />
+                                    </a>
 
-                                    </div>
-                                </Link>
+                                </div>
                                 <div className={classes.infoContainer}>
                                     <Typography gutterBottom variant="h5" component="h1" className={classes.title}>
                                         {offre.title}
                                     </Typography>
-                                    <Link href={entrepriseLink}  >
-                                        <a>
-                                            <Typography gutterBottom variant="subtitle1" className={classes.text}>
-                                                {offre.company.brand_name && offre.company.brand_name}
-                                            </Typography>
-                                        </a>
-                                    </Link>
+                                    <a href={entrepriseLink}  >
+                                        <Typography gutterBottom variant="subtitle1" className={classes.text}>
+                                            {offre.company.brand_name && offre.company.brand_name}
+                                        </Typography>
+                                    </a>
                                     {/* ville */}
                                 </div>
                             </section>
                             <section className={classes.IconTextContainer}>
                                 {offre.is_promoted && (<Chip label="Pourvue" className={classes.chip} />)}
                                 {offre.extra && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="assignment" text={offre.extra.contract_type} />)}
+                                {tempsTypeFr && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={tempsTypeFr} />)}
                                 {offre.location && offre.location.gmap_address && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={offre.location.gmap_address.formatted_address} />)}
+                                {offre.beneficiaire  && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={offre.beneficiaire} />)}
                             </section>
                         </Hidden>
 
@@ -395,7 +472,9 @@ function OffreDetail(props) {
                             <Hidden smDown>
                                 <section className={classes.IconTextContainerDesktop}>
                                     <IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="assignment" text={offre.extra.contract_type} />
+                                    {tempsTypeFr ?<IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={tempsTypeFr } />:""}
                                     <IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={offre.location.gmap_address.formatted_address} />
+                                    {offre.beneficiaire && (<IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={offre.beneficiaire} /> )}
                                 </section>
                             </Hidden>
                             <SimpleCollapse>
@@ -403,22 +482,24 @@ function OffreDetail(props) {
                                     {offre.description}
                                 </Typography>
                                 <section className={classes.tagsContainer}>
-                                        {offre.public_tag.map((label, index) => {
-                                            return (
-                                                <Chip label={label} className={classes.tags} key={index} />
-                                            );
-                                        })}
-                                    </section>
+                                    {offre.public_tag.map((label, index) => {
+                                        return (
+                                            <Chip label={label} className={classes.tags} key={index} />
+                                        );
+                                    })}
+                                </section>
                             </SimpleCollapse>
 
                             {!offre.is_promoted && (
                                 <div className={classes.shareContainer}>
-                                    <Button
-                                        cyp="ButtonApply"
-                                        variant="contained"
-                                        className={classes.button}
-                                        onClick={() => Router.push(`/Reponse?adId=${offre.id}`)}
-                                    >Postuler</Button>
+                                    <Link href={`/Reponse?adId=${offre.id}`}>
+                                        <Button
+                                            cyp="ButtonApply"
+                                            variant="contained"
+                                            className={classes.button}
+
+                                        >Postuler</Button>
+                                    </Link>
                                     <Typography className={classes.contentCondition}>
                                         ou
                                     </Typography>
@@ -435,37 +516,39 @@ function OffreDetail(props) {
                     {offre.company.presentation_video && !offre.is_promoted && (
                         <div className={classes.container + ' ' + classes.discoverContainerCompany}>
                             <section>
-                                <Typography gutterBottom className={classes.title + ' ' + classes.discoverTitle} align="center">
-                                    Découvrir l'entreprise <span className={classes.primary}>{offre.company.brand_name && offre.company.brand_name}</span>
+                                <Typography gutterBottom className={classes.title + ' ' + classes.voirEntreprise} align="center">
+                                    Voir l'entreprise <span className={classes.primary}>{offre.company.brand_name && offre.company.brand_name}</span>
                                 </Typography>
 
-                                <Link href={entrepriseLink}  >
+                                <a href={entrepriseLink}>
                                     <div className={classes.discoverContainerImage}>
-                                        <img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt="company" />
+                                        <img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
                                         <KeyboardArrowleftIcon className={classes.iconPlay} />
                                     </div>
-                                </Link>
+                                </a>
                             </section>
                         </div>
                     )}
                     {offre.territories && territoryVideoId && (
-                            <div className={classes.container + ' ' + classes.discoverContainerTerritory}>
-                                <section>
-                                    <Typography gutterBottom className={classes.title + ' ' + classes.discoverTitle} align="center">
-                                        Découvrir le <span className={classes.primary}>territoire</span>
-                                    </Typography>
-                                    <section className={classes.discoverTerritoryContentContainer}>
+                        <div className={classes.container + ' ' + classes.discoverContainerTerritory}>
+                            <section>
+                                <Typography gutterBottom className={classes.title + ' ' + classes.discoverTitle} align="center">
+                                    Découvrir le <span className={classes.primary}>territoire</span>
+                                </Typography>
+                                <section className={classes.discoverTerritoryContentContainer}>
+                                    <Suspense fallback={renderLoader()}>
                                         <VideoVimeo classesOverride={classes.videoTerritory} videoId={territoryVideoId} autoplay='0' />
-                                        <Typography className={classes.territoryTitle}>
-                                            {(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''}
-                                        </Typography>
-                                        <Typography className={classes.territoryType} gutterBottom>
-                                            {(!!!offre.territories) ? offre.territories[0].territory.extra.terType : ''}
-                                        </Typography>
-                                    </section>
+                                    </Suspense>
+                                    <Typography className={classes.territoryTitle}>
+                                        {(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''}
+                                    </Typography>
+                                    <Typography className={classes.territoryType} gutterBottom>
+                                        {(!!!offre.territories) ? offre.territories[0].territory.extra.terType : ''}
+                                    </Typography>
                                 </section>
-                            </div>
-                        )
+                            </section>
+                        </div>
+                    )
                     }
                 </Fragment>
             )}

nextjs/components/organisms/OffreRow.js

@@ -17,7 +17,7 @@ const styles = theme => ({
   card: {
     display: 'flex',
     minHeight: '21vh',
-    maxHeight: '32vh',
+    // maxHeight: '32vh',
     borderRadius: '5px',
     width: '100%',
     cursor: 'pointer',
@@ -38,7 +38,7 @@ const styles = theme => ({
     },
     [theme.breakpoints.up('md')]: {
       minHeight: '15vh',
-      maxHeight: '20vh',
+      // maxHeight: '20vh',
     },
     margin: '1vh 2vh 1vh 2vh',
     [theme.breakpoints.up('sm')]: {
@@ -51,14 +51,15 @@ const styles = theme => ({
     alignItems: 'flex-start',
     padding: theme.spacing(2),
     width: '75%',
+    // minHeight: '200px',
   },
   jobTitle: {
-    fontSize: '1em',
+    fontSize: '1.2em',
     fontWeight: 'bold',
     color: theme.palette.offerlistitem.title,
   },
   companyTitle: {
-    fontSize: '0.8em',
+    fontSize: '1.2em',
     fontWeight: '300',
     color: theme.palette.offerlistitem.title,
   },
@@ -96,11 +97,11 @@ const styles = theme => ({
   },
   iconTextIcon: {
     color: theme.palette.offerlistitem.icon,
-    fontSize: '0.8em',
+    fontSize: '1.2em',
   },
   iconTextText: {
     color: theme.palette.offerlistitem.text,
-    fontSize: '0.6em',
+    fontSize: '1em',
     paddingLeft: theme.spacing(1),
   },
   chip: {
@@ -126,7 +127,7 @@ class OffreRowComponent extends React.Component {
     const imgUrl = (rowData.video && rowData.video.thumbnails && rowData.video.thumbnails[0] && rowData.video.thumbnails[0].sizes[4]) ? rowData.video.thumbnails[0].sizes[4].link : publicRuntimeConfig.adListDefaultUrl
 
     return (
-      <Link href={`/Offre/${rowData.id}-${_.kebabCase(rowData.title)}-${_.kebabCase(rowData.location.gmap_address.name)}`} >
+      <Link href={`/Offre/${rowData.id}-${_.kebabCase(rowData.title)}`} >
         <Card className={classes.card + ' cypCardOffre'} >
           <CardContent className={classes.content}>
             <CardMedia
@@ -144,14 +145,14 @@ class OffreRowComponent extends React.Component {
                 variant="h6"
                 component="h3"
                 className={classes.jobTitle}>
-                {rowData.title}
+                {rowData.title} 
               </Typography>
               <Typography
                 variant="headline"
                 variant="h6"
-                component="h4"
+                component="h3"
                 className={classes.companyTitle}>
-                {!!companyR.brand_name?companyR.brand_name:"-"}
+                {companyR.brand_name ? companyR.brand_name : "Non renseigné"} 
               </Typography>
               <div>
                 {rowData.is_promoted && (
@@ -160,8 +161,10 @@ class OffreRowComponent extends React.Component {
 
                 {!rowData.is_promoted && (
                   <Fragment>
-                    <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={rowData.extra.contract_type} />
-                    <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business_center" text={rowData.location.gmap_address.formatted_address} />
+                    <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business_center" text={rowData.extra.contract_type} />
+                    <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={rowData.location.gmap_address.formatted_address} />
+                    {rowData.beneficiaire ? <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={rowData.beneficiaire} /> :  ""} 
+                    
                   </Fragment>
                 )}
 

nextjs/components/organisms/Recorder.js

@@ -15,6 +15,31 @@ const RTCRecorder = dynamic(() => import('RecordRTC'), {
     ssr: false
 })
 
+const videoJsOptions = {
+    controls: true,
+
+    fluid: true,
+    plugins: {
+      /*
+      // wavesurfer section is only needed when recording audio-only
+      wavesurfer: {
+          src: 'live',
+          waveColor: '#36393b',
+          progressColor: 'black',
+          debug: true,
+          cursorWidth: 1,
+          msDisplayMax: 20,
+          hideScrollbar: true
+      },
+      */
+      record: {
+        audio: true,
+        video: true,
+        maxLength: 600,
+        //debug: true
+      }
+    }
+  };
 
 const styles = theme => ({
     root: {
@@ -22,19 +47,34 @@ const styles = theme => ({
         maxWidth: '400px', [theme.breakpoints.down('md')]: {
             maxWidth: `${100 - (theme.spacing(1))}vw`
         },
+        sendContainer: {
+            textAlign: 'center'
+        },
         button: {
+            textTransform: 'inherit',
+            marginLeft: theme.spacing(8),
+            marginRight: theme.spacing(8),
+            marginTop: theme.spacing(4),
+            marginBottom: theme.spacing(2),
+            padding: theme.spacing(1.2, 2),
+            //borderRadius: '3px',
+            [theme.breakpoints.up('sm')]: {
+                margin: 'auto',
+            },
 
-            margin: theme.spacing(1),
-            alignSelf: 'flex-end'
         },
     }
 })
 class Recorder extends Component {
 
+    state={
+        canSend:false
+    }
+
     async componentDidMount() {
         var record = (await import('videojs-record')).default
         // instantiate Video.js
-        this.player = videojs(this.videoNode, this.props, () => {
+        this.player = videojs(this.videoNode, videoJsOptions, () => {
             // print version information at startup
             var version_info = 'Using video.js ' + videojs.VERSION +
                 ' with videojs-record ' + videojs.getPluginVersion('record') +
@@ -45,11 +85,13 @@ class Recorder extends Component {
         // device is ready
         this.player.on('deviceReady', () => {
             console.info('device is ready!');
+            this.setState({canSend:false});
         });
 
         // user clicked the record button and started recording
         this.player.on('startRecord', () => {
             console.log('started recording!');
+            this.setState({canSend:false});
         });
 
         // user completed recording and stream is available
@@ -57,19 +99,22 @@ class Recorder extends Component {
             // recordedData is a blob object containing the recorded data that
             // can be downloaded by the user, stored on server etc.
             console.log('finished recording: ', this.player.recordedData);
+            this.setState({canSend:true});
         });
 
         // error handling
         this.player.on('error', (element, error) => {
             console.warn(error);
+            this.setState({canSend:false});
         });
 
         this.player.on('deviceError', () => {
             console.error('device error:', this.player.deviceErrorCode);
+            this.setState({canSend:false});
         });
     }
 
-    // destroy player on unmount
+    //destroy player on unmount
     componentWillUnmount() {
         if (this.player) {
             this.player.dispose();
@@ -77,39 +122,34 @@ class Recorder extends Component {
     }
 
     sendBlob = () => {
-        console.log('accessing recording: ', this.player.recordedData)
+       // console.log('accessing recording: ', this.player.recordedData)
         var formData = new FormData();
         formData.append('upload', this.player.recordedData, "myupload");
-        //   formData.append('user', 7);//TODO: taking from auth
 
-        setAuthorizationHeader('eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE1NTk4OTE4ODIsImV4cCI6MTU1OTg5NTQ4Miwicm9sZXMiOlsiUk9MRV9UQUxFTlQiLCJST0xFX1VTRVIiXSwidXNlcm5hbWUiOiJ0aG9tYXMuYmVycm9kQGUtZGVjbGljLmNvbSJ9.dnXiifet5SIyZf1zOBnu6RvVqA6k-aT16O_YNy6ZAhRZUuQtqP21enNkug0KxLEFMy91gcj0gkGuETqMwcHBL_xkx7rJvb2dLoOo0yduZxJLzngWKroCZE152t-V5Edn2Gje3CHMGqTZLwjBowEgUTpgfyTE9IaJn-q2pizukWBzjmfmdz5mYFgoIQrsjThkPxRH8cNOTit0bj6SebjsCCsPb_jdM6rek03qtwELz2ABJaHJU1FiGGTLYtcF3k32AGlRwa5P9etKwQUrz0AL5q3lroKgbtwhxY3cKyRKAo-o68s3v12_T6R86WqEegOx6TyBb06GJhTcP1MIGBMMgNIm5GxSi0U0RvRDmLuFtsuZv5wBUZqkpth8Z_dK5H003k67XjLrYC4TnMhQXxUGV6Eji3lkCY5fOWbQjwXRO9R_rPCNSiPEZj0o_-ach0a4Y5nLhzVlnb3J0plpb4lwpN3D9t9FNfizKQ5VX9eLoozrzkI-apIbV-Z0is8i6j4yt7R24PR9dyreQXZ3-e_tEwu5UTKi-zYAaHaHrRgCSjWg4d6ozuyXQmzi64d1-Fnx6IkU_KtXtUYRVsZhQUvJpri2x1szLLM-Hqdsh2Ljuu5qDdJrHRKeG1gZeKWPfvZweZ3SWrfvlNZHKNWX-2pmEvz9sJdpsAO-NnmTEUVrpzY')
-
-        axios.post("http://localhost/app_dev.php/api/media",
-            formData,
-            {
-                headers: {
-                    'Content-Type': `multipart/form-data;`
-                },
-                withCredentials: true
-            })
-            .then(res => console.info(res)).catch(err => console.error(err))
-
-        console.info('end send Blob')
+        this.props.uploader(formData);
     }
 
     render() {
-        const { classes } = this.props;
+        const { classes, titreBouton } = this.props;
+        let titreButtonLabel= "Envoyer";
+        
+
+        if (titreBouton) {
+            titreButtonLabel = titreBouton;        
+            console.log("titre");
+            console.log(titreButtonLabel);       
+        }
         return (
             <div>
                 <div data-vjs-player>
                     <video id="myVideo" ref={node => this.videoNode = node} className="video-js vjs-default-skin" playsInline></video>
                 </div>
-                <div>
-                    <Button type="submit" variant="outlined" color="secondary"
+                <div className={classes.sendContainer}>
+                   { this.state.canSend && <Button type="submit" variant="outlined" color="primary"
                         className={classes.button}
                         onClick={this.sendBlob}>
-                        Send
-                    </Button>
+                        {titreButtonLabel}
+                    </Button>}
                 </div>
             </div>
         );

nextjs/components/organisms/Register.js

@@ -277,15 +277,15 @@ class Register extends React.Component {
                         S'inscrire
                     </Button>
 
-                    <Typography
+                    {/* <Typography
                         paragraph={true}
                         align="center"
                         className={classes.conditionalText}
-                    >Ou</Typography>
+                    >Ou</Typography> */}
 
                 </form>
 
-                <SocialButtonsAuth linkedInAuth={this.props.linkedInAuth} facebookAuth={this.props.facebookAuth} />
+                {/* <SocialButtonsAuth linkedInAuth={this.props.linkedInAuth} facebookAuth={this.props.facebookAuth} /> */}
 
                 <div classes={classes.form}>
                     <Typography

nextjs/components/organisms/ShortVideoHooker.js

@@ -8,6 +8,7 @@ import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
 
 import VideoVimeo from '../atoms/VideoVimeo'
 
+
 const styles = theme => ({
     root: {
         position: 'relative',
@@ -169,7 +170,7 @@ class ShortVideoHooker extends Component {
 
         return (
             <div className={classes.video}>
-                <VideoVimeo classesOverride={ classes.videoVimeo } videoId={videoList[this.state.i].vimeoId} title={videoList[this.state.i].title}
+                {/* <VideoVimeo classesOverride={ classes.videoVimeo } videoId={videoId} 
                     options={`?byline=0&title=0&background=1&autoplay=1&mute=1`} />
                 <section className={classes.text}>
                     <Typography gutterBottom
@@ -199,7 +200,7 @@ class ShortVideoHooker extends Component {
                     >
                         Voir l'offre
                 </Button>
-                </Link>
+                </Link> */}
             </div>
         )
     }

nextjs/components/organisms/SocialShare.js

@@ -23,7 +23,7 @@ const useStyles = makeStyles(theme => ({
         padding: theme.spacing(1.5),
         borderRadius: '20px',
         fontSize: '1em',
-        textAlign: 'center', 
+        textAlign: 'center',
     },
     FacebookIcon: {
         backgroundColor: theme.palette.social.facebook,
@@ -51,26 +51,19 @@ export default function SocialShare(props) {
 
     return (
         <div className={classes.root}>
-            <Link href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)} >
-                <a>
-                    <Icon className={clsx(classes.icon, classes.FacebookIcon, 'fab fa-facebook-f')} color="secondary" />
-                </a>
-            </Link>
-            <Link href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} >
-                <a>
-                    <Icon className={clsx(classes.icon, classes.TwitterIcon, 'fab fa-twitter')} color="secondary" />
-                </a>
-            </Link> 
-            <Link href={"https://www.linkedin.com/shareArticle?mini=true&url=" +encodeURIComponent( props.url + "&title=Talent's Tube")} >
-                <a>
+            <a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)} target="_blank">
+                <Icon className={clsx(classes.icon, classes.FacebookIcon, 'fab fa-facebook-f')} color="secondary" />
+            </a>
+            <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} target="_blank">
+                <Icon className={clsx(classes.icon, classes.TwitterIcon, 'fab fa-twitter')} color="secondary" />
+            </a>
+            <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talent's Tube")} target="_blank">
                 <Icon className={clsx(classes.icon, classes.LinkedinIcon, 'fab fa-linkedin-in')} color="secondary" />
-                </a>
-            </Link>
-            <Link href={"mailto:?subject=Offre d'emploi Talent's Tube&body=Regardez cette offre : " + props.url} >
-                <a>
+            </a>
+            {/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
+            <a href={"mailto:?subject=Offre d'emploi Talent's Tube&body=Regardez cette offre : " + props.url} target="_blank"s>
                 <Icon className={clsx(classes.icon, classes.MailIcon, 'fas fa-envelope')} color="secondary" />
-                </a>
-            </Link>
+            </a>
         </div>
     );
 }

nextjs/components/organisms/Tile.js

@@ -30,7 +30,7 @@ const styles = theme => ({
     margin: '2vh 3vh 3vh 1vh',
     [theme.breakpoints.up('sm')]: {
       margin: '1vh 0 1vh 0',
-      height: '420px',
+      height: '530px',
     },
     [theme.breakpoints.up('md')]: {
       height: '404px',
@@ -99,7 +99,7 @@ class Tile extends React.Component {
     const logoName = (rowData.company) ? rowData.company.logo : rowData.logo
     const logoUrl = publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + logoName
 
-    const router = (rowData.company) ? `/Offre/${rowData.id}-${_.kebabCase(rowData.title)}-${_.kebabCase(rowData.location.gmap_address.name)}` : `/Entreprise/${rowData.id}-${_.kebabCase(rowData.brand_name)}-${_.kebabCase(rowData.addresses.billing.city)}`
+    const router = (rowData.company) ? `/Offre/${rowData.id}-${_.kebabCase(rowData.title)}` : `/Entreprise/${rowData.id}-${_.kebabCase(rowData.brand_name)}}`
 
     //rowData._embedded.company.brand_name
     return (
@@ -113,7 +113,7 @@ class Tile extends React.Component {
             />
             <KeyboardArrowleftIcon className={classes.iconPlay} />
             <div className={classes.logoContainer}>
-              <Avatar className={classes.logo} src={logoUrl} alt="company"/>
+              <Avatar className={classes.logo} src={logoUrl} alt={rowData.title}/>
             </div>
             { children }
           </CardContent>

nextjs/components/organisms/TileCompany.js

@@ -23,7 +23,7 @@ const styles = theme => ({
         paddingLeft: theme.spacing(1),
         paddingRight: theme.spacing(1),
         minHeight: '8vh',
-        [theme.breakpoints.up('lg')]: {
+        [theme.breakpoints.up('md')]: {
             minHeight: 'inherit',
         },
     },

nextjs/components/organisms/TileOffre.js

@@ -1,7 +1,5 @@
 import React, { Fragment } from 'react';
 import PropTypes from "prop-types";
-import Router from 'next/router'
-import getConfig from 'next/config'
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import IconText from './../atoms/IconText';
@@ -12,11 +10,11 @@ const styles = theme => ({
         flexDirection: 'column',
         justifyContent: 'space-between',
         position: 'absolute',
-        top: '51%',
+        top: '44%',
         width: '100%',
     },
     companyTitle: {
-        fontSize: '0.8em',
+        fontSize: '1em',
         fontWeight: '100',
         padding: theme.spacing(0, 2),
         marginTop: '4vh',
@@ -26,7 +24,7 @@ const styles = theme => ({
         },
     },
     jobTitle: {
-        fontSize: '1em',
+        fontSize: '1.2em',
         padding: theme.spacing(0, 2),
         minHeight: '8vh',
         [theme.breakpoints.up('lg')]: {
@@ -61,7 +59,7 @@ class TileOffre extends React.Component {
                         component="h4"
                         align="center"
                         className={classes.companyTitle}>
-                        {tile.company.brand_name && tile.company.brand_name}
+                        {tile.company.brand_name && tile.company.brand_name} 
                     </Typography>
                     <Typography
                         gutterBottom
@@ -84,6 +82,10 @@ class TileOffre extends React.Component {
                     {tile.extra && tile.extra.contract_type &&
                         <IconText classes={{ root: classes.rootIconText }} variant="assignment" text={tile.extra.contract_type} />
                     }
+
+                    {tile.beneficiaire &&
+                        <IconText classes={{ root: classes.rootIconText }} variant="business" text={tile.beneficiaire} />
+                    }
                 </section>
             </Fragment>
         );

nextjs/components/organisms/VideoPlayer.js

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

nextjs/components/organisms/VideoSlider.js

@@ -1,128 +0,0 @@
-
-import Link from 'next/link';
-import React, { Component } from 'react'
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-
-import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
-
-const styles = theme => ({
-    slider: {
-        position: 'relative',
-        '& .aws-sld__wrapper , & .aws-sld__content': {
-            height: '85vh',
-        },
-        text: {
-            zIndex: '999',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-            position: 'absolute',
-            top: '5vh',
-            left: '3vh',
-        },
-        textCompany: {
-            color: theme.palette.secondary.main,
-            backgroundColor: 'rgba(30,35,39,0.9)',
-            padding: theme.spacing(0.8, 2),
-            marginBottom: 0,
-            fontWeight: 'bold',
-            fontSize: '1em',
-        },
-        textJob: {
-            color: theme.palette.secondary.main,
-            backgroundColor: 'rgba(30,35,39,0.5)',
-            padding: theme.spacing(0.4, 2),
-            marginBottom: 0,
-            fontWeight: 'lighter',
-            fontSize: '0.9em',
-        },
-    },
-});
-
-const videoList = [
-    {
-        vimeoId: '350927569',
-        title: 'Les Vergers de Châteaubourg',
-        adTitle: 'Conducteurs de ligne (H/F)',
-        link: '/Offre/73-Les-Vergers-de-Châteaubourg-chateaubourg',
-        logo: 'fdc1e6168fe8e3921e336e93fe00e176.jpeg'
-    },
-    {
-        vimeoId: '350927551',
-        title: 'Grand Ouest Étiquettes',
-        adTitle: 'Conducteurs de machine d’impression',
-        link: '/Offre/79-Grand-Ouest-Étiquettes-Saint-Brieuc',
-        logo: '3fe5baeb48a7b6c94fbc56989dffec43.png'
-    },
-    {
-        vimeoId: '350927537',
-        title: 'Fym Action',
-        adTitle: 'Promoteur des ventes en alimentaire (H/F)',
-        link: '/Offre/81-Fym-Action-Caudan',
-        logo: '0a4c111bc35a4b2ab654ab8fce9f1d53.png'
-    }
-]
-
-
-const content = videoList.map((video, index) =>
-    <div key={index}>
-        <iframe allow="autoplay; fullscreen" width="1920" height="1080" src={'https://player.vimeo.com/video/' + video.vimeoId + "?autoplay=1?muted=1?background=1"} frameBorder="0" allowFullScreen></iframe>
-        <section className={styles.text}>
-            <Typography gutterBottom
-                variant="headline"
-                variant="h6"
-                component="h4"
-                align="center"
-                className={styles.textCompany}>
-                {video.title}
-            </Typography>
-
-            <Typography gutterBottom
-                variant="headline"
-                variant="h6"
-                component="h4"
-                align="center"
-                className={styles.textJob}>
-                {video.adTitle}
-            </Typography>
-        </section>
-    </div>
-
-);
-
-class VideoSlider extends Component {
-
-
-    state = {
-
-    }
-
-    componentDidMount() {
-
-    }
-
-    componentWillUnmount() {
-
-    }
-
-    render() {
-        const { classes } = this.props;
-        var settings = {
-            dots: true,
-            infinite: true,
-            speed: 500,
-            slidesToShow: 1,
-            slidesToScroll: 1
-          };
-        return (
-            <Slider>
-                {content}
-            </Slider>
-        )
-    }
-}
-export default withStyles(styles)(VideoSlider)

nextjs/components/templates/Grid.js

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

nextjs/components/templates/LayoutCompany.js

@@ -6,13 +6,11 @@ import RootContainer from '../atoms/RootContainer'
 import ButtonBase from "@material-ui/core/ButtonBase";
 import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import HideOnScroll from '../atoms/CollapsibleBack';
-import Fragment from 'react';
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
 import Header from '../organisms/Header'
 import {AppBar,CssBaseline,Container,Toolbar,IconButton,Typography} from "@material-ui/core";
-import MenuIcon from "@material-ui/icons/Menu";
-import Box from "@material-ui/core/Box";
 import Hidden from '@material-ui/core/Hidden';
+import Link from 'next/link'
 
 const styles = theme => ({
   RootContainer: {
@@ -68,12 +66,21 @@ const styles = theme => ({
   },
   button: {
     textTransform: 'inherit',
-    marginLeft: theme.spacing(8),
-    marginRight: theme.spacing(8),
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     padding: theme.spacing(1.2, 2),
     color: theme.palette.secondary.main,
     backgroundColor: theme.palette.primary.important,
   },
+  voirOffre: {
+    textTransform: 'inherit',
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    padding: theme.spacing(1.2, 2),
+    color: '#BBBCBD',
+    backgroundColor: '#F3F3F4',
+    
+  },
 })
 
 function LayoutCompany(props) {
@@ -108,8 +115,13 @@ function LayoutCompany(props) {
           
           <Hidden mdUp>
           <div id="F" className={classes.foot}>
-            {/* <div className={classes.inner}>
-          <div className={classes.grow} /> */}
+          <Link href="#discover"  >
+            <Button
+                variant="contained"
+                className={classes.voirOffre + ' cypButtonApply'}
+            >Voir les offres</Button>
+                                            
+          </Link>
             <Button
               variant="contained"
               className={classes.button}
@@ -117,8 +129,6 @@ function LayoutCompany(props) {
               onClick={() => Router.push(`/Reponse?companyId=${companyId}`)}
             >
               Candidature spontanée</Button>
-            {/* <div className={classes.grow} />
-        </div> */}
           </div>
           </Hidden>
 

nextjs/components/templates/LayoutOffre.js

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

nextjs/components/templates/loader.js

@@ -6,6 +6,7 @@ const styles = theme => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
+    textAlign: 'center',
     justifyContent: 'center',
     fontFamily: 'Dosis',
     fontWeight: '500',
@@ -19,7 +20,7 @@ class Loader extends React.Component {
   render() {
     const { classes } = this.props;
     return (
-      <div className={classes.loader + ' ' + 'alert alert-info'}><CircularProgress color="primary" />Chargement...</div>
+      <div className={classes.loader + ' ' + 'alert alert-info'}><CircularProgress color="primary" />Chargement... </div>
     )
 
   }

nextjs/components/templates/loaderVideo.js

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

nextjs/data/api.js

@@ -67,17 +67,17 @@ export default {
         },
     },
     ads: {
-        fetchAd: (id) => {
-            return axios.get(`api/ads/${id}`).then(res => res.data)
+        fetchJob: (id) => {
+            return axios.get(`api/jobs/${id}`).then(res => res.data)
         },
 
         //offset is the index position of the first element to start requesting at 
         // use 0|1 for isPromoted
-        fetchAds: ({ limit = null, order = "", keyword = "", offset = 1, status = 'PUBLISHED', isPromoted = null, isEmphasis = null }) => {
+        fetchJobs: ({ limit = null, order = "", keyword = "", offset = 1, status = 'PUBLISHED', isPromoted = false, isEmphasis = false }) => {
             isPromoted = isPromoted !== null ? isPromoted * 1 : isPromoted;
             isEmphasis = isEmphasis !== null ? isEmphasis * 1 : isEmphasis;
 
-            return axios.get('api/ads', { params: { offset, limit, order, keyword, status, isPromoted, isEmphasis } })
+            return axios.get('api/jobs', { params: { offset, limit, order, keyword, status, isPromoted, isEmphasis } })
                 .then(res => res.data)
         }
 
@@ -96,7 +96,7 @@ export default {
         postAnswer: (payload) => {
             return axios.post("/api/answers", { adId: payload.adId, mediaId: payload.mediaId, companyId: payload.companyId }).then(res => res)
         },
-        fetchAdsAnswered: ({ limit = null, order = "", keyword = "", offset = 1 }) => {
+        fetchJobsAnswered: ({ limit = null, order = "", keyword = "", offset = 1 }) => {
             return axios.get(`api/answers`, { params: { offset, limit, order, keyword } }).then(res => res.data)
         },
         fetchAnswer: (payload) => {
@@ -120,9 +120,24 @@ export default {
                 withCredentials: true
             }).then(res => res)
         },
+        uploadMediaPres: (payload) => {
+            return axios.post("/api/mediaPres", payload, {
+                headers: {
+                    'Content-Type': `multipart/form-data;`
+                },
+                withCredentials: true
+            }).then(res => res)
+        },
+        uploadMediaCv: (payload) => {
+            return axios.post("/api/mediaCv", payload, {
+                headers: {
+                    'Content-Type': `multipart/form-data;`
+                },
+                withCredentials: true
+            }).then(res => res)
+        }
     },
     stats: {
-        //
         countAdView: id => {
             if (!!localStorage.ttJWT)
                 setAuthorizationHeader(localStorage.ttJWT)
@@ -131,10 +146,9 @@ export default {
         countCompanyView: id => {
             if (!!localStorage.ttJWT)
                 setAuthorizationHeader(localStorage.ttJWT)
-                console.log(localStorage.ttJWT)
             axios.get(`api/companyAjaxRecStat/${id}`)
         }, 
     }
 
 
-};
+};

nextjs/next.config.js

@@ -8,45 +8,65 @@ const Dotenv = require('dotenv-webpack');
 
 const { ANALYZE, DEV } = process.env
 
-module.exports = withPlugins([
-  [withCSS],
-  [optimizedImages, {
-    /* config for next-optimized-images */
-  }],
-  [withOffline, {
-    dontAutoRegisterSw: DEV ? true : false,
-    workboxOpts: {
-      runtimeCaching: [
-        // { urlPattern: /.*auth.*/, handler: 'networkOnly' },
-        // { urlPattern: /.*account.*/, handler: 'networkOnly' },
-        { urlPattern: /^https?.*/, handler: 'NetworkFirst' },
-        {
-          urlPattern: /\.(?:png|jpg|jpeg|svg|webp)$/,
-          handler: "CacheFirst",
-          options: {
-            cacheName: "images",
-            expiration: {
-              maxEntries: 100
+module.exports = withPlugins(
+  [
+    [withCSS],
+    [optimizedImages, {
+      /* config for next-optimized-images */
+    }],
+    [withOffline, {
+      dontAutoRegisterSw: DEV ? true : false,
+      workboxOpts: {
+        runtimeCaching: [
+          // { urlPattern: /.*auth.*/, handler: 'networkOnly' },
+          // { urlPattern: /.*account.*/, handler: 'networkOnly' },
+          { urlPattern: /^https?.*/, handler: 'NetworkFirst' },
+          {
+            urlPattern: /\.(?:png|jpg|jpeg|svg|webp)$/,
+            handler: "CacheFirst",
+            options: {
+              cacheName: "images",
+              expiration: {
+                maxEntries: 100
+              }
             }
           }
-        }
-      ],
-      importScripts:
-        ['/static/js/Edeclic-service-worker.js',
-          '/static/js/backgroundSync-sw.js'
-        ]
-    },
-
-  }],
-
-  [{
-    publicRuntimeConfig: {
-      frontServerUrl: 'https://pp.app.talentstube.com',
-      enableVideo: true,
-      adListDefaultUrl: "/static/images/default/default_picture_company.svg",
-      logoRootUrl: 'https://www.talentstube.com/media/cache/profile_thumb/uploads/img/'
-    }
-  }]],
+        ],
+        importScripts:
+          ['/statique/js/Edeclic-service-worker.js',
+            '/statique/js/backgroundSync-sw.js'
+          ]
+      },
+    }],
+    [{
+      publicRuntimeConfig: {
+        // DEV
+        // symphonyUrl: 'http://localhost/app_dev.php/',
+        // blogUrl: 'https://blog.talentstube.com',
+        // frontServerUrl: 'http://localhost:3000',
+        // cvThequeUrl: 'https://recruteur.talentstube.com',
+        // PROD
+        // symphonyUrl: 'https://recruteur.talentstube.com/',
+        // blogUrl: 'https://blog.talentstube.com',
+        // frontServerUrl: 'https://www.talentstube.com/',
+        // cvThequeUrl: 'https://recruteur.talentstube.com',
+        // PRE PROD
+        symphonyUrl: 'https://pp.talentstube.com/',
+        blogUrl: 'https://blog.talentstube.com',
+        frontServerUrl: 'https://pp.app.talentstube.com/',
+        cvThequeUrl: 'https://recruteur.talentstube.com',
+        adListDefaultUrl: '/statique/images/default/default_picture_company.svg',
+        cachedMediaUrl: '/media/cache/profile_thumb/uploads/img/',
+        postedContentUrl: '/uploads/img/',
+        postedContentCv: '/uploads/cv/',
+        ReCAPTCHA: {
+          "siteKey": "6LdyqLwUAAAAADKI5uC7d5W9VqVgzd8VEmMU2Yi-"
+        },
+        applicationServerPublicKey: 'BNFyiyPiLH97Dgc0m1vXluUNaCN6y3Hkgd4YcqS2lVkP8my3tq2D5gM5g7cY6R4VxC7GljSzkLRu+k+oO+2TtjU='
+        //applicationServerPublicKey: 'BG2lV673DvB67dzEwX9GKfds3sXaEdtZo2oWO1cO2xUdTJAFZ_rV_UrP1nHQz-F8LJNO9HxG0kmQRIb54JL1ZCA'
+      }
+    }]
+  ],
   {
     webpack: (config, { isServer }) => {
 
@@ -70,23 +90,11 @@ module.exports = withPlugins([
         RecordRTC: "recordrtc"
       };
 
-      config.module.rules.push(
-        {
-          test: /\.(css|scss)/,
-          use: [
-            { loader: 'style-loader'},
-          ],
-          include: [/node_modules/],
-        },
-
-      )
-
       config.resolve.alias = { ...config.resolve.alias, ...videojsAlias };
       config.plugins.push(videojsPlugin);
 
       config.plugins.push(new Dotenv());
 
-      console.info(config);
       return config
     }
   },

nextjs/out/sitemap_local.xml

@@ -2,27 +2,27 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
   <url>
     <loc>https://app.talentstube.com/Candidature</loc>
-    <lastmod>2019-10-03</lastmod>
+    <lastmod>2019-09-17</lastmod>
   </url>,<url>
     <loc>https://app.talentstube.com/Cgu</loc>
-    <lastmod>2019-10-03</lastmod>
+    <lastmod>2019-09-17</lastmod>
   </url>,<url>
     <loc>https://app.talentstube.com/Confidentialite</loc>
-    <lastmod>2019-10-03</lastmod>
+    <lastmod>2019-11-04</lastmod>
   </url>,<url>
     <loc>https://app.talentstube.com/Entreprises</loc>
-    <lastmod>2019-10-03</lastmod>
+    <lastmod>2019-09-17</lastmod>
   </url>,<url>
     <loc>https://app.talentstube.com/Help</loc>
     <lastmod>2019-10-11</lastmod>
   </url>,<url>
     <loc>https://app.talentstube.com/Login</loc>
-    <lastmod>2019-10-11</lastmod>
+    <lastmod>2019-10-14</lastmod>
   </url>,<url>
     <loc>https://app.talentstube.com/MentionsLegales</loc>
-    <lastmod>2019-10-03</lastmod>
+    <lastmod>2019-11-04</lastmod>
   </url>,<url>
     <loc>https://app.talentstube.com/Offres</loc>
-    <lastmod>2019-10-03</lastmod>
+    <lastmod>2019-10-16</lastmod>
   </url>
 </urlset>

nextjs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "nextjs",
+  "name": "talentstube",
   "version": "1.0.0",
   "private": true,
   "resolutions": {
@@ -7,9 +7,11 @@
   },
   "dependencies": {
     "@blunck/next-alias": "^1.0.0",
-    "@material-ui/core": "^4.2.0",
-    "@material-ui/icons": "^3.0.1",
+    "@material-ui/core": "^4.9.10",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@ostai/next-css": "^1.0.2",
+    "autosuggest-highlight": "^3.1.1",
     "axios": "^0.18.0",
     "connect-mongo": "^2.0.1",
     "cross-env": "^5.2.0",
@@ -26,16 +28,16 @@
     "lodash": "^4.17.11",
     "mongodb": "^3.1.6",
     "nedb": "^1.8.0",
-    "next": "^9.0.6",
+    "next": "^9.1.1",
     "next-auth": "^1.11.0",
     "next-compose-plugins": "^2.1.1",
     "next-offline": "^4.0.2",
     "next-optimized-images": "^1.4.1",
     "next-redux-saga": "^4.0.2",
     "next-redux-wrapper": "^3.0.0-alpha.2",
+    "next-seo": "^4.7.3",
     "next-transpile-modules": "^2.3.1",
     "node-mailjet": "^3.3.1",
-    "node-sass": "^4.12.0",
     "nodemailer": "^4.6.8",
     "nodemailer-direct-transport": "^3.3.2",
     "nodemailer-smtp-transport": "^2.7.4",
@@ -45,13 +47,15 @@
     "passport-oauth2": "https://github.com/Huaoe/passport-oauth2.git",
     "prop-types": "latest",
     "react": "^16.9.0",
-    "react-awesome-slider": "^2.0.0",
+    "react-ad-block-detect": "^1.0.1",
+    "react-autosuggest": "^10.0.2",
     "react-dom": "^16.9.0",
     "react-ga": "^2.5.7",
     "react-google-recaptcha": "^2.0.1",
+    "react-html-parser": "^2.0.2",
     "react-jss": "latest",
+    "react-moment": "^0.9.7",
     "react-redux": "^7.0.3",
-    "react-slick": "^0.25.2",
     "react-swipeable-views": "^0.13.3",
     "reactstrap": "^6.4.0",
     "recordrtc": "^5.5.4",
@@ -61,20 +65,18 @@
     "redux-persist": "^5.10.0",
     "redux-saga": "^1.0.2",
     "reselect": "^4.0.0",
-    "sass-loader": "^8.0.0",
-    "slick-carousel": "^1.8.1",
     "style-loader": "^1.0.0",
     "terser": "3.14",
     "universal-cookie": "^3.0.4",
     "validator": "^11.0.0",
-    "video.js": "latest",
-    "videojs-record": "latest",
+    "videojs-record": "^3.8.0",
     "webrtc-adapter": "^7.2.3"
   },
   "scripts": {
     "dev": "cross-env PORT=3000 node server.js",
     "build": "next build && yarn postExport && yarn copysw && yarn copySiteMap",
     "start": "cross-env PORT=8000 NODE_ENV=production node server.js",
+    "startPreprod": "cross-env PORT=8000 NODE_ENV=preproduction node server.js",
     "pm2-prod": "yarn build && pm2 start --name 'next' -- start",
     "bs": "yarn build && yarn start",
     "test": "yarn cypress run",
@@ -87,7 +89,7 @@
     "backupdb": "docker exec -t tt-website.postgres.dev pg_dumpall --database database -c -U postgres > cypress/postgres.sql",
     "copySiteMap": "cp out/* .next/",
     "postExport": "node src/postExport.js",
-    "copysw": "cp -R static/js .next/static/"
+    "copysw": "cp -R public/static/js .next/static/"
   },
   "devDependencies": {
     "gmail-tester": "^1.1.3",

nextjs/pages/Candidature.js

@@ -147,6 +147,7 @@ class Candidature extends React.Component {
             <LayoutCandidature>
                 <Head>
                     <title key="title">Candidature</title>
+                    <meta name="robots" content="noindex, nofollow"></meta>
                 </Head>
                 <Fragment>
                     <div className={classes.container}>
@@ -187,7 +188,7 @@ class Candidature extends React.Component {
                                                         {this.props.user.firstname + " " + this.props.user.lastname}
                                                     </Typography>
                                                     <Typography gutterBottom className={classes.userTextDate}>
-                                                        Envoyée le  {(new Date(this.props.answer.c_time)).toLocaleDateString("fr-FR")}
+                                                        Envoyé le  {(new Date(this.props.answer.c_time)).toLocaleDateString("fr-FR")}
                                                     </Typography>
                                                 </div>
                                             </section>

nextjs/pages/CandidatureValidation.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Layout from "../components/templates/Layout";
+import AccountProfileCandidature from "../components/organisms/AccountProfileCandidature";
+import Head from 'next/head'
+// import AdBlockDetect from 'react-ad-block-detect';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+  },
+  button: {
+    marginRight: theme.spacing(1),
+  },
+  completed: {
+    display: 'inline-block',
+  },
+  instructions: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+}));
+
+
+
+export default function HorizontalNonLinearStepper() {
+  const classes = useStyles();
+
+  return (
+    <Layout>
+      <Head>
+          <title key="title">Profil – Talents Tube</title>
+          <meta key="robots" name="robots" content="noindex, nofollow"></meta>
+      </Head>
+        <div >
+          <AccountProfileCandidature />
+        </div>
+        
+        {/* <AdBlockDetect>
+                <p>AdBlocks a été détecté. Pour que Talents Tube puisse fonctionner correctement, veuillez désactiver Ad Blocks</p>
+        </AdBlockDetect> */}
+    </Layout>
+  );
+}

nextjs/pages/Candidatures.js

@@ -8,9 +8,10 @@ import { Typography } from '@material-ui/core';
 import LayoutGrid from "../components/templates/LayoutGrid";
 import Grid from "../components/templates/Grid"
 import AnswerRow from "../components/organisms/AnswerRow"
-import { fetchAdsAnsweredRequest } from '../actions/answer'
+import { fetchJobsAnsweredRequest } from '../actions/answer'
 import { AnswersSelector } from '../reducers/answers'
 import Head from 'next/head'
+import Link from 'next/link';
 
 const styles = theme => ({
     root: {
@@ -24,6 +25,13 @@ const styles = theme => ({
         flexDirection: 'column',
         padding: theme.spacing(0,3),
     },
+    profil: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing(3,3),
+        textAlign: 'center',
+        backgroundColor: theme.palette.primary.main,
+    },
     title: {
       fontFamily: 'Dosis',
       fontSize: '1.5em',
@@ -45,16 +53,18 @@ class Candidatures extends React.Component {
             <LayoutGrid backLink="/">
             <Head>
                 <title key="title">Candidatures</title>
+                <meta name="robots" content="noindex, nofollow"></meta>
             </Head>
 
                 {/* TODO */}
                 <Typography component="h1" align="center" className={classes.title} gutterBottom>
                     Mes candidatures
                 </Typography>
+
                 <div className={classes.container}>
 
                     <Grid CustomRowComponent={AnswerRow}
-                        dataFetcher={this.props.fetchAdsAnsweredRequest}
+                        dataFetcher={this.props.fetchJobsAnsweredRequest}
                         data={this.props.answers}
                         currentPage={this.props.currentPage}
                         recordCount={this.props.recordCount}
@@ -63,6 +73,16 @@ class Candidatures extends React.Component {
                         searchable={false}
                     />
                 </div>
+
+
+                
+
+
+
+
+
+
+
             </LayoutGrid>
         );
     }
@@ -83,4 +103,4 @@ function mapStateToProps(state) {
     };
 }
 
-export default withStyles(styles)(connect(mapStateToProps, {fetchAdsAnsweredRequest })(Candidatures))
+export default withStyles(styles)(connect(mapStateToProps, {fetchJobsAnsweredRequest })(Candidatures))

nextjs/pages/Confidentialite.js

@@ -57,7 +57,7 @@ class Confidentialite extends Component {
                 </Head>
                 <div className={classes.container}>
                     <Typography className={classes.text} gutterBottom align="left">
-                        Nous vous invitons à lire avec attention le présent document. Pour toute question concernant ce document et, d’une manière générale, sur la collecte et le traitement de vos informations personnelles par la société talentstube.com, n’hésitez pas à nous contacter via le formulaire présent sur la page contact : <Link href="https://blog.talentstube.com/contact.html"><a className={classes.link} target="_blank">https://blog.talentstube.com/contact.html</a></Link>
+                        Nous vous invitons à lire avec attention le présent document. Pour toute question concernant ce document et, d’une manière générale, sur la collecte et le traitement de vos informations personnelles par la société talentstube.com, n’hésitez pas à nous contacter via le formulaire présent sur la page contact : <a href="https://blog.talentstube.com/contact" className={classes.link} target="_blank">https://blog.talentstube.com/contact</a>
                     </Typography>
 
                     <Typography className={classes.title} component="h2" gutterBottom align="left">
@@ -155,7 +155,7 @@ class Confidentialite extends Component {
                             `
                             Vous disposez d'un droit d'accès, de rectification, de suppression, d’opposition et de portabilité des données. Nous disposons d’un délai de 30 jours à compter de votre demande pour apporter une réponse.
                             Vous pouvez demander une limitation du traitement des données collectées. L’exercice de ces droits peut exercer ce droit auprès de TALENTS TUBE en adressant une requête soit par voie postale à l'adresse suivante : 3 Rue Louis de Broglie, Village By CA 56000 Vannes, soit par courrier électronique via le formulaire présent sur la page Contact `
-                        }<Link href="https://blog.talentstube.com/contact.html"><a className={classes.link} target="_blank">https://blog.talentstube.com/contact.html</a></Link>{`. Cette requête devra être accompagnée d'une pièce d'identité revêtant la signature de l'Utilisateur et devra préciser l'adresse et le moyen par lesquelles une réponse pourra être envoyée..
+                        }<a  href="https://blog.talentstube.com/contact" className={classes.link} target="_blank">https://blog.talentstube.com/contact</a>{`. Cette requête devra être accompagnée d'une pièce d'identité revêtant la signature de l'Utilisateur et devra préciser l'adresse et le moyen par lesquelles une réponse pourra être envoyée..
                             `
                         }
                     </Typography>
@@ -171,14 +171,14 @@ class Confidentialite extends Component {
                             Vous avez la possibilité de désactiver les cookies en vous rendant dans les options de votre navigateur. Cliquez sur le lien correspondant à votre navigateur pour découvrir comment faire :
 `
                         }
-                        <Link href="https://support.google.com/chrome/answer/95647?hl=fr"><a className={classes.link} target="_blank">Google Chrome</a></Link><br />
-                        <Link href="https://support.mozilla.org/fr/kb/activer-desactiver-cookies"><a className={classes.link} target="_blank">Mozilla Firefox</a></Link><br />
-                        <Link href="http://support.apple.com/kb/PH17191?viewlocale=fr_FR&locale=en_US"><a className={classes.link} target="_blank">Safari</a></Link><br />
-                        <Link href="http://help.opera.com/Windows/10.20/fr/cookies.html"><a className={classes.link} target="_blank">Opera</a></Link><br />
-                        <Link href="http://windows.microsoft.com/fr-fr/internet-explorer/delete-manage-cookies#ie=ie-11"><a className={classes.link} target="_blank">Internet Explorer</a></Link><br />
-                        {
+                        <a className={classes.link}  href="https://support.google.com/chrome/answer/95647?hl=fr" target="_blank">Google Chrome</a><br />
+                        <a  href="https://support.mozilla.org/fr/kb/activer-desactiver-cookies" className={classes.link} target="_blank">Mozilla Firefox</a><br />
+                        <a  href="http://support.apple.com/kb/PH17191?viewlocale=fr_FR&locale=en_US" className={classes.link} target="_blank">Safari</a><br />
+                        <a href="http://help.opera.com/Windows/10.20/fr/cookies.html" className={classes.link} target="_blank">Opera</a><br />
+                        <a href="http://windows.microsoft.com/fr-fr/internet-explorer/delete-manage-cookies#ie=ie-11" className={classes.link} target="_blank">Internet Explorer</a><br />
+                        
                             `
-                            Pour plus d’informations sur les cookies et la façon de les gérer, nous vous recommandons de consulter le site `} <Link href="http://www.youronlinechoices.com/fr/"><a className={classes.link} target="_blank">www.youronlinechoices.com</a></Link>{`, développé par l’organisme EDAA (European Interactive Digital Advertising Alliance).
+                            Pour plus d’informations sur les cookies et la façon de les gérer, nous vous recommandons de consulter le site ` <a href="http://www.youronlinechoices.com/fr/" className={classes.link} target="_blank">www.youronlinechoices.com</a>{`, développé par l’organisme EDAA (European Interactive Digital Advertising Alliance).
                             `
                         }
                     </Typography>
@@ -192,7 +192,7 @@ class Confidentialite extends Component {
                            Ce site utilise le service d’analyse web Google Analytics. Cela nous permet d’analyser la façon dont les internautes utilisent notre site afin de leur proposer une meilleure expérience de navigation. Pour ce faire, Google Analytics utilise des cookies de pistage permettant de suivre le parcours d’un internaute sur le site. Ces cookies sont conservés pour une durée de 26 mois.
                            Nous avons activé l’anonymisation des adresses IP pour ce site. Cela signifie que les adresses IP collectées par Google Analytics sont systématiquement raccourcies pour rendre impossible l’identification des internautes. Dans certains cas exceptionnels, l’adresse IP complète peut être transférée sur un serveur de Google localisé aux Etats-Unis, et est ensuite raccourcie immédiatement sur celui-ci. Google utilise les informations récoltées via les cookies pour le compte de talents tube, dans le but d’analyser les habitudes de navigation des internautes et de fournir des rapports sur l’activité du site.
                            Google met à disposition des utilisateurs un plug-in pour leur navigateur leur permettant d’empêcher la récolte de données relatives à leur navigation sur les sites web utilisant Google Analytics.
-                           Ce plug-in est disponible à cette adresse : `} <Link href="https://tools.google.com/dlpage/gaoptout?hl=fr"><a className={classes.link} target="_blank">tools.google.com/dlpage/gaoptout</a></Link> {`
+                           Ce plug-in est disponible à cette adresse : `} <a href="https://tools.google.com/dlpage/gaoptout?hl=fr" className={classes.link} target="_blank">tools.google.com/dlpage/gaoptout</a>{`
                            `
                         }
                     </Typography>

nextjs/pages/ConfirmAccount.js

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

nextjs/pages/Conseils.js

@@ -12,7 +12,7 @@ const styles = theme => ({
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    padding: theme.spacing(3,2),
+    padding: theme.spacing(3, 2),
     width: '100%',
   },
   vimeoVideo: {
@@ -26,17 +26,17 @@ class Conseils extends React.Component {
     const { classes } = this.props
 
     return (
-    <LayoutBack text="Quelques conseils !">
+      <LayoutBack text="Quelques conseils !">
         <Head>
           <title>Quelques conseils !</title>
           <meta name="description" content="Quelques conseils !" />
           <meta key="robots" name="robots" content="noindex, nofollow"></meta>
-          <link rel="canonical" href="https://app.talentstube.com" />
+          
         </Head>
-        <section className={ classes.container }>
-        <VideoVimeo videoId='356411947' autoplay='1'/>
+        <section className={classes.container}>
+          <VideoVimeo videoId='356411947' autoplay='1' />
         </section>
-    </LayoutBack>
+      </LayoutBack>
     )
 
   }

nextjs/pages/Entreprise.js

@@ -1,5 +1,5 @@
 
-import React, { Fragment } from 'react'
+import React, { Fragment,lazy, Suspense } from 'react'
 import Router from 'next/router'
 import { connect } from "react-redux"
 import PropTypes from 'prop-types'
@@ -16,7 +16,8 @@ import { fetchCompanyRequest, clearCompany, countCompanyViewRequest } from '../a
 import IconText from '../components/atoms/IconText'
 import IconTextInline from '../components/atoms/IconTextInline'
 import SimpleCollapse from '../components/atoms/SimpleCollapse'
-import VideoVimeo from '../components/atoms/VideoVimeo'
+const VideoVimeo = lazy(() => import('../components/atoms/VideoVimeo'));
+//import VideoVimeo from '../components/atoms/VideoVimeo'
 import SocialShare from '../components/organisms/SocialShare'
 import Loader from '../components/templates/loader'
 import _ from "lodash"
@@ -25,7 +26,7 @@ import withWidth from '@material-ui/core/withWidth'
 import Hidden from '@material-ui/core/Hidden';
 import NoResult from '../components/atoms/NoResult';
 import OgHead from '../components/atoms/OgHead';
-
+const renderLoader = () => <p>Chargement</p>;
 const styles = theme => ({
     companyContainer: {
         [theme.breakpoints.up('md')]: {
@@ -278,13 +279,25 @@ const styles = theme => ({
     },
     button: {
         textTransform: 'inherit',
-        marginLeft: theme.spacing(4),
-        marginRight: theme.spacing(4),
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
         padding: theme.spacing(1.2, 2),
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.important,
         alignSelf: 'center',
     },
+    voirOffre: {
+        textTransform: 'inherit',
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        padding: theme.spacing(1.2, 2),
+        color: '#BBBCBD',
+        backgroundColor: '#F3F3F4',
+
+    },
+    buttonContainer: {
+        alignItems: 'right',
+    },
     chip: {
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.main,
@@ -357,9 +370,9 @@ class Entreprise extends React.Component {
 
     render() {
         const { classes, company } = this.props;
-        const logoUrl = (company.logo ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + company.logo : "https://www.talentstube.com/img/default_picture_svg")
+        const logoUrl = (company.logo ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + company.logo : publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg")
 
-        const DefaultUrl = "https://www.talentstube.com/img/default_picture_svg"
+        const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
         const imgUrl = (company.presentation_video && company.presentation_video.thumbnails[0] && company.presentation_video.thumbnails[0].sizes[2]) ? company.presentation_video.thumbnails[0].sizes[2].link : DefaultUrl
 
         const offre = (company.count_ads == 1) ? company.count_ads + ' offre' : company.count_ads + ' offres'
@@ -384,11 +397,12 @@ class Entreprise extends React.Component {
         const { loading } = this.state;
         const socialShareUrl = typeof window !== 'undefined' ? window.location
             : publicRuntimeConfig.frontServerUrl + `/Entreprise/${company.id}`;
-
+        const descriptionVille = company.addresses.billing.city ? company.addresses.billing.city : "";
+        const descriptionCompany = company.brand_name ? company.brand_name : "";
         return (
             <LayoutCompany backLink="/Entreprises" companyId={company.id}>
-                <OgHead seo_title={company.brand_name && company.brand_name}
-                    seo_description={company.description}
+                <OgHead seo_title={company.brand_name && company.brand_name+" recrute des candidats en vidéo | Talents Tube"}
+                    seo_description={"Découvrez l'entreprise "+descriptionCompany +" et ses offres en vidéo - "+descriptionVille+ ". Envoyez votre candidature spontanée en vidéo."}
                     seo_url={socialShareUrl}
                     image={imgUrl}
                 ></OgHead>
@@ -414,17 +428,28 @@ class Entreprise extends React.Component {
                                             :
                                             (<Chip label={nbOffre} className={classes.chip + ' ' + classes.chipHeader} />)
                                         }
+                                        
                                         {/* ville */}
                                     </div>
                                 </div>
+                                <div className={classes.buttonContainer}>
+                                
+                                <Link href="#discover"  >
+                                            <Button
+                                                variant="contained"
+                                                className={classes.voirOffre + ' cypButtonApply'}
+                                            >Voir les offres</Button>
+                                            
+                                </Link>
                                 <Button
                                     variant="contained"
                                     className={classes.button}
                                     onClick={() => Router.push(`/Reponse?companyId=${company.id}`)}
                                 >Candidature spontanée</Button>
+                                </div>
                             </section>
                         </Hidden>
-                        {company.presentation_video && <VideoVimeo videoId={Ar.last(_.split(company.presentation_video.cdn_url, '/'))} autoplay='1' />}
+                        {company.presentation_video &&  <Suspense fallback={renderLoader()}><VideoVimeo videoId={Ar.last(_.split(company.presentation_video.cdn_url, '/'))} autoplay='1' /></Suspense>}
                         <div className={classes.container}>
                             <Hidden mdUp>
                                 <section className={classes.headerContainer}>
@@ -456,11 +481,10 @@ class Entreprise extends React.Component {
                                         : ''
                                     }
                                     {(company.website) ?
-                                        (<Link href={company.website} >
-                                            <a className={classes.websiteLink} rel="noopener" target="_blank" rel="noopener">
+                                        (
+                                            <a  href={company.website} className={classes.websiteLink} rel="noopener" target="_blank" rel="noopener">
                                                 <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business_center" text={!!company.website ? company.website : "website"} />
                                             </a>
-                                        </Link>
                                         )
                                         : ''
                                     }
@@ -476,9 +500,9 @@ class Entreprise extends React.Component {
                                     <section className={classes.IconTextContainerDesktop}>
                                         <IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={company.addresses.billing.city} />
                                         {(company.website) ?
-                                            (<Link href={!!company.website ? company.website : "website"}  >
-                                                <a target="_blank" rel="noopener" className={classes.websiteLink}><IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business_center" text={!!company.website ? company.website : "website"} /></a>
-                                            </Link>)
+                                            (
+                                                <a  href={!!company.website ? company.website : "website"} target="_blank" rel="noopener" className={classes.websiteLink}><IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business_center" text={!!company.website ? company.website : "website"} /></a>
+                                            )
                                             : ''
                                         }
 
@@ -504,6 +528,7 @@ class Entreprise extends React.Component {
                                         className={classes.button}
                                         onClick={() => Router.push(`/Reponse?companyId=${company.id}`)}
                                     >Candidature spontanée</Button>
+                                    
                                     <Typography className={classes.contentCondition}>
                                         ou
                                     </Typography>
@@ -544,7 +569,7 @@ class Entreprise extends React.Component {
                                             Découvrir le <span className={classes.primary}>territoire</span>
                                         </Typography>
                                         <section className={classes.discoverTerritoryContentContainer}>
-                                            <VideoVimeo classesOverride={classes.videoVimeo} videoId={territoryVideoId} autoplay='0' />
+                                            <Suspense fallback={renderLoader()}><VideoVimeo classesOverride={classes.videoVimeo} videoId={territoryVideoId} autoplay='0' /></Suspense>
                                             <Typography className={classes.territoryTitle}>
                                                 {(company.territories) ? company.territories[0].territory.brand_name : ''}
                                             </Typography>

nextjs/pages/Entreprises.js

@@ -1,6 +1,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import getConfig from 'next/config'
 import { withStyles } from '@material-ui/core/styles';
 import _ from "lodash"
 import Grid from "../components/templates/Grid"
@@ -11,6 +12,7 @@ import { fetchCompaniesRequest } from '../actions/companies'
 import { CompaniesSelector } from '../reducers/companies'
 import { connect } from "react-redux";
 import Head from 'next/head'
+import OgHead from '../components/atoms/OgHead';
 
 const styles = theme => ({
   root: {
@@ -64,13 +66,41 @@ class Entreprises extends React.Component {
 
   render() {
     const { classes } = this.props;
-
+    const { publicRuntimeConfig } = getConfig();
+    const socialShareUrl = typeof window !== 'undefined' ? window.location
+            : publicRuntimeConfig.frontServerUrl + `/Entreprises`;
+    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
+    const imgUrl = DefaultUrl ;
     return (
       <LayoutGrid backLink="/">
-        <Head>
+        {/* <Head>
           <title key="title">Entreprises qui recrutent – Talents Tube</title>
           <meta name="description" content="Les entreprises en vidéo." />
-        </Head>
+          
+          <meta name="twitter:card" content="summary"/>
+          <meta name="twitter:site" content="@TalentsTube"/>
+          <meta name="twitter:title" content="Les entreprises qui recrutent en vidéo | TalentsTube"/>
+          <meta name="twitter:description" content="Découvrez les entreprises qui recrutent en vidéo, elles dévoilent leurs marques employeur et leurs offres d'emploi en vidéo. Postulez rapidement à l'offre qui vous convient."/>
+          <meta name="twitter:image" content=""/>
+
+          
+          <meta property="og:title" content="Les entreprises qui recrutent en vidéo | TalentsTube"/>
+          <meta property="og:type" content="article"/>
+          <meta property="og:image" content=""/>
+          <meta property="og:description"
+                content="Découvrez les entreprises qui recrutent en vidéo, elles dévoilent leurs marques employeur et leurs offres d'emploi en vidéo. Postulez rapidement à l'offre qui vous convient."/>
+          <meta property="og:site_name" content="Talents Tube"/>
+          <meta property="og:url"
+                content=""/>
+         
+        </Head> */}
+         <OgHead seo_title="Vidéos marque employeur d'entreprises qui recrutent | Talents Tube"
+                    seo_description="Vidéos marque employeur d'entreprises qui recrutent, découvrez leurs offres d'emploi en vidéo. Postulez simplement en vidéo à l'offre de votre choix."
+                    seo_url={socialShareUrl}
+                    image={imgUrl}
+                    seo_key="Recrutement, video"
+                    
+                ></OgHead>
         <Typography gutterBottom component="h1"
           className={classes.title}>
           Les entreprises en <span className={classes.primary}>vidéo</span>
@@ -82,6 +112,7 @@ class Entreprises extends React.Component {
             currentPage={this.props.currentPage}
             recordCount={this.props.recordCount}
             loading={this.props.loading}
+            type="entreprises"
             limit={12}
             placeholder={"Rechercher une entreprise"}
           />

nextjs/pages/Help.js

@@ -8,8 +8,8 @@ import { withStyles } from '@material-ui/core/styles';
 import Layout from "../components/templates/Layout"
 import Footer from '../components/organisms/Footer';
 import Link from 'next/link';
-import Head from 'next/head'
-import VideoVimeo from './../components/atoms/VideoVimeo'
+import Head from 'next/head';
+import VideoVimeo from './../components/atoms/VideoVimeo';
 
 const styles = theme => ({
   root: {
@@ -102,6 +102,7 @@ function Help(props) {
     <Layout>
     <Head>
       <title key="title">Recrutement vidéo : fonctionnement – Talents Tube</title>
+      <meta key="robots" name="robots" content="noindex, nofollow"></meta>
     </Head>
       <section className={classes.root}>
         <Typography gutterBottom component="h1"
@@ -120,7 +121,7 @@ function Help(props) {
         <img alt="talents-tube" src='/static/images/help/image-aide-web-app.svg' className={classes.teamworkingImg} />
         <Typography gutterBottom component="h2"
           className={classes.subTitle}>
-          Découvrez les offres d'emploi en vidéo
+          Comment postuler à une offre d’emploi en vidéo
         </Typography>
         <VideoVimeo videoId='356411947' classesOverride={classes.video} autoplay='0'/>
         <Typography
@@ -130,13 +131,34 @@ function Help(props) {
         </Typography>
         <Typography gutterBottom component="h2"
           className={classes.subTitle}>
-          Vous possédez déjà un CV vidéo ?
+           Comment réussir votre CV vidéo
         </Typography>
         <Typography
           className={classes.text}
           gutterBottom>
-          Vous n'avez pas trouvé votre bonheur dans nos offres d'emploi, mais vous souhaitez diffuser votre <span className={classes.bold}>CV vidéo à l'ensemble de notre communauté de talents.</span> <br></br> Découvrez les vidéos de nos talents sur notre CV vidéothèque.
+          Suivez ce <a href="https://blog.talentstube.com/faire-cv-video" target="_blank" >lien</a>
         </Typography>
+
+        <Typography gutterBottom component="h2"
+          className={classes.subTitle}>
+           Accompagnement à la création d'un CV vidéo professionnel
+        </Typography>
+        <Typography
+          className={classes.text}
+          gutterBottom>
+          Suivez ce <a href="https://blog.talentstube.com/accompagnement-cv-video" target="_blank" >lien</a>
+        </Typography>
+
+        <Typography gutterBottom component="h2"
+          className={classes.subTitle}>
+          Pourquoi faire un CV vidéo ?
+        </Typography>
+        <Typography
+          className={classes.text}
+          gutterBottom>
+          Suivez ce <a href="https://blog.talentstube.com/cv-video" target="_blank" >lien</a>
+        </Typography>
+       
         
       </section>
       <Footer />

nextjs/pages/Login.js

@@ -22,6 +22,8 @@ import SocialButtonsAuth from '../components/atoms/SocialButtonsAuth';
 import jssPluginPropsSort from 'jss-plugin-props-sort';
 import Head from 'next/head'
 import ReCAPTCHA from "react-google-recaptcha";
+import getConfig from 'next/config'
+const {publicRuntimeConfig} = getConfig()
 
 function TabContainer({ children, dir }) {
     return (
@@ -300,7 +302,7 @@ class LoginPage extends React.Component {
                                             <ReCAPTCHA
                                                 id="component-outlined"
                                                 ref={recaptchaRef}
-                                                sitekey={process.env.RECAPTCHA_APP_SITE}
+                                                sitekey={publicRuntimeConfig.ReCAPTCHA.siteKey}
                                                 size="invisible"
                                             />
                                             <Typography
@@ -314,15 +316,15 @@ class LoginPage extends React.Component {
                                             </Typography>
 
 
-                                            <Typography
+                                            {/* <Typography
                                                 paragraph={true}
                                                 align="center"
                                                 className={classes.conditionalText}
-                                            >Ou</Typography>
+                                            >Ou</Typography> */}
 
 
                                         </form>
-                                        <SocialButtonsAuth linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} />
+                                        {/* <SocialButtonsAuth linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} /> */}
 
                                         <div className={classes.form}>
                                             <Typography

nextjs/pages/MentionsLegales.js

@@ -75,7 +75,7 @@ class MentionsLegales extends Component {
                         {
                             `
                             TALENTS TUBE est joignable :
-                            - Par internet : via le formulaire de contact sur le site ` }<Link href="http://blog.talentstube.com"><a className={classes.link} target="_blank">blog.talentstube.com</a></Link>{`;
+                            - Par internet : via le formulaire de contact sur le site ` }<a href="http://blog.talentstube.com" className={classes.link} target="_blank">blog.talentstube.com</a>{`;
                             - Par téléphone au 02 30 05 06 31, du lundi au vendredi de 9 h à 18 h;
                             - Par voie postale :
                             TALENTS TUBE
@@ -90,7 +90,7 @@ class MentionsLegales extends Component {
                     </Typography>
                     <Typography className={classes.text} gutterBottom align="center">
 
-                        <Link href="https://www.e-declic.com/"><a className={classes.link} target="_blank">e-declic</a></Link>
+                        <a  href="https://www.e-declic.com/" className={classes.link} target="_blank">e-declic</a>
                         {
                             `
                             27 Rue du Danemark - Porte océane 2

nextjs/pages/Offre.js

@@ -1,14 +1,15 @@
 
-import React from 'react';
+import React, { Fragment,lazy, Suspense } from 'react'
 import { connect } from "react-redux";
 import PropTypes from 'prop-types';
 import getConfig from 'next/config'
 import { withStyles } from '@material-ui/core/styles';
 import LayoutOffre from "../components/templates/LayoutOffre";
-import OffreDetail   from "../components/organisms/OffreDetail";
-import { fetchAdRequest, clearAd, countAdViewRequest } from '../actions/ads'
+const OffreDetail = lazy(() => import('../components/organisms/OffreDetail'));
+//import OffreDetail   from "../components/organisms/OffreDetail";
+import { fetchJobRequest, clearAd, countAdViewRequest } from '../actions/ads'
 import _ from "lodash/string";
-
+const renderLoader = () => <p>Chargement</p>;
 const styles = theme => ({
 
 });
@@ -31,8 +32,8 @@ class Offre extends React.Component {
         const { classes, offre } = this.props;
 
         return (
-            <LayoutOffre backLink="/Offres" offreId={offre.id} isProvided={offre.is_promoted}>
-                <OffreDetail offre={offre}/>
+            <LayoutOffre backLink="/Offres" offreId={offre.id} offre={offre} isProvided={offre.is_promoted}>
+                <Suspense fallback={renderLoader()}><OffreDetail offre={offre}/></Suspense>
             </LayoutOffre>
         );
     }
@@ -42,7 +43,7 @@ class Offre extends React.Component {
 Offre.getInitialProps = function (context) {
     const { id } = context.query
 
-    context.store.dispatch(fetchAdRequest(id))
+    context.store.dispatch(fetchJobRequest(id))
 
     return id;
 }
@@ -57,4 +58,4 @@ Offre.propTypes = {
     classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(connect(mapStateToProps, { fetchAdRequest, clearAd, countAdViewRequest})(Offre));
+export default withStyles(styles)(connect(mapStateToProps, { fetchJobRequest, clearAd, countAdViewRequest})(Offre));

nextjs/pages/Offres.js

@@ -9,10 +9,13 @@ import LayoutGrid from "../components/templates/LayoutGrid";
 import Grid from "../components/templates/Grid"
 import OffreRow from "../components/organisms/OffreRow"
 import Typography from '@material-ui/core/Typography';
-import { fetchAdsRequest } from '../actions/ads'
+import { fetchJobsRequest, togglePromotedFilterRequest} from '../actions/ads'
 import { AdsSelector } from '../reducers/ads'
 import { TextField } from '@material-ui/core';
 import Head from 'next/head'
+import OgHead from '../components/atoms/OgHead';
+import getConfig from 'next/config'
+
 
 const styles = theme => ({
   root: {
@@ -77,54 +80,61 @@ class Offres extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {
-      isPromoted: false
-    };
-
-    // This binding is necessary to make `this` work in the callback
-    this.handleClick = this.handleClick.bind(this);
+    
+  }
+  voirOffre(){
+    this.props.togglePromotedFilterRequest()
+    sessionStorage.setItem('offres_currentPage',1);
   }
 
-  handleClick() {
-    this.setState(state => ({
-      isPromoted: !state.isPromoted
-    }))
+  static getInitialProps({ query }) {
+    const { init } = query
+    //this.props.promotedFilter =init
+    return { init };
   }
 
-
   render() {
+    
     const { classes } = this.props;
-    const countColor = this.state.isPromoted ? classes.provided : classes.primary;
-    const btnClass = this.state.isPromoted ? classes.buttonDefault : classes.buttonProvided;
-
+    const countColor = this.props.promotedFilter ? classes.provided : classes.primary;
+    const btnClass = this.props.promotedFilter ? classes.buttonDefault : classes.buttonProvided;
+    const { publicRuntimeConfig } = getConfig();
+    const socialShareUrl = typeof window !== 'undefined' ? window.location
+            : publicRuntimeConfig.frontServerUrl + `/Offres`;
+    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
+    const imgUrl = DefaultUrl ;
     return (
       <LayoutGrid backLink="/">
-        <Head>
-          <title key="title">Offres d’emploi en vidéo – Talents Tube</title>
-          <meta name="description" content="Les offres d'emploi en vidéo." />
-
-        </Head>
+        <OgHead seo_title="Vidéos d'offres d'emploi, CDI, CDD, alternance et Stage | Talents Tube"
+                    seo_description="Vidéos d'offres d'emploi, CDI, CDD, alternance, stage et apprentissage d'entreprises qui recrutent sur Talents Tube."
+                    seo_url={socialShareUrl}
+                    image={imgUrl}
+                    seo_key="Recrutement, video"
+                    
+                ></OgHead>
 
         <Typography gutterBottom component="h1"
           className={classes.title}>
-          <span className={countColor}>{this.props.recordCount}</span> offres d'emploi vidéo {this.state.isPromoted ? 'pourvues' : 'en cours'}
+          <span className={countColor}>{this.props.recordCount}</span> offres d'emploi vidéo {this.props.promotedFilter ? 'pourvues' : 'en cours'}
         </Typography>
         <div className={classes.container}>
           <Grid CustomRowComponent={OffreRow}
-            dataFetcher={this.props.fetchAdsRequest}
+            dataFetcher={this.props.fetchJobsRequest}
             data={this.props.ads}
             currentPage={this.props.currentPage}
             recordCount={this.props.recordCount}
-            promoted={this.state.isPromoted}
+            promoted={this.props.promotedFilter}
             loading={this.props.loading}
+            type="offres"
             placeholder={"Rechercher un job"}
           />
           <Button
           name="Rechercher un job"
             variant="outlined"
-            onClick={this.handleClick}
+            onClick={() => this.voirOffre()
+            }
             className={classes.button + ' ' + btnClass}>
-            {this.state.isPromoted ? 'Voir les offres en cours' : 'Voir les offres pourvues'}
+            {this.props.promotedFilter? 'Voir les offres en cours' : 'Voir les offres pourvues'}
           </Button>
         </div>
       </LayoutGrid>
@@ -144,6 +154,7 @@ Offres.propTypes = {
 function mapStateToProps(state) {
 
   return {
+    promotedFilter : state.ads.promotedFilter,
     loading: state.ads.loading,
     ads: Object.keys(state.ads).length !== 0 && AdsSelector(state),
     currentPage: _.toNumber(!!state.ads.meta ? _.ceil((state.ads.meta.offset + 1) / state.ads.meta.limit) : 1),
@@ -151,4 +162,4 @@ function mapStateToProps(state) {
   };
 }
 
-export default withStyles(styles)(connect(mapStateToProps, { fetchAdsRequest })(Offres))
+export default withStyles(styles)(connect(mapStateToProps, { fetchJobsRequest, togglePromotedFilterRequest })(Offres))

nextjs/pages/Parametres.js

@@ -62,8 +62,8 @@ const styles = theme => ({
     },
 })
 
-//TODO: put in config
-const applicationServerPublicKey = 'BNFyiyPiLH97Dgc0m1vXluUNaCN6y3Hkgd4YcqS2lVkP8my3tq2D5gM5g7cY6R4VxC7GljSzkLRu+k+oO+2TtjU=';
+// //TODO: put in config
+// const applicationServerPublicKey = 'BNFyiyPiLH97Dgc0m1vXluUNaCN6y3Hkgd4YcqS2lVkP8my3tq2D5gM5g7cY6R4VxC7GljSzkLRu+k+oO+2TtjU=';
 
 class Parametres extends Component {
 
@@ -72,7 +72,6 @@ class Parametres extends Component {
         general: false,
         openSnack: false,
         error: null,
-
         subscriveUserEnabled: false,
         subscription: { endpoint: '' },
     }

nextjs/pages/Reponse.js

@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
-import { fetchAdRequest } from '../actions/ads'
+import { fetchJobRequest } from '../actions/ads'
 import { fetchCompanyRequest } from '../actions/companies'
 import { fetchCurrentUserRequest } from '../actions/user'
 import { uploadMedia } from '../actions/media'
-import Loader from './../components/templates/loader'
+import LoaderVideo from './../components/templates/loaderVideo'
 import Answer from '../components/organisms/Answer'
 import LayoutBack from '../components/templates/LayoutBack'
 import { withStyles } from '@material-ui/core/styles'
@@ -22,6 +22,9 @@ import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import Router from 'next/router'
 import { errorMessageSelector } from '../reducers/media'
+import dynamic from 'next/dynamic'
+
+// import Recorder from '../components/organisms/Recorder'
 
 const styles = theme => ({
   root: {
@@ -82,11 +85,17 @@ const styles = theme => ({
     border: 'solid 5px white',
     borderRadius: '6px',
   },
+  recorderContainer: {
+    //display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
   helpContainer: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: '100%',
+    width: '400px',
   },
   logo: {
     width: 'inherit',
@@ -191,35 +200,12 @@ const styles = theme => ({
   },
 });
 
-const videoJsOptions = {
-  controls: true,
-  // width: 800,
-  // height: 600,
-  fluid: true,
-  plugins: {
-    /*
-    // wavesurfer section is only needed when recording audio-only
-    wavesurfer: {
-        src: 'live',
-        waveColor: '#36393b',
-        progressColor: 'black',
-        debug: true,
-        cursorWidth: 1,
-        msDisplayMax: 20,
-        hideScrollbar: true
-    },
-    */
-    record: {
-      audio: true,
-      video: true,
-      // maxLength: 10,
-      debug: true
-    }
-  }
-};
-
 const steps = ["", ""]
 
+const Recorder = dynamic(() => import('../components/organisms/Recorder'), {
+  ssr: false
+})
+
 const { publicRuntimeConfig } = getConfig()
 class Reponse extends React.Component {
   state = {
@@ -296,14 +282,18 @@ class Reponse extends React.Component {
           <title>Candidature vidéo</title>
           <meta name="description" content="Talent's tube, postulez en video." />
           <meta key="robots" name="robots" content="noindex, nofollow"></meta>
-          <link rel="canonical" href="https://app.talentstube.com" />
+          
         </Head>
         {/* https://codesandbox.io/s/ii0us */}
-       { loading ?  <Loader /> :
+       { loading ? 
+        <LoaderVideo /> :
        <Fragment>
         
         <section className={classes.headerContainer}>
-         { !!offre.company &&(<Fragment><div className={classes.logoContainer}>
+         { !!offre.company && (
+         
+         <Fragment>
+           <div className={classes.logoContainer}>
             <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoUrl}  alt="companylogo"/>
           </div>
           <div className={classes.infoContainer}>
@@ -314,7 +304,8 @@ class Reponse extends React.Component {
               {!!offre.company.brand_name? offre.company.brand_name: ''}
             </Typography>
             {/* ville */}
-          </div></Fragment>)
+          </div>
+          </Fragment>)
           }
           { !!company.brand_name && (<Fragment><div className={classes.logoContainer}>
             <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoCompanyUrl} alt="companylogo"/>
@@ -342,7 +333,8 @@ class Reponse extends React.Component {
           })}
         </Stepper>
         {loading ? ( <Loader />)
-        : activeStep === 0 ? (
+        : activeStep === 0 ? 
+        (
           <div className={classes.root}>
 
             <div className={classes.textContainer}>
@@ -362,25 +354,35 @@ class Reponse extends React.Component {
               <KeyboardArrowRightIcon className={ classes.HelpKeyboardArrowRightIcon }/>
               </Button>
               </div>
-
-            <input
-              type="file" accept="video/*" capture="camcorder"
-              className={classes.input}
-              style={{ display: 'none' }}
-              id="record-button-file"
-              multiple
-              onChange={this.inputCamRecorderChange}
-            />
-            <label htmlFor="record-button-file">
-              <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
-                <img alt="talents-tube" src='/static/images/capture.svg' className={classes.iconButton} />
-                <Typography align="left" className={classes.textButton}>
-                  Je <span className={classes.underlined}>réalise</span> ma vidéo de réponse
-              </Typography>
-              <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
-              </Button>
-            </label>
-
+    { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
+             (
+            <Fragment>
+              <input
+                type="file" accept="video/*" capture="camcorder"
+                className={classes.input}
+                style={{ display: 'none' }}
+                id="record-button-file"
+                multiple
+                onChange={this.inputCamRecorderChange}
+              />
+              <label htmlFor="record-button-file">
+                <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
+                  <img alt="talents-tube" src='/static/images/capture.svg' className={classes.iconButton} />
+                  <Typography align="left" className={classes.textButton}>
+                    Je <span className={classes.underlined}>réalise</span> ma vidéo de réponse
+                </Typography>
+                <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                </Button>
+              </label>
+            </Fragment>
+            ):
+            (
+              <div className={classes.recorderContainer}>
+                <Recorder uploader={this.props.uploadMedia} />
+              </div>
+            )
+            }
+        
             <input
               type="file" 
               accept="video/*" 
@@ -399,14 +401,14 @@ class Reponse extends React.Component {
               <KeyboardArrowDownIcon className={ classes. InputKeyboardArrowDownIcon }/>
               </Button>
             </label>
-
+            
           </div>
-
         ) :
           (
             <Answer mediaId={!!this.props.media && this.props.media.id}
              companyId={!!offre.company ? offre.company.id : !!company.brand_name ? company.id : null}
-             adId={offre.id}>
+             adId={offre.id}
+             >
              </Answer>
           )}
            <Snack variant="error" message={!!!_.isEmpty(this.state.errors) && this.state.errors.message }
@@ -424,14 +426,11 @@ Reponse.getInitialProps = function (context) {
 
   const { adId, companyId } = context.query
   const {res} = context
-  // if (!!!context.store.user.fetched) {
+    //TODO :really needed ?
      context.store.dispatch(fetchCurrentUserRequest())
-  // }else{
-  //  if (!!!context.store.getState().user.fetched) {
-  //   redirect({Router:Router, ctx:context, location:'/Login'})
-  // }
+
   if(!!adId)
-    context.store.dispatch(fetchAdRequest(adId))
+    context.store.dispatch(fetchJobRequest(adId))
   else if(!!companyId)
     context.store.dispatch(fetchCompanyRequest(companyId))
 
@@ -454,4 +453,4 @@ Reponse.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(connect(mapStateToProps, { fetchCurrentUserRequest, fetchAdRequest, fetchCompanyRequest, uploadMedia })(Reponse));
+export default withStyles(styles)(connect(mapStateToProps, { fetchCurrentUserRequest, fetchJobRequest, fetchCompanyRequest, uploadMedia })(Reponse));

nextjs/pages/ResetPassword.js

@@ -107,6 +107,7 @@ class ResetPassword extends Component {
             <Layout>
                 <Head>
                     <title key="title">Reset password</title>
+                    <meta key="robots" name="robots" content="noindex, nofollow"></meta>
                 </Head>
                 <div className={classes.container}>
                     <Typography

nextjs/pages/VerifyEmail.js

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

nextjs/pages/_document.js

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

nextjs/pages/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
-import React, {Fragment} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Layout from "../components/templates/Layout"
@@ -8,17 +8,21 @@ import { Typography } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
 import Router from 'next/router'
 import { connect } from 'react-redux'
-import { fetchEmphasisAdsRequest } from "../actions/ads";
+//const fetchEmphasisJobsRequest = lazy(() => import('../actions/ads'));
+import { fetchEmphasisJobsRequest } from "../actions/ads";
+//const fetchEmphasisCompaniesRequest = lazy(() => import('../actions/companies'));
 import { fetchEmphasisCompaniesRequest } from "../actions/companies";
 import Loader from './../components/templates/loader'
 import { isEmpty } from "lodash"
 import NoResult from './../components/atoms/NoResult';
-import Head from 'next/head'
+// import Head from 'next/head'
 import dynamic from 'next/dynamic'
+import OgHead from '../components/atoms/OgHead';
+import getConfig from 'next/config'
 
-const VideoSlider = dynamic(() => import('../components/organisms/VideoSlider'), {
-  ssr: false
-});
+// const VideoSlider = dynamic(() => import('../components/organisms/ShortVideoHooker'), {
+//   ssr: false
+// });
 const HorizontalScroller = dynamic(() => import('../components/organisms/HorizontalScroller'), {
   ssr: false
 });
@@ -34,7 +38,7 @@ const TileOffre = dynamic(() => import('../components/organisms/TileOffre'), {
 const Footer = dynamic(() => import('../components/organisms/Footer'), {
   ssr: false
 });
-
+const { publicRuntimeConfig } = getConfig();
 const styles = theme => ({
   root: {
     position: 'relative',
@@ -57,7 +61,7 @@ const styles = theme => ({
       paddingBottom: theme.spacing(3),
     },
     [theme.breakpoints.up('md')]: {
-      padding: theme.spacing(2, 20),
+      padding: theme.spacing(2, 10),
       paddingBottom: theme.spacing(9),
     },
     [theme.breakpoints.up('lg')]: {
@@ -138,31 +142,39 @@ const styles = theme => ({
 
 class Index extends React.Component {
   state = {
-    emphasisAds: [],
+    emphasisJobs: [],
     emphasisCompanies: []
   }
   componentDidMount() {
     localStorage.setItem("loginRedirect", "/")
-    this.props.fetchEmphasisAdsRequest({ isEmphasis: 1 })
+    this.props.fetchEmphasisJobsRequest({ isEmphasis: 1 })
     this.props.fetchEmphasisCompaniesRequest({ isEmphasis: 1 })
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
-      emphasisAds: nextProps.emphasisAds,
+      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>
-        <Head>
-          <title key="title"> Talents tube - La recherche d'emploi en vidéo</title>
-          <meta name="description" content="Talents Tube est la première plateforme réservée aux offres d'emploi et aux CV vidéos. Découvrez un nouvelle méthode de recrutement ! Installez notre application." />
-        </Head>
+        <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>
         <div className={classes.container}>
 
-          <VideoSlider />
+          {/* <VideoSlider /> */}
 
           <section className={classes.scrollerSection + ' ' + classes.scrollerSectionOffer}>
             <div
@@ -179,11 +191,11 @@ class Index extends React.Component {
                 </Typography>
               </div>
 
-              {this.state.emphasisAds.loading ?
+              {this.state.emphasisJobs.loading ?
                 (<Loader />)
-                : !isEmpty(this.state.emphasisAds.data) ? (
+                : !isEmpty(this.state.emphasisJobs.data) ? (
                     <HorizontalScroller
-                      data={this.state.emphasisAds.data}
+                      data={this.state.emphasisJobs.data}
                       className={classes.HorizontalScroller}
                       type="offre"
                     >
@@ -253,7 +265,7 @@ class Index extends React.Component {
 
 function mapStateToProps(state) {
   return {
-    emphasisAds: state.emphasisAds,
+    emphasisJobs: state.emphasisJobs,
     emphasisCompanies: state.emphasisCompanies
   };
 }
@@ -262,4 +274,4 @@ Index.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default (connect(mapStateToProps, { fetchEmphasisAdsRequest, fetchEmphasisCompaniesRequest })(withStyles(styles)(Index)));
+export default (connect(mapStateToProps, { fetchEmphasisJobsRequest, fetchEmphasisCompaniesRequest })(withStyles(styles)(Index)));

nextjs/pages/profile.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import { Grid } from '@material-ui/core';
+import Layout from "../components/templates/Layout";
+import AccountProfile from "../components/organisms/AccountProfile";
+import AccountVideoPres from "../components/organisms/AccountVideoPres";
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(4)
+  }
+}));
+
+const Account = () => {
+  const classes = useStyles();
+
+  return (
+    <Layout>
+      <div className={classes.root}>
+      <Grid
+        container
+        spacing={4}
+        direction="row"
+        justify="space-between"
+        alignItems="flex-start"
+      >
+        <Grid
+          item
+          lg={4}
+          md={6}
+          xl={4}
+          xs={12}
+        >
+          <AccountProfile />
+          <div><br/></div>
+          <AccountVideoPres />
+        </Grid>
+        <Grid
+          item
+          lg={8}
+          md={6}
+          xl={8}
+          xs={12}
+        >
+          
+        </Grid>
+        
+      </Grid>
+    </div>
+    </Layout>
+  );
+};
+
+export default Account;

nextjs/pages/profileStep.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import {makeStyles} from '@material-ui/core/styles';
+import Layout from "../components/templates/Layout";
+import AccountProfile from "../components/organisms/AccountProfile";
+import { Typography } from '@material-ui/core';
+import Head from 'next/head'
+import AdBlockDetect from 'react-ad-block-detect';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        width: '100%'
+    },
+    button: {
+        marginRight: theme.spacing(1)
+    },
+    completed: {
+        display: 'inline-block'
+    },
+    instructions: {
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1)
+    },
+    information: {
+      display: 'flex',
+      flexDirection: 'column',
+      backgroundColor: theme.palette.primary.main,
+      color: "#fff",
+      fontWeight: '700',
+      fontSize: '1.15em',
+      fontFamily: 'Roboto',
+      [
+          theme
+              .breakpoints
+              .up('md')
+      ]: {
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          justifyContent: 'space-around',
+          backgroundColor: theme.palette.primary.main,
+          padding: theme.spacing(2, 2)
+      },
+      '& a': {
+          textDecoration: 'none'
+      },
+      texteBlanc: {
+        color: "#fff",
+        
+      },
+  },
+}));
+
+export default function HorizontalNonLinearStepper() {
+    const classes = useStyles();
+
+    return (
+        <Layout>
+            <Head>
+                <title key="title">Profil – Talents Tube</title>
+                <meta key="robots" name="robots" content="noindex, nofollow"></meta>
+            </Head>
+            <div >
+
+                <AdBlockDetect   > 
+                  <div className={classes.information}>
+                    
+                      <p>AdBlocks a été détecté. Pour que Talents Tube puisse fonctionner
+                          correctement, veuillez désactiver Ad Blocks</p>
+                    
+                  </div>
+                </AdBlockDetect>
+            </div>
+            <div >
+                <AccountProfile/>
+            </div>
+
+        </Layout>
+    );
+}

nextjs/pages/test2.js

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

nextjs/pages/test3.js

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

nextjs/pages/test4.js

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