Merge pull request #35 from ArcticHawk1/translations-fix

moved the translations button and validating the login form

src/App.js

@@ -1,9 +1,7 @@
-import React, { useEffect } from "react";
+import React from "react";
 import Footer from "./shared-components/footer-component/Footer";
 import Navbar from "./shared-components/navbar-component/Navbar";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
-import i18next from "i18next";
-import Cookies from "js-cookie";
 import HomePage from "./homePage/Homepage";
 import ListingsPage from "./listings-page/ListingsPage";
 import AgentPage from "./agent-page/AgentPage";
@@ -15,62 +13,9 @@ import Login from "./login-page/Login";
 import Account from "./login-page/account/Account";
 import ContactUs from "./shared-components/contact-us/contact-us";
 
-const langauges = [
-  {
-    code: "fr",
-    name: "Français",
-    country_code: "fr",
-  },
-  {
-    code: "en",
-    name: "English",
-    country_code: "gb",
-  },
-];
-
 function App() {
-  const currentLanguageCode = Cookies.get("i18next") || "en";
-  const currentLanguage = langauges.find(
-    (lang) => lang.code === currentLanguageCode
-  );
-
-  useEffect(() => {
-    document.body.dir = currentLanguage.dir || "ltr";
-  }, [currentLanguage]);
   return (
     <div className="App">
-      {/* create the translations button */}
-      <div className="container">
-        <div className="d-flex justify-content-end">
-          {/* <!-- Example single danger button --> */}
-          <div class="btn-group">
-            <button
-              type="button"
-              class="btn btn-link dropdown-toggle"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >
-              <i class="fas fa-globe"></i>
-            </button>
-            <div class="dropdown-menu">
-              {langauges.map(({ code, name, country_code }) => (
-                <button
-                  class="dropdown-item"
-                  key={code}
-                  onClick={() => i18next.changeLanguage(code)}
-                  disabled={code === currentLanguageCode}
-                >
-                  <span
-                    className={`flag-icon flag-icon-${country_code} mx-2`}
-                  ></span>
-                  {name}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
       <BrowserRouter>
         <Navbar></Navbar>
         <Switch>

src/login-page/Login.js

@@ -14,14 +14,20 @@ class Login extends Component {
     },
   };
 
-  handleLogin = (e) => {
-    console.log(e);
-  };
+  handleLogin() {
+    // if ( !== this.state.Account.email) {
+    //   alert("invalid");
+    // }
+    // if (password !== this.state.Account.password) {
+    //   alert("invalid");
+    // }
+  }
+
   render() {
     const { t } = this.props;
     return (
       <div className="login-page">
-        <form action="" className="signin-Form" onClick={this.handleLogin}>
+        <form action="" className="signin-Form" onSubmit={this.handleLogin}>
           <img className="app-logo" src={Logo} alt="app-logo" />
           <h1 className="form-title">{t("Login_header")} </h1>
           <p>{t("Login_message")}</p>
@@ -61,11 +67,10 @@ class Login extends Component {
               </label>
             </div>
             <div className="login-btn">
-              <Link to="/account">
-                <button type="submit" class="btn btn-lg btn-primary">
-                  {t("Login_submit_button")}
-                </button>
-              </Link>
+              <Link to="/account"></Link>
+              <button type="submit" class="btn btn-lg btn-primary">
+                {t("Login_submit_button")}
+              </button>
             </div>
           </div>
         </form>

src/login-page/account/Account.js

@@ -11,6 +11,7 @@ class Account extends Component {
       lastName: "Green",
       email: "kevon.green@kcribs.com",
       password: "Kcribs123",
+      phoneNumber: "613-234-8796",
     },
   };
   render() {
@@ -93,7 +94,7 @@ class Account extends Component {
                     type="text"
                     class="form-control"
                     id="account-phoneNumber"
-                    placeholder={this.state.Account.email}
+                    placeholder={this.state.Account.phoneNumber}
                     required
                     disabled={true}
                   />

src/shared-components/navbar-component/Navbar.js

@@ -1,11 +1,33 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Link, withRouter } from "react-router-dom";
 import "./Navbar.css";
 import logo from "./logo2.png";
+import Cookies from "js-cookie";
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { useTranslation } from "react-i18next";
+import i18next from "i18next";
+const langauges = [
+  {
+    code: "fr",
+    name: "Français",
+    country_code: "fr",
+  },
+  {
+    code: "en",
+    name: "English",
+    country_code: "gb",
+  },
+];
+
 const Navbar = () => {
+  const currentLanguageCode = Cookies.get("i18next") || "en";
+  const currentLanguage = langauges.find(
+    (lang) => lang.code === currentLanguageCode
+  );
   const { t } = useTranslation();
+  useEffect(() => {
+    document.body.dir = currentLanguage.dir || "ltr";
+  }, [currentLanguage]);
   return (
     /* Nav Bar */
     <div className="Navbar">
@@ -27,6 +49,34 @@ const Navbar = () => {
         </button>
         <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
           <ul className="navbar-nav ml-auto">
+            <li className="nav-item">
+              <div class="btn-group">
+                <button
+                  type="button"
+                  class="btn btn-link dropdown-toggle"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <i class="fas fa-globe"></i>
+                </button>
+                <div class="dropdown-menu">
+                  {langauges.map(({ code, name, country_code }) => (
+                    <button
+                      class="dropdown-item"
+                      key={code}
+                      onClick={() => i18next.changeLanguage(code)}
+                      disabled={code === currentLanguageCode}
+                    >
+                      <span
+                        className={`flag-icon flag-icon-${country_code} mx-2`}
+                      ></span>
+                      {name}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </li>
             <li className="nav-item">
               <Link className="nav-link" exact to="/">
                 {t("Nav_Home")}