Skip to content

Commit

Permalink
have going to link semester working
Browse files Browse the repository at this point in the history
  • Loading branch information
DylanHojnoski committed Mar 5, 2024
1 parent de00058 commit 4172559
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 0 deletions.
6 changes: 6 additions & 0 deletions src/components/basket/export-options/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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>
Expand All @@ -70,6 +73,9 @@ const ExportOptions = observer(() => {
)}
</Menu>
</Box>
<ExportLink
isOpen={linkDisclosure.isOpen}
onClose={linkDisclosure.onClose}/>

<ExportImage
isOpen={imageDisclosure.isOpen}
Expand Down
94 changes: 94 additions & 0 deletions src/components/basket/export-options/link.tsx
Original file line number Diff line number Diff line change
@@ -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;
31 changes: 31 additions & 0 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit 4172559

Please sign in to comment.