Check if the item exists before rendering the page

Redirect to 404 page if the item doesn't exist.

Fixes #3.

src/Pim/index.tsx

@@ -126,8 +126,22 @@ const styles = (theme: any) => ({
   },
 });
 
+function PageNotFound() {
+  return (
+    <Container>
+      <h1>404 Page Not Found</h1>
+    </Container>
+  );
+}
+
+
 const CollectionRoutes = withStyles(styles)(withRouter(
   class CollectionRoutesInner extends React.PureComponent<CollectionRoutesPropsType> {
+
+    private itemUndefined(itemUid: string) {
+      return this.props.items[itemUid] === undefined;
+    }
+
     public render() {
       const props = this.props;
       const { classes } = this.props;
@@ -155,6 +169,9 @@ const CollectionRoutes = withStyles(styles)(withRouter(
             exact
             render={({ match }) => {
               const itemUid = decodeURIComponent(match.params.itemUid);
+              if (this.itemUndefined(itemUid)) {
+                return PageNotFound();
+              }
               return (
                 <Container style={{ maxWidth: '30rem' }}>
                   {(itemUid in props.items) &&
@@ -175,19 +192,30 @@ const CollectionRoutes = withStyles(styles)(withRouter(
           <Route
             path={routeResolver.getRoute(props.routePrefix + '._id.log')}
             exact
-            render={({ match }) => (
+            render={({ match }) => {
+              const paramItemUid = decodeURIComponent(match.params.itemUid);
+              if (this.itemUndefined(paramItemUid)) {
+                return PageNotFound();
+              }
+              return (
                 <Container>
                   <ItemChangeLog
                     syncInfo={props.syncInfo}
-                  paramItemUid={decodeURIComponent(match.params.itemUid)}
+                    paramItemUid={paramItemUid}
                   />
                 </Container>
-            )}
+              );
+            }}
           />
           <Route
             path={routeResolver.getRoute(props.routePrefix + '._id')}
             exact
-            render={({ match, history }) => (
+            render={({ match, history }) => {
+              const itemUid = decodeURIComponent(match.params.itemUid);
+              if (this.itemUndefined(itemUid)) {
+                return PageNotFound();
+              }
+              return (
                 <Container>
                   <div style={{ textAlign: 'right', marginBottom: 15 }}>
                     <Button
@@ -221,7 +249,8 @@ const CollectionRoutes = withStyles(styles)(withRouter(
                   </div>
                   <ComponentView item={props.items[decodeURIComponent(match.params.itemUid)]} />
                 </Container>
-            )}
+              );
+            }}
           />
         </Switch>
       );