Completed Dark Mode Visual

[SidhantDash]

Add Courses page:

My Plans page:

Schedule page:

Class component:

If you want to test yourself and need to add dummy data for that, here's what I did:

1. Paste this code on line 15 in page.tsx under '/plans' folder

  // Remove these objects when we have generated schedules getting auto-saved to local storage
  const dummySchedule1 = {
    data: dummyData1,
    pinned: false,
  };

  const dummySchedule2 = {
    data: dummyData2,
    pinned: false,
  };

  interface SavedPlanType {
    id: string;
    title: string;
    data: WeekScheduleType;
    pinned: boolean;
  };

  useEffect(() => {
    try {
      /* REMOVE THE LINES INSIDE THE BOX WHEN WE KNOW WE HAVE WORKING DATA
       **********************************************************************/
      let noSchedules = true;
      // Loop through local storage to determine if schedules are already present
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key) {
          const data = localStorage.getItem(key);
          if (data?.startsWith(`{"data":{`)) {
            noSchedules = false;
            break;
          }
        }
      }

      // If local storage is empty, save the dummy schedules there
      if (noSchedules) {
        localStorage.setItem("Schedule 1", JSON.stringify(dummySchedule1));
        localStorage.setItem("Schedule 2", JSON.stringify(dummySchedule2));
        localStorage.setItem("Schedule 3", JSON.stringify(dummySchedule1));
        localStorage.setItem("Schedule 4", JSON.stringify(dummySchedule2));
        localStorage.setItem("Schedule 5", JSON.stringify(dummySchedule1));
      }
      /***********************************************************************/

      // Retrieve schedules from local storage and populate the plans array
      const plans = [];
      // Loop through local storage
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        // Retrieve key for local storage element
        if (key) {
          // Retrieve data matching key
          const data = localStorage.getItem(key);
          // Only continue if the data looks like a saved plan
          if (data?.startsWith(`{"data":{`)) {
            const parsedData = JSON.parse(data) as SavedPlanType;
            if (parsedData.data && parsedData.pinned !== undefined) {
              // Parse the data from the JSON
              plans.push({
                id: parsedData.id,
                title: key,
                data: parsedData.data,
                pinned: parsedData.pinned,
              });
            }
          }
        }
      }
      // Sort plans by title, because apparently the browser can't be bothered to keep the order straight
      plans.sort(
        (a, b) =>
          Number(b.pinned) - Number(a.pinned) || a.title.localeCompare(b.title),
      );
      setSavedPlans(plans);
    } catch (error) {
      // If something goes wrong, this message should be displayed in the browser console
      console.error("Failed to parse local storage data: ", error);
    }
  }, []);
  

2. Add these imports at the top of page.tsx under '/plans' folder (same file)

import { useState, useEffect } from "react";
import { dummyData1, dummyData2 } from "@/components/schedules/dummySchedules";
import { type WeekSchedule as WeekScheduleType } from "@/types/scheduleTypes";