From 249e83586fc6426e729b12bcbf4daf5db658a522 Mon Sep 17 00:00:00 2001
From: Samuel Gunter <sgunter@utexas.edu>
Date: Mon, 20 May 2024 22:15:41 -0700
Subject: [PATCH 1/2] feat: popout icon for ccip in calendar

---
 src/views/components/calendar/Calendar.tsx    | 68 ++++++++++---------
 .../HeadingAndActions.tsx                     | 15 +++-
 src/views/contexts/CalendarContext.ts         | 20 ++++++
 3 files changed, 70 insertions(+), 33 deletions(-)
 create mode 100644 src/views/contexts/CalendarContext.ts

diff --git a/src/views/components/calendar/Calendar.tsx b/src/views/components/calendar/Calendar.tsx
index 580dfeb5d..3be4b1a50 100644
--- a/src/views/components/calendar/Calendar.tsx
+++ b/src/views/components/calendar/Calendar.tsx
@@ -7,9 +7,11 @@ import CalendarHeader from '@views/components/calendar/CalenderHeader';
 import ImportantLinks from '@views/components/calendar/ImportantLinks';
 import Divider from '@views/components/common/Divider';
 import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
+import type { CalendarData } from '@views/contexts/CalendarContext';
+import { CalendarContext } from '@views/contexts/CalendarContext';
 import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule';
 import { MessageListener } from 'chrome-extension-toolkit';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import CalendarFooter from './CalendarFooter';
 import TeamLinks from './TeamLinks';
@@ -63,40 +65,44 @@ export default function Calendar(): JSX.Element {
         if (course) setShowPopup(true);
     }, [course]);
 
+    const contextValue = useMemo<CalendarData>(() => ({ isInCalendar: true }), []);
+
     return (
-        <div className='h-full w-full flex flex-col'>
-            <CalendarHeader
-                onSidebarToggle={() => {
-                    setShowSidebar(!showSidebar);
-                }}
-            />
-            <div className='h-full flex overflow-auto pl-3'>
-                {showSidebar && (
-                    <div className='h-full flex flex-none flex-col justify-between pb-5 screenshot:hidden'>
-                        <div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pr-4 pl-4.5 pt-5'>
-                            <CalendarSchedules />
-                            <Divider orientation='horizontal' size='100%' className='my-5' />
-                            <ImportantLinks />
-                            <Divider orientation='horizontal' size='100%' className='my-5' />
-                            <TeamLinks />
+        <CalendarContext.Provider value={contextValue}>
+            <div className='h-full w-full flex flex-col'>
+                <CalendarHeader
+                    onSidebarToggle={() => {
+                        setShowSidebar(!showSidebar);
+                    }}
+                />
+                <div className='h-full flex overflow-auto pl-3'>
+                    {showSidebar && (
+                        <div className='h-full flex flex-none flex-col justify-between pb-5 screenshot:hidden'>
+                            <div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pl-4.5 pr-4 pt-5'>
+                                <CalendarSchedules />
+                                <Divider orientation='horizontal' size='100%' className='my-5' />
+                                <ImportantLinks />
+                                <Divider orientation='horizontal' size='100%' className='my-5' />
+                                <TeamLinks />
+                            </div>
+                            <CalendarFooter />
                         </div>
-                        <CalendarFooter />
-                    </div>
-                )}
-                <div className='h-full min-w-5xl flex flex-grow flex-col overflow-y-auto'>
-                    <div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
-                        <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
+                    )}
+                    <div className='h-full min-w-5xl flex flex-grow flex-col overflow-y-auto'>
+                        <div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
+                            <CalendarGrid courseCells={courseCells} setCourse={setCourse} />
+                        </div>
+                        <CalendarBottomBar courseCells={courseCells} setCourse={setCourse} />
                     </div>
-                    <CalendarBottomBar courseCells={courseCells} setCourse={setCourse} />
                 </div>
-            </div>
 
-            <CourseCatalogInjectedPopup
-                course={course!} // always defined when showPopup is true
-                onClose={() => setShowPopup(false)}
-                open={showPopup}
-                afterLeave={() => setCourse(null)}
-            />
-        </div>
+                <CourseCatalogInjectedPopup
+                    course={course!} // always defined when showPopup is true
+                    onClose={() => setShowPopup(false)}
+                    open={showPopup}
+                    afterLeave={() => setCourse(null)}
+                />
+            </div>
+        </CalendarContext.Provider>
     );
 }
diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
index 37f04adb0..8694d36f9 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
@@ -7,6 +7,7 @@ import { Chip, flagMap } from '@views/components/common/Chip';
 import Divider from '@views/components/common/Divider';
 import Link from '@views/components/common/Link';
 import Text from '@views/components/common/Text/Text';
+import { useCalendar } from '@views/contexts/CalendarContext';
 import React from 'react';
 
 import Add from '~icons/material-symbols/add';
@@ -15,6 +16,7 @@ import CloseIcon from '~icons/material-symbols/close';
 import Copy from '~icons/material-symbols/content-copy';
 import Description from '~icons/material-symbols/description';
 import Mood from '~icons/material-symbols/mood';
+import OpenNewIcon from '~icons/material-symbols/open-in-new';
 import Remove from '~icons/material-symbols/remove';
 import Reviews from '~icons/material-symbols/reviews';
 
@@ -50,6 +52,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
     const { courseName, department, number: courseNumber, uniqueId, instructors, flags, schedule } = course;
     const courseAdded = activeSchedule.courses.some(ourCourse => ourCourse.uniqueId === uniqueId);
     const formattedUniqueId = uniqueId.toString().padStart(5, '0');
+    const { isInCalendar } = useCalendar();
 
     const getInstructorFullName = (instructor: Instructor) => {
         const { firstName = '', lastName = '' } = instructor;
@@ -179,8 +182,16 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                 <Button
                     variant='filled'
                     color='ut-burntorange'
-                    icon={CalendarMonth}
-                    onClick={() => background.switchToCalendarTab({})}
+                    icon={isInCalendar ? OpenNewIcon : CalendarMonth}
+                    onClick={() => {
+                        if (isInCalendar) {
+                            openNewTab({
+                                url: course.url,
+                            });
+                        } else {
+                            background.switchToCalendarTab({});
+                        }
+                    }}
                 />
                 <Divider size='1.75rem' orientation='vertical' />
                 <Button variant='outline' color='ut-blue' icon={Reviews} onClick={handleOpenRateMyProf}>
diff --git a/src/views/contexts/CalendarContext.ts b/src/views/contexts/CalendarContext.ts
new file mode 100644
index 000000000..76ce7526c
--- /dev/null
+++ b/src/views/contexts/CalendarContext.ts
@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Data for the calendar.
+ */
+export type CalendarData = {
+    isInCalendar: boolean;
+};
+
+/**
+ * Context for the calendar.
+ */
+export const CalendarContext = createContext<CalendarData>({
+    isInCalendar: false,
+});
+
+/**
+ * @returns The calendar context.
+ */
+export const useCalendar = () => useContext(CalendarContext);

From ed0aad47d8827c27ee01c980ce621f5c2408f0a2 Mon Sep 17 00:00:00 2001
From: Razboy20 <razboy20@gmail.com>
Date: Tue, 21 May 2024 01:03:23 -0500
Subject: [PATCH 2/2] refactor: simplify context

---
 src/views/components/calendar/Calendar.tsx            |  7 ++-----
 .../CourseCatalogInjectedPopup/HeadingAndActions.tsx  |  2 +-
 src/views/contexts/CalendarContext.ts                 | 11 +----------
 3 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/src/views/components/calendar/Calendar.tsx b/src/views/components/calendar/Calendar.tsx
index 3be4b1a50..7cd5799b3 100644
--- a/src/views/components/calendar/Calendar.tsx
+++ b/src/views/components/calendar/Calendar.tsx
@@ -7,11 +7,10 @@ import CalendarHeader from '@views/components/calendar/CalenderHeader';
 import ImportantLinks from '@views/components/calendar/ImportantLinks';
 import Divider from '@views/components/common/Divider';
 import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
-import type { CalendarData } from '@views/contexts/CalendarContext';
 import { CalendarContext } from '@views/contexts/CalendarContext';
 import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule';
 import { MessageListener } from 'chrome-extension-toolkit';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import CalendarFooter from './CalendarFooter';
 import TeamLinks from './TeamLinks';
@@ -65,10 +64,8 @@ export default function Calendar(): JSX.Element {
         if (course) setShowPopup(true);
     }, [course]);
 
-    const contextValue = useMemo<CalendarData>(() => ({ isInCalendar: true }), []);
-
     return (
-        <CalendarContext.Provider value={contextValue}>
+        <CalendarContext.Provider value>
             <div className='h-full w-full flex flex-col'>
                 <CalendarHeader
                     onSidebarToggle={() => {
diff --git a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
index 8694d36f9..00f6f6f41 100644
--- a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
@@ -52,7 +52,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
     const { courseName, department, number: courseNumber, uniqueId, instructors, flags, schedule } = course;
     const courseAdded = activeSchedule.courses.some(ourCourse => ourCourse.uniqueId === uniqueId);
     const formattedUniqueId = uniqueId.toString().padStart(5, '0');
-    const { isInCalendar } = useCalendar();
+    const isInCalendar = useCalendar();
 
     const getInstructorFullName = (instructor: Instructor) => {
         const { firstName = '', lastName = '' } = instructor;
diff --git a/src/views/contexts/CalendarContext.ts b/src/views/contexts/CalendarContext.ts
index 76ce7526c..cdc010100 100644
--- a/src/views/contexts/CalendarContext.ts
+++ b/src/views/contexts/CalendarContext.ts
@@ -1,18 +1,9 @@
 import { createContext, useContext } from 'react';
 
-/**
- * Data for the calendar.
- */
-export type CalendarData = {
-    isInCalendar: boolean;
-};
-
 /**
  * Context for the calendar.
  */
-export const CalendarContext = createContext<CalendarData>({
-    isInCalendar: false,
-});
+export const CalendarContext = createContext(false);
 
 /**
  * @returns The calendar context.