supp import

: 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

@@ -39,6 +39,18 @@ 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
 

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

@@ -35,7 +35,7 @@ class WebPush extends Component {
 
   constructor(props) {
     super(props)
- }
+  }
 
   componentDidMount() {
     if (swRegistration === null) {
@@ -44,12 +44,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 +80,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(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/Footer.js

@@ -267,11 +267,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

@@ -198,9 +198,9 @@ const styles = theme => ({
     },
   },
 
-  active: { 
+  active: {
     '& span, & svg': {
-      color: theme.palette.primary.main+ ' !important',
+      color: theme.palette.primary.main + ' !important',
     },
   },
 
@@ -317,9 +317,9 @@ class Header extends React.Component {
   };
 
   onRedirectAccount = e => {
-      urlEnv = (process.env.NODE_ENV !== 'production') ? '//localhost/app_dev.php/' : process.env.SERVER_URL;
+      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");
+      var redirectAccountUrl = urlEnv + "/api/talent?bearer=" + localStorage.getItem("ttJWT");
       window.open(redirectAccountUrl);
   }
 
@@ -329,7 +329,7 @@ class Header extends React.Component {
     const { classes } = this.props;
     
 
-  
+
     return (
       <div className={classes.root}>
         <Drawer anchor="left" open={this.state.left} onClose={this.toggleDrawer('left', false)}>
@@ -352,29 +352,29 @@ 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>
@@ -384,31 +384,27 @@ class Header extends React.Component {
 
                   <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>
+                      <a href="https://www.talentstube.com/faire-offre-emploi-video" 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>
                     </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="https://blog.talentstube.com" 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="https://www.talentstube.com/faire-offre-emploi-video" className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <SupervisorAccountIcon className={classes.icon} />
+                        <ListItemText classes={{ primary: classes.ListItemText }} primary='Recruteurs'>
+                        </ListItemText>
+                      </ListItem></a>
                     </div>
                   </div>
 
@@ -462,13 +458,12 @@ 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="https://www.talentstube.com/faire-offre-emploi-video" 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>}
@@ -548,19 +543,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>
@@ -614,13 +609,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="https://www.talentstube.com/faire-offre-emploi-video" className={classes.desktopMenuItem}>
+                  <ListItemText primary='Espace recruteurs'>
+                  </ListItemText>
+                  <ArrowForward className={classes.icon} />
+                </a>
               </section>
             </Toolbar>
           </AppBar>)

nextjs/components/organisms/OffreDetail.js

@@ -268,9 +268,9 @@ const styles = theme => ({
         },
     },
     videoTerritory: {
-        paddingBottom: '56% !important', 
+        paddingBottom: '56% !important',
         [theme.breakpoints.up('md')]: {
-            paddingBottom: '56% !important', 
+            paddingBottom: '56% !important',
         }
     },
     territoryTitle: {
@@ -299,8 +299,8 @@ function OffreDetail(props) {
     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 territoryVideoUrlTab = (offre.territories && offre.territories[0] && offre.territories[0].territory) ? offre.territories[0].territory.presentation_video.cdn_url.split('/') : '';
+    const territoryVideoId = territoryVideoUrlTab[2]
 
     return (
         <Fragment>
@@ -314,27 +314,24 @@ function OffreDetail(props) {
                     <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="companyLogo" />
+
+                                    </div>
+                                </a>
                                 <div className={classes.infoContainer}>
                                     <Typography gutterBottom className={classes.offreTitle}>
                                         {offre.title}
                                     </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} />
                                     )}
@@ -342,11 +339,12 @@ function OffreDetail(props) {
                                 </div>
                             </div>
                             {!!!offre.is_promoted && (
-                                <Button
-                                    variant="contained"
-                                    className={classes.button + ' cypButtonApply'}
-                                    onClick={() => Router.push(`/Reponse?adId=${offre.id}`)}
-                                >Postuler</Button>
+                                <Link href={`/Reponse?adId=${offre.id}`}>
+                                    <Button
+                                        variant="contained"
+                                        className={classes.button + ' cypButtonApply'}
+                                    >Postuler</Button>
+                                </Link>
                             )}
                         </section>
                     </Hidden>
@@ -356,27 +354,23 @@ function OffreDetail(props) {
                     <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>
@@ -403,22 +397,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>
@@ -439,33 +435,33 @@ function OffreDetail(props) {
                                     Découvrir 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" />
                                         <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>
+                        <div className={classes.container + ' ' + classes.discoverContainerTerritory}>
+                            <section>
+                                <Typography gutterBottom className={classes.title + ' ' + classes.discoverTitle} align="center">
+                                    Découvrir le <span className={classes.primary}>territoire</span>
+                                </Typography>
+                                <section className={classes.discoverTerritoryContentContainer}>
+                                    <VideoVimeo classesOverride={classes.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 className={classes.discoverTerritoryContentContainer}>
-                                        <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>
                                 </section>
-                            </div>
-                        )
+                            </section>
+                        </div>
+                    )
                     }
                 </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,24 +122,11 @@ 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() {
@@ -104,12 +136,12 @@ class Recorder extends Component {
                 <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>
+                        Envoyer
+                    </Button>}
                 </div>
             </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)}>
+                <Icon className={clsx(classes.icon, classes.FacebookIcon, 'fab fa-facebook-f')} color="secondary" />
+            </a>
+            <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)}>
+                <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")}>
                 <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} >
                 <Icon className={clsx(classes.icon, classes.MailIcon, 'fas fa-envelope')} color="secondary" />
-                </a>
-            </Link>
+            </a>
         </div>
     );
 }

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';

nextjs/components/templates/LayoutCompany.js

@@ -6,12 +6,9 @@ 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';
 
 const styles = theme => ({
@@ -108,8 +105,6 @@ function LayoutCompany(props) {
           
           <Hidden mdUp>
           <div id="F" className={classes.foot}>
-            {/* <div className={classes.inner}>
-          <div className={classes.grow} /> */}
             <Button
               variant="contained"
               className={classes.button}
@@ -117,8 +112,6 @@ function LayoutCompany(props) {
               onClick={() => Router.push(`/Reponse?companyId=${companyId}`)}
             >
               Candidature spontanée</Button>
-            {/* <div className={classes.grow} />
-        </div> */}
           </div>
           </Hidden>
 

nextjs/data/api.js

@@ -122,7 +122,6 @@ export default {
         },
     },
     stats: {
-        //
         countAdView: id => {
             if (!!localStorage.ttJWT)
                 setAuthorizationHeader(localStorage.ttJWT)
@@ -131,7 +130,6 @@ export default {
         countCompanyView: id => {
             if (!!localStorage.ttJWT)
                 setAuthorizationHeader(localStorage.ttJWT)
-                console.log(localStorage.ttJWT)
             axios.get(`api/companyAjaxRecStat/${id}`)
         }, 
     }

nextjs/out/sitemap_local.xml

@@ -8,7 +8,7 @@
     <lastmod>2019-09-17</lastmod>
   </url>,<url>
     <loc>https://app.talentstube.com/Confidentialite</loc>
-    <lastmod>2019-09-17</lastmod>
+    <lastmod>2019-11-04</lastmod>
   </url>,<url>
     <loc>https://app.talentstube.com/Entreprises</loc>
     <lastmod>2019-09-17</lastmod>
@@ -20,9 +20,9 @@
     <lastmod>2019-10-14</lastmod>
   </url>,<url>
     <loc>https://app.talentstube.com/MentionsLegales</loc>
-    <lastmod>2019-09-17</lastmod>
+    <lastmod>2019-11-04</lastmod>
   </url>,<url>
     <loc>https://app.talentstube.com/Offres</loc>
-    <lastmod>2019-09-17</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": {
@@ -62,14 +62,14 @@
     "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",
@@ -82,7 +82,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/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.html" className={classes.link} target="_blank">https://blog.talentstube.com/contact.html</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.html" className={classes.link} target="_blank">https://blog.talentstube.com/contact.html</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/Entreprise.js

@@ -456,11 +456,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 +475,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>
+                                            )
                                             : ''
                                         }
 

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/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 {
 

nextjs/pages/Reponse.js

@@ -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 = {
@@ -299,11 +285,15 @@ class Reponse extends React.Component {
           <link rel="canonical" href="https://app.talentstube.com" />
         </Head>
         {/* https://codesandbox.io/s/ii0us */}
-       { loading ?  <Loader /> :
+       { loading ? 
+        <Loader /> :
        <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,9 +401,8 @@ class Reponse extends React.Component {
               <KeyboardArrowDownIcon className={ classes. InputKeyboardArrowDownIcon }/>
               </Button>
             </label>
-
+            
           </div>
-
         ) :
           (
             <Answer mediaId={!!this.props.media && this.props.media.id}
@@ -424,12 +425,9 @@ 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))
   else if(!!companyId)

nextjs/reducers/user.js

@@ -181,19 +181,20 @@ export function user(state = {
       return {
         ...state,
         loading: false,
-        pushSubscribed: true
+        isUserSubscribedToPush: true
       }
     case SUBSCRIBE_USER_TO_PUSH_FAILURE:
       return {
         ...state,
         loading: false,
-        pushSubscribed: false,
+        isUserSubscribedToPush: false,
         errors: action.err,
       }
     case FETCH_USER_SUBSCRIPTION_TO_PUSH_REQUEST:
       return {
         ...state,
         loading: true,
+        isUserSubscribedToPush: false,
       }
     case FETCH_USER_SUBSCRIPTION_TO_PUSH_SUCCESS:
       return {

nextjs/sagas/userSaga.js

@@ -258,9 +258,8 @@ export function* requestUpdateUserRequestSaga(action) {
       yield put(updateUserPictureFailure());
 
   } catch (err) {
-    console.log(err);
+    
     if (_.includes(err, "401") || (!!err.response && err.response.status === 401)) {
-
       localStorage.setItem('loginRedirect', window.location)
       Router.push("/Login");
     }

webRTC/next.config.js

@@ -20,7 +20,6 @@ const { ANALYZE, DEV } = process.env
             });
 module.exports = withPlugins(
     [
-        [{target: 'serverless'}],
         [withCSS],
         [optimizedImages, {
             /* config for next-optimized-images */
@@ -68,18 +67,26 @@ module.exports = withPlugins(
                 staticFolder: '/static',
                 push: {
                     'defaultAction': 'https://application.bzh/',
-                    'defaultIconLink': 'https://application.bzh/static/images/icons/talentstubeIco152x152.png',
+                    'defaultIconLink': 'https://application.bzh/static/images/icons/e-declicIco152x152.png',
                     'defaultImageLink': 'https://application.bzh/static/images/banner/atc-site-web-responsive.jpg',
                     'topics': [
                         { key: 'e-declic', value: false },
                         { key: 'PWA', value: false }
                     ]
                 },
+                wordpressUrl: {
+                    'menu': 'https://api.e-declic.net/wp-json/menus/v1/menus/top',
+                    'posts': 'https://api.e-declic.net/wp-json/wp/v2/posts',
+                    'postDetail': 'https://api.e-declic.net/wp-json/wp/v2/posts',
+                    'pageDetail': 'https://api.e-declic.net/wp-json/wp/v2/pages',
+                    'categories': 'https://api.e-declic.net/wp-json/wp/v2/categories',
+                    'media': 'https://api.e-declic.net/wp-json/wp/v2/media'
+
+                },
                 ReCAPTCHA: {
-                    "siteKey": "6LdyqLwUAAAAADKI5uC7d5W9VqVgzd8VEmMU2Yi-"
+                    "siteKey": "6LcCvHcUAAAAAEw2gBZkoJcVvsNp1IgU4MnrIaRI"
                 },
                 eDeclicUrl: 'http://www.e-declic.com',
-                enableVideo: DEV ? false : true
             }
         }]
 
@@ -112,14 +119,14 @@ module.exports = withPlugins(
             config.resolve.alias = { ...config.resolve.alias, ...videojsAlias };
             config.plugins.push(videojsPlugin);
 
-            config.module.rules.push(
-                {
-                    test: /\.css$/,
-                    loader: 'style-loader!css-loader',
-                    // include: [/node_modules/]
-                },
+            // config.module.rules.push(
+            //     {
+            //         test: /\.css$/,
+            //         loader: 'style-loader!css-loader',
+            //         // include: [/node_modules/]
+            //     },
             
-            )
+            // )
 
             console.log(config);
             return config