cubetiq/verdaccio-ui
1
0
Fork 0
forked from sombochea/verdaccio-ui
Code Issues Pull Requests Releases Wiki Activity

fix: refactoring version page / fix issue not found page #100 (#117)

Browse Source 
* chore: refactoring version page

* refactor: migrate version page to hooks

* refactor: Version page better imports

* fix: #100 render not found on click item

* test: add test for version page

* chore: update mocks

* test: add scenario for not found package

* chore: fix wrong mock path

* chore: update mock

* chore: add todo list
This commit is contained in:
Juan Picado @jotadeveloper
2019-08-25 14:34:27 +02:00
committed by GitHub
parent e7d3c461cd
commit 97e8448098
42 changed files with 25186 additions and 678 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/NotFound/NotFound.tsx
View File

@@ -1,46 +1,43 @@
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
import React from 'react';
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';
import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
export const NOT_FOUND_TEXT = "Sorry, we couldn't find it...";
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 & { width: Breakpoint; history };
const NotFound: React.FC<NotFoundProps> = ({ history, width }) => {
const handleGoTo = (to: string): (() => void | undefined) => () => {
history.push(to);
};
const HOME_LABEL = 'Home';
const handleGoBack = (): ((e: React.MouseEvent<HTMLElement, MouseEvent>) => void | undefined) => () => {
history.goBack();
};
const renderSubTitle = (): JSX.Element => (
<Typography variant="subtitle1">
<div>{LABEL_NOT_FOUND}</div>
<div>{LABEL_FOOTER_NOT_FOUND}</div>
</Typography>
);
const NotFound: React.FC<NotFoundProps> = ({ history, width }) => {
const handleGomHome = useCallback(() => {
history.push('/');
}, [history]);
const renderList = (): JSX.Element => (
<List>
<ListItem button={true} divider={true} onClick={handleGoTo('/')}>
{'Home'}
</ListItem>
<ListItem button={true} divider={true} onClick={handleGoBack()}>
{'Back'}
<ListItem button={true} divider={true} onClick={handleGomHome}>
{HOME_LABEL}
</ListItem>
</List>
);
const renderSubTitle = (): JSX.Element => (
<Typography variant="subtitle1">
<div>{"The page you're looking for doesn't exist."}</div>
<div>{'Perhaps these links will help find what you are looking for:'}</div>
</Typography>
);
return (
<Wrapper>
<Wrapper data-testid="404">
<Inner>
<EmptyPackage alt="404 - Page not found" src={PackageImg} />
<Heading className="not-found-text" variant={isWidthUp('sm', width) ? 'h2' : 'h4'}>