Fix indexing bug and set default messages when a timetable has no associated username or courses

Author: Austin-X

course-matrix/frontend/src/pages/Home/Home.tsx

@@ -21,6 +21,7 @@ import SharedCalendar from "../TimetableBuilder/SharedCalendar";
 import { useGetUsernameFromUserIdQuery } from "@/api/authApiSlice";
 
 export interface Timetable {
+  index: number;
   id: number;
   created_at: string;
   updated_at: string;
@@ -82,6 +83,7 @@ const Home = () => {
   const allTimetables = [...myOwningTimetables, ...sharedWithMeTimetables]
     .map((timetable, index) => ({
       ...timetable,
+      index: index + 1,
       isShared: index >= myOwningTimetables.length,
     }))
     .sort(sortingFunction);
@@ -104,8 +106,6 @@ const Home = () => {
   );
   const ownerUsername = usernameData ?? "";
 
-  console.log("SELECTED SHARED TIMETABLE", selectedSharedTimetable);
-
   return (
     <div className="w-full">
       <div className="m-8">
@@ -178,7 +178,7 @@ const Home = () => {
                 refetch={refetch}
                 sharedRefetch={sharedRefetch}
                 setErrorMessage={setErrorMessage}
-                key={timetable.id}
+                key={timetable.index}
                 ownerId={timetable.user_id}
                 title={timetable.timetable_title}
                 lastEditedDate={new Date(timetable.updated_at)}
@@ -194,7 +194,7 @@ const Home = () => {
                 refetch={refetch}
                 sharedRefetch={sharedRefetch}
                 setErrorMessage={setErrorMessage}
-                key={timetable.id}
+                key={timetable.index}
                 ownerId={timetable.user_id}
                 title={timetable.timetable_title}
                 lastEditedDate={new Date(timetable.updated_at)}
@@ -210,7 +210,7 @@ const Home = () => {
                 refetch={refetch}
                 sharedRefetch={sharedRefetch}
                 setErrorMessage={setErrorMessage}
-                key={timetable.id}
+                key={timetable.index}
                 ownerId={timetable.user_id}
                 title={timetable.timetable_title}
                 lastEditedDate={new Date(timetable.updated_at)}

course-matrix/frontend/src/pages/TimetableBuilder/SharedCalendar.tsx

@@ -110,16 +110,21 @@ const SharedCalendar = React.memo<SharedCalendarProps>(
       isResponsive: false,
     });
 
+    const username = user_username.trim().length > 0 ? user_username : "John Doe";
+
     return (
       <div>
         <h1 className="text-xl text-center justify-between font-medium tracking-tight mb-4">
           You are viewing{" "}
-          <span className="text-green-500">{user_username}'s</span> timetable
+          <span className="text-green-500">{username ?? "John Doe"}'s</span> timetable
           named <span className="text-green-500">{timetable_title}</span> for{" "}
           <span className="text-green-500">{semester}</span>
         </h1>
         <div className="text-sm justify-between tracking-tight mb-2">
           <b>Courses:</b>{" "}
+          {courses.length === 0 && (
+            <span className="text-sm text-red-500">This timetable has no courses</span>
+          )}
           {courses.map((course) => (
             <span className="text-blue-500 mr-2" key={course}>
               {course}{" "}