From 4afab2c52aec9ebd3d09d69b41fdcd4aa6bca4ee Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Tue, 3 Dec 2024 07:15:50 +1100 Subject: [PATCH] perf: refactor AddBetterSEQTAElements for improved performance --- src/seqta/ui/AddBetterSEQTAElements.ts | 119 ++++++++++++++----------- 1 file changed, 66 insertions(+), 53 deletions(-) diff --git a/src/seqta/ui/AddBetterSEQTAElements.ts b/src/seqta/ui/AddBetterSEQTAElements.ts index ed5aa1d..e57f294 100644 --- a/src/seqta/ui/AddBetterSEQTAElements.ts +++ b/src/seqta/ui/AddBetterSEQTAElements.ts @@ -6,21 +6,59 @@ import { settingsState } from "@/seqta/utils/listeners/SettingsState"; import { updateAllColors } from "./colors/Manager"; import { delay } from "@/seqta/utils/delay"; +let cachedUserInfo: any = null; + +async function getUserInfo() { + if (cachedUserInfo) return cachedUserInfo; + + try { + const response = await fetch(`${location.origin}/seqta/student/login`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json; charset=utf-8', + }, + body: JSON.stringify({ + mode: 'normal', + query: null, + redirect_url: location.origin, + }), + }); + + const responseData = await response.json(); + cachedUserInfo = responseData.payload; + return cachedUserInfo; + } catch (error) { + console.error('Error fetching user info:', error); + throw error; + } +} + export async function AddBetterSEQTAElements() { if (settingsState.onoff) { initializeSettings(); if (settingsState.DarkMode) { document.documentElement.classList.add('dark'); } - createHomeButton(); + + const fragment = document.createDocumentFragment(); + const menu = document.getElementById('menu')!; + const menuList = menu.firstChild as HTMLElement; + + createHomeButton(fragment, menuList); + createNewsButton(fragment, menu); + + menuList.insertBefore(fragment, menuList.firstChild); + try { - await appendBackgroundToUI(); + await Promise.all([ + appendBackgroundToUI(), + handleUserInfo(), + handleStudentData() + ]); } catch (error) { - console.error('Error appending background to UI:', error); + console.error('Error initializing UI elements:', error); } - await handleUserInfo(); - handleStudentData(); - createNewsButton(); + setupEventListeners(); await addDarkLightToggle(); customizeMenuToggle(); @@ -28,7 +66,6 @@ export async function AddBetterSEQTAElements() { addExtensionSettings(); await createSettingsButton(); - setupSettingsButton(); } @@ -37,18 +74,15 @@ function initializeSettings() { updateBgDurations(); } -function createHomeButton() { +function createHomeButton(fragment: DocumentFragment, menuList: HTMLElement) { const container = document.getElementById('content')!; const div = document.createElement('div'); div.classList.add('titlebar'); container.append(div); const NewButton = stringToHTML('
    • '); - const menu = document.getElementById('menu')!; - const List = menu.firstChild! as HTMLElement; - if (NewButton.firstChild) { - List.insertBefore(NewButton.firstChild, List.firstChild); + fragment.appendChild(NewButton.firstChild); } } @@ -125,28 +159,6 @@ async function handleStudentData() { } } -async function getUserInfo() { - try { - const response = await fetch(`${location.origin}/seqta/student/login`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json; charset=utf-8', - }, - body: JSON.stringify({ - mode: 'normal', - query: null, - redirect_url: location.origin, - }), - }); - - const responseData = await response.json(); - return responseData.payload; - } catch (error) { - console.error('Error fetching user info:', error); - throw error; // Rethrow the error after logging it - } -} - async function updateStudentInfo(students: any) { const info = await getUserInfo(); var index = students.findIndex(function (person: any) { @@ -179,41 +191,42 @@ async function updateStudentInfo(students: any) { } } -function createNewsButton() { +function createNewsButton(fragment: DocumentFragment, menu: HTMLElement) { const NewsButtonStr = '
    • '; const NewsButton = stringToHTML(NewsButtonStr); - const menu = document.getElementById('menu')!; - const List = menu.firstChild! as HTMLElement; - List!.appendChild(NewsButton.firstChild!); + if (NewsButton.firstChild) { + fragment.appendChild(NewsButton.firstChild); + } - let a = document.createElement('div'); - a.classList.add('icon-cover'); - a.id = 'icon-cover'; - menu!.appendChild(a); + let iconCover = document.createElement('div'); + iconCover.classList.add('icon-cover'); + iconCover.id = 'icon-cover'; + menu.appendChild(iconCover); } function setupEventListeners() { const menuCover = document.querySelector('#icon-cover'); - menuCover!.addEventListener('click', function () { - location.href = '../#?page=/home'; - loadHomePage(); - (document!.getElementById('menu')!.firstChild! as HTMLElement).classList.remove('noscroll'); - }); - const homebutton = document.getElementById('homebutton'); - homebutton!.addEventListener('click', function () { - if (!homebutton?.classList.contains('draggable') && !homebutton?.classList.contains('active')) { + const newsbutton = document.getElementById('newsbutton'); + + homebutton?.addEventListener('click', function() { + if (!homebutton.classList.contains('draggable') && !homebutton.classList.contains('active')) { loadHomePage(); } }); - const newsbutton = document.getElementById('newsbutton'); - newsbutton!.addEventListener('click', function () { - if (!newsbutton?.classList.contains('draggable') && !newsbutton?.classList.contains('active')) { + newsbutton?.addEventListener('click', function() { + if (!newsbutton.classList.contains('draggable') && !newsbutton.classList.contains('active')) { SendNewsPage(); } }); + + menuCover?.addEventListener('click', function() { + location.href = '../#?page=/home'; + loadHomePage(); + (document.getElementById('menu')!.firstChild! as HTMLElement).classList.remove('noscroll'); + }); } async function createSettingsButton() {