From f34dd95d7765322b6cecb2e817a46e0549d929a5 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Sun, 29 Sep 2024 15:11:27 -0500
Subject: [PATCH] feat: experimental toggle for icons, left off for now (#237)

* feat: temporary removal of waitlist etc

* feat: experimental toggle for icons for now

* feat: popupmain toggle

* feat: cal header toggle

* feat: adjusted course cell for toggle

* feat: fine it'll be a constant

* chore: lint

* feat: other experimental options
---
 src/shared/util/experimental.ts                 |  3 +++
 src/views/components/PopupMain.tsx              | 11 ++++++++---
 .../components/calendar/CalendarCourseCell.tsx  | 17 ++++++++++-------
 .../components/calendar/CalenderHeader.tsx      | 11 ++++++++---
 4 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 src/shared/util/experimental.ts

diff --git a/src/shared/util/experimental.ts b/src/shared/util/experimental.ts
new file mode 100644
index 00000000..60cb53a5
--- /dev/null
+++ b/src/shared/util/experimental.ts
@@ -0,0 +1,3 @@
+export const enableCourseStatusChips: boolean = false;
+export const constenableSettingsPage: boolean = false;
+export const enableCourseRefreshing: boolean = false;
diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx
index b84164b6..14e22390 100644
--- a/src/views/components/PopupMain.tsx
+++ b/src/views/components/PopupMain.tsx
@@ -1,5 +1,6 @@
 import { background } from '@shared/messages';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
+import { enableCourseStatusChips } from '@shared/util/experimental';
 import Divider from '@views/components/common/Divider';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import List from '@views/components/common/List';
@@ -107,9 +108,13 @@ export default function PopupMain(): JSX.Element {
 
                 <div className='w-full flex flex-col items-center gap-1.25 p-5 pt-3.75'>
                     <div className='flex gap-2.5'>
-                        <CourseStatus status='WAITLISTED' size='mini' />
-                        <CourseStatus status='CLOSED' size='mini' />
-                        <CourseStatus status='CANCELLED' size='mini' />
+                        {enableCourseStatusChips && (
+                            <>
+                                <CourseStatus status='WAITLISTED' size='mini' />
+                                <CourseStatus status='CLOSED' size='mini' />
+                                <CourseStatus status='CANCELLED' size='mini' />
+                            </>
+                        )}
                     </div>
                     <div className='inline-flex items-center self-center gap-1'>
                         <Text variant='mini' className='text-ut-gray !font-normal'>
diff --git a/src/views/components/calendar/CalendarCourseCell.tsx b/src/views/components/calendar/CalendarCourseCell.tsx
index d038f233..78c3faab 100644
--- a/src/views/components/calendar/CalendarCourseCell.tsx
+++ b/src/views/components/calendar/CalendarCourseCell.tsx
@@ -2,6 +2,7 @@ import type { StatusType } from '@shared/types/Course';
 import { Status } from '@shared/types/Course';
 import type { CourseColors } from '@shared/types/ThemeColors';
 import { pickFontColor } from '@shared/util/colors';
+import { enableCourseStatusChips } from '@shared/util/experimental';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';
@@ -43,13 +44,15 @@ export default function CalendarCourseCell({
     onClick,
 }: CalendarCourseCellProps): JSX.Element {
     let rightIcon: React.ReactNode | null = null;
-    // if (status === Status.WAITLISTED) {
-    //     rightIcon = <WaitlistIcon className='h-5 w-5' />;
-    // } else if (status === Status.CLOSED) {
-    //     rightIcon = <ClosedIcon className='h-5 w-5' />;
-    // } else if (status === Status.CANCELLED) {
-    //     rightIcon = <CancelledIcon className='h-5 w-5' />;
-    // }
+    if (enableCourseStatusChips) {
+        if (status === Status.WAITLISTED) {
+            rightIcon = <WaitlistIcon className='h-5 w-5' />;
+        } else if (status === Status.CLOSED) {
+            rightIcon = <ClosedIcon className='h-5 w-5' />;
+        } else if (status === Status.CANCELLED) {
+            rightIcon = <CancelledIcon className='h-5 w-5' />;
+        }
+    }
 
     // text-white or text-black based on secondaryColor
     const fontColor = pickFontColor(colors.primaryColor);
diff --git a/src/views/components/calendar/CalenderHeader.tsx b/src/views/components/calendar/CalenderHeader.tsx
index c159cdc7..8f77d7d0 100644
--- a/src/views/components/calendar/CalenderHeader.tsx
+++ b/src/views/components/calendar/CalenderHeader.tsx
@@ -1,4 +1,5 @@
 import { Status } from '@shared/types/Course';
+import { enableCourseStatusChips } from '@shared/util/experimental';
 import { Button } from '@views/components/common/Button';
 import CourseStatus from '@views/components/common/CourseStatus';
 import Divider from '@views/components/common/Divider';
@@ -60,9 +61,13 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
                 </div>
             </div>
             <div className='hidden flex-row items-center justify-end gap-6 screenshot:hidden lg:flex'>
-                <CourseStatus size='small' status={Status.WAITLISTED} />
-                <CourseStatus size='small' status={Status.CLOSED} />
-                <CourseStatus size='small' status={Status.CANCELLED} />
+                {enableCourseStatusChips && (
+                    <>
+                        <CourseStatus status='WAITLISTED' size='mini' />
+                        <CourseStatus status='CLOSED' size='mini' />
+                        <CourseStatus status='CANCELLED' size='mini' />
+                    </>
+                )}
 
                 {/* <Button variant='single' icon={UndoIcon} color='ut-black' />
                     <Button variant='single' icon={RedoIcon} color='ut-black' /> */}