Made the translation for the homepage and contact us page.

package.json

@@ -13,6 +13,7 @@
     "express": "^4.17.1",
     "flag-icon-css": "^3.5.0",
     "formik": "^2.2.6",
+    "i18next": "^20.2.1",
     "i18next-browser-languagedetector": "^6.1.0",
     "i18next-http-backend": "^1.2.1",
     "joi-browser": "^13.4.0",

public/assets/locales/en/translations.json

@@ -22,6 +22,35 @@
     "Nav_Agents": "Agents",
     "Nav_Contact_Us": "Contact Us",
     "Nav_listing_page": "listing-page",
-    "Nav_Login": "Login"
+    "Nav_Login": "Login",
+    "Slogan_1": "YOU ARE NOT BUYING A HOUSE, ",
+    "Slogan_2": "YOU ARE BUYING A LIFESTYLE. ",
+    "Info": "Click for Details",
+    "Home1": "Welcome to Kene's Cribs. Kene's Cribs is a real estator company which provides the clients with the houses.",
+    "Home2": "The houses limited to the clients are only limited to the clients' dreams. In order to further navigate the",
+    "Home3": "website, use the navigation bar to switch between pages. Listings page is for browsing houses, Agents page",
+    "Home4": "is for browsing the estators, the Contact Us page is for the contacting us and the login page is for our",
+    "Home5": "members who want to benefit from our deals. Above are some houses which can interest you. Feel free to",
+    "Home6": "click the buttons above to explore the houses you want.",
+    "Desc": "Description",
+    "Rooms": "1 Bedroom, 2 Bathroom",
+    "Danger1": "Message could not send.",
+    "Danger2": "There are some errors in your contact form.",
+    "Success1": "The message is successfully sent.",
+    "Success2": "You contact form will be delivered to our support team.",
+    "Contact-Title": "Contact to Us",
+    "Contact-House": "Select an Agent",
+    "Contact-Agent": "Select a House",
+    "No-Pref": "No preference",
+    "Contact-First": "First Name",
+    "Contact-Last": "Last Name",
+    "Contact-Mail": "Email Address",
+    "Contact-Message": "Message",
+    "Contact-Submit": "Submit",
+    "Contact-Error1": "Please select an item in the list.",
+    "Contact-Error2": "Please fill out this field.",
+    "Contact-Error3": "Invalid email address."
+
+
 
 }

public/assets/locales/fr/translations.json

@@ -22,5 +22,32 @@
     "Nav_Agents": "Agents",
     "Nav_Contact_Us": "Nous contacter",
     "Nav_listing_page": "page de liste",
-    "Nav_Login": "Connexion"
+    "Nav_Login": "Connexion",
+    "Slogan_1": "VOUS N'ACHETEZ PAS UNE MAISON, ",
+    "Slogan_2": "VOUS ACHETEZ UN STYLE DE VIE. ",
+    "Info": "Cliquer pour les détails",
+    "Home1": "Bienvenue chez Kene's Cribs. Kene's Cribs est une véritable société d'estateur qui fournit les maisons aux clients.",
+    "Home2": "Les maisons limitées aux clients ne se limitent qu'aux rêves des clients. Afin de mieux naviguer dans site Web, utilisez",
+    "Home3": "la barre de navigation pour basculer entre les pages. La page des listes sert à parcourir les maisons, la page Agents",
+    "Home4": "est pour parcourir les estators, la page Contactez-nous est pour nous contacter et la page de connexion est pour notre",
+    "Home5": "membres qui souhaitent bénéficier de nos offres. Ci-dessus, quelques maisons qui peuvent vous intéresser. N'hésitez",
+    "Home6": "pas à cliquez sur les boutons ci-dessus pour explorer les maisons que vous souhaitez.",
+    "Desc": "La Description",
+    "Rooms": "1 chambre, 2 salles de bains",
+    "Danger1": "Le message n'a pas pu être envoyé.",
+    "Danger2": "Il y a des erreurs dans votre formulaire de contact.",
+    "Success1": "Le message a été envoyé avec succès.",
+    "Success2": "Votre formulaire de contact sera envoyé à notre équipe d'assistance.",
+    "Contact-Title": "Contactez-Nous",
+    "Contact-House": "Sélectionnez un Agent",
+    "Contact-Agent": "Sélectionnez une Maison",
+    "No-Pref": "Aucune préférence",
+    "Contact-First": "Prénom",
+    "Contact-Last": "Nom de Famille",
+    "Contact-Mail": "Adresse E-mail",
+    "Contact-Message": "Le Message",
+    "Contact-Submit": "Soumettre",
+    "Contact-Error1": "Veuillez sélectionner un élément dans la liste.",
+    "Contact-Error2": "Veuillez remplir ce champ.",
+    "Contact-Error3": "Adresse e-mail invalide."
 }

src/App.js

@@ -69,9 +69,6 @@ function App() {
             </div>
           </div>
         </div>
-        <div className="d-flex flex-column align-items-start">
-          {t("Welcome_to_React")}
-        </div>
       </div>
       <BrowserRouter>
         <Navbar></Navbar>

src/homePage/Homepage.js

@@ -6,6 +6,7 @@ import house3 from "../images/house3.jpg";
 import house4 from "../images/house4.jpg";
 import Carousel from "react-bootstrap/Carousel";
 import Button from "react-bootstrap/Button";
+import { withTranslation } from "react-i18next";
 
 
 
@@ -19,6 +20,7 @@ class Homepage extends Component {
   }
 
   render() {
+    const { t } = this.props;
     const { nextIcon, prevIcon } = this.state;
     return (
       <div className="homePage">
@@ -26,8 +28,8 @@ class Homepage extends Component {
           <div className="container-fluid">
             <div className="row">
               <div className="col-12">
-                <h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
+                <h1 className="big-heading">{t("Slogan_1")}</h1>
-                <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
+                <h1 className="big-heading">{t("Slogan_2")}</h1>
               </div>
             </div>
           </div>
@@ -39,9 +41,9 @@ class Homepage extends Component {
                 <img className="headerImg" src={house1} alt="First House" />
                 <Carousel.Caption>
                   <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>100 Charlie Rogers, Kanata, ON K2V 1A7</h3>
-                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
+                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
                   <div className="buttonka">
-                    <Button href="/listings" variant="info">Click for Details</Button>
+                    <Button href="/listings" variant="info">{t("Info")}</Button>
                   </div>
                 </Carousel.Caption>
               </Carousel.Item>
@@ -49,9 +51,9 @@ class Homepage extends Component {
                 <img className="headerImg" src={house2} alt="Second House" />
                 <Carousel.Caption>
                   <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1490 Youville Drive, Orléans, ON K1C 2X8</h3>
-                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
+                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
                   <div className="buttonka">
-                    <Button href="/listings" variant="info">Click for Details</Button>
+                    <Button href="/listings" variant="info">{t("Info")}</Button>
                   </div>
                 </Carousel.Caption>
               </Carousel.Item>
@@ -59,9 +61,9 @@ class Homepage extends Component {
                 <img className="headerImg" src={house3} alt="Third House" />
                 <Carousel.Caption>
                   <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>8720 Russell Road, Navan, ON K4B 1J1</h3>
-                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
+                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
                   <div className="buttonka">
-                    <Button href="/listings" variant="info">Click for Details</Button>
+                    <Button href="/listings" variant="info">{t("Info")}</Button>
                   </div>
                 </Carousel.Caption>
               </Carousel.Item>
@@ -69,9 +71,9 @@ class Homepage extends Component {
                 <img className="headerImg" src={house4} alt="Fourth House" />
                 <Carousel.Caption>
                   <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>2785 8th Line Road, Metcalfe, ON K0A 2P0</h3>
-                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1 Bedroom, 2 Bathroom</h2>
+                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
                   <div className="buttonka">
-                    <Button href="/listings" variant="info">Click for Details</Button>
+                    <Button href="/listings" variant="info">{t("Info")}</Button>
                   </div>
                 </Carousel.Caption>
               </Carousel.Item>
@@ -80,13 +82,13 @@ class Homepage extends Component {
               <div className="container-fluid">
                 <div className="row">
                   <div className="col-12">
-                    <h2 style={{ paddingLeft: "22rem", paddingBottom: "1rem", fontFamily: "Trebuchet MS" }}>Description </h2>
+                    <h2 style={{ paddingLeft: "22rem", paddingBottom: "1rem", fontFamily: "Trebuchet MS" }}>{t("Desc")}</h2>
-                    <p style={{ fontSize: "110%" }}> Welcome to Kene's Cribs. Kene's Cribs is a real estator company which provides the clients with the houses. <br></br>
+                    <p style={{ fontSize: "110%" }}>{t("Home1")}<br></br>
-                  	 The houses limited to the clients are only limited to the clients' dreams. In order to further navigate the<br></br>
+                    {t("Home2")}<br></br>
-                     website, use the navigation bar to switch between pages. Listings page is for browsing houses, Agents page<br></br>
+                    {t("Home3")}<br></br>
-                     is for browsing the estators, the Contact Us page is for the contacting us and the login page is for our<br></br>
+                    {t("Home4")}<br></br>
-                     members who want to benefit from our deals. Above are some houses which can interest you. Feel free to<br></br>
+                    {t("Home5")}<br></br>
-                     click the buttons above to explore the houses you want. </p>
+                    {t("Home6")}</p>
                   </div>
                 </div>
               </div>
@@ -98,4 +100,4 @@ class Homepage extends Component {
   }
 }
 
-export default Homepage;
+export default withTranslation()(Homepage);

src/shared-components/contact-us/Contact-us.css

@@ -19,7 +19,7 @@
 }
 
 .heading-1{
-    padding-left: 38%;
+    padding-left: 36%;
     padding-top: 10px;
     padding-bottom: 20%;
     font-size: 40px;

src/shared-components/contact-us/contact-us.js

@@ -7,6 +7,7 @@ import {
   FormWithConstraints
 } from 'react-form-with-constraints';
 import Alert from 'react-bootstrap/Alert';
+import { withTranslation } from "react-i18next";
 
 
 
@@ -28,25 +29,26 @@ class ContactUs extends Component {
 
 
   render() {
+    const { t } = this.props;
     return (
       <div className="contact-us">
         <Alert variant="danger" style={{ display: this.state.alertBad ? "block" : "none" }} onClose={() => this.setState({ alertBad: false })} dismissible>
-          <Alert.Heading>Message could not send.</Alert.Heading>
+          <Alert.Heading>{t("Danger1")}</Alert.Heading>
           <p>
-            There are some errors in your contact form.
+            {t("Danger2")}
-        </p>
+          </p>
         </Alert>
         <Alert variant="success" style={{ display: this.state.alertSucess ? "block" : "none" }} onClose={() => this.setState({ alertSucess: false })} dismissible>
-          <Alert.Heading>The message is successfully sent.</Alert.Heading>
+          <Alert.Heading>{t("Success1")}</Alert.Heading>
           <p>
-            You contact form will be delivered to our support team.
+            {t("Success2")}
-        </p>
+          </p>
         </Alert>
         <div className="container">
           <section class="colored-section" id="contact">
             <div className="container-fluid">
               <div className="contactIntro">
-                <h2 className="heading-1">Contact Us</h2>
+                <h2 className="heading-1">{t("Contact-Title")}</h2>
                 <FormWithConstraints ref={form => this.form = form}
                   id="contact-form"
                   onSubmit={this.handleSubmit.bind(this)}
@@ -57,30 +59,34 @@ class ContactUs extends Component {
                   <div className="row">
                     <div className="col-6">
                       <select className="form-group" name="agent" id="dropdown" required onChange={this.onAgentChange.bind(this)} value={this.state.agent}>
-                        <option value="">Select an Agent</option>
+                        <option value="">{t("Contact-Agent")}</option>
                         <option value="Michael">Michael</option>
                         <option value="Jin">Jin </option>
                         <option value="Anita">Anita</option>
                         <option value="Alex">Alex</option>
                         <option value="Xuan">Xuan</option>
                         <option value="Walter">Walter</option>
-                        <option value="No preference">No preference</option>
+                        <option value="No preference">{t("No-Pref")}</option>
                       </select>
                       <FieldFeedbacks for="agent">
-                        <FieldFeedback when="*" />
+                        <FieldFeedback when="*">
+                          {t("Contact-Error1")}
+                        </FieldFeedback>
                       </FieldFeedbacks>
                     </div>
                     <div className="col-6">
                       <select className="form-group" name="house" id="dropdown" required onChange={this.onHouseChange.bind(this)} value={this.state.house}>
-                        <option value="">Select a House</option>
+                        <option value="">{t("Contact-House")}</option>
                         <option value="100 Charlie Rogers">100 Charlie Rogers</option>
                         <option value="1490 Youville Drive">1490 Youville Drive </option>
                         <option value="8720 Russell Road">8720 Russell Road</option>
                         <option value="2785 8th Line Road">2785 8th Line Road</option>
-                        <option value="No preference">No preference</option>
+                        <option value="No preference">{t("No-Pref")}</option>
                       </select>
-                      <FieldFeedbacks for="house">
+                      <FieldFeedbacks for="agent">
-                        <FieldFeedback when="*" />
+                        <FieldFeedback when="*">
+                          {t("Contact-Error1")}
+                        </FieldFeedback>
                       </FieldFeedbacks>
                     </div>
                   </div>
@@ -90,24 +96,28 @@ class ContactUs extends Component {
                       <input name="firstname"
                         type="text"
                         className="form-control"
-                        placeholder="First Name"
+                        placeholder={t("Contact-First")}
                         value={this.state.firstname}
                         required onChange={this.onFirstNameChange.bind(this)}
                       />
-                      <FieldFeedbacks for="firstname">
+                      <FieldFeedbacks for="agent">
-                        <FieldFeedback when="*" />
+                        <FieldFeedback when="*">
+                          {t("Contact-Error2")}
+                        </FieldFeedback>
                       </FieldFeedbacks>
                     </div>
                     <div className="col-6">
                       <input name="lastname"
                         type="text"
                         className="form-control"
-                        placeholder="Last Name"
+                        placeholder={t("Contact-Last")}
                         value={this.state.lastname}
                         required onChange={this.onLastNameChange.bind(this)}
                       />
-                      <FieldFeedbacks for="lastname">
+                      <FieldFeedbacks for="agent">
-                        <FieldFeedback when="*" />
+                        <FieldFeedback when="*">
+                          {t("Contact-Error2")}
+                        </FieldFeedback>
                       </FieldFeedbacks>
                     </div>
                   </div>
@@ -115,31 +125,34 @@ class ContactUs extends Component {
                     <input name="email"
                       type="email"
                       className="form-control"
-                      placeholder="Email Address"
+                      placeholder={t("Contact-Mail")}
                       aria-describedby="emailHelp"
                       value={this.state.email}
                       required onChange={this.onEmailChange.bind(this)}
                     />
                     <FieldFeedbacks for="email">
-                      <FieldFeedback when="*" />
+                      <FieldFeedback when={value => value.length === 0}>{t("Contact-Error2")}</FieldFeedback>
+                      <FieldFeedback when={value => !/\S+@\S+/.test(value)}>{t("Contact-Error3")}</FieldFeedback>
                     </FieldFeedbacks>
                   </div>
                   <div className="form-group">
                     <textarea name="message"
                       className="form-control"
-                      placeholder="Message"
+                      placeholder={t("Contact-Message")}
                       rows="5"
                       value={this.state.message}
                       required onChange={this.onMessageChange.bind(this)}
                     />
-                    <FieldFeedbacks for="message">
+                    <FieldFeedbacks for="agent">
-                      <FieldFeedback when="*" />
+                      <FieldFeedback when="*">
+                        {t("Contact-Error1")}
+                      </FieldFeedback>
                     </FieldFeedbacks>
                   </div>
                   <div className="buttonhelper">
                     <button type="submit" className="button-1">
-                      Submit
+                      {t("Contact-Submit")}
-                  </button>
+                    </button>
                   </div>
                 </FormWithConstraints>
               </div>
@@ -203,12 +216,12 @@ class ContactUs extends Component {
 
   }
 
-  alertSuccess(){
+  alertSuccess() {
     this.setState({ alertBad: false, alertSucess: true })
   }
 
-  alertBad(){
+  alertBad() {
-    this.setState({ alertSucess: false, alertBad: true  })
+    this.setState({ alertSucess: false, alertBad: true })
   }
 
   resetForm() {
@@ -217,4 +230,4 @@ class ContactUs extends Component {
 }
 
 
-export default ContactUs;
+export default withTranslation()(ContactUs);