Dynamisation

> Projects
> Contact
> Footer

src/components/ContactButton/ContactButton.js

@@ -9,13 +9,14 @@ export default class ContactButton extends Component {
     //     this.state = {};
     // }
     render() {
+      const data = this.props.data;
       return <div class="column is-3">
-              <a target="_blank" rel="noreferrer noopener" href={this.props.link} class="hide button is-large is-fullw-mobile"
-                  title={this.props.title}>
+              <a target="_blank" rel="noreferrer noopener" href={data.url} class="hide button is-large is-fullw-mobile"
+                  title={`Go to ${data.title}`}>
                   <span class="icon">
-                      <i class={"fab " + this.props.icon}></i>
+                      <i class={"fab " + data.icon}></i>
                   </span>
-                  <span>{this.props.name}</span>
+                  <span>{data.title}</span>
               </a>
           </div>;
     }

src/components/ContactCard/ContactCard.js

@@ -1,4 +1,6 @@
 import React, {Component} from '../../../node_modules/react';
+import { injectIntl } from 'react-intl';
+
 import './ContactCard.scss'
 
 import ContactButton from '../ContactButton/index';
@@ -6,46 +8,32 @@ import ContactButton from '../ContactButton/index';
 // import { connect } from "react-redux";
 // import { bindActionCreators } from "redux";
 // import * as contactCardActions from "../../store/contactCard/actions";
-export default class ContactCard extends Component {
+class ContactCard extends Component {
     // constructor(props) {
     //     super(props);
     //     this.state = {};
     // }
     render() {
+      const contactCardMessage = this.props.intl.messages.contactCard;
       return <section class="hero is-info dontPrint" id="contact">
       <div class="hero-body">
           <div class="container">
               <h1 class="title">
-                  Contact
+                {contactCardMessage.title}
               </h1>
               <h2 class="subtitle">
-                  Vous pouvez me contacter de nombreuses façons !
+                {contactCardMessage.subtitle}
               </h2>
               <div class="columns">
-                <ContactButton
-                  name="Courriel"
-                  title="Contactez moi par mail a anthony arobase dumas point cc !"
-                  link="mailto:anthony@dumas.cc"
-                  icon="icon-envelope-open"/>
-
-                <ContactButton
-                name="LinkedIn"
-                title="Page LinkedIn"
-                link="https://www.linkedin.com/in/anthonyyvondumas/"
-                icon="icon-linke-square"/>
-
-                <ContactButton
-                name="Telegram"
-                title="Contactez moi via Telegram!"
-                link="https://t.me/adamas_FR"
-                icon="icon-teleg"/>
+              {contactCardMessage.ways.map(function(button, index){
+                    return <ContactButton
+                    data={button}/>;
+                  })}
               </div>
           </div>
       </div>
   </section>;
     }
   }
-// export default connect(
-//     ({ ContactCard }) => ({ ...contactCard }),
-//     dispatch => bindActionCreators({ ...contactCardActions }, dispatch)
-//   )( contactCard );
+
+  export default injectIntl(ContactCard)

src/components/FooterCard/FooterCard.js

@@ -1,4 +1,6 @@
 import React, {Component} from '../../../node_modules/react';
+import { injectIntl } from 'react-intl';
+
 import './FooterCard.scss'
 
 import bulmaLogo from '../../images/made-with-bulma.png';
@@ -6,12 +8,13 @@ import bulmaLogo from '../../images/made-with-bulma.png';
 // import { connect } from "react-redux";
 // import { bindActionCreators } from "redux";
 // import * as FooterCardActions from "../../store/FooterCard/actions";
-export default class FooterCard extends Component {
+class FooterCard extends Component {
     // constructor(props) {
     //     super(props);
     //     this.state = {};
     // }
     render() {
+        const footerMessage = this.props.intl.messages.footer;
       return <footer class="footer has-text-centered dontPrint">
       <div class="container">
           <div class="columns">
@@ -23,7 +26,7 @@ export default class FooterCard extends Component {
                   </p>
                   <p>
                       <small class="sosumi">
-                          Copyright © 2014 - 2020 Anthony Dumas. Tous droits réservés.
+                          {footerMessage.legalNotice}
                       </small>
                   </p>
                   <p id="footer-credits">
@@ -39,7 +42,7 @@ export default class FooterCard extends Component {
                   </p>
                   <p class="dark-theme-only">
                       <small>
-                          (Ceci est le thème sombre !)
+                        {footerMessage.darkThemeNotice}
                       </small>
                   </p>
               </div>
@@ -48,7 +51,5 @@ export default class FooterCard extends Component {
   </footer>;
     }
   }
-// export default connect(
-//     ({ FooterCard }) => ({ ...FooterCard }),
-//     dispatch => bindActionCreators({ ...FooterCardActions }, dispatch)
-//   )( FooterCard );
+
+  export default injectIntl(FooterCard)

src/components/ProjectCard/ProjectCard.js

@@ -4,16 +4,17 @@ import './ProjectCard.scss'
 export default class ProjectCard extends Component {
 
     render() {
+        const data = this.props.data;
       return <div class="tile is-vertical is-4">
               <div class="tile">
                   <div class="tile is-parent">
                       <article class="tile is-child notification is-info">
-                          <p class="title">{this.props.title}</p>
-                          <a href={this.props.href} rel="noopener">
+                          <p class="title">{data.title}</p>
+                          <a href={data.url} rel="noopener">
                               <figure class="image is-4by3">
-                                  <img src={this.props.image}
-                                      alt={this.props.imgAlt}
-                                      title={this.props.imgTitle} />
+                                  <img src={data.image}
+                                      alt={data.imgAlt}
+                                      title={data.imgTitle} />
                               </figure>
                           </a>
                       </article>

src/components/ProjectsCard/ProjectsCard.js

@@ -1,45 +1,27 @@
 import React, {Component} from '../../../node_modules/react';
+import { injectIntl } from 'react-intl';
+
 import './ProjectsCard.scss'
 
 import ProjectCard from '../ProjectCard/index';
 
-import imagePortfolioDev from '../../images/portfolio/vinyls.jpg';
-import imageMichelin from '../../images/portfolio/computerNonSense.jpg';
-import imagePortfolioPhoto from '../../images/portfolio/admPhotos.jpg';
-
-export default class ProjectsCard extends Component {
-
+class ProjectsCard extends Component {
     render() {
+      const projectCardsMessage = this.props.intl.messages.projectCard;
       return <section id="projets" class="hero is-primary">
       <div class="hero-body">
           <div class="container">
               <div class="tile is-ancestor">
-                  <ProjectCard
-                    title="Portfolio Developpeur"
-                    href="//dev.dumas.cc"
-                    imgAlt="Des mains parcourant des vinyles sur un étalage"
-                    imgTitle="Photo by Florencia Viadana on Unsplash"
-                    image={imagePortfolioDev}
-                    />
-
-                    <ProjectCard
-                    title="IOT@Michelin"
-                    href="https://prezi.com/m/o8ey8mmpnkvp/"
-                    imgAlt="Une photo d'un micro ordinateur dans ma main"
-                    imgTitle="Une photo d'un micro ordinateur dans ma main"
-                    image={imageMichelin}
-                    />
-
-                    <ProjectCard
-                    title="adm.photos"
-                    href="//adm.photos"
-                    imgAlt="Une photo du village de mon enfance"
-                    imgTitle="Une photo du village de mon enfance"
-                    image={imagePortfolioPhoto}
-                    />
+                    {projectCardsMessage.projects.map(function(projects, index){
+                    return <ProjectCard
+                      data={projects}
+                    />;
+                  })}
               </div>
           </div>
       </div>
   </section>;
     }
-  }
+  }
+
+  export default injectIntl(ProjectsCard)