Skip to content

Commit

Permalink
Bug reduce redundant loading (#166)
Browse files Browse the repository at this point in the history 
* add cache to outreach and inductee api

* Optimize adminStatus logic

* remove sessionstorage

* fix bugs

* Revert "remove sessionstorage"

This reverts commit fc035c1.

* fix bugs and make adminStatus readable

* rename onClick to onLogOut

* remove redundant loading
  • Loading branch information
@greyluo
greyluo authored May 8, 2024
1 parent cd7cf00 commit 33dff68
Show file tree
Hide file tree
Showing 6 changed files with 200 additions and 174 deletions.
62 changes: 25 additions & 37 deletions frontend/src/App.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script>
import { Router, Route } from "svelte-routing";
import { onMount } from "svelte";
import { Router, Route } from "svelte-routing";
import Home from "./Pages/Home.svelte";
import EventDetail from "./Pages/Events/EventDetail.svelte";
import EventCreate from "./Pages/Events/EventCreate.svelte";
Expand All @@ -8,26 +9,10 @@
import ProfileEdit from "./Pages/ProfileEdit.svelte";
import Inductees from "./Pages/Inductees.svelte";
import Outreach from "./Pages/Outreach.svelte";
async function getAdminStatus() {
let response = await fetch(`/api/permissions/`);
if (response.status === 200) {
let output = await response.json();
let admin = output.is_admin;
return admin;
} else {
throw new Error(response.statusText);
}
}
import { adminStatus } from './stores.js';
</script>

{#await getAdminStatus()}
<div>
<p>loading...</p>
</div>
{:then adminStatus}

<Router>
<div class="main-content">
Expand All @@ -38,32 +23,35 @@
<Route path="/profile/edit">
<ProfileEdit />
</Route>
{#if adminStatus}

{#if $adminStatus !== null}
<Route path="/profile/:id" let:params>
<Profile id={params.id}/>
</Route>
<Route path="/inductees" component={Inductees} />
<Route path="/outreach" component={Outreach} />

<Route path="/events/create">
<EventCreate />
</Route>
<Route path="/events/edit/:id" let:params>
<EventCreate idOfEventToEdit={params.id}/>
</Route>
<Route path="/events/rides/:id" let:params>
<EventRides id={params.id}/>
<Route path="/events/:id" let:params>
<EventDetail id={params.id}/>
</Route>
{#if $adminStatus === true}
<Route path="/inductees" component={Inductees} />
<Route path="/outreach" component={Outreach} />
<Route path="/events/create">
<EventCreate />
</Route>
<Route path="/events/edit/:id" let:params>
<EventCreate idOfEventToEdit={params.id}/>
</Route>
<Route path="/events/rides/:id" let:params>
<EventRides id={params.id}/>
</Route>
{/if}
{/if}

<Route path="/events/:id" let:params>
<EventDetail id={params.id}/>
</Route>



</div>
</Router>

{/await}


<style>
:global(:root) {
Expand Down
46 changes: 15 additions & 31 deletions frontend/src/Components/Sidebar.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
<script>
import { adminStatus } from '../stores.js';
let logo = "/static/HKN-Logo-New-Blue.png";
async function getAdminStatus() {
let response = await fetch(`/api/permissions/`);
if (response.status === 200) {
let output = await response.json();
return output.is_admin;
} else {
throw new Error(response.statusText);
}
let onLogOut = () => {
sessionStorage.removeItem('adminStatus');
}
</script>

<style>
.sidebar {
width: 224px;
width: 224px;
height: 100vh;
background-color: #333;
display: flex;
Expand Down Expand Up @@ -48,27 +45,14 @@
}
</style>

<!--While getting admin status, load the other buttons first-->
{#await getAdminStatus()}
<div class="sidebar">
<img src={logo} alt="HKN logo" />
<a href="/">Home Page</a>
<a href="/profile/self/">Profile</a>
<a href="/accounts/logout/">Logout</a>
<img src={logo} alt="HKN logo" />
<a href="/">Home Page</a>
<a href="/profile/self">Profile</a>
{#if $adminStatus === true}
<a href="/inductees">Inductees</a>
<a href="/outreach">Outreach</a>
{/if}
<a href="/accounts/logout/" on:click={onLogOut}>Logout</a>
</div>
{:then adminStatus}
<!--After getting admin status, load inductee button if allowed to access-->
<div class="sidebar">
<img src={logo} alt="HKN logo" />
<a href="/">Home Page</a>
<a href="/profile/self">Profile</a>

{#if adminStatus}
<a href="/inductees">Inductees</a>
<a href="/outreach">Outreach</a>
{/if}

<a href="/accounts/logout/">Logout</a>
</div>
{/await}
60 changes: 37 additions & 23 deletions frontend/src/Pages/Inductees.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,41 @@
<script>
import Layout from "../Layout.svelte";
let inducteesData;
import Navbar from "../Components/Navbar.svelte";
import Layout from "../Layout.svelte";
import { onMount } from "svelte";
import { adminStatus } from '../stores.js';
async function getMajors() {
return await (await(fetch(`api/majors/`))).json()
}
let majors = [];
let years = [];
async function getInductees() {
let response = await fetch(`/api/inductees/`);
if (response.status === 200) {
let possible_majors = (await getMajors()).map(major => major.name)
let users = await response.json();
inducteesData = users;
inducteesData = inducteesData.sort((first, second) => {
users.sort((first, second) => {
if (first['last_name'] < second['last_name']) {
return -1;
} else {
return 0;
}
})
for (let i = 0; i < inducteesData.length; i++) {
if (!majors.includes(inducteesData[i].major) && possible_majors.includes(inducteesData[i].major)) {
majors.push(inducteesData[i].major);
for (let i = 0; i < users.length; i++) {
if (!majors.includes(users[i].major) && possible_majors.includes(users[i].major)) {
majors.push(users[i].major);
}
if (!years.includes(inducteesData[i].grad_year)) {
years.push(inducteesData[i].grad_year);
if (!years.includes(users[i].grad_year)) {
years.push(users[i].grad_year);
}
}
majors.sort();
years.sort();
majors.push('Other');
return users;
} else {
throw new Error(response.statusText);
}
Expand All @@ -41,7 +44,7 @@
async function getInductionClasses() {
let response = await fetch(`/api/inductionclasses/`);
if (response.status === 200) {
let output = response.json();
let output = await response.json();
return output;
} else {
throw new Error(response.statusText);
Expand Down Expand Up @@ -105,7 +108,7 @@
})
}
}
let sorting_col = "N/A";
let ascending = true;
Expand All @@ -115,7 +118,7 @@
let class_option;
let csv_data;
function tableToCSV() {
// Variable to store the final csv data
Expand Down Expand Up @@ -162,22 +165,23 @@
hiddenElement.download = 'inductees.csv';
hiddenElement.click();
}
let inducteesData, classes;
onMount(async () => {
inducteesData = await getInductees();
classes = await getInductionClasses();
});
</script>

<svelte:head>
<title> HKN Portal | Inductees </title>
</svelte:head>

{#await Promise.all([getInductees(), getAdminStatus(), getInductionClasses()])}
<div style="padding-left:50px">
<h1 style="margin-left: 15px">Inductees</h1>
<p>loading...</p>
</div>
{:then [filler, adminStatus, classes]}


<Layout>
{#if adminStatus}

{#if $adminStatus === true}
<div style="padding-left:50px">
<h1 style="margin-left: 15px">Inductees</h1>
<div>
Expand All @@ -200,6 +204,7 @@
</select>
</form>
</div>
{#if classes}
<div>
<form>
<select bind:value={class_option} name="classes">
Expand All @@ -210,12 +215,13 @@
</select>
</form>
</div>
{/if}
<div>
<button id="downloadButton" type="button" on:click={() => download_table()}>
Download as CSV
</button>
</div>

<div id="key">
<div style="padding:0px">
<h3 id="side">Key</h3>
Expand All @@ -230,6 +236,7 @@
<p>G - General (Other)</p>
</div>
</div>
{#if inducteesData}
<table id="inducteeTable">
<tr>
{#each headers as header}
Expand Down Expand Up @@ -287,6 +294,13 @@
{/if}
{/each}
</table>
{:else}
<h1 style="margin-left: 15px">Loading</h1>
{/if}
</div>
{:else if $adminStatus == null}
<div>
<h1 style="margin-left: 15px"> Loading...</h1>
</div>
{:else}
<div>
Expand All @@ -295,7 +309,7 @@
{/if}
</Layout>

{/await}


<style>
div {
Expand Down
Loading

0 comments on commit 33dff68

Please sign in to comment.