better everything

Author: FlipFloop

src-tauri/src/main.rs

@@ -16,8 +16,7 @@ struct Course {
 }
 
 #[tauri::command]
-fn get_courses(courses: String) -> String {
-    // fn get_courses() -> String {
+fn get_courses(courses: String) ->  Vec<Vec<u16>> {
     println!("Courses searched: {}", courses);
     let mut free_courses: Vec<Vec<u16>> = vec![vec![], vec![]];
 
@@ -127,10 +126,7 @@ fn get_courses(courses: String) -> String {
         }
     }
 
-    return format!(
-        "Course(s) {:?} has/have a free spot. Course(s) {:?} has/have a free waitlist slot.",
-        free_courses[0], free_courses[1]
-    );
+    return free_courses;
 }
 
 #[tauri::command]

src/App.tsx

@@ -1,6 +1,6 @@
-import { createEffect, createSignal, For, onMount, Show } from "solid-js";
+import { createSignal, For, onMount, Show } from "solid-js";
 import toast, { Toaster } from "solid-toast";
-import "./App.scss";
+import "./stylesheets/App.scss";
 
 import type { Course } from "./utils/types";
 import { courseMAX, courseMIN } from "./utils/types";
@@ -11,10 +11,13 @@ import {
   courses,
   setCourses,
 } from "./utils/dataManagement";
+import Results from "./components/Results";
+import CourseEntry from "./components/CourseEntry";
 
 const App = () => {
-  const [data, setData] = createSignal("No data fetched!");
-  const [newCourse, setNewCourse] = createSignal(0);
+  const [courseData, setCourseData] = createSignal<number[][]>([]);
+  const [newCourse, setNewCourse] = createSignal<number>(0);
+  const [fetched, setFetched] = createSignal<boolean>(false);
 
   onMount(() => {
     const localStorageItems: string = localStorage.getItem("courses") || "";
@@ -29,7 +32,8 @@ const App = () => {
       return;
     }
 
-    setData("Loading");
+    setCourseData([]);
+    setFetched(true);
     const loadToast = toast.loading("Fetching your data");
 
     const courseArr = courses
@@ -40,7 +44,7 @@ const App = () => {
         return el.courseNum;
       });
 
-    setData(await get_courses(courseArr));
+    setCourseData(await get_courses(courseArr));
 
     toast.remove(loadToast);
     toast.success("Retrieved!");
@@ -51,37 +55,7 @@ const App = () => {
       <Toaster />
       <h1>Georgia Tech self-course checker!</h1>
       <For each={courses}>
-        {(course: Course) => (
-          <div>
-            <input
-              value={course.courseNum}
-              min={courseMIN}
-              max={courseMAX}
-              type="number"
-              onChange={async (e) => {
-                const idx = courses.findIndex(
-                  (el: Course) => el.courseNum === course.courseNum
-                );
-                setCourses(idx, { courseNum: e.target.value as number });
-              }}
-            />
-            <button
-              onClick={() => {
-                setCourses(
-                  courses.filter((el: any) => el.courseNum !== course.courseNum)
-                );
-              }}
-            >
-              &#10060 Remove
-            </button>
-            <Show when={course.valid}>
-              <button>&#x2705 Course CRN is valid</button>
-            </Show>
-            <Show when={!course.valid}>
-              <button>! CRN Doesn't exist !</button>
-            </Show>
-          </div>
-        )}
+        {(course: Course) => <CourseEntry course={course} />}
       </For>
       <hr />
       <div class="row">
@@ -105,12 +79,13 @@ const App = () => {
       <button type="button" onClick={saveCourses}>
         Save Courses
       </button>
+
       <br />
       <button type="button" onClick={getData}>
         Get Course Data
       </button>
 
-      <h2>{data()}</h2>
+      <Results data={courseData()} fetched={fetched()} />
 
       <button type="button" onClick={openLink}>
         Go register!

src/components/CourseEntry.tsx

@@ -0,0 +1,41 @@
+import { Component, Show } from "solid-js";
+import { SetStoreFunction } from "solid-js/store";
+
+import { courses, setCourses } from "../utils/dataManagement";
+import { courseMAX, courseMIN, Course } from "../utils/types";
+
+const CourseEntry: Component<{ course: Course }> = (props) => {
+  return (
+    <div>
+      <input
+        value={props.course.courseNum}
+        min={courseMIN}
+        max={courseMAX}
+        type="number"
+        onChange={async (e) => {
+          const idx = courses.findIndex(
+            (el: Course) => el.courseNum === props.course.courseNum
+          );
+          setCourses(idx, { courseNum: e.target.value as number });
+        }}
+      />
+      <button
+        onClick={() => {
+          setCourses(
+            courses.filter((el: any) => el.courseNum !== props.course.courseNum)
+          );
+        }}
+      >
+        &#10060 Remove
+      </button>
+      <Show when={props.course.valid}>
+        <button>&#x2705 Course CRN is valid</button>
+      </Show>
+      <Show when={!props.course.valid}>
+        <button>! CRN Doesn't exist !</button>
+      </Show>
+    </div>
+  );
+};
+
+export default CourseEntry;

src/components/Results.tsx

@@ -0,0 +1,49 @@
+import { Component, createEffect, For, onMount } from "solid-js";
+
+const Results: Component<{ data: number[][]; fetched: boolean }> = (props) => {
+  onMount(() => {
+    return <h1>No data fetched.</h1>;
+  });
+
+  return (
+    <div>
+      {props.fetched ? (
+        <>
+          {props.data.length === 0 && <h2>Loading...</h2>}
+          {props.data[0] && props.data[0].length !== 0 && (
+            <>
+              <h2>
+                Courses with available seats:
+                <ul>
+                  <For each={props.data[0]}>
+                    {(courseNum: number) => <li>{courseNum}</li>}
+                  </For>
+                </ul>
+              </h2>
+            </>
+          )}
+          {props.data[1] && props.data[1].length !== 0 && (
+            <>
+              <h2>
+                Courses with available waitlist seats:
+                <ul>
+                  <For each={props.data[1]}>
+                    {(courseNum: number) => <li>{courseNum}</li>}
+                  </For>
+                </ul>
+              </h2>
+            </>
+          )}
+          {props.data[0] &&
+            props.data[1] &&
+            props.data[0].length === 0 &&
+            props.data[1].length === 0 && <h2>Nothing is available.</h2>}
+        </>
+      ) : (
+        <h2>You haven't checked yet.</h2>
+      )}
+    </div>
+  );
+};
+
+export default Results;

src/components/courseTag.tsx

@@ -1,7 +1,7 @@
 /* @refresh reload */
 import { render } from "solid-js/web";
 
-import "./global.scss";
+import "./stylesheets/global.scss";
 import App from "./App";
 
 render(() => <App />, document.getElementById("root") as HTMLElement);

src/index.tsx

@@ -1,9 +1,9 @@
 .container {
   margin: 0;
-  padding-top: 10vh;
+  padding-top: 5vh;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  // justify-content: center;
   text-align: center;
 }
 

src/App.scss src/stylesheets/App.scsssrc/App.scss renamed to src/stylesheets/App.scss

@@ -38,7 +38,7 @@ export const checkCourseExists = async (
 
 export const get_courses = async (courseArr: number[]) => {
   const data = await invoke("get_courses", { courses: courseArr.join(" ") });
-  return data as string;
+  return data as number[][];
 };
 
 export const openLink = async () => {