Add warning for mobile devices

src/components/basket/export-options/crn-script.tsx

@@ -35,7 +35,11 @@ type CRNScriptProps = {
 	onClose: () => void;
 };
 
-type OS = 'Windows' | 'Linux' | 'macOS';
+enum OS {
+	WINDOWS = 'Windows',
+	LINUX = 'Linux',
+	MACOS = 'macOS',
+}
 
 type Software = {
 	label: SupportedSoftware;
@@ -67,28 +71,32 @@ const SOFTWARES: Record<OS, Software[]> = {
 const CRNScript = ({isOpen, onClose}: CRNScriptProps) => {
 	const {allBasketsState: {currentBasket}} = useStore();
 	const [shortcutKey, setShortcutKey] = useState('c');
-	const [platform, setPlatform] = useState<OS>('Windows');
+	const [platform, setPlatform] = useState<OS | undefined>(undefined);
 	const [softwareLabel, setSoftwareLabel] = useState<Software['label']>();
 
 	useEffect(() => {
 		const browser = Bowser.getParser(window.navigator.userAgent);
 		const {name} = browser.getOS();
-		if (name) {
+		if (name && Object.values(OS).includes(name as OS)) {
 			setPlatform(name as OS);
 		}
 	}, []);
 
 	// Update selected software when changing platforms
 	const previousPlatform = usePrevious(platform);
 	useEffect(() => {
-		if (previousPlatform && previousPlatform !== platform && !SOFTWARES[platform].some(s => s.label === softwareLabel)) {
+		if (
+			previousPlatform
+			&& platform
+			&& previousPlatform !== platform
+			&& !SOFTWARES[platform].some(s => s.label === softwareLabel)) {
 			setSoftwareLabel(SOFTWARES[platform][0]?.label ?? undefined);
 		}
 	}, [previousPlatform, platform, softwareLabel]);
 
 	const isFormValid = useMemo(() => platform && softwareLabel, [platform, softwareLabel]);
 
-	const currentSoftware = SOFTWARES[platform].find(s => s.label === softwareLabel);
+	const currentSoftware = platform ? SOFTWARES[platform].find(s => s.label === softwareLabel) : undefined;
 
 	// We're just using this for UI
 	const {onCopy, hasCopied} = useClipboard('');
@@ -218,7 +226,7 @@ const CRNScript = ({isOpen, onClose}: CRNScriptProps) => {
 								}}
 							>
 								{
-									SOFTWARES[platform].map(software => (
+									platform && SOFTWARES[platform].map(software => (
 										<Radio key={software.label} value={software.label}>
 											<WrappedLink href={software.href}>
 												{software.label}
@@ -229,7 +237,7 @@ const CRNScript = ({isOpen, onClose}: CRNScriptProps) => {
 							</RadioGroup>
 
 							{
-								SOFTWARES[platform].length === 0 && (
+								(!platform || SOFTWARES[platform].length === 0) && (
 									<Text>Not currently supported. 😔</Text>
 								)
 							}

src/components/mobile-device-warning.tsx

@@ -0,0 +1,44 @@
+import React, {useEffect} from 'react';
+import {
+	Button,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	useDisclosure,
+} from '@chakra-ui/react';
+import Bowser from 'bowser';
+
+const MobileDeviceWarning = () => {
+	const {isOpen, onClose, onOpen} = useDisclosure();
+
+	useEffect(() => {
+		const browser = Bowser.getParser(window.navigator.userAgent);
+
+		if (browser.getPlatform().type !== 'desktop') {
+			onOpen();
+		}
+	}, [onOpen]);
+
+	return (
+		<Modal isOpen={isOpen} onClose={onClose}>
+			<ModalOverlay/>
+			<ModalContent>
+				<ModalHeader>Warning</ModalHeader>
+				<ModalBody>
+					This site is primarily made for laptop and desktop use. There's just too much information to effectively display it on mobile devices.
+				</ModalBody>
+
+				<ModalFooter>
+					<Button colorScheme="blue" variant="ghost" onClick={onClose}>
+						I understand
+					</Button>
+				</ModalFooter>
+			</ModalContent>
+		</Modal>
+	);
+};
+
+export default MobileDeviceWarning;

src/pages/_app.tsx

@@ -8,6 +8,7 @@ import Navbar from 'src/components/navbar';
 import RevisionToaster from 'src/components/revision-toaster';
 import useRevalidation from 'src/lib/hooks/use-revalidation';
 import {CustomNextPage} from 'src/lib/types';
+import MobileDeviceWarning from 'src/components/mobile-device-warning';
 
 const theme = extendTheme({
 	colors: {
@@ -95,6 +96,8 @@ const MyApp = ({Component, pageProps}: AppProps & {Component: CustomNextPage<any
 				</Box>
 			</StateProvider>
 
+			<MobileDeviceWarning/>
+
 			<RevisionToaster/>
 		</ChakraProvider>
 	);