Merge pull request #12 from Nez27/feat/optimized-code

Optimized code project.

javascript-practice/src/js/controllers/registerController.js

@@ -13,7 +13,7 @@ export default class RegisterController {
   }
 
   init() {
-    if (this.registerView.checkRegisterFormElExist()) {
+    if (this.registerView.isRegisterPage()) {
       this.registerView.addHandlerForm(
         this.hanlderCheckUserExist.bind(this),
         this.handlerSaveUser.bind(this),

javascript-practice/src/js/main.js

@@ -3,5 +3,6 @@ import App from './app';
 // Sure that scripts called after DOM loaded
 document.addEventListener('DOMContentLoaded', () => {
   const myApp = new App();
+
   myApp.start();
 });

javascript-practice/src/js/services/commonService.js

@@ -1,8 +1,41 @@
-/* eslint-disable class-methods-use-this */
+import { timeOutConnect } from '../helpers/helpers';
 import FirebaseService from './firebaseService';
 
 export default class CommonService {
+  constructor() {
+    this.defaultPath = '/';
+    this.firebaseService = FirebaseService;
+  }
+
   connectToDb() {
-    FirebaseService.reconnect();
+    this.firebaseService.reconnect();
+  }
+
+  async findKeyByProperty(property, value, path = this.defaultPath) {
+    this.connectToDb();
+    const existUser = this.firebaseService.findKeyByPropery(
+      path,
+      property,
+      value,
+    );
+    const result = await timeOutConnect(existUser);
+
+    return result;
+  }
+
+  async save(data, path = this.path) {
+    this.connectToDb();
+    const saveUser = this.firebaseService.save(data, path);
+
+    await timeOutConnect(saveUser);
+  }
+
+  async getDataFromId(id, path = this.path) {
+    this.connectToDb();
+    const data = await this.firebaseService.getDataFromId(id, path);
+
+    if (data) return data;
+
+    return null;
   }
 }

javascript-practice/src/js/services/userService.js

@@ -1,25 +1,21 @@
-import { timeOutConnect } from '../helpers/helpers';
-import FirebaseService from './firebaseService';
-import User from '../models/userModel';
+import User from '../models/user';
 import CommonService from './commonService';
 
 export default class UserService extends CommonService {
   constructor() {
     super();
-    this.path = 'users/';
+
+    this.defaultPath = 'users/';
   }
 
   /**
    * Save user into database
    * @param {Object} user The user object need to be saved into databae
    */
-  async saveUser(user) {
-    this.connectToDb();
-    const saveUser = FirebaseService.save(
-      user,
-      this.path + User.createIdUser(),
-    );
-    await timeOutConnect(saveUser);
+  saveUser(user) {
+    const pathData = this.defaultPath + User.createIdUser();
+
+    this.save(user, pathData);
   }
 
   /**
@@ -27,16 +23,8 @@ export default class UserService extends CommonService {
    * @param {string} email Email need to be check
    * @returns {Promise || number} Return id user when exist, otherwise will undefined
    */
-  async getUserIdByEmail(email) {
-    this.connectToDb();
-    const existUser = FirebaseService.findKeyByPropery(
-      this.path,
-      'email',
-      email,
-    );
-    const result = await timeOutConnect(existUser);
-
-    return result;
+  getUserIdByEmail(email) {
+    return this.findKeyByProperty('email', email);
   }
 
   /**
@@ -46,9 +34,11 @@ export default class UserService extends CommonService {
    */
   async checkUserExist(email) {
     const userExist = await this.getUserIdByEmail(email);
+
     if (userExist) {
       return true;
     }
+
     return false;
   }
 
@@ -59,10 +49,13 @@ export default class UserService extends CommonService {
    */
   async getUserByEmail(email) {
     const id = await this.getUserIdByEmail(email);
+
     if (id) {
-      const user = await FirebaseService.getDataFromId(id, this.path);
+      const user = await this.getDataFromId(id);
+
       return new User(user);
     }
+
     return null;
   }
 }

javascript-practice/src/js/views/commonLoginRegisterView.js

@@ -46,7 +46,7 @@ export default class CommonLoginRegisterView extends CommonView {
     // Reassign again to check error message element haved on page or not
     this.errorMessageEl = document.querySelector('.form__error-message');
 
-    // If have error message on page, remove it
+    // If have error message on page, remove it with style error input password
     if (this.errorMessageEl) {
       this.errorMessageEl.remove();
       this.toogleErrorStyleInputPass();

javascript-practice/src/js/views/registerView.js

@@ -1,12 +1,12 @@
 import { TYPE_POPUP } from '../constants/constant';
 import CommonLoginRegisterView from './commonLoginRegisterView';
-import User from '../models/userModel';
+import User from '../models/user';
 
 export default class RegisterView extends CommonLoginRegisterView {
   constructor() {
     super();
 
-    this.registerForm = document.getElementById('registerForm');
+    this.registerPage = document.getElementById('registerPage');
   }
 
   /**
@@ -24,8 +24,10 @@ export default class RegisterView extends CommonLoginRegisterView {
 
     if (this.validateForm(account)) {
       const user = new User(account);
+
       return user;
     }
+
     return null;
   }
 
@@ -100,7 +102,7 @@ export default class RegisterView extends CommonLoginRegisterView {
     this.toogleLoaderSpinner();
   }
 
-  checkRegisterFormElExist() {
-    return this.registerForm !== null;
+  isRegisterPage() {
+    return this.registerPage !== null;
   }
 }

javascript-practice/src/pages/login.html

@@ -7,38 +7,43 @@
     <title>Login - Money Lover</title>
   </head>
   <body>
-    <!-- <div class="loader"></div> -->
-    <div class="background">
-      <div class="wrapper">
-        <img class="logo-web" src="../assets/images/logo.svg" alt="Logo web" />
-        <!-- Log in form -->
-        <form action="#" class="form" method="post">
-          <div class="form__container">
-            <h1 class="form__title">Log In</h1>
-            <p class="form__description">Using Money Lover account</p>
-            <input
-              type="email"
-              class="form__input"
-              placeholder="Email"
-              name="email"
-              required
-            />
-            <input
-              type="password"
-              name="password"
-              class="form__input"
-              placeholder="Password"
-              required
-            />
-            <button type="submit" class="form__submit-btn">Login</button>
-            <p class="form__redirect-signup-text">
-              Don't have an account?
-              <a href="/register" class="form__link">Register</a>
-            </p>
-          </div>
-        </form>
-        <!-- End form -->
+    <main id="loginPage">
+      <div class="background">
+        <div class="wrapper">
+          <img
+            class="logo-web"
+            src="../assets/images/logo.svg"
+            alt="Logo web"
+          />
+          <!-- Log in form -->
+          <form action="#" class="form" method="post">
+            <div class="form__container">
+              <h1 class="form__title">Log In</h1>
+              <p class="form__description">Using Money Lover account</p>
+              <input
+                type="email"
+                class="form__input"
+                placeholder="Email"
+                name="email"
+                required
+              />
+              <input
+                type="password"
+                name="password"
+                class="form__input"
+                placeholder="Password"
+                required
+              />
+              <button type="submit" class="form__submit-btn">Login</button>
+              <p class="form__redirect-signup-text">
+                Don't have an account?
+                <a href="/register" class="form__link">Register</a>
+              </p>
+            </div>
+          </form>
+          <!-- End form -->
+        </div>
       </div>
-    </div>
+    </main>
   </body>
 </html>

javascript-practice/src/pages/register.html

@@ -7,54 +7,51 @@
     <title>Register - Money Lover</title>
   </head>
   <body>
-    <!-- <div class="loader hidden"></div> -->
-    <!-- <div class="overlay"></div>
-    <div class="modal-box success-form">
-      <div class="mark check"></div>
-      <h2 class="modal-box__title">Register success!</h2>
-      <p class="modal-box__message">Please login to continue.</p>
-
-      <button class="modal-box__redirect-btn">OK!</button>
-    </div> -->
-    <div class="background">
-      <div class="wrapper">
-        <img class="logo-web" src="../assets/images/logo.svg" alt="Logo web" />
-        <!-- Register form -->
-        <form action="#" class="form" method="post" id="registerForm">
-          <div class="form__container">
-            <h1 class="form__title">Register</h1>
-            <p class="form__description">Using Money Lover account</p>
-            <input
-              type="email"
-              class="form__input"
-              placeholder="Email"
-              name="email"
-              required
-            />
-            <input
-              type="password"
-              name="password"
-              class="form__input"
-              placeholder="Password"
-              required
-            />
-            <input
-              type="password"
-              name="password_confirm"
-              class="form__input"
-              placeholder="Confirm Password"
-              required
-            />
-            <button type="submit" class="form__submit-btn">Register</button>
-            <p class="form__redirect-signup-text">
-              Have you an account?
-              <a href="/login" class="form__link">Sign in</a>
-            </p>
-          </div>
-        </form>
-        <!-- End form -->
+    <main id="registerPage">
+      <div class="background">
+        <div class="wrapper">
+          <img
+            class="logo-web"
+            src="../assets/images/logo.svg"
+            alt="Logo web"
+          />
+          <!-- Register form -->
+          <form action="#" class="form" method="post" id="registerForm">
+            <div class="form__container">
+              <h1 class="form__title">Register</h1>
+              <p class="form__description">Using Money Lover account</p>
+              <input
+                type="email"
+                class="form__input"
+                placeholder="Email"
+                name="email"
+                required
+              />
+              <input
+                type="password"
+                name="password"
+                class="form__input"
+                placeholder="Password"
+                required
+              />
+              <input
+                type="password"
+                name="password_confirm"
+                class="form__input"
+                placeholder="Confirm Password"
+                required
+              />
+              <button type="submit" class="form__submit-btn">Register</button>
+              <p class="form__redirect-signup-text">
+                Have you an account?
+                <a href="/login" class="form__link">Sign in</a>
+              </p>
+            </div>
+          </form>
+          <!-- End form -->
+        </div>
       </div>
-    </div>
+    </main>
     <script type="module" src="../js/main.js"></script>
   </body>
 </html>