+
+ );
+};
+
+export default observer(ExportOptions);
diff --git a/src/components/basket/floating-button.tsx b/src/components/basket/floating-button.tsx
new file mode 100644
index 0000000..956d5a9
--- /dev/null
+++ b/src/components/basket/floating-button.tsx
@@ -0,0 +1,94 @@
+import React, {useEffect} from 'react';
+import {Box, useColorModeValue, useMultiStyleConfig, usePrevious} from '@chakra-ui/react';
+import {observer} from 'mobx-react-lite';
+import useEphemeralValue from 'src/lib/hooks/use-ephemeral-value';
+import useStore from 'src/lib/state/context';
+
+type FloatingButtonProps = {
+ onOpen: () => void;
+};
+
+enum BasketSizeChange {
+ NONE,
+ ADDED,
+ REMOVED,
+}
+
+const getBarColor = (forState: BasketSizeChange) => {
+ switch (forState) {
+ case BasketSizeChange.ADDED:
+ return 'green.400';
+ case BasketSizeChange.REMOVED:
+ return 'red.400';
+ default:
+ return 'gray.300';
+ }
+};
+
+const FloatingButton = (props: FloatingButtonProps) => {
+ const [wasBasketSizeChanged, setWasBasketSizeChanged] = useEphemeralValue(BasketSizeChange.NONE);
+ const styles = useMultiStyleConfig('Drawer', {placement: 'bottom'});
+ const bgColor = useColorModeValue('gray.100', styles.dialog.bg as string);
+ const {allBasketsState: {currentBasket}} = useStore();
+
+ const previousBasketSize = usePrevious(currentBasket?.numOfItems);
+ useEffect(() => {
+ if (previousBasketSize === undefined || !currentBasket) {
+ return;
+ }
+
+ if (currentBasket.numOfItems !== previousBasketSize) {
+ if (currentBasket.numOfItems > previousBasketSize) {
+ setWasBasketSizeChanged(BasketSizeChange.ADDED);
+ } else {
+ setWasBasketSizeChanged(BasketSizeChange.REMOVED);
+ }
+ }
+ }, [currentBasket, previousBasketSize, setWasBasketSizeChanged]);
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default observer(FloatingButton);
diff --git a/src/components/basket/index.tsx b/src/components/basket/index.tsx
new file mode 100644
index 0000000..7ad72b2
--- /dev/null
+++ b/src/components/basket/index.tsx
@@ -0,0 +1,279 @@
+import React, {useEffect, useCallback, useState, useMemo} from 'react';
+import {
+ Drawer,
+ DrawerBody,
+ DrawerFooter,
+ DrawerOverlay,
+ DrawerContent,
+ DrawerCloseButton,
+ Box,
+ useDisclosure,
+ useBreakpointValue,
+ usePrevious,
+ useToast,
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalCloseButton,
+ ModalBody,
+ HStack,
+ Text,
+ Kbd,
+ Button,
+ Spacer,
+ Heading,
+ useTimeout,
+} from '@chakra-ui/react';
+import * as portals from 'react-reverse-portal';
+import {useHotkeys} from 'react-hotkeys-hook';
+import {observer} from 'mobx-react-lite';
+import useStore from 'src/lib/state/context';
+import useTip from 'src/lib/hooks/use-tip';
+import useHeldKey from 'src/lib/hooks/use-held-key';
+import {AddIcon} from '@chakra-ui/icons';
+import BasketContent from './content';
+import FloatingButton from './floating-button';
+import BasketCalendar, {BasketCalendarProvider} from './calendar/calendar';
+import {CalendarEvent} from './calendar/types';
+import BasketsSelectAndEdit from './basket-select-and-edit';
+
+const Basket = observer(() => {
+ const toast = useToast();
+ const {onOpen, isOpen, onClose} = useDisclosure();
+
+ const {allBasketsState, uiState, apiState} = useStore();
+ const {currentBasket} = allBasketsState;
+ const previousBasketSize = usePrevious(currentBasket?.numOfItems);
+
+ const isUltrawide = useBreakpointValue({base: false, '4xl': true});
+ const wasPreviouslyUltrawide = usePrevious(isUltrawide);
+
+ const onShowBasketTip = useTip('Tap the floating bar at the bottom, then \'Create a new basket\' to enable the add-to-basket buttons on courses and sections.', 'Tap \'Create a new basket\' to enable the add-to-basket buttons on courses and sections.');
+
+ useTimeout(() => {
+ if (allBasketsState.baskets.length === 0) {
+ onShowBasketTip();
+ }
+ }, 8 * 1000);
+
+ const onShowUndoTip = useTip('You can use normal undo / redo keyboard shortcuts.');
+ useEffect(() => {
+ if (previousBasketSize && currentBasket?.numOfItems !== previousBasketSize) {
+ onShowUndoTip();
+ }
+ }, [onShowUndoTip, currentBasket, previousBasketSize]);
+
+ useHotkeys('ctrl+z, command+z', event => {
+ event.preventDefault();
+
+ const stateDidChange = currentBasket?.undoLastAction();
+
+ if (!stateDidChange) {
+ toast({
+ title: 'Whoops',
+ status: 'warning',
+ description: 'Nothing to undo.',
+ duration: 400,
+ });
+ }
+ }, [currentBasket, toast]);
+ useHotkeys('ctrl+shift+z, command+shift+z', event => {
+ event.preventDefault();
+
+ const stateDidChange = currentBasket?.redoLastAction();
+
+ if (!stateDidChange) {
+ toast({
+ title: 'Whoops',
+ status: 'warning',
+ description: 'Nothing to redo.',
+ duration: 400,
+ });
+ }
+ }, [currentBasket, toast]);
+
+ const [isHeld] = useHeldKey({key: 'c', stopPropagation: false});
+ const wasPreviouslyHeld = usePrevious(isHeld);
+ const calendarDisclosure = useDisclosure();
+
+ useEffect(() => {
+ if (isHeld && !wasPreviouslyHeld && currentBasket) {
+ calendarDisclosure.onToggle();
+ }
+ }, [calendarDisclosure, isHeld, wasPreviouslyHeld, currentBasket]);
+
+ // Ensure drawer state is synced when window is resized
+ useEffect(() => {
+ if (isUltrawide && !wasPreviouslyUltrawide) {
+ onClose();
+ }
+ }, [isUltrawide, wasPreviouslyUltrawide, onClose]);
+
+ const handleEventClick = useCallback((event: CalendarEvent) => {
+ calendarDisclosure.onClose();
+ onClose();
+ uiState.setSearchValue(`id:${event.section.id}`);
+ }, [uiState, calendarDisclosure, onClose]);
+
+ const handleNewBasketCreation = () => {
+ if (apiState.selectedTerm) {
+ const newBasket = allBasketsState.addBasket(apiState.selectedTerm);
+ allBasketsState.setSelectedBasket(newBasket.id);
+ }
+ };
+
+ // Can't render Portals on server because library relies on document.*
+ const [canRenderPortals, setCanRenderPortals] = useState(false);
+ useEffect(() => {
+ setCanRenderPortals(true);
+ }, []);
+
+ const contentPortalNode = useMemo(() => {
+ if (!canRenderPortals) {
+ return null;
+ }
+
+ return portals.createHtmlPortalNode();
+ }, [canRenderPortals]);
+
+ const calendarPortalNode = useMemo(() => {
+ if (!canRenderPortals) {
+ return null;
+ }
+
+ return portals.createHtmlPortalNode();
+ }, [canRenderPortals]);
+
+ return (
+
+ {
+ contentPortalNode ? (
+
+ {
+ currentBasket ? (
+
+ ) : (
+
+
+
+ )
+ }
+
+ ) :
+ }
+
+ {
+ calendarPortalNode ? (
+
+
+
+ ) :
+ }
+
+ {
+ isUltrawide ? (
+
+
+
+
+
+ {
+ contentPortalNode && (
+
+ )
+ }
+
+
+
+
+ Calendar Preview
+
+
+ {
+ // Portals break if more than one OutPortal renders with
+ // the same node.
+ calendarPortalNode && !calendarDisclosure.isOpen && (
+
+ )
+ }
+
+ ) : (
+
+ )
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+ hold c to see
+
+
+
+
+
+
+
+
+
+ {
+ contentPortalNode && (
+
+ )
+ }
+
+
+
+
+
+
+
+
+
+ Calendar
+
+
+
+ {
+ calendarPortalNode && (
+
+ )
+ }
+
+
+
+
+
+ );
+});
+
+const BasketWithCalendarProvider = () => (
+
+
+
+);
+
+export default BasketWithCalendarProvider;
diff --git a/src/components/basket/styles/table.module.scss b/src/components/basket/styles/table.module.scss
new file mode 100644
index 0000000..e5e12af
--- /dev/null
+++ b/src/components/basket/styles/table.module.scss
@@ -0,0 +1,49 @@
+.table {
+ table-layout: fixed;
+
+ td {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ thead tr th:nth-child(1) {
+ width: 16rem;
+ }
+
+ thead tr th:nth-child(2) {
+ width: 7rem;
+ }
+
+ thead tr th:nth-child(3) {
+ width: 15rem;
+ }
+
+ thead tr th:nth-child(4) {
+ width: 18rem;
+ }
+
+ thead tr th:nth-child(5) { // location
+ width: 8rem;
+ }
+
+ thead tr th:nth-child(6) {
+ width: 8rem;
+ }
+
+ thead tr th:nth-child(7) {
+ width: 8rem;
+ }
+
+ thead tr th:nth-child(8) {
+ width: 8rem;
+ }
+
+ thead tr th:nth-child(9) {
+ width: 5rem;
+ }
+
+ thead tr th:nth-child(10) {
+ width: 6.5rem;
+ }
+}
diff --git a/src/components/basket/table.tsx b/src/components/basket/table.tsx
new file mode 100644
index 0000000..dadf58f
--- /dev/null
+++ b/src/components/basket/table.tsx
@@ -0,0 +1,356 @@
+import React from 'react';
+import {Search2Icon, DeleteIcon} from '@chakra-ui/icons';
+import {Table, Thead, Tr, Th, Tbody, Td, Tag, IconButton, TableProps, Tooltip, Wrap, Skeleton} from '@chakra-ui/react';
+import {observer} from 'mobx-react-lite';
+import InstructorList from 'src/components/sections-table/instructor-list';
+import LocationWithPopover from 'src/components/location-with-popover';
+import TimeDisplay from 'src/components/sections-table/time-display';
+import useStore from 'src/lib/state/context';
+import getCreditsString from 'src/lib/get-credits-str';
+import {BasketState} from 'src/lib/state/basket';
+import {ICourseFromAPI} from 'src/lib/api-types';
+import styles from './styles/table.module.scss';
+
+const SkeletonRow = () => (
+
+ {
+ Array.from({length: 8}).map((_, i) => (
+ // eslint-disable-next-line react/no-array-index-key
+ |
+
+ Some text
+
+ |
+ ))
+ }
+
+ }
+ size="sm"
+ aria-label="Go to section"/>
+ |
+
+ }
+ size="sm"
+ aria-label="Remove from basket"/>
+ |
+
+);
+
+type RowProps = {
+ isForCapture?: boolean;
+ handleSearch: (query: string) => void;
+};
+
+type SectionRowProps = RowProps & {
+ section: BasketState['sections'][0];
+};
+
+const SectionRow = observer(({section, isForCapture, handleSearch}: SectionRowProps) => {
+ const {allBasketsState: {currentBasket}, apiState} = useStore();
+
+ const wasDeleted = section.deletedAt !== null;
+
+ return (
+
+ |
+ {section.course.subject}
+ {section.course.crse}
+ {' '}
+ {section.course.title}
+ |
+ {section.section} |
+
+
+ |
+
+
+ |
+
+
+ |
+ {section.crn} |
+ {getCreditsString(section.minCredits, section.maxCredits)} |
+ {
+ !isForCapture && (
+ <>
+
+
+
+ {section.availableSeats}
+
+
+ {' / '}
+
+ {section.totalSeats}
+
+ |
+
+ }
+ size="sm"
+ aria-label="Go to section"
+ isDisabled={wasDeleted}
+ onClick={() => {
+ handleSearch(`id:${section.id}`);
+ }}/>
+ |
+
+ }
+ size="sm"
+ aria-label="Remove from basket"
+ onClick={() => {
+ currentBasket?.removeSection(section.id);
+ }}/>
+ |
+
+ )
+ }
+
+ );
+});
+
+type CourseRowProps = RowProps & {
+ course: ICourseFromAPI;
+};
+
+const CourseRow = observer(({isForCapture, handleSearch, course}: CourseRowProps) => {
+ const {allBasketsState: {currentBasket}} = useStore();
+
+ const wasDeleted = course.deletedAt !== null;
+
+ return (
+
+ |
+ {course.subject}
+ {course.crse}
+ {' '}
+ {course.title}
+ |
+
+
+ {getCreditsString(course.minCredits, course.maxCredits)}
+ |
+
+ {
+ !isForCapture && (
+ <>
+ |
+
+ }
+ size="sm"
+ aria-label="Go to course"
+ isDisabled={wasDeleted}
+ onClick={() => {
+ handleSearch(`${course.subject}${course.crse}`);
+ }}/>
+ |
+
+ }
+ size="sm"
+ aria-label="Remove from basket"
+ onClick={() => {
+ currentBasket?.removeCourse(course.id);
+ }}/>
+ |
+
+ )
+ }
+
+ );
+});
+
+type SearchQueryRowProps = RowProps & {
+ query: {
+ query: string;
+ credits?: [number, number];
+ };
+};
+
+const SearchQueryRow = observer(({isForCapture, handleSearch, query}: SearchQueryRowProps) => {
+ const {allBasketsState: {currentBasket}} = useStore();
+
+ return (
+
+ |
+
+ {query.query}
+
+ |
+
+
+ {query.credits ? getCreditsString(query.credits[0], query.credits[1] === Number.MAX_SAFE_INTEGER ? 4 : query.credits[1]) : ''}
+ |
+
+ {
+ !isForCapture && (
+ <>
+ |
+
+ }
+ size="sm"
+ aria-label="Go to section"
+ onClick={() => {
+ handleSearch(query.query);
+ }}/>
+ |
+
+ }
+ size="sm"
+ aria-label="Remove from basket"
+ onClick={() => {
+ currentBasket?.removeSearchQuery(query.query);
+ }}/>
+ |
+
+ )
+ }
+
+ );
+});
+
+type BasketTableProps = {
+ onClose?: () => void;
+ isForCapture?: boolean;
+ tableProps?: TableProps;
+};
+
+const BodyWithData = observer(({onClose, isForCapture}: BasketTableProps) => {
+ const {allBasketsState: {currentBasket}, uiState} = useStore();
+
+ const handleSearch = (query: string) => {
+ uiState.setSearchValue(query);
+ if (onClose) {
+ onClose();
+ }
+ };
+
+ return (
+
+ {
+ currentBasket?.sections.map(section => (
+
+ ))
+ }
+
+ {
+ currentBasket?.courses.map(course => (
+
+ ))
+ }
+
+ {
+ currentBasket?.parsedQueries.map(query => (
+
+ ))
+ }
+
+
+ | Total: |
+
+ |
+ {currentBasket ? getCreditsString(...currentBasket.totalCredits) : ''}
+ |
+ {
+ !isForCapture && (
+ <>
+ |
+ |
+ |
+
+ )
+ }
+
+
+ );
+});
+
+const BasketTable = (props: BasketTableProps) => {
+ const {apiState} = useStore();
+
+ return (
+
+
+
+ | Title |
+ Section |
+ Instructors |
+ Schedule |
+ Location |
+ CRN |
+ Credits |
+ {
+ !props.isForCapture && (
+ <>
+ Seats |
+ Go |
+ Remove |
+
+ )
+ }
+
+
+
+ {
+ apiState.hasDataForTrackedEndpoints ? (
+
+ ) : (
+
+ {Array.from({length: 4}).map((_, i) => (
+ // eslint-disable-next-line react/no-array-index-key
+
+ ))}
+
+ )
+ }
+
+ );
+};
+
+export default observer(BasketTable);
diff --git a/components/color-mode-toggle.tsx b/src/components/color-mode-toggle.tsx
similarity index 76%
rename from components/color-mode-toggle.tsx
rename to src/components/color-mode-toggle.tsx
index f30ff1f..5d775c5 100644
--- a/components/color-mode-toggle.tsx
+++ b/src/components/color-mode-toggle.tsx
@@ -6,7 +6,7 @@ const ColorModeToggle = () => {
const {colorMode, toggleColorMode} = useColorMode();
return (
-
+
{colorMode === 'light' ? : }
);
diff --git a/components/conditional-wrapper.tsx b/src/components/conditional-wrapper.tsx
similarity index 100%
rename from components/conditional-wrapper.tsx
rename to src/components/conditional-wrapper.tsx
diff --git a/components/course-fail-drop-chart.tsx b/src/components/course-fail-drop-chart.tsx
similarity index 73%
rename from components/course-fail-drop-chart.tsx
rename to src/components/course-fail-drop-chart.tsx
index c5e71b4..abb9910 100644
--- a/components/course-fail-drop-chart.tsx
+++ b/src/components/course-fail-drop-chart.tsx
@@ -1,19 +1,19 @@
+import React, {useMemo} from 'react';
import dynamic from 'next/dynamic';
import {useColorModeValue, useToken} from '@chakra-ui/react';
import {observer} from 'mobx-react-lite';
-import {IPassFailDropRecord} from '../lib/types';
-import {SEMESTER_DISPLAY_MAPPING} from '../lib/constants';
-import {useMemo} from 'react';
+import {IPassFailDropRecord} from 'src/lib/api-types';
+import {SEMESTER_DISPLAY_MAPPING} from 'src/lib/constants';
-const LazyLoadedResponsiveLne = dynamic(async () => import('./custom-responsive-line'));
+const LazyLoadedResponsiveLine = dynamic(async () => import('./custom-responsive-line'));
const MyResponsiveLine = ({data}: {data: IPassFailDropRecord[]}) => {
- const [darkText, red, yellow] = useToken('colors', ['white', 'red.400', 'yellow.400']);
+ const [darkText, red, yellow] = useToken('colors', ['white', 'red.400', 'yellow.400']) as string[];
const chartTheme = useColorModeValue(
// Light theme
{
- background: 'transparent'
+ background: 'transparent',
},
// Dark theme
{
@@ -21,15 +21,15 @@ const MyResponsiveLine = ({data}: {data: IPassFailDropRecord[]}) => {
textColor: darkText,
tooltip: {
container: {
- color: 'black'
- }
+ color: 'black',
+ },
},
crosshair: {
line: {
- stroke: 'white'
- }
- }
- }
+ stroke: 'white',
+ },
+ },
+ },
);
const transformedData = useMemo(() => {
@@ -41,29 +41,30 @@ const MyResponsiveLine = ({data}: {data: IPassFailDropRecord[]}) => {
droppedData.push({
x: key,
- y: record.dropped / record.total
+ y: record.dropped / record.total,
});
failedData.push({
x: key,
- y: record.failed / record.total
+ y: record.failed / record.total,
});
}
return [
{
id: 'dropped',
- data: droppedData
+ data: droppedData,
},
{
id: 'failed',
- data: failedData
- }
+ data: failedData,
+ },
];
}, [data]);
return (
- {
yFormat=" >-.2%"
axisTop={null}
axisRight={null}
- axisBottom={{
- orient: 'bottom'
- }}
axisLeft={{
- orient: 'left',
- format: '>-.2%'
+ format: '>-.2%',
}}
pointSize={10}
pointBorderWidth={2}
pointLabelYOffset={-12}
- useMesh
legends={[
{
anchor: 'right',
@@ -98,8 +94,8 @@ const MyResponsiveLine = ({data}: {data: IPassFailDropRecord[]}) => {
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
- symbolBorderColor: 'rgba(0, 0, 0, .5)'
- }
+ symbolBorderColor: 'rgba(0, 0, 0, .5)',
+ },
]}
/>
);
diff --git a/components/course-stats.tsx b/src/components/course-stats.tsx
similarity index 85%
rename from components/course-stats.tsx
rename to src/components/course-stats.tsx
index 7cfbc62..4f669ca 100644
--- a/components/course-stats.tsx
+++ b/src/components/course-stats.tsx
@@ -2,19 +2,17 @@ import React, {useCallback, useState} from 'react';
import {Spacer, HStack, VStack, useDisclosure, Box, Stat, StatHelpText, StatLabel, StatNumber, Button, Collapse, StackProps, useBreakpointValue} from '@chakra-ui/react';
import {CalendarIcon} from '@chakra-ui/icons';
import {observer} from 'mobx-react-lite';
+import {IPassFailDropRecord} from 'src/lib/api-types';
+import {SEMESTER_DISPLAY_MAPPING} from 'src/lib/constants';
import Chart from './course-fail-drop-chart';
-import {IPassFailDropRecord} from '../lib/types';
-import {SEMESTER_DISPLAY_MAPPING} from '../lib/constants';
const SEMESTER_VALUES = {
SPRING: 0.1,
SUMMER: 0.2,
- FALL: 0.3
+ FALL: 0.3,
};
-const formatPercentage = (value: number) => {
- return `${(100 * value).toFixed(2)}%`;
-};
+const formatPercentage = (value: number) => `${(100 * value).toFixed(2)}%`;
const CourseStats = (props: StackProps & {data: IPassFailDropRecord[]}) => {
const [shouldLoadChart, setShouldLoadChart] = useState(false);
@@ -64,12 +62,12 @@ const CourseStats = (props: StackProps & {data: IPassFailDropRecord[]}) => {
-