Skip to content

Commit 9172d1e

Browse files
jklugejkluge
committed
Small Fixes and Caching
1 parent cfd0575 commit 9172d1e

5 files changed

Lines changed: 54 additions & 12 deletions

File tree

‎my-app/firebase.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,49 @@ googleProvider.addScope("email");
2424

2525
// fetches all relevant information to create the model
2626
async function firebaseToModel(model) {
27+
// Load metadata from localStorage
28+
const cachedMetadata = JSON.parse(localStorage.getItem("coursesMetadata"));
29+
const firebaseTimestamp = await fetchLastUpdatedTimestamp();
30+
// check if up to date
31+
if (cachedMetadata && cachedMetadata.timestamp === firebaseTimestamp) {
32+
console.log("Using cached courses...");
33+
let mergedCourses = [];
34+
for (let i = 0; i < cachedMetadata.parts; i++) {
35+
const part = JSON.parse(localStorage.getItem(`coursesPart${i}`));
36+
if (part)
37+
mergedCourses = mergedCourses.concat(part);
38+
}
39+
model.setCourses(mergedCourses);
40+
return;
41+
}
42+
43+
// Fetch if outdated or missing
44+
console.log("Fetching courses from Firebase...");
2745
const courses = await fetchAllCourses();
2846
model.setCourses(courses);
47+
saveCoursesInChunks(courses, firebaseTimestamp);
48+
}
49+
50+
function saveCoursesInChunks(courses, timestamp) {
51+
const parts = 3; // Adjust this based on course size
52+
const chunkSize = Math.ceil(courses.length / parts);
53+
54+
for (let i = 0; i < parts; i++) {
55+
const chunk = courses.slice(i * chunkSize, (i + 1) * chunkSize);
56+
localStorage.setItem(`coursesPart${i}`, JSON.stringify(chunk));
57+
}
58+
localStorage.setItem("coursesMetadata", JSON.stringify({ parts, timestamp }));
59+
}
60+
61+
async function updateLastUpdatedTimestamp() {
62+
const timestampRef = ref(db, "metadata/lastUpdated");
63+
await set(timestampRef, Date.now());
64+
}
65+
66+
async function fetchLastUpdatedTimestamp() {
67+
const timestampRef = ref(db, "metadata/lastUpdated");
68+
const snapshot = await get(timestampRef);
69+
return snapshot.exists() ? snapshot.val() : 0;
2970
}
3071

3172
export function connectToFirebase(model) {
@@ -40,6 +81,7 @@ export async function addCourse(course){
4081
return;
4182
const myRef = ref(db, `courses/${course.code}`);
4283
await set(myRef, course);
84+
updateLastUpdatedTimestamp();
4385
}
4486

4587
export async function fetchAllCourses() {

‎my-app/src/views/Components/SideBarComponents/SliderField.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default function UploadField(props) {
4545
<p className='text-sm opacity-50'> - filter description</p>
4646
</div>
4747
</div>
48-
<div class="flex flex-col sm:inline-flex sm:flex-row rounded-lg shadow-2xs w-full
48+
<div className="flex flex-col sm:inline-flex sm:flex-row rounded-lg shadow-2xs w-full
4949
items-center font-medium text-white bg-[#aba8e0] border border-gray-200 p-3">
5050
<div className="flex-1 justify-between pl-2">
5151
<span

‎my-app/src/views/Components/SideBarComponents/ToggleField.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ export default function ToggleField({field1, field2 }) {
1212
<p className='text-sm opacity-50'> - filter description</p>
1313
</div>
1414
</div>
15-
<div class="flex flex-col sm:flex-row md:flex-row rounded-lg shadow-2xs w-full items-center
15+
<div className="flex flex-col sm:flex-row md:flex-row rounded-lg shadow-2xs w-full items-center
1616
font-medium text-white bg-[#aba8e0] ">
17-
<label class="flex-auto py-3 px-4 inline-flex gap-x-2 -mt-px -ms-px
17+
<label className="flex-auto py-3 px-4 inline-flex gap-x-2 -mt-px -ms-px
1818
first:rounded-t-md last:rounded-b-md sm:first:rounded-s-md sm:mt-0 sm:first:ms-0 s
1919
m:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-md text-sm font-medium
2020
focus:z-10 border border-gray-200 shadow-2xs cursor-pointer">
21-
<input type="checkbox" value="" class="sr-only peer" />
22-
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none
21+
<input type="checkbox" value="" className="sr-only peer" />
22+
<div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none
2323
peer-focus:ring-4 peer-focus:ring-blue-300
2424
rounded-full peer peer-checked:after:translate-x-full
2525
rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-['']
@@ -28,12 +28,12 @@ export default function ToggleField({field1, field2 }) {
2828
peer-checked:bg-violet-500 "></div>
2929
<span>{field1}</span>
3030
</label>
31-
<label class="flex-auto py-3 px-4 inline-flex gap-x-2 -mt-px -ms-px
31+
<label className="flex-auto py-3 px-4 inline-flex gap-x-2 -mt-px -ms-px
3232
first:rounded-t-md last:rounded-b-md sm:first:rounded-s-md sm:mt-0 sm:first:ms-0 s
3333
m:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-md text-sm font-medium
3434
focus:z-10 border border-gray-200 shadow-2xs cursor-pointer">
35-
<input type="checkbox" value="" class="sr-only peer" />
36-
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4
35+
<input type="checkbox" value="" className="sr-only peer" />
36+
<div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4
3737
peer-focus:ring-blue-300 rounded-full peer
3838
peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full
3939
peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px]

‎my-app/src/views/Components/SideBarComponents/UploadField.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,11 +176,11 @@ export default function UploadField(props) {
176176
return (
177177
<div className='pb-5 px-8 '>
178178
<div className="flex items-center justify-center ">
179-
<label for="PDF-Scraper-Input" className="flex flex-col items-center justify-center w-full h-50 border-2
179+
<label htmlFor="PDF-Scraper-Input" className="flex flex-col items-center justify-center w-full h-50 border-2
180180
border-gray-300 border-dashed rounded-lg cursor-pointer bg-[#aba8e0] hover:bg-gray-400">
181181
<div className="flex flex-col items-center justify-center pt-5 pb-6">
182182
<svg className="w-8 h-8 mb-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
183-
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" />
183+
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" />
184184
</svg>
185185
<p className="mb-2 text-sm "><span className="font-semibold">Click to upload</span> or drag and drop</p>
186186
<p className="text-xs">KTH trnascript of records in PDF format</p>

‎my-app/src/views/SidebarView.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ function SidebarView(props) {
1515
[&::-webkit-scrollbar]:opacity-2
1616
[&::-webkit-scrollbar-track]:bg-gray-100
1717
[&::-webkit-scrollbar-thumb]:bg-gray-300'>
18-
<div class="z-10 w-100% rounded-lg justify-center" >
19-
<h6 class="m-2 text-lg font-medium text-white text-center">
18+
<div className="z-10 w-100% rounded-lg justify-center" >
19+
<h6 className="m-2 text-lg font-medium text-white text-center">
2020
Filters
2121
</h6>
2222
<ToggleField

0 commit comments

Comments
 (0)