pass in fula client to Photo element and call receiveFile to display content in img tag (#60)

gitaaron · gitaaron · commit ca3c6fc6545b · 2022-03-11T10:17:41.000-05:00
diff --git a/examples/react-gallery/src/App.css b/examples/react-gallery/src/App.css
@@ -212,3 +212,8 @@ h1, h3,h4 {
     transform: translate(24px, 0);
   }
 }
+
+.photo {
+  width:100%;
+  padding: 10px;
+}
diff --git a/examples/react-gallery/src/App.tsx b/examples/react-gallery/src/App.tsx
@@ -91,7 +91,7 @@ function App() {
   return (
     <div className='app'>
       <FulaProvider fula={fulaClient}>
-        {connectionStatus ? <Gallery /> : <div className='connect-container'>
+        {(connectionStatus===true && fulaClient!==undefined)? <Gallery fulaClient={fulaClient} /> : <div className='connect-container'>
           <div className='app-header'>
             {!connecting ? <h1>Connect to BOX!</h1> : null}
             {connecting ? <div className='lds-ellipsis'><div></div><div></div><div></div><div></div></div> : null}
diff --git a/examples/react-gallery/src/components/Gallery.tsx b/examples/react-gallery/src/components/Gallery.tsx
@@ -1,21 +1,24 @@
 import React, { useEffect, useState } from 'react';
 import Photo from './Photo';
 import type { PHOTO } from './Photo';
+import { Fula } from '@functionland/fula'
 
-function Gallery() {
-  const [photos, setPhotos] = useState<PHOTO[]>([]);
-  useEffect(() => {
-    setPhotos([{cid:'a'}, {cid:'b'}, {cid:'c'}])
-  });
 
+interface Props {
+  fulaClient: Fula
+}
+
+const Gallery = ({ fulaClient }: Props): JSX.Element => {
+
+  const [photos, setPhotos] = useState<PHOTO[]>([{cid:'a'}, {cid:'b'}, {cid:'c'}]);
 
   return (
     <>
       <h1>Functionland Sample Gallery</h1>
     {
       photos.map((photo, index) => (
-        <div key={index} className='photo'>
-          <Photo photo={photo} />
+        <div key={index} >
+          <Photo photo={photo} fulaClient={fulaClient} />
         </div>
       ))
     }
diff --git a/examples/react-gallery/src/components/Photo.tsx b/examples/react-gallery/src/components/Photo.tsx
@@ -1,17 +1,51 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { Fula } from '@functionland/fula'
+
 
 export type PHOTO = {
   cid: string,
 }
 
 interface Props {
-  photo: PHOTO
+  photo: PHOTO,
+  fulaClient: Fula
 }
 
-const Photo = ({ photo, }: Props): JSX.Element => {
-  return <>
-      {photo.cid}
-  </>
+const Photo = ({ photo, fulaClient }: Props): JSX.Element => {
+
+  const [fileId, setFileId] = useState("QmYJt7141ZG2Kut37W2ZHYcyjYTJ36aX22KYu7einNevPD")
+  const [content, setContent] = useState("")
+  const [output, setOutput] = useState("");
+
+
+  useEffect(() => {
+      (async () => {
+          receiveFile();
+      })()
+  }, []);
+
+
+  const receiveFile = async () => {
+      if (!fulaClient) {
+          console.log("fula not connected")
+          return
+      }
+      try {
+          const data = await fulaClient.receiveFile(fileId);
+          console.log(data)
+          let reader = new FileReader();
+          reader.readAsDataURL(data);
+          // @ts-ignore
+          reader.onloadend = (e) => setContent(reader.result)
+      }catch (e) {
+          console.log(e)
+      }
+
+  }
+
+  return <div className='photo'>
+      <img width="100%" src={content} />
+  </div>
 
 };
 

Original file line number	Diff line number	Diff line change
`@@ -212,3 +212,8 @@ h1, h3,h4 {`
`212`	`212`	`transform: translate(24px, 0);`
`213`	`213`	`}`
`214`	`214`	`}`
	`215`	`+`
	`216`	`+.photo {`
	`217`	`+ width:100%;`
	`218`	`+ padding: 10px;`
	`219`	`+}`