locally saving homework

to increase loading speed, small spinner in top right to indicate data being fetched

src/components/homeworkList.vue

@@ -5,6 +5,7 @@ import apiService from '@/scripts/api.service'
 import type { homework } from '@/scripts/types/homework.interface'
 
 let dataIsHere = ref(false)
+let old_dataisHere = ref(false)
 
 defineExpose({ dataIsHere })
 
@@ -26,12 +27,58 @@ onBeforeMount(() => {
 })
 
 function getHomework() {
+
+  const old_data = localStorage.getItem('homework')
+
+  if (old_data) {
+    const jsonData = JSON.parse(old_data)
+
+    const parsedData = jsonData.map((element: homework) => {
+      return {
+        id: element.id,
+        dateAdded: new Date(element.dateAdded),
+        dateDue: new Date(element.dateDue),
+        text: element.text,
+        remark: element.remark,
+        teacher: element.teacher,
+        subject: element.subject,
+        completed: element.completed
+      }
+    })
+
+    parsedData.sort((a: homework, b: homework) => {
+      return +new Date(a.dateDue) - +new Date(b.dateDue)
+    })
+
+    parsedData.forEach((homework: homework) => {
+      if (!homework.completed) {
+        uncompleted_homework.homeworkEntries.push(homework)
+      } else if (homework.dateDue > new Date()) {
+        completed_homework.homeworkEntries.push(homework)
+      } else {
+        old_entries.homeworkEntries.push(homework)
+      }
+    })
+
+    old_dataisHere.value = true
+  }
+
   apiService.all().then((response) => {
     response.sort((a: homework, b: homework) => {
       return +new Date(a.dateDue) - +new Date(b.dateDue)
     })
 
     response.forEach((homework) => {
+
+      //check if the entry is already in any of the lists
+      if (
+        uncompleted_homework.homeworkEntries.find((element) => element.id === homework.id) ||
+        completed_homework.homeworkEntries.find((element) => element.id === homework.id) ||
+        old_entries.homeworkEntries.find((element) => element.id === homework.id)
+      ) {
+        return
+      }
+
       if (!homework.completed) {
         uncompleted_homework.homeworkEntries.push(homework)
       } else if (homework.dateDue > new Date()) {
@@ -47,14 +94,20 @@ function getHomework() {
 
 function compareDate(homeworkToCheck: homework, completed: boolean) {
   if (completed) {
-    if (homeworkToCheck.dateDue.toISOString().split('T')[0] !== latest_completed_date.toISOString().split('T')[0]) {
+    if (
+      homeworkToCheck.dateDue.toISOString().split('T')[0] !==
+      latest_completed_date.toISOString().split('T')[0]
+    ) {
       latest_completed_date = homeworkToCheck.dateDue
       return true
     } else {
       return false
     }
   } else {
-    if (homeworkToCheck.dateDue.toISOString().split('T')[0] !== latest_uncompleted_date.toISOString().split('T')[0]) {
+    if (
+      homeworkToCheck.dateDue.toISOString().split('T')[0] !==
+      latest_uncompleted_date.toISOString().split('T')[0]
+    ) {
       latest_uncompleted_date = homeworkToCheck.dateDue
       return true
     } else {
@@ -94,7 +147,12 @@ function getDaysLeftString(date: Date) {
   } else if (calcDiff < -1) {
     return 'Vor ' + Math.abs(calcDiff) + ' Tagen'
   } else if (calcDiff > 7) {
-    return date.toLocaleDateString('de-DE', { day: 'numeric', month: 'long' }) + ', In ' + calcDiff + ' Tagen'
+    return (
+      date.toLocaleDateString('de-DE', { day: 'numeric', month: 'long' }) +
+      ', In ' +
+      calcDiff +
+      ' Tagen'
+    )
   } else {
     return 'In ' + calcDiff + ' Tagen'
   }
@@ -199,23 +257,33 @@ function onDelete(id: number, array: number) {
   <div class="body">
     <!-- Spinner using bootstrap-->
     <div
-      v-if="!dataIsHere"
+      v-if="!dataIsHere && !old_dataisHere"
       class="d-flex justify-content-center align-items-center"
-      style="height: 100vh"
+      style="height: 8vh"
     >
       <div class="spinner-border spinner" role="status">
         <span class="visually-hidden">Loading...</span>
       </div>
     </div>
 
-    <div v-else>
+    <div v-if="old_dataisHere || dataIsHere">
       <div class="uncompleted">
-        <h1>Unabgeschlossen</h1>
+
+        <div class="d-flex justify-content-between align-items-center">
+          <h1 class="mb-0">Unabgeschlossen</h1>
+
+          <div v-if="old_dataisHere && !dataIsHere" class="spinner-border spinner-small" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+
+        </div>
 
         <div v-if="uncompleted_homework.homeworkEntries.length">
           <div v-for="(homeworkEntry, key) in uncompleted_homework.homeworkEntries" :key="key">
             <h2 v-if="compareDate(homeworkEntry, false)" class="day-title">
-              {{ getWeekDay(homeworkEntry) + ' (' + getDaysLeftString(homeworkEntry.dateDue) + ')' }}
+              {{
+                getWeekDay(homeworkEntry) + ' (' + getDaysLeftString(homeworkEntry.dateDue) + ')'
+              }}
             </h2>
             <HomeworkListItem
               :homework-entry="homeworkEntry"
@@ -227,8 +295,6 @@ function onDelete(id: number, array: number) {
         <div v-else>
           <h2 class="text-center h-100">Keine Hausaufgaben mehr!! 🎉🎉🎉</h2>
         </div>
-
-
       </div>
 
       <div class="completed">
@@ -282,6 +348,13 @@ h2 {
   color: var(--text-primary-color);
 }
 
+.spinner-small {
+  width: 2rem;
+  height: 2rem;
+  color: var(--text-primary-color);
+  margin-right: 3rem;
+}
+
 .day-title {
   font-size: 130%;
   font-weight: normal;