Ap/no notifications husky page (#265)

* Add empty subscriptions logic

* Create EmptyCard component

* Add styling and assets

* Update styling of EmptyCard

* Modified styling, added on hover image change functionality

* edited line-heights

* resolved sass-lint errors

* actually resolved sass-lint errors

* really actually resolved sass-lint errors this time

* Update Empyt Card to include term data.

* Move styles from _Results to new _EmptyCard to declutter.

* Remove empty card styles from _Results

* Revert styles, fix empty card props. subscriptions page requires retrieval of Term name.

* Empty Card Semester Name updates automatically

Properly migrate styles to new _EmptyCard file

* - remove unused leading-trim module

- fix styles in classcard, use function notation

- Redirect Empty card to empty results page.

* remove default from ClassCard export

* Add unsubscribe button functionality

* Notif course fetching refactor

* Remove local config

* Remove yarn install state

* Add pill to subscription class card

* fix lint colors issue

---------

Co-authored-by: Anzhuo-W <[email protected]>
Co-authored-by: cherman27 <[email protected]>
Co-authored-by: mehallhm <[email protected]>

components/ResultsPage/DropdownFilter.tsx

@@ -101,7 +101,6 @@ export default function DropdownFilter({
                 setIsOpen(true);
               }
             }}
-
           />
           <DropdownArrow
             aria-label="Dropdown arrow"

components/SubscriptionsPage/ClassCard.tsx

@@ -5,6 +5,7 @@ import { DesktopSectionPanel } from '../ResultsPage/Results/SectionPanel';
 import { getFormattedSections } from '../ResultsPage/ResultsLoader';
 import DropdownArrow from '../icons/DropdownArrow.svg';
 import CourseCheckBox from '../panels/CourseCheckBox';
+import { SectionPill } from './SectionPill';
 
 type ClassCardWrapperType = {
   headerLeft: ReactElement;
@@ -13,18 +14,17 @@ type ClassCardWrapperType = {
   afterBody?: ReactElement;
 };
 
-const ClassCardWrapper = ({
+export const ClassCardWrapper = ({
   headerLeft,
   headerRight,
   body,
   afterBody,
 }: ClassCardWrapperType): ReactElement => {
   return (
     <div className="SearchResult">
-      <div className="SearchResult__header">
-        <div className="SearchResult__header--left">{headerLeft}</div>
-        {headerRight}
-      </div>
+      <div>{headerLeft}</div>
+      {headerRight}
+
       {body}
       {afterBody}
     </div>
@@ -39,13 +39,13 @@ type ClassCardType = {
   onSignIn: (token: string) => void;
 };
 
-export const ClassCard = ({
+export function ClassCard({
   course,
   sections,
   userInfo,
   fetchUserInfo,
   onSignIn,
-}: ClassCardType): ReactElement => {
+}: ClassCardType): ReactElement {
   const sectionsFormatted: Section[] = getFormattedSections(sections);
   const [areSectionsHidden, setAreSectionsHidden] = useState(true);
 
@@ -66,6 +66,13 @@ export const ClassCard = ({
             lastUpdateTime={course.lastUpdateTime}
             className="SearchResult__header--sub"
           />
+          {course.sections.map((section) => (
+            <SectionPill
+              key={section.crn}
+              userInfo={userInfo}
+              crn={section.crn}
+            ></SectionPill>
+          ))}
         </>
       }
       headerRight={<button>Unsubscribe</button>}
@@ -146,4 +153,4 @@ export const ClassCard = ({
       }
     />
   );
-};
+}

components/SubscriptionsPage/EmptyCard.tsx

@@ -0,0 +1,74 @@
+import { ReactElement } from 'react';
+import React, { useState } from 'react';
+import { ClassCardWrapper } from './ClassCard';
+import { useRouter } from 'next/router';
+import Circular from '../icons/circular.svg';
+import CryingHusky from '../icons/crying-husky.svg';
+import HappyHusky from '../icons/happy-husky.svg';
+import getTermInfosWithError from '../../utils/TermInfoProvider';
+import { getTermName } from '../terms';
+
+export const EmptyCard = (): ReactElement => {
+  const router = useRouter();
+  const [isHovering, setIsHovering] = useState(false);
+
+  const termInfos = getTermInfosWithError().termInfos;
+  const termId = router.query.termId as string;
+  const termName = getTermName(termInfos, termId).replace('Semester', '');
+
+  return (
+    <>
+      <div className="Empty_Container">
+        <div className="Empty_MainWrapper">
+          <div className="Empty_Main">
+            <div className="Empty_Main__EmptyCard">
+              <div className="Empty_Main_EmptyCard_Header">
+                <div className="Empty_Main__EmptyCard_Header_Spacer">
+                  <div className="Empty_Main__EmptyCard_Header_Title">
+                    <b>{termName} Notifications</b>
+                  </div>
+                </div>
+                {isHovering ? (
+                  <div className="Happy_Husky_SVG">
+                    <HappyHusky />
+                  </div>
+                ) : (
+                  <div className="Crying_Husky_SVG">
+                    <CryingHusky />
+                  </div>
+                )}
+              </div>
+              <ClassCardWrapper
+                headerLeft={
+                  <div className="Empty_Main__EmptyCard_Text">
+                    <div className="Empty_Main__EmptyCard_Text_Title">
+                      <b>You currently have no notifications. Hoosky sad :(</b>
+                    </div>
+                    <div className="Empty_Main__EmptyCard_Text_Body">
+                      Be the first to know when new classes and sections drop!
+                    </div>
+                  </div>
+                }
+                headerRight={
+                  <div
+                    className="Empty_Main__EmptyCard_Divider"
+                    onClick={() => {
+                      router.push(`/NEU/${termId}/search`);
+                    }}
+                    onMouseEnter={() => setIsHovering(true)}
+                    onMouseLeave={() => setIsHovering(false)}
+                  >
+                    <button className="Empty_Main__EmptyCard_Button">
+                      <Circular />
+                      <b>Search for classes</b>
+                    </button>
+                  </div>
+                }
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

components/SubscriptionsPage/SectionPill.tsx

@@ -0,0 +1,26 @@
+import { ReactElement } from 'react';
+import Keys from '../Keys';
+import { UserInfo } from '../types';
+
+type SectionPillProps = {
+  crn: string;
+  userInfo: UserInfo;
+};
+
+export const SectionPill = ({
+  crn,
+  userInfo,
+}: SectionPillProps): ReactElement => {
+  return (
+    <div className="SectionPill">
+      <div
+        className={`SectionPill__subscribed ${
+          userInfo && userInfo.courseIds.includes(Keys.getClassHash(crn))
+            ? 'SectionPill__subscribed--active'
+            : ''
+        }`}
+      ></div>
+      <div className="SectionPill__text">{crn}</div>
+    </div>
+  );
+};