From 5ae7c831472aee40570a13351a9912ee812e1122 Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Thu, 23 Mar 2023 20:06:08 -0700
Subject: [PATCH] refactor: days query to enum

Signed-off-by: Varun Patil <varunpatil@ucla.edu>
---
 src/components/Timeline.vue | 53 +++++++++++++++++--------------------
 src/services/API.ts         | 22 +++++++++++++++
 2 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index cfa87170..b3c71f2f 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -159,7 +159,7 @@ import PeopleIcon from "vue-material-design-icons/AccountMultiple.vue";
 import CheckCircle from "vue-material-design-icons/CheckCircle.vue";
 import ImageMultipleIcon from "vue-material-design-icons/ImageMultiple.vue";
 import ArchiveIcon from "vue-material-design-icons/PackageDown.vue";
-import { API } from "../services/API";
+import { API, DaysFilterType } from "../services/API";
 
 const SCROLL_LOAD_DELAY = 100; // Delay in loading data when scrolling
 const DESKTOP_ROW_HEIGHT = 200; // Height of row on desktop
@@ -624,75 +624,70 @@ export default defineComponent({
 
     /** Get query string for API calls */
     getQuery() {
-      const query = new URLSearchParams();
+      const query: { [key: string]: string } = {};
 
       // Favorites
       if (this.$route.name === "favorites") {
-        query.set("fav", "1");
+        API.DAYS_FILTER(query, DaysFilterType.FAVORITES);
       }
 
       // Videos
       if (this.$route.name === "videos") {
-        query.set("vid", "1");
+        API.DAYS_FILTER(query, DaysFilterType.VIDEOS);
       }
 
       // Folder
       if (this.$route.name === "folders") {
-        query.set("folder", utils.getFolderRoutePath(this.config_foldersPath));
+        const path = utils.getFolderRoutePath(this.config_foldersPath);
+        API.DAYS_FILTER(query, DaysFilterType.FOLDER, path);
         if (this.$route.query.recursive) {
-          query.set("recursive", "1");
+          API.DAYS_FILTER(query, DaysFilterType.RECURSIVE);
         }
       }
 
       // Archive
       if (this.$route.name === "archive") {
-        query.set("archive", "1");
+        API.DAYS_FILTER(query, DaysFilterType.ARCHIVE);
       }
 
       // Albums
-      if (this.$route.name === "albums" && this.$route.params.name) {
-        const user = <string>this.$route.params.user;
-        const name = <string>this.$route.params.name;
-        query.set("albums", `${user}/${name}`);
+      const user = <string>this.$route.params.user;
+      const name = <string>this.$route.params.name;
+      if (this.$route.name === "albums" && user && name) {
+        API.DAYS_FILTER(query, DaysFilterType.ALBUM, `${user}/${name}`);
       }
 
       // People
-      if (
-        this.routeIsPeople &&
-        this.$route.params.user &&
-        this.$route.params.name
-      ) {
-        query.set(
-          <string>this.$route.name, // "recognize" or "facerecognition"
-          `${this.$route.params.user}/${this.$route.params.name}`
-        );
+      if (this.routeIsPeople && user && name) {
+        const filter = <DaysFilterType>this.$route.name;
+        API.DAYS_FILTER(query, filter, `${user}/${name}`);
 
         // Face rect
         if (this.config_showFaceRect) {
-          query.set("facerect", "1");
+          API.DAYS_FILTER(query, DaysFilterType.FACE_RECT);
         }
       }
 
       // Places
-      if (this.$route.name === "places" && this.$route.params.name) {
-        const name = <string>this.$route.params.name;
-        query.set("places", <string>name.split("-", 1)[0]);
+      if (this.$route.name === "places" && name) {
+        const id = <string>name.split("-", 1)[0];
+        API.DAYS_FILTER(query, DaysFilterType.PLACE, id);
       }
 
       // Tags
-      if (this.$route.name === "tags" && this.$route.params.name) {
-        query.set("tags", <string>this.$route.params.name);
+      if (this.$route.name === "tags" && name) {
+        API.DAYS_FILTER(query, DaysFilterType.TAG, name);
       }
 
       // Map Bounds
       if (this.$route.name === "map" && this.$route.query.b) {
-        query.set("mapbounds", <string>this.$route.query.b);
+        API.DAYS_FILTER(query, DaysFilterType.MAP_BOUNDS, <string>this.$route.query.b);
       }
 
       // Month view
       if (this.isMonthView) {
-        query.set("monthView", "1");
-        query.set("reverse", "1");
+        API.DAYS_FILTER(query, DaysFilterType.MONTH_VIEW);
+        API.DAYS_FILTER(query, DaysFilterType.REVERSE);
       }
 
       return query;
diff --git a/src/services/API.ts b/src/services/API.ts
index 95a25db5..86f034b0 100644
--- a/src/services/API.ts
+++ b/src/services/API.ts
@@ -17,6 +17,24 @@ function tok(url: string) {
   return url;
 }
 
+export enum DaysFilterType {
+  FAVORITES = "fav",
+  VIDEOS = "vid",
+  FOLDER = "folder",
+  ARCHIVE = "archive",
+  ALBUM = "albums",
+  RECOGNIZE = "recognize",
+  FACERECOGNITION = "facerecognition",
+  PLACE = "places",
+  TAG = "tags",
+  MAP_BOUNDS = "mapbounds",
+
+  FACE_RECT = "facerect",
+  RECURSIVE = "recursive",
+  MONTH_VIEW = "monthView",
+  REVERSE = "reverse",
+}
+
 export class API {
   static Q(
     url: string,
@@ -47,6 +65,10 @@ export class API {
     return tok(gen(`${BASE}/days/{id}`, { id }));
   }
 
+  static DAYS_FILTER(query: any, filter: DaysFilterType, value: string = '1') {
+    query[filter] = value;
+  }
+
   static ALBUM_LIST(t: 1 | 2 | 3 = 3) {
     return gen(`${BASE}/clusters/albums?t=${t}`);
   }