import ListItem from '@material-ui/core/ListItem'; import Typography from '@material-ui/core/Typography'; import withWidth, { isWidthUp, WithWidthProps } from '@material-ui/core/withWidth'; import React, { useCallback } from 'react'; import { RouteComponentProps, withRouter } from 'react-router-dom'; import PackageImg from './img/package.svg'; import { Card, EmptyPackage, Heading, Inner, List, Wrapper } from './styles'; export const NOT_FOUND_TEXT = `Sorry, we couldn't find it...`; export const LABEL_NOT_FOUND = `The page you're looking for doesn't exist.`; export const LABEL_FOOTER_NOT_FOUND = 'Perhaps these links will help find what you are looking for:'; export type NotFoundProps = RouteComponentProps & WithWidthProps; const HOME_LABEL = 'Home'; const renderSubTitle = (): JSX.Element => (
{LABEL_NOT_FOUND}
{LABEL_FOOTER_NOT_FOUND}
); const NotFound: React.FC = ({ history, width }) => { const handleGomHome = useCallback(() => { history.push('/'); }, [history]); const renderList = (): JSX.Element => ( {HOME_LABEL} ); /* eslint-disable @typescript-eslint/no-non-null-assertion */ return ( {NOT_FOUND_TEXT} {renderSubTitle()} {renderList()} ); }; export default withRouter>(withWidth()(NotFound));