seo url mangling setup

nextjs/components/organisms/CompanyRow.js

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

nextjs/components/organisms/NewsLetterRegistration.js

@@ -147,6 +147,7 @@ class NewsLetterRegistration extends Component {
                         variant="filled"
                     />
                     <Button type="submit"
+                        name="registerToNewsletter"
                         disabled={loading}
                         variant="contained"
                         className={classes.button}

nextjs/components/organisms/OffreDetail.js

@@ -253,7 +253,8 @@ function OffreDetail(props) {
     const DefaultUrl = "https://www.talentstube.com/img/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}`;
+    const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Offre/${offre.id}-${_.kebabCase(offre.title)}-${_.kebabCase(offre.location.gmap_address.name)}`;
+    const entrepriseLink = `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.business_name)}-${_.kebabCase(offre.location.gmap_address.name)}`;
     return (
         <Fragment>
             <OgHead seo_title={offre.title}
@@ -266,7 +267,7 @@ function OffreDetail(props) {
                     <Hidden smDown>
                         <section className={classes.headerContainerDesktop}>
                             <div className={classes.offerInfoContainer}>
-                                <Link href={`/Entreprise/${offre.company.id}`} prefetch >
+                                <Link href={entrepriseLink} prefetch >
                                     <a>
                                         <div className={classes.logoContainer}>
 
@@ -279,7 +280,7 @@ function OffreDetail(props) {
                                     <Typography gutterBottom className={classes.offreTitle}>
                                         {offre.title}
                                     </Typography>
-                                    <Link href={`/Entreprise/${offre.company.id}`} prefetch >
+                                    <Link href={entrepriseLink} prefetch >
                                         <a>
                                             <Typography gutterBottom variant="subtitle1" className={classes.companyName}>
                                                 {offre.company.business_name && offre.company.business_name}
@@ -308,7 +309,7 @@ function OffreDetail(props) {
                     <div className={classes.container}>
                         <Hidden mdUp>
                             <section className={classes.headerContainer}>
-                                <Link href={`/Entreprise/${offre.company.id}`} prefetch >
+                                <Link href={entrepriseLink} prefetch >
                                     <div className={classes.logoContainer}>
 
                                         <a>
@@ -321,7 +322,7 @@ function OffreDetail(props) {
                                     <Typography gutterBottom variant="h5" component="h1" className={classes.title}>
                                         {offre.title}
                                     </Typography>
-                                    <Link href={`/Entreprise/${offre.company.id}`} prefetch >
+                                    <Link href={entrepriseLink} prefetch >
                                         <a>
                                             <Typography gutterBottom variant="subtitle1" className={classes.text}>
                                                 {offre.company.business_name && offre.company.business_name}
@@ -383,7 +384,7 @@ function OffreDetail(props) {
                                         Découvrir l'entreprise <span className={classes.primary}>{offre.company.business_name && offre.company.business_name}</span>
                                     </Typography>
 
-                                    <Link href={`/Entreprise/${offre.company.id}`} prefetch >
+                                    <Link href={entrepriseLink} prefetch >
                                         <div className={classes.discoverContainerImage}>
                                             <img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} />
                                             <KeyboardArrowleftIcon className={classes.iconPlay} />

nextjs/components/organisms/OffreRow.js

@@ -11,6 +11,7 @@ import Typography from '@material-ui/core/Typography';
 import IconText from './../atoms/IconText';
 import KeyboardArrowleftIcon from '@material-ui/icons/PlayArrowRounded';
 import Link from 'next/link';
+import _ from 'lodash';
 
 const styles = theme => ({
   card: {
@@ -126,7 +127,7 @@ class OffreRowComponent extends React.Component {
     // const logoUrl =companyR.logo? publicRuntimeConfig.logoRootUrl + companyR.logo:"https://www.talentstube.com/img/default_picture_svg";
     //rowData._embedded.company.business_name
     return (
-      <Link href={`/Offre/${rowData.id}`} prefetch>
+      <Link href={`/Offre/${rowData.id}-${_.kebabCase(rowData.title)}-${_.kebabCase(rowData.location.gmap_address.name)}`} prefetch>
         <Card className={classes.card + ' cypCardOffre'} >
           <CardContent className={classes.content}>
             <CardMedia

nextjs/components/organisms/ShortVideoHooker.js

@@ -87,9 +87,9 @@ const styles = theme => ({
 });
 
 const videoList = [
-    { vimeoId: '350927569', title: 'Les Vergers de Châteaubourg', adTitle: 'Conducteurs de ligne (H/F)', link: '/Offre/73' },
-    { vimeoId: '350927551', title: 'Grand Ouest Étiquettes', adTitle: 'Conducteurs de machine d’impression', link: '/Offre/79' },
-    { vimeoId: '350927537', title: 'Fym Action', adTitle: 'Promoteur des ventes en alimentaire (H/F)', link: '/Offre/81' }
+    { vimeoId: '350927569', title: 'Les Vergers de Châteaubourg', adTitle: 'Conducteurs de ligne (H/F)', link: '/Offre/73-Les-Vergers-de-Châteaubourg-chateaubourg' },
+    { vimeoId: '350927551', title: 'Grand Ouest Étiquettes', adTitle: 'Conducteurs de machine d’impression', link: '/Offre/79-Grand-Ouest-Étiquettes-Saint-Brieuc' },
+    { vimeoId: '350927537', title: 'Fym Action', adTitle: 'Promoteur des ventes en alimentaire (H/F)', link: '/Offre/81-Fym-Action-Caudan' }
 ]
 
 

nextjs/components/organisms/Tile.js

@@ -9,6 +9,7 @@ import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import KeyboardArrowleftIcon from '@material-ui/icons/PlayArrowRounded';
 import Link from 'next/link';
+import _ from 'lodash';
 
 const styles = theme => ({
   card: {
@@ -102,7 +103,7 @@ class Tile extends React.Component {
     const logoName = (rowData.company) ? rowData.company.logo : rowData.logo
     const logoUrl = publicRuntimeConfig.logoRootUrl + logoName
 
-    const router = (rowData.company) ? `/Offre/${rowData.id}` : `/Entreprise/${rowData.id}`
+    const router = (rowData.company) ? `/Offre/${rowData.id}-${_.kebabCase(rowData.title)}-${_.kebabCase(rowData.location.gmap_address.name)}` : `/Entreprise/${rowData.id}-${_.kebabCase(rowData.business_name)}-${_.kebabCase(rowData.addresses.billing.city)}`
     //rowData._embedded.company.business_name
     
     return (

nextjs/pages/Offre.js

@@ -56,6 +56,10 @@ class Offre extends React.Component {
 
 Offre.getInitialProps = function (context) {
     const { id } = context.query
+
+    console.log(id);
+    console.log(context.query);
+
     context.store.dispatch(fetchAdRequest(id))
 }
 

nextjs/server.js

@@ -144,14 +144,14 @@ app.prepare()
       app.render(req, res, actualPage, queryParams)
     })
 
-    server.get('/Offre/:id', (req, res) => {
+    server.get('/Offre/:id-:rest', (req, res) => {
       const actualPage = '/Offre'
       const queryParams = { id: req.params.id }
       app.render(req, res, actualPage, queryParams)
     })
 
 
-    server.get('/Entreprise/:id', (req, res) => {
+    server.get('/Entreprise/:id-:rest', (req, res) => {
       const actualPage = '/Entreprise'
       const queryParams = { id: req.params.id }
       app.render(req, res, actualPage, queryParams)