better way to not crash app (course checking etc.)

Author: FlipFloop

src/App.tsx

@@ -66,23 +66,9 @@ const addCourse = async () => {
     return;
   }
 
-  if (courses.length > 0) {
-    setCourses([
-      ...courses,
-      {
-        id: courses[courses.length - 1].id + 1,
-        courseNum: newCourse(),
-        seatAvailable: false,
-        waitlistAvailable: false,
-        valid: true,
-      },
-    ]);
-    return;
-  }
-
   setCourses([
+    ...courses,
     {
-      id: 1,
       courseNum: newCourse(),
       seatAvailable: false,
       waitlistAvailable: false,
@@ -102,44 +88,61 @@ const App = () => {
     }
   });
 
-  const saveCourses = () => {
-    toast.loading("Saving courses...");
-    checkCoursesValid();
-    localStorage.setItem("courses", JSON.stringify(courses));
-    toast.remove();
+  const saveCourses = async () => {
+    console.log(courses);
+    const loadToast = toast.loading("Saving courses...");
+
+    if (courses.length == 0) {
+      toast.error("No courses to save/fetch!");
+      return false;
+    }
+
+    await checkCoursesValid().then(() => {
+      localStorage.setItem("courses", JSON.stringify(courses));
+    });
+
     toast.success("Course CRNs saved!");
+    console.log("Course CRNs saved!");
+    toast.remove(loadToast);
+
+    return true;
   };
 
   const checkCoursesValid = async () => {
-    let invalidCoursesIdx: number[] = [];
+    let invalidCourses: number[] = [];
+    let validCourses: number[] = [];
 
     console.log(courses);
 
     for (let i = 0; i < courses.length; i++) {
       const courseExists = await checkCourseExists(courses[i].courseNum);
       if (!courseExists) {
-        invalidCoursesIdx.push(i);
-        console.log(i);
+        invalidCourses.push(i);
+        console.log(`Course CRN ${courses[i].courseNum} is invalid!`);
+      } else {
+        validCourses.push(i);
+        console.log(`Course CRN ${courses[i].courseNum} is valid!`);
       }
     }
 
-    console.log("invalid!");
+    for (let i = 0; i < invalidCourses.length; i++) {
+      console.log(invalidCourses[i]);
+      setCourses(invalidCourses[i], { valid: false });
+    }
 
-    for (let i = 0; i < invalidCoursesIdx.length; i++) {
-      console.log(invalidCoursesIdx[i]);
-      setCourses(invalidCoursesIdx[i], { valid: false });
+    for (let i = 0; i < validCourses.length; i++) {
+      console.log(validCourses[i]);
+      setCourses(validCourses[i], { valid: true });
     }
   };
 
   const getData = async () => {
-    if (courses.length == 0) {
-      toast.error("Add a course before fetching data!");
+    if (!(await saveCourses())) {
       return;
     }
 
-    saveCourses();
-    // setData("Loading");
-    toast.loading("Fetching your data");
+    setData("Loading");
+    const loadToast = toast.loading("Fetching your data");
 
     const courseArr = courses
       .filter((el: Course) => {
@@ -152,7 +155,7 @@ const App = () => {
     console.log(courseArr);
     setData(await get_courses(courseArr));
 
-    toast.remove();
+    toast.remove(loadToast);
     toast.success("Retrieved!");
   };
 
@@ -170,14 +173,16 @@ const App = () => {
               type="number"
               onChange={async (e) => {
                 const idx = courses.findIndex(
-                  (el: Course) => el.id === course.id
+                  (el: Course) => el.courseNum === course.courseNum
                 );
                 setCourses(idx, { courseNum: e.target.value as number });
               }}
             />
             <button
               onClick={() => {
-                setCourses(courses.filter((el: any) => el.id !== course.id));
+                setCourses(
+                  courses.filter((el: any) => el.courseNum !== course.courseNum)
+                );
               }}
             >
               &#10060 Remove

src/utils.ts

@@ -5,7 +5,6 @@ export const courseMIN = 10000;
 export const courseMAX = 99999;
 
 export type Course = {
-  id: number;
   courseNum: number;
   seatAvailable: boolean;
   waitlistAvailable: boolean;
@@ -15,7 +14,9 @@ export type Course = {
 const existingCourses: number[] = [];
 const nonExistingCourses: number[] = [];
 
-export const checkCourseExists = async (courseNumber: number) => {
+export const checkCourseExists = async (
+  courseNumber: number
+): Promise<boolean> => {
   const startTime = performance.now();
 
   if (
@@ -34,7 +35,7 @@ export const checkCourseExists = async (courseNumber: number) => {
 
   console.log("invoke");
 
-  const exists = await invoke("check_course_exists", {
+  const exists: boolean = await invoke("check_course_exists", {
     courseId: courseNumber,
   });
 
@@ -48,7 +49,7 @@ export const checkCourseExists = async (courseNumber: number) => {
 
   const endTime = performance.now();
 
-  console.log("TTE: " + (endTime - startTime));
+  console.log("TTE: " + (endTime - startTime) + "ms");
 
   return exists;
 };