-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(dashboard): modularize UI javascript code
- Create a file for every individual piece of js functionality. - This allows for reuse in other UI files. [Delivers #166315493]
- Loading branch information
Showing
14 changed files
with
249 additions
and
197 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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()] | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export const Formatter = new Intl.NumberFormat('en-US', { | ||
style: 'decimal', | ||
currency: 'NGN', | ||
minimumFractionDigits: 2 | ||
}); |
Oops, something went wrong.