refactor(UserSchedule): index by a unique id rather than name (#166)

* refactor(UserSchedule): index by a unique id rather than name

* refactor: Update parameter names in schedule function jsdocs

* refactor: change more instances of .name to .id

* refactor: Fix typo in variable name and update references

* refactor: Remove console.log statement

* fix(chromatic): Update ScheduleListItem story

* refactor: remove unused eslint rule

src/shared/messages/UserScheduleMessages.ts

@@ -6,25 +6,25 @@ import type { Course } from '@shared/types/Course';
 export interface UserScheduleMessages {
     /**
      * Add a course to a schedule
-     * @param data the schedule name and course to add
+     * @param data the schedule id and course to add
      */
-    addCourse: (data: { scheduleName: string; course: Course }) => void;
+    addCourse: (data: { scheduleId: string; course: Course }) => void;
     /**
      * Remove a course from a schedule
-     * @param data the schedule name and course to remove
+     * @param data the schedule id and course to remove
      */
-    removeCourse: (data: { scheduleName: string; course: Course }) => void;
+    removeCourse: (data: { scheduleId: string; course: Course }) => void;
     /**
      * Clears all courses from a schedule
-     * @param data the name of the schedule to clear
+     * @param data the id of the schedule to clear
      */
-    clearCourses: (data: { scheduleName: string }) => void;
+    clearCourses: (data: { scheduleId: string }) => void;
 
     /**
      * Switches the active schedule to the one specified
-     * @param data the name of the schedule to switch to
+     * @param data the id of the schedule to switch to
      */
-    switchSchedule: (data: { scheduleName: string }) => void;
+    switchSchedule: (data: { scheduleId: string }) => void;
 
     /**
      * Creates a new schedule with the specified name
@@ -34,14 +34,14 @@ export interface UserScheduleMessages {
     createSchedule: (data: { scheduleName: string }) => string | undefined;
     /**
      * Deletes a schedule with the specified name
-     * @param data the name of the schedule to delete
+     * @param data the id of the schedule to delete
      * @returns undefined if successful, otherwise an error message
      */
-    deleteSchedule: (data: { scheduleName: string }) => string | undefined;
+    deleteSchedule: (data: { scheduleId: string }) => string | undefined;
     /**
      * Renames a schedule with the specified name
-     * @param data the name of the schedule to rename and the new name
+     * @param data the id of the schedule to rename and the new name
      * @returns undefined if successful, otherwise an error message
      */
-    renameSchedule: (data: { scheduleName: string; newName: string }) => string | undefined;
+    renameSchedule: (data: { scheduleId: string; newName: string }) => string | undefined;
 }

src/shared/storage/UserScheduleStore.ts

@@ -1,6 +1,8 @@
 import { UserSchedule } from '@shared/types/UserSchedule';
 import { createLocalStore, debugStore } from 'chrome-extension-toolkit';
 
+import { generateRandomId } from '../util/random';
+
 interface IUserScheduleStore {
     schedules: UserSchedule[];
     activeIndex: number;
@@ -13,6 +15,7 @@ export const UserScheduleStore = createLocalStore<IUserScheduleStore>({
     schedules: [
         new UserSchedule({
             courses: [],
+            id: generateRandomId(),
             name: 'Schedule 1',
             hours: 0,
             updatedAt: Date.now(),

src/shared/types/UserSchedule.ts

@@ -1,5 +1,6 @@
 import type { Serialized } from 'chrome-extension-toolkit';
 
+import { generateRandomId } from '../util/random';
 import { Course } from './Course';
 
 /**
@@ -7,6 +8,7 @@ import { Course } from './Course';
  */
 export class UserSchedule {
     courses: Course[];
+    id: string;
     name: string;
     hours: number;
     /** Unix timestamp of when the schedule was last updated */
@@ -14,12 +16,10 @@ export class UserSchedule {
 
     constructor(schedule: Serialized<UserSchedule>) {
         this.courses = schedule.courses.map(c => new Course(c));
+        this.id = schedule.id ?? generateRandomId();
         this.name = schedule.name;
-        this.hours = 0;
-        for (const course of this.courses) {
-            this.hours += course.creditHours;
-        }
-        this.updatedAt = schedule.updatedAt;
+        this.hours = this.courses.reduce((acc, c) => acc + c.creditHours, 0);
+        this.updatedAt = schedule.updatedAt ?? 0;
     }
 
     containsCourse(course: Course): boolean {

src/shared/util/random.ts

@@ -1,25 +1,9 @@
-/**
- * Generate a random ID
- *
- * @returns string of size 10 made up of random numbers and letters
- * @param length the length of the ID to generate
- * @example "cdtl9l88pj"
- */
-export function generateRandomId(length: number = 10): string {
-    const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
-    let result = '';
-    for (let i = 0; i < length; i += 1) {
-        result += chars.charAt(Math.floor(Math.random() * chars.length));
-    }
-    return result;
-}
+import { customAlphabet } from 'nanoid';
 
 /**
- * Generate a random number between min and max
- * @param min the minimum number
- * @param max the maximum number
- * @returns a random number between min and max
+ * Generate secure URL-friendly unique ID.
+ *
+ * @param size Size of the ID. The default size is 12.
+ * @returns A random string.
  */
-export function rangeRandom(min: number, max: number): number {
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-}
+export const generateRandomId = customAlphabet('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', 12);