Merge pull request #51 from chidimo/ch-refactor-UI-js-files-166315493

Modularize dashboard UI javascript code

UI/authentication.html

@@ -90,6 +90,6 @@ <h1 class="authentication_title">Create your account</h1>
         </div>
 
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-        <script src="./js/authentication.js"></script>        
+        <script type="module" src="./js/authentication.js"></script>        
     </body>
 </html>

UI/dashboard.html

@@ -50,7 +50,10 @@
                                     <ul id="sub_menu">
                                         <div class="submenu_username">
                                             <a href="./dashboard.html">
-                                                <div><span class="capitalize firstname"></span> <span class="capitalize lastname"></span></div>
+                                                <div>
+                                                    <span id="sub_menu_firstname" class="capitalize firstname"></span>
+                                                    <span id="sub_menu_lastname" class="capitalize lastname"></span>
+                                                </div>
                                             </a>
                                         </div>
                                         <hr class="submenu_hr">
@@ -74,7 +77,11 @@
 
                 <section id="dashboard">
                     <div class="container">
-                        <h2 class="page_heading"><span class='capitalize firstname'></span> <span class='capitalize lastname'></span> <i class="fas fa-check-circle"></i></h2>
+                        <h2 class="page_heading">
+                            <span id="dash_firstname" class='capitalize firstname'></span>
+                            <span id="dash_lastname" class='capitalize lastname'></span>
+                            <i class="fas fa-check-circle"></i>
+                        </h2>
 
                         <hr class="section_divider">
 
@@ -86,38 +93,31 @@ <h2 class="page_heading"><span class='capitalize firstname'></span> <span class=
 
                         <div class="user_information">
                             <div class="user_card card">
-                                <div
-                                    id="dp"
-                                    class="user_photo"
-                                    style="background-image: url('https://s3.eu-west-2.amazonaws.com/quick-credit/profile_photos/1')"
-                                >
-                                <svg
-                                    id="profile_pix"
-                                    aria-hidden="true"
-                                    focusable="false"
-                                    data-prefix="fas"
-                                    data-icon="camera"
-                                    class="svg-inline--fa fa-camera fa-w-16"
-                                    role="img"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    viewBox="0 0 512 512">
-                                    <path
-                                        d="M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 0 48 21.5 48 48zM376 288c0-66.2-53.8-120-120-120s-120 53.8-120 120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88z">
-                                    </path>
-                                </svg>
-
-                                <!-- <img
-                                    title="Click to change"
-                                    id="profile_pix"
-                                    src="https://s3.eu-west-2.amazonaws.com/quick-credit/profile_photos/1"
-                                    alt="Profile picture"
-                                > -->
+                                <div id="dp" class="user_photo">
+                                    <svg
+                                        id="profile_pix"
+                                        aria-hidden="true"
+                                        focusable="false"
+                                        data-prefix="fas"
+                                        data-icon="camera"
+                                        class="svg-inline--fa fa-camera fa-w-16"
+                                        role="img"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 512 512">
+                                        <path
+                                            d="M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 0 48 21.5 48 48zM376 288c0-66.2-53.8-120-120-120s-120 53.8-120 120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88z">
+                                        </path>
+                                    </svg>
                                     <input type="file" id="img_uploader" name="img_uploader" accept="image/*" />
                                 </div>
                                 <hr class="card_divider">
 
                                 <div class="user_info">
-                                    <h3><span class='capitalize lastname'></span> <span class='capitalize firstname'></span> <i class="fas fa-check-circle"></i></h3>
+                                    <h3>
+                                        <span id="user_info_firstname" class='capitalize lastname'></span>
+                                        <span id="user_info_lastname" class='capitalize firstname'></span>
+                                        <i class="fas fa-check-circle"></i>
+                                    </h3>
                                     <p><span id="email"></span></p>
                                     <p><span id="phone"></span></p>
                                 </div>
@@ -158,7 +158,12 @@ <h3>Loans</h3>
                 </div>
             </footer>
         </div>
+
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-        <script src="./js/dashboard.js"></script>
+        <script type="module" src="./js/common/user_loans.js"></script>
+        <script type="module" src="./js/common/logged_in_menu.js"></script>
+        <script type="module" src="./js/common/user_card_info.js"></script>
+        <script type="module" src="./js/common/user_card_address.js"></script>
+        <script type="module" src="./js/dashboard.js"></script>
     </body>
 </html>

UI/js/authentication.js

@@ -1,4 +1,7 @@
+import { BASE_URL, common_headers, token_name } from './common/constants.js';
+
 /* eslint-disable no-undef */
+
 const signin_form = document.getElementById('signin_form');
 const signup_form = document.getElementById('signup_form');
 
@@ -27,27 +30,19 @@ activate_signup.addEventListener('click', e => {
     activate_form(activate_signup, activate_signin);
 });
 
-const base_url = 'https://qcredit.herokuapp.com/api/v1';
-// const base_url = 'http://localhost:3000/api/v1';
-const sign_up_endpoint = `${base_url}/auth/signup`;
-const sign_in_endpoint = `${base_url}/auth/signin`;
-
-const common_headers = { 
-    'Content-Type': 'application/json',
-    'Access-Control-Allow-Origin': '*',
-    'Access-Control-Allow-Methods': 'PUT, GET, POST',
-}
-
 const save_user = async (endpoint, body) => {
     const config = {
-        headers: { ...common_headers },
+        headers: {
+            ...common_headers,
+            'Content-Type': 'application/json',
+        },
     };
     try {
         const { data, status
         } = await axios.post(endpoint, body, config);
         const user = data.data;
         if ((status === 200) || (status === 201)) {
-            localStorage.QCToken = user.token;
+            localStorage[token_name()] = user.token;
             localStorage.user = JSON.stringify(user);
         }
     }
@@ -64,7 +59,7 @@ signin_form.addEventListener('submit', async e => {
     const email = document.getElementById('signin_email').value;
     const password = document.getElementById('signin_password').value;
     const body = JSON.stringify({ email, password });
-    await save_user(sign_in_endpoint, body);
+    await save_user(`${BASE_URL}/auth/signin`, body);
     const { id } = JSON.parse(localStorage.user);
     await get_user_loans(id);
     window.location = './dashboard.html';
@@ -77,17 +72,15 @@ signup_form.addEventListener('submit', async e => {
     const confirm_password = document.getElementById('confirm_password').value;
 
     const body = JSON.stringify({ email, password, confirm_password });
-    await save_user(sign_up_endpoint, body);
-    const { id } = JSON.parse(localStorage.user);
-    await get_user_loans(id);
+    await save_user(`${BASE_URL}/auth/signup`, body);
     window.location = './profile.edit.html';
 });
 
 const get_user_loans = async id => {
-    const url = `${base_url}/loans/user/${id}`;
+    const url = `${BASE_URL}/loans/user/${id}`;
     const headers = {
         ...common_headers,
-        'x-access-token': localStorage.QCToken
+        'x-access-token': localStorage[token_name()]
     };
     try {
         const { data, status } = await axios.get(url, { headers });

UI/js/common/constants.js

@@ -0,0 +1,17 @@
+export const BASE_URL = 'https://qcredit.herokuapp.com/api/v1';
+// export const BASE_URL = 'http://localhost:3000/api/v1';
+
+export const token_name = () => {
+    if (BASE_URL.includes('local')) {
+        return 'localQCtoken';
+    }
+    return 'webQCtoken';
+};
+
+export const common_headers = {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'PUT, GET, PATCH, POST',
+    'Access-Control-Allow-Headers': 'Content-Type',
+    'Access-Control-Max-Age': '3000',
+    'x-access-token': localStorage[token_name()]
+};

UI/js/common/img_uploader.js

@@ -0,0 +1,62 @@
+/* eslint-disable no-undef */
+
+import { BASE_URL, common_headers, token_name } from './constants.js';
+
+// step 1: get a signed URL
+export const retrieve_signed_url = async (id, filetype) => {
+    const url = `${BASE_URL}/users/${id}/photo/upload`;
+    const headers = {
+        filetype,
+        'x-access-token': localStorage[token_name()]
+    };
+    try {
+        const { data, status } = await axios.get(url, { headers } );
+        if (status === 200) return data.signed_url;
+    }
+    catch (e) {
+        const { response } = e;
+        const { data, status } = response;
+        console.log(`${JSON.stringify(data)}, \n ${status}`);
+    }
+};
+
+// step 2. Upload to AWS S3 bucket   
+export const upload_to_aws = async (id, file, signed_url) => {
+    const config = {
+        headers: { ...common_headers,
+            'Content-Type': file.type, 
+        },
+        onUploadProgress: progressEvent => {
+            const { loaded, total } = progressEvent;
+            console.log(`loaded: ${loaded}, total: ${total}`);
+        }
+    };
+
+    try {
+        const resp = await axios.put(signed_url, file, config);
+        if (resp.status === 200) {
+            const bucket = 'quick-credit';
+            const folder = 'profile_photos';
+            const endpoint = 's3.eu-west-2.amazonaws.com';
+            const aws_url = `https://${endpoint}/${bucket}/${folder}/${id}`;
+            return aws_url;
+        }
+    }
+    catch (e) {
+        const { response } = e;
+        const { data, status } = response;
+        console.log(`${JSON.stringify(data)}, \n ${status}`);
+    }
+};
+
+// step 3. Update photo in db
+export const update_photo_in_db = async (id, photo_url) => {
+    const url = `${BASE_URL}/users/${id}/photo/update`;
+    const body = { photo_url };
+    const config = {
+        headers: { ...common_headers, },
+    };
+    const { data } = await axios.patch(url, body, config);
+    const user = data.data;
+    return user;
+};

UI/js/common/logged_in_menu.js

@@ -0,0 +1,24 @@
+import { firstname, lastname, photo } from './user.js';
+import { token_name } from './constants.js';
+
+const logout = document.getElementById('logout');
+
+const images = document.getElementsByClassName('photos');
+const sub_menu_firstname = document.getElementById('sub_menu_firstname');
+const sub_menu_lastname = document.getElementById('sub_menu_lastname');
+
+logout.addEventListener('click', e => {
+    e.preventDefault();
+    localStorage.removeItem(token_name());
+    localStorage.removeItem('user');
+    localStorage.removeItem('user_loans');
+    window.location = './authentication.html';
+});
+
+// DOM substitutions
+for (const image of images) {
+    image.src = photo;
+}
+
+sub_menu_firstname.textContent = firstname;
+sub_menu_lastname.textContent = lastname;

UI/js/common/user.js

@@ -0,0 +1,12 @@
+const user = JSON.parse(localStorage.user);
+
+export const { id } = user;
+export const { email } = user;
+export const { firstname } = user;
+export const { lastname } = user;
+export const { photo } = user;
+export const { phone } = user;
+export const { isadmin } = user;
+export const { status } = user;
+export const { mailverified } = user;
+export const { address } = user;

UI/js/common/user_card_address.js

@@ -0,0 +1,7 @@
+import { address } from './user.js';
+
+const home = document.getElementById('home');
+const office = document.getElementById('office');
+
+home.textContent = address.home;
+office.textContent = address.office;

UI/js/common/user_card_info.js

@@ -0,0 +1,15 @@
+import { email, firstname, lastname, photo, phone } from './user.js';
+
+const dp = document.getElementById('dp');
+const user_info_firstname = document.getElementById('user_info_firstname');
+const user_info_lastname = document.getElementById('user_info_lastname');
+const em = document.getElementById('email');
+const ph = document.getElementById('phone');
+
+// DOM substitutions
+
+dp.style = `background-image: url('${photo}')`;
+user_info_firstname.textContent = firstname;
+user_info_lastname.textContent = lastname;
+ph.textContent = phone;
+em.textContent = email;

UI/js/common/user_loans.js

@@ -0,0 +1,25 @@
+import { Formatter } from './utils.js';
+
+const table_ref = document.getElementById('user_loans_items');
+
+const user_loans = JSON.parse(localStorage.user_loans);
+
+for (const [ i, loan ] of user_loans.entries()) {
+    const date = new Date(loan.createdon);
+    let class_;
+    if (loan.status === 'approved') class_ = 'approved_loan';
+    else if (loan.status === 'rejected') class_ = 'rejected_loan';
+    const data = `
+    <tr>
+        <td><a href="./loan.html">${i + 1}</a></td>
+        
+        <td><a href="./loan.html"><time>${date.toDateString()}</time></a></td>
+        <td class=${class_}>
+            <a class='capitalize' href="./loan.html">${loan.status}</a>
+        </td>
+        <td><a href="./loan.html">
+            ${Formatter.format(Number(loan.amount))}</a></td>
+    </tr>
+    `;
+    table_ref.insertRow(-1).innerHTML = data;
+}

UI/js/common/utils.js

@@ -0,0 +1,5 @@
+export const Formatter = new Intl.NumberFormat('en-US', {
+    style: 'decimal',
+    currency: 'NGN',
+    minimumFractionDigits: 2
+});