support displaying pdf

app/components/AddFunder.jsx

@@ -9,7 +9,8 @@ import InputAdornment from '@material-ui/core/InputAdornment'
 import CloudUpload from '@material-ui/icons/CloudUpload'
 import web3 from 'Embark/web3'
 import { MySnackbarContentWrapper } from './base/SnackBars'
-import { captureFile, isIpfs } from '../utils/ipfs'
+import { captureFile } from '../utils/ipfs'
+import ImageViewer from './image/ImageViewer'
 
 const { addGiver, addDelegate, addProject } = LiquidPledging.methods
 const FUNDER = 'FUNDER'
@@ -162,7 +163,8 @@ const AddFunder = ({ appendFundProfile }) => (
           onBlur={handleBlur}
           value={values.funderDescription || ''}
         />
-        {status && status.profileImg && <img src={status.profileImg.img} alt='ipfs' style={{maxWidth: '90%'}} />}
+        {/* {status && status.profileImg && <img src={status.profileImg.img} alt='ipfs' style={{maxWidth: '90%'}} />} */}
+        {status && <ImageViewer status={status} />}
         <TextField
           id="commitTime"
           name="commitTime"

app/components/image/ImageViewer.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const docType = doc => {
+  const suffix = doc.name.split('.')
+  return suffix.slice(-1)[0]
+}
+
+export default ({ status }) => {
+  return (
+    <div>
+      {status && status.profileImg &&
+       <div>
+         {['jpg', 'gif', 'png'].includes(docType(status.profileImg)) &&
+          <img src={status.profileImg.img} alt='ipfs' style={{ maxWidth: '90%' }} />}
+         {docType(status.profileImg) === 'pdf' &&
+          <iframe src={status.profileImg.img} style={{ width: '100%', height: '90%' }}/>}
+       </div>
+      }
+    </div>
+  )
+}

app/components/image/pdf.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  Page, Text, Image, View, Document, StyleSheet,
+  createElement, pdf, PDFRenderer,
+} from '@react-pdf/core';
+import blobStream from 'blob-stream';
+
+const Doc = () => (
+  <Document>
+    <Page wrap={true}>
+      <Text fixed={true}>
+        ~ HELLO PDF RENDERER ~
+      </Text>
+    </Page>
+  </Document>
+);
+
+class Pdf extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      downloadUrl: null,
+    }
+    this.pdfNode = null;
+
+    this.setPdfRef = elem => {
+      this.pdfNode = elem;
+    };
+
+    this.renderPdf = async () => {
+      if (this.pdfNode) {
+        // Render the PDF here
+        const element = <Doc />;
+
+        const container = createElement('ROOT');
+        const node = PDFRenderer.createContainer(container);
+        PDFRenderer.updateContainer(element, node, null);
+        const buffer = await pdf(container).toBuffer();
+        const stream = buffer.pipe(blobStream());
+
+        const url = await new Promise((resolve, reject) => {
+          stream.on('finish', () => {
+            resolve(stream.toBlobURL('application/pdf'));
+          });
+          stream.on('error', reject);
+        });
+
+        this.setState({downloadUrl: url});
+        this.pdfNode.src = url;
+      }
+    }
+  }
+
+  componentDidMount() {
+    this.renderPdf();
+  }
+
+  render() {
+    return (
+      <div>
+        {this.state.downloadUrl && (
+          <div><a href={this.state.downloadUrl} download="file.pdf">Download PDF</a></div>
+        )}
+
+        <iframe style={{width: 700, height: 800}} ref={this.setPdfRef}>
+        </iframe>
+      </div>
+    );
+  }
+
+}
+
+export default Pdf;

app/utils/images.js

@@ -0,0 +1,12 @@
+const typeMap = {
+  'gif': 'image/gif',
+  'jpg': 'image/jpeg',
+  'png': 'image/png',
+  'pdf': 'application/pdf'
+}
+
+export const getImageType = file => {
+  const { name } = file
+  const suffix = name.split('.').slice(-1)[0].toLowerCase()
+  return typeMap[suffix] ? typeMap[suffix] : 'image/jpeg'
+}

app/utils/ipfs.js

@@ -1,6 +1,7 @@
 import IPFS from 'ipfs'
 import fileReaderPullStream from 'pull-file-reader'
 import { Matcher } from '@areknawo/rex'
+import { getImageType } from './images'
 
 const ipfsMatcher = new Matcher().begin().find('/ipfs/')
 const ipfs = new IPFS()
@@ -10,7 +11,6 @@ export const captureFile = (event, cb, imgCb) => {
   event.stopPropagation()
   event.preventDefault()
   const file = event.target.files[0]
-  console.log({file})
   saveToIpfs(file, cb, imgCb)
 }
 
@@ -28,7 +28,6 @@ const saveToIpfs = (file, cb, imgCb) => {
     .then((response) => {
       console.log(response)
       ipfsId = response[0].hash
-      console.log(ipfsId)
       cb(`ipfs/${ipfsId}`)
       getImageFromIpfs(ipfsId, imgCb)
     }).catch((err) => {
@@ -41,7 +40,7 @@ export const getImageFromIpfs = async (hash, cb) => {
   const file = files.slice(-1)[0]
   const { content } = file
   const arrayBufferView = new Uint8Array(content)
-  const blob = new Blob([ arrayBufferView ], { type: "image/jpeg" })
+  const blob = new Blob([ arrayBufferView ], { type: getImageType(file) })
   const img = URL.createObjectURL(blob)
   cb({ ...file, img })
 };