Refact course search

src/ui/CoursesSearch.ts

@@ -0,0 +1,98 @@
+import { usePorts } from "~/adapter";
+import { Ports } from "~/application/ports";
+import Usecase from "~/application/usecases";
+import { Course } from "~/domain/course";
+import { isResultError } from "~/domain/error";
+import { Module } from "~/domain/module";
+import { Schedule } from "~/domain/schedule";
+import { Timetable } from "~/domain/timetable";
+import { courseToDisplay } from "~/presentation/presenters/course";
+import { DisplayCourse } from "~/presentation/viewmodels/course";
+import { Subject } from "./subject";
+
+export type SearchResult = {
+  id: string;
+  course: DisplayCourse;
+  schedules: Schedule[];
+};
+
+export class CoursesSearch {
+  #offset = 0;
+  #limit: number;
+  #ports: Ports;
+
+  #searchResults: SearchResult[] = [];
+  #resultsHistory: SearchResult[] = [];
+
+  readonly searchResultsSubject = new Subject<{
+    results: SearchResult[];
+    history: SearchResult[];
+  }>();
+  readonly fetchingSubject = new Subject<boolean>();
+
+  constructor(limit?: number) {
+    this.#ports = usePorts();
+    this.#limit = limit ?? 50;
+  }
+
+  async search(
+    year: number,
+    keyword: string,
+    code: string,
+    timetable: Timetable<Module, boolean>,
+    onlyBlank: boolean
+  ) {
+    this.fetchingSubject.notify(true);
+
+    const result = await Usecase.searchCourse(this.#ports)(
+      year,
+      keyword.split("/s/"),
+      code.split("/s/"),
+      timetable,
+      onlyBlank,
+      "Cover",
+      this.#offset,
+      this.#limit
+    );
+
+    if (isResultError(result)) throw result;
+
+    const formatedResult = this.formatResult(result);
+
+    this.updateResultsHistory(formatedResult);
+    this.#searchResults = formatedResult;
+
+    this.#offset += this.#limit;
+
+    this.fetchingSubject.notify(false);
+
+    this.searchResultsSubject.notify({
+      results: this.#searchResults,
+      history: this.#resultsHistory,
+    });
+  }
+
+  resetResults() {
+    this.#offset = 0;
+    this.#searchResults = [];
+    this.#resultsHistory = [];
+
+    this.searchResultsSubject.notify({
+      results: this.#searchResults,
+      history: this.#resultsHistory,
+    });
+  }
+
+  private formatResult(results: Course[]): SearchResult[] {
+    return results.map((course) => ({
+      id: course.id,
+      course: courseToDisplay(course),
+      schedules: course.schedules,
+    }));
+  }
+
+  private updateResultsHistory(formatedResult: SearchResult[]) {
+    if (this.#offset === 0) this.#resultsHistory = formatedResult;
+    else this.#resultsHistory = [...this.#searchResults, ...formatedResult];
+  }
+}

src/ui/pages/add/search.vue

@@ -260,15 +260,14 @@ import { ComponentPublicInstance, computed, reactive, ref } from "vue";
 import { useRouter } from "vue-router";
 import { usePorts } from "~/adapter";
 import Usecase from "~/application/usecases";
-import { isResultError } from "~/domain/error";
 import { modules } from "~/domain/module";
 import { initializeTimetable } from "~/domain/timetable";
-import { courseToDisplay } from "~/presentation/presenters/course";
 import {
   editableSchedulesToTimetable,
   isNotSpecifiedSchedule,
 } from "~/presentation/presenters/schedule";
 import { notSpecified } from "~/presentation/viewmodels/option";
+import { CoursesSearch, SearchResult } from "~/ui/CoursesSearch";
 import Button from "~/ui/components/Button.vue";
 import Card from "~/ui/components/Card.vue";
 import CardCourse from "~/ui/components/CardCourse.vue";
@@ -287,18 +286,11 @@ import { useSwitch } from "~/ui/hooks/useSwitch";
 import { addCoursesByCodes } from "~/ui/store/course";
 import { getApplicableYear } from "~/ui/store/year";
 import { deleteElementInArray } from "~/utils";
-import type { Schedule } from "~/domain/schedule";
 import type { DisplayCourse } from "~/presentation/viewmodels/course";
 
 const ports = usePorts();
 const router = useRouter();
 
-type SearchResult = {
-  id: string;
-  course: DisplayCourse;
-  schedules: Schedule[];
-};
-
 /** toggle button */
 const [detailed, toggleDetailed] = useToggle(true);
 
@@ -345,50 +337,44 @@ const {
 } = useScheduleEditor();
 
 /** search */
-let currentOffset = 0;
-const limit = 50;
 const fetching = ref(false);
 const noResultText = ref("");
 
-const search = async (init = true) => {
+const searcher = new CoursesSearch(50);
+
+searcher.searchResultsSubject.attach(({ results, history }) => {
+  searchResults.splice(0, searchResults.length, ...history);
+
+  results.forEach(({ id }) => (courseIdToExpanded[id] = false));
+
+  if (searchResults.length === 0)
+    noResultText.value = [code.value, keyword.value]
+      .filter((value) => value)
+      .join(" ");
+});
+
+searcher.fetchingSubject.attach((_fetching) => {
+  fetching.value = _fetching;
+});
+
+const search = (withResetResults = false) => {
   const timetable =
     onlyBlank.value || schedules.every(isNotSpecifiedSchedule)
       ? initializeTimetable(modules, true)
       : editableSchedulesToTimetable(
           schedules.filter((schedule) => !isNotSpecifiedSchedule(schedule))
         );
-  const offset = init ? 0 : currentOffset;
-  fetching.value = true;
-  noResultText.value = "";
 
-  const result = await Usecase.searchCourse(ports)(
+  if (withResetResults) searcher.resetResults();
+
+  searcher.search(
     year.value,
-    keyword.value.split("/\s/"),
-    code.value.split("/\s/"),
+    keyword.value,
+    code.value,
     timetable,
-    onlyBlank.value,
-    "Cover",
-    offset,
-    limit
+    onlyBlank.value
   );
-  if (isResultError(result)) throw result;
-
-  const newSearchResults: SearchResult[] = result.map((course) => ({
-    id: course.id,
-    course: courseToDisplay(course),
-    schedules: course.schedules,
-  }));
-  if (offset === 0)
-    searchResults.splice(0, searchResults.length, ...newSearchResults);
-  else searchResults.splice(searchResults.length, 0, ...newSearchResults);
-  result.forEach(({ id }) => (courseIdToExpanded[id] = false));
-
-  fetching.value = false;
-  if (searchResults.length === 0)
-    noResultText.value = [code.value, keyword.value]
-      .filter((value) => value)
-      .join(" ");
-  currentOffset = offset + limit;
+
   closeAccordion();
 };
 

src/ui/subject.ts

@@ -0,0 +1,17 @@
+export type Observer<T> = (message: T) => void;
+
+export class Subject<T> {
+  #observers: Observer<T>[] = [];
+
+  attach(observer: Observer<T>) {
+    this.#observers.push(observer);
+  }
+
+  detach(observer: Observer<T>) {
+    this.#observers = this.#observers.filter((obs) => obs !== observer);
+  }
+
+  notify(message: T) {
+    this.#observers.forEach((observer) => observer(message));
+  }
+}