From 94a850bb4b0c3609a762967484ee611a87e8d454 Mon Sep 17 00:00:00 2001
From: Barry Gitarts <bgitarts@gmail.com>
Date: Sat, 2 Feb 2019 16:43:14 -0500
Subject: [PATCH] display iframe under existing profiles with urls

---
 app/components/FunderProfilesTable.jsx    |  2 ++
 app/components/image/ProfileUrlViewer.jsx | 37 +++++++++++++++++++++++
 app/utils/ipfs.js                         | 14 ++++++---
 config/blockchain.js                      |  9 ++----
 4 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 app/components/image/ProfileUrlViewer.jsx

diff --git a/app/components/FunderProfilesTable.jsx b/app/components/FunderProfilesTable.jsx
index d5950f0..223a003 100644
--- a/app/components/FunderProfilesTable.jsx
+++ b/app/components/FunderProfilesTable.jsx
@@ -3,6 +3,7 @@ import MaterialTable from 'material-table'
 import LiquidPledging from 'Embark/contracts/LiquidPledging'
 import withObservables from '@nozbe/with-observables'
 import { withDatabase } from '@nozbe/watermelondb/DatabaseProvider'
+import ProfileUrlViewer from './image/ProfileUrlViewer'
 import { FundingContext } from '../context'
 
 const { cancelProject } = LiquidPledging.methods
@@ -47,6 +48,7 @@ const FunderProfilesTable = ({ profiles }) => (
               }
             })
           ]}
+          detailPanel={rowData => <ProfileUrlViewer url={rowData.url} />}
         />
       </Fragment>
     }
diff --git a/app/components/image/ProfileUrlViewer.jsx b/app/components/image/ProfileUrlViewer.jsx
new file mode 100644
index 0000000..c9ef976
--- /dev/null
+++ b/app/components/image/ProfileUrlViewer.jsx
@@ -0,0 +1,37 @@
+import React, { PureComponent } from 'react'
+import { isIpfs, getFromIpfs } from '../../utils/ipfs'
+
+export default class ProfileUrlViewer extends PureComponent {
+  state = { url: null }
+  componentDidMount() {
+    this.getSource()
+  }
+
+  async getSource() {
+    const { url } = this.props
+    if (isIpfs(url)) {
+      const res = await getFromIpfs(url)
+      this.setState({ url: res.img })
+    } else {
+      this.setState({ url })
+    }
+  }
+
+  render() {
+    const { url } = this.state
+    const height = `${window.visualViewport.height * 0.75}px`
+    return (
+      <div>
+        {url &&
+         <iframe
+           width="100%"
+           height={height}
+           src={url}
+           allowFullScreen
+         />
+        }
+      </div>
+
+    )
+  }
+}
diff --git a/app/utils/ipfs.js b/app/utils/ipfs.js
index 37e1df1..7191d35 100644
--- a/app/utils/ipfs.js
+++ b/app/utils/ipfs.js
@@ -3,7 +3,7 @@ import fileReaderPullStream from 'pull-file-reader'
 import { Matcher } from '@areknawo/rex'
 import { getImageType } from './images'
 
-const ipfsMatcher = new Matcher().begin().find('/ipfs/')
+const ipfsMatcher = new Matcher().begin().find('ipfs/')
 const ipfs = new IPFS()
 
 export const isIpfs = str => ipfsMatcher.test(str)
@@ -36,18 +36,24 @@ const saveToIpfs = (file, cb, imgCb) => {
 }
 
 export const getImageFromIpfs = async (hash, cb) => {
+  const res = await getFromIpfs(hash)
+  cb(res)
+};
+
+export const getFromIpfs = async hash => {
   const files = await getFile(hash)
   const file = files.slice(-1)[0]
   const { content } = file
   const arrayBufferView = new Uint8Array(content)
   const blob = new Blob([ arrayBufferView ], { type: getImageType(file) })
   const img = URL.createObjectURL(blob)
-  cb({ ...file, img })
-};
+  return { ...file, img }
+}
 
 export const getFile = CID => {
+  const clean = CID.split('/').slice(-1)[0]
   return new Promise(function(resolve, reject) {
-    ipfs.get(CID, function (err, files) {
+    ipfs.get(clean, function (err, files) {
       if (err) reject(err)
       else resolve(files)
     })
diff --git a/config/blockchain.js b/config/blockchain.js
index 1c8e3ff..88c3589 100644
--- a/config/blockchain.js
+++ b/config/blockchain.js
@@ -107,12 +107,9 @@ module.exports = {
   rinkeby: {
     networkType: "rinkeby",
     syncMode: "light",
-    accounts: [
-      {
-        nodeAccounts: true,
-        password: "config/testnet/password"
-      }
-    ]
+    account: {
+      password: "config/testnet/password"
+    }
   },
 
   // merges with the settings in default