Share basket by URL

src/components/basket/export-options/index.tsx

@@ -17,13 +17,15 @@ import WrappedFontAwesomeIcon from 'src/components/wrapped-font-awesome-icon';
 import ExportImage from './image';
 import ExportCalendar from './calendar';
 import CRNScript from './crn-script';
+import ExportLink from './link';
 
 const ExportOptions = observer(() => {
 	const {allBasketsState: {currentBasket}, apiState} = useStore();
 	const [isLoading, setIsLoading] = useState(true);
 	const imageDisclosure = useDisclosure();
 	const calendarDisclosure = useDisclosure();
 	const crnDisclosure = useDisclosure();
+	const linkDisclosure = useDisclosure();
 
 	// Enable after data loads
 	useEffect(() => {
@@ -61,6 +63,7 @@ const ExportOptions = observer(() => {
 								Share & Export
 							</MenuButton>
 							<MenuList>
+								<MenuItem onClick={linkDisclosure.onOpen}>Link</MenuItem>
 								<MenuItem onClick={imageDisclosure.onOpen}>Image</MenuItem>
 								<MenuItem onClick={calendarDisclosure.onOpen}>Calendar</MenuItem>
 								<MenuItem onClick={handleCSVExport}>CSV</MenuItem>
@@ -70,6 +73,9 @@ const ExportOptions = observer(() => {
 					)}
 				</Menu>
 			</Box>
+			<ExportLink
+				isOpen={linkDisclosure.isOpen}
+				onClose={linkDisclosure.onClose}/>
 
 			<ExportImage
 				isOpen={imageDisclosure.isOpen}

src/components/basket/export-options/link.tsx

@@ -0,0 +1,94 @@
+import {
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalHeader,
+	ModalOverlay,
+	IconButton,
+	useToast,
+	Tooltip,
+	Stack,
+	HStack,
+} from '@chakra-ui/react';
+import {CopyIcon} from '@chakra-ui/icons';
+import {observer} from 'mobx-react-lite';
+import useStore from 'src/lib/state/context';
+import {type IPotentialFutureTerm} from 'src/lib/types';
+import Link from 'next/link';
+
+type ExportLinkProps = {
+	isOpen: boolean;
+	onClose: () => void;
+};
+
+export type BasketData = {
+	term: IPotentialFutureTerm;
+	name: string;
+	sections: string[];
+	courses: string[];
+	searchQueries: string[];
+};
+
+const ExportLink = observer(({isOpen, onClose}: ExportLinkProps) => {
+	const {allBasketsState: {currentBasket}} = useStore();
+	const toast = useToast();
+	let url = '';
+
+	if (currentBasket) {
+		const basketData: BasketData = {term: currentBasket.forTerm,
+			name: currentBasket.name,
+			sections: currentBasket.sections.map(element => element.id),
+			courses: currentBasket.courses.map(element => element.id),
+			searchQueries: currentBasket.searchQueries};
+
+		// Get json data
+		const jsonString: string = JSON.stringify(basketData);
+		url = window.location.toString() + '?basket=' + encodeURIComponent(jsonString);
+	}
+
+	const handleLinkCopy = async () => {
+		if (url.length > 0) {
+			await navigator.clipboard.writeText(url);
+
+			toast({
+				title: 'Link Copied',
+				status: 'success',
+				duration: 500,
+			});
+		}
+	};
+
+	return (
+		<>
+			<Modal
+				isOpen={isOpen}
+				size='3xl'
+				autoFocus={false}
+				onClose={onClose}
+			>
+				<ModalOverlay/>
+				<ModalContent>
+					<ModalHeader>Share Link</ModalHeader>
+					<ModalCloseButton/>
+					<ModalBody>
+						<Stack spacing={4}>
+							<Link href={url}>
+								{url}
+							</Link>
+							<HStack w='full' justifyContent='end'>
+								<Tooltip label='copy link'>
+									<IconButton aria-label='copy link' icon={<CopyIcon />} onClick={async () => {
+										await handleLinkCopy();
+									}}/>
+								</Tooltip>
+							</HStack>
+						</Stack>
+					</ModalBody>
+				</ModalContent>
+			</Modal>
+		</>
+	);
+});
+
+export default ExportLink;

src/pages/index.tsx

@@ -9,12 +9,43 @@ import useStore from 'src/lib/state/context';
 import Basket from 'src/components/basket';
 import ScrollTopDetector from 'src/components/scroll-top-detector';
 import CoursesSearchBar from 'src/components/search-bar/courses';
+import {useRouter} from 'next/router';
+import {type BasketData} from 'src/components/basket/export-options/link';
 
 const isFirstRender = typeof window === 'undefined';
 
 const MainContent = observer(() => {
 	const [numberOfScrolledColumns, setNumberOfScrolledColumns] = useState(0);
 	const courseTableContainerRef = useRef<HTMLDivElement>(null);
+	const {allBasketsState, apiState} = useStore();
+	const router = useRouter();
+
+	let openBasket = false;
+	// Check if there is a basket in the query parameter
+	if (router.query.basket) {
+		const basketData: BasketData = JSON.parse(router.query.basket.toString()) as BasketData;
+		void router.replace('/');
+		const newBasket = allBasketsState.addBasket(basketData.term);
+
+		newBasket.setName(basketData.name);
+
+		for (const element of basketData.sections) {
+			newBasket.addSection(element);
+		}
+
+		for (const element of basketData.courses) {
+			newBasket.addCourse(element);
+		}
+
+		for (const element of basketData.searchQueries) {
+			newBasket.addSearchQuery(element);
+		}
+
+		allBasketsState.setSelectedBasket(newBasket.id);
+
+		apiState.setSelectedTerm(basketData.term);
+		openBasket = true;
+	}
 
 	const handleScrollToTop = useCallback(() => {
 		if (courseTableContainerRef.current) {