Bug fix: Subject cards now say (Not offered) if "Show in Session" filter button is used

src/common/sidebar/components/Card.tsx

@@ -1,11 +1,10 @@
 import { PropsWithChildren, useCallback } from 'react';
 
-import { ChevronRightIcon, AddIcon, InfoOutlineIcon, CloseIcon } from '@chakra-ui/icons';
-import { Box, Text, Flex, VStack, IconButton } from '@chakra-ui/react';
+import { WarningTwoIcon, ChevronRightIcon, AddIcon, InfoOutlineIcon, CloseIcon } from '@chakra-ui/icons';
+import { Box, Text, Flex, VStack, IconButton, Tooltip } from '@chakra-ui/react';
 import { Link, useParams } from 'react-router-dom';
 
 import { useSavedCourses } from 'lib/hooks/useSavedCourses';
-
 export interface CardProps {
   /**
    * The title of course
@@ -41,9 +40,21 @@ export interface CardProps {
    * Boolean to check if in schedule mode
    */
   schedule?: boolean;
+  /**
+   * Boolean to check if a subject is in session or not
+   */
+  inSessionSubject?: boolean;
 }
 
-export function Card({ subject, title, code, selected, schedule, pid }: PropsWithChildren<CardProps>): JSX.Element {
+export function Card({
+  subject,
+  title,
+  code,
+  selected,
+  schedule,
+  pid,
+  inSessionSubject,
+}: PropsWithChildren<CardProps>): JSX.Element {
   let { term } = useParams();
 
   const { addCourse, deleteCourse, contains } = useSavedCourses();
@@ -71,7 +82,15 @@ export function Card({ subject, title, code, selected, schedule, pid }: PropsWit
         <Box>
           <IconButton
             aria-label="Select course"
-            icon={<ChevronRightIcon />}
+            icon={
+              inSessionSubject ? (
+                <ChevronRightIcon />
+              ) : (
+                <Tooltip label="No courses are offered in this term for this subject!" aria-label="A tooltip">
+                  <WarningTwoIcon color="red" />
+                </Tooltip>
+              )
+            }
             size="md"
             background="null"
             _hover={{ bg: 'none' }}
@@ -101,32 +120,70 @@ export function Card({ subject, title, code, selected, schedule, pid }: PropsWit
     }
   };
 
-  return (
-    <Box
-      bgColor={selected ? undefined : 'white'}
-      bgGradient={selected ? 'linear(to-l, #2e95d1, #7cbce2)' : undefined}
-      color={selected ? 'white' : 'black'}
-      boxShadow="md"
-      py={2}
-      px={4}
-      my={1}
-      cursor={!schedule ? 'pointer' : 'auto'}
-      _hover={{
-        bgGradient: schedule ? undefined : selected ? undefined : 'linear(to-l, #39c686, #80dbb1)',
-        color: schedule ? undefined : 'white',
-      }}
-    >
-      <Flex direction="row" alignItems="center" justifyContent="space-between">
-        <VStack alignItems="start" spacing="0">
-          <Text fontSize="lg" fontWeight="bold" p={0} m={0}>
-            {subject} {code}
-          </Text>
-          <Text fontSize="sm" fontWeight="normal" p={0} m={0}>
-            {title}
-          </Text>
-        </VStack>
-        {buttons(code, schedule)}
-      </Flex>
-    </Box>
-  );
+  if (inSessionSubject === undefined) {
+    return (
+      <Box
+        bgColor={selected ? undefined : 'white'}
+        bgGradient={selected ? 'linear(to-l, #2e95d1, #7cbce2)' : undefined}
+        color={selected ? 'white' : 'black'}
+        boxShadow="md"
+        py={2}
+        px={4}
+        my={1}
+        cursor={!schedule ? 'pointer' : 'auto'}
+        _hover={{
+          bgGradient: schedule ? undefined : selected ? undefined : 'linear(to-l, #39c686, #80dbb1)',
+
+          color: schedule ? undefined : 'white',
+        }}
+      >
+        <Flex direction="row" alignItems="center" justifyContent="space-between">
+          <VStack alignItems="start" spacing="0">
+            <Text fontSize="lg" fontWeight="bold" p={0} m={0}>
+              {subject} {code}
+            </Text>
+            <Text fontSize="sm" fontWeight="normal" p={0} m={0}>
+              {title}
+            </Text>
+          </VStack>
+          {buttons(code, schedule)}
+        </Flex>
+      </Box>
+    );
+  } else {
+    return (
+      <Box
+        bgColor={selected ? (inSessionSubject ? undefined : '#d3d3d3') : inSessionSubject ? 'white' : '#d3d3d3'}
+        bgGradient={selected ? 'linear(to-l, #2e95d1, #7cbce2)' : undefined}
+        color={selected ? 'white' : 'black'}
+        boxShadow="md"
+        py={2}
+        px={4}
+        my={1}
+        cursor={!schedule ? (inSessionSubject ? 'pointer' : 'auto') : 'auto'}
+        _hover={{
+          bgGradient: schedule
+            ? undefined
+            : selected
+            ? undefined
+            : inSessionSubject
+            ? 'linear(to-l, #39c686, #80dbb1)'
+            : 'linear(to-l, #d3d3d3, #d3d3d3)',
+          color: schedule ? undefined : 'white',
+        }}
+      >
+        <Flex direction="row" alignItems="center" justifyContent="space-between">
+          <VStack alignItems="start" spacing="0">
+            <Text fontSize="lg" fontWeight="bold" p={0} m={0}>
+              {subject} {code}
+            </Text>
+            <Text fontSize="sm" fontWeight="normal" p={0} m={0}>
+              {title}
+            </Text>
+          </VStack>
+          {buttons(code, schedule)}
+        </Flex>
+      </Box>
+    );
+  }
 }

src/common/sidebar/components/SubjectsList.tsx

@@ -1,8 +1,8 @@
-import { LinkBox } from '@chakra-ui/layout';
+import { LinkBox, Box } from '@chakra-ui/layout';
 import { Collapse } from '@chakra-ui/transition';
 import { Link, useLocation, useSearchParams } from 'react-router-dom';
 
-import { KualiSubject } from 'lib/fetchers';
+import { InSessionSubject } from 'lib/types';
 
 import { Card } from './Card';
 
@@ -15,7 +15,7 @@ type SubjectsListProps = {
    * Subject to be displayed
    * EX) SENG 265 -> SENG
    */
-  subjects: KualiSubject[];
+  subjects: InSessionSubject[];
 };
 
 export function SubjectsList({ term, subjects }: SubjectsListProps): JSX.Element {
@@ -27,18 +27,28 @@ export function SubjectsList({ term, subjects }: SubjectsListProps): JSX.Element
 
   return (
     <Collapse in style={{ overflowY: 'scroll' }}>
-      {subjects.map((subject, index) => (
-        <LinkBox
-          as={Link}
-          to={{
-            pathname: `/${route}/${term}/${subject.subject}`,
-            search: pid ? `?pid=${pid}` : undefined,
-          }}
-          key={index}
-        >
-          <Card subject={subject.subject} title={subject.title} />
-        </LinkBox>
-      ))}
+      {subjects.map((subject, index) => {
+        if (subject.inSession) {
+          return (
+            <LinkBox
+              as={Link}
+              to={{
+                pathname: `/${route}/${term}/${subject.subject}`,
+                search: pid ? `?pid=${pid}` : undefined,
+              }}
+              key={index}
+            >
+              <Card subject={subject.subject} inSessionSubject={subject.inSession} title={subject.title} />
+            </LinkBox>
+          );
+        } else {
+          return (
+            <Box key={index}>
+              <Card subject={subject.subject} inSessionSubject={subject.inSession} title={subject.title} />
+            </Box>
+          );
+        }
+      })}
     </Collapse>
   );
 }

src/common/sidebar/containers/SidebarContainer.tsx

@@ -4,6 +4,7 @@ import { Center, Box, Flex, Heading, HStack, Spinner } from '@chakra-ui/react';
 import { Route, Routes } from 'react-router';
 
 import { Course, Term, useGetCourses, useSubjects } from 'lib/fetchers';
+import { InSessionSubject } from 'lib/types';
 
 import { CoursesList } from '../components/CoursesList';
 import { CustomHits } from '../components/SearchResults';
@@ -48,13 +49,29 @@ export function SidebarContainer({ searchQuery, term }: SidebarContainerProps):
     term: term as Term,
     queryParams: { in_session: filter },
   });
+  // re assign the type of subjects so inSession property is available
+  const inSessionSubjects: InSessionSubject[] | null = subjects;
 
   const loading = subjectsLoading || coursesLoading;
 
-  // sorts the list of subjects alphabetically
-  const sortedSubjects = useMemo(() => subjects?.sort((a, b) => (a.subject > b.subject ? 1 : -1)), [subjects]);
   const parsedCourses = useMemo(() => computeParsedCourses(courses), [courses]);
 
+  // sorts the list of subjects alphabetically
+  const sortedSubjects = useMemo(
+    () =>
+      inSessionSubjects
+        ?.sort((a, b) => (a.subject > b.subject ? 1 : -1))
+        .map((subject) => {
+          subject.inSession = true;
+          //checks if subject is not in session
+          if (filter && !parsedCourses[subject.subject]) {
+            subject.inSession = false;
+          }
+          return subject;
+        }),
+    [filter, inSessionSubjects, parsedCourses]
+  );
+
   const handleFilter = (s: boolean) => {
     setFilter(s);
   };

src/lib/types.ts

@@ -0,0 +1,6 @@
+import { KualiSubject } from './fetchers';
+
+export interface KualiSubjectInSession {
+  inSession?: boolean;
+}
+export type InSessionSubject = KualiSubject & KualiSubjectInSession;