fix(Preview): show PreviewNotFound when we don't have access to the…

… version

if we don't have access to the particular version the user is trying to view, because the original owner of the dataset has not published it, show the `PreviewNotFound` component which explains the circumstances.

app/components/dataset/Preview.tsx

@@ -5,6 +5,7 @@ import { FetchOptions } from '../../store/api'
 import { BACKEND_URL } from '../../constants'
 
 import Dataset from './Dataset'
+import PreviewNotFound from './PreviewNotFound'
 import SpinnerWithIcon from '../chrome/SpinnerWithIcon'
 
 interface PreviewProps {
@@ -50,9 +51,11 @@ const Preview: React.FunctionComponent<PreviewProps> = (props) => {
  fetchDataset()
  }, [peername, name, path])
 
- // TODO (ramfox): what does an error screen look like here? or do we just nav
- // back to the network/home & pop up a toast?
  if (error !== '') {
+ if (error.includes('not found')) {
+ return <PreviewNotFound />
+ }
+
  return (
  <div
  style={{

app/components/dataset/PreviewNotFound.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+export const lostBlob = require('../../assets/lost_blob.png') // eslint-disable-line
+
+const PreviewNotFound: React.FC = () => {
+ return (
+ <div className="preview-not-found">
+ <div className="container">
+ <img className='graphic' src={lostBlob} />
+ <h3>We can&apos;t get you this version... because we don&apos;t have it!</h3>
+ <p>This isn&apos;t a problem or error with Qri. It just means that, although we know this version exists, the author of this dataset hasn&apos;t published it :)</p>
+ </div>
+ </div>
+ )
+}
+
+export default PreviewNotFound

app/scss/0.4.0/preview.scss

@@ -0,0 +1,16 @@
+.preview-not-found {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ .container {
+ width: 400px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ .graphic {
+ width: 200px;
+ }
+ }
+}

app/scss/style.scss

@@ -52,3 +52,4 @@
 @import "0.4.0/form";
 @import "0.4.0/network";
 @import "0.4.0/dataset";
+@import "0.4.0/preview";