move fetch functionality into fileviweer

1 files changed, 69 insertions, 24 deletions

diff --git a/app/client/common/fileViewer.component.js b/app/client/common/fileViewer.component.js
index bc71f20..72aebd4 100644
--- a/app/client/common/fileViewer.component.js
+++ b/app/client/common/fileViewer.component.js
@@ -1,4 +1,7 @@
 import { h, Component } from 'preact'
+import { connect } from 'react-redux'
+
+import actions from '../actions'
 
 const image_types = {
   'jpg': 'image/jpeg',
@@ -18,33 +21,69 @@ const video_types = {
   'mp4': 'video/mp4',
 }
 
-export default function FileViewer({ file }) {
-  const {
-    error,
-    name, path,
-    date, size,
-    buf,
-  } = file
-  if (error) {
-    return <div className='fileViewer'>{error}</div>
+class FileViewer extends Component {
+  state = {
+    loading: true,
+    buffer: {}
   }
-  if (!buf) {
-    return <div className='fileViewer'>File empty</div>
+
+  fetch() {
+    const { file } = this.props
+    const fn = [file.path, file.name].join('/').replace('//','/')
+    console.log('fetch file', fn)
+    const { tool: module } = this.props.app
+    this.setState({ buffer: null, loading: true })
+    actions.socket.read_file({ module, fn }).then(buffer => {
+      console.log(buffer)
+      this.setState({ buffer, loading: false })
+    })
   }
-  const ext = name.split('.').slice(-1)[0].toLowerCase()
-  let tag;
-  if (ext in image_types) {
-    tag = <img src={getURLFor(buf, image_types[ext])} />
-  } else if (ext in audio_types) {
-    tag = <audio src={getURLFor(buf, audio_types[ext])} controls autoplay />
-  } else if (ext in video_types) {
-    tag = <video src={getURLFor(buf, audio_types[ext])} controls autoplay />
-  } else {
-    tag = <div className='text'>{ab2str(buf)}</div>
+
+  componentDidMount(){
+    this.fetch()
+  }
+
+  componentDidUpdate(nextProps){
+    if (this.props.file !== nextProps.file) {
+      this.fetch()
+    }
+  }
+
+  render() {
+    const { loading, buffer } = this.state
+    if (loading) {
+      return <div className='fileViewer'>Loading...</div>
+    }
+    const {
+      error,
+      name, path,
+      date, size,
+      buf,
+    } = buffer
+    if (error) {
+      return <div className='fileViewer'>{error}</div>
+    }
+    if (!name) {
+      return <div className='fileViewer'></div>
+    }
+    if (!buf) {
+      return <div className='fileViewer'>File empty</div>
+    }
+    const ext = name.split('.').slice(-1)[0].toLowerCase()
+    let tag;
+    if (ext in image_types) {
+      tag = <img src={getURLFor(buf, image_types[ext])} />
+    } else if (ext in audio_types) {
+      tag = <audio src={getURLFor(buf, audio_types[ext])} controls autoplay />
+    } else if (ext in video_types) {
+      tag = <video src={getURLFor(buf, audio_types[ext])} controls autoplay />
+    } else {
+      tag = <div className='text'>{ab2str(buf)}</div>
+    }
+    return (
+      <div className='fileViewer'>{tag}</div>
+    )
   }
-  return (
-    <div className='fileViewer'>{tag}</div>
-  )
 }
 
 const getURLFor = (buf, type) => {
@@ -55,3 +94,9 @@ const getURLFor = (buf, type) => {
 }
 
 const ab2str = buf => String.fromCharCode.apply(null, new Uint8Array(buf))
+
+const mapStateToProps = state => ({
+  app: state.system.app,
+})
+
+export default connect(mapStateToProps)(FileViewer)