2 files changed, 76 insertions, 35 deletions

diff --git a/app/client/common/browser.component.js b/app/client/common/browser.component.js
index 50b31cf..19cd0f6 100644
--- a/app/client/common/browser.component.js
+++ b/app/client/common/browser.component.js
@@ -11,19 +11,23 @@ class Browser extends Component {
   state = {
     dir: '/',
     files: [],
+    file: null,
     loading: true
   }
+
   componentDidMount() {
     this.fetch(this.state.dir)
   }
+
   handlePick(file) {
     console.log(file)
     if (file.dir) {
       this.fetch([this.state.dir, file.name].join('/').replace('//','/'))
     } else {
-      this.fetchFile([this.state.dir, file.name].join('/').replace('//','/'))
+      this.setState({ file: { ...file, path: this.state.dir } })
     }
   }
+
   fetch(dir) {
     console.log('fetch', dir)
     const { tool: module } = this.props.app
@@ -33,15 +37,7 @@ class Browser extends Component {
       this.setState({ dir, files, loading: false })
     })
   }
-  fetchFile(fn) {
-    console.log('fetch file', fn)
-    const { tool: module } = this.props.app
-    this.setState({ file: null, loadingFile: true })
-    actions.socket.read_file({ module, fn }).then(file => {
-      console.log(file)
-      this.setState({ file, loadingFile: false })
-    })
-  }
+
   render() {
     const { app } = this.props
     const {
@@ -68,7 +64,7 @@ class Browser extends Component {
           }}
           onClickParent={e => {
             console.log('navigate up')
-            this.fetch(this.state.dir.split('/').slice(0, -1).join('/') || '/')
+            this.fetch(dir.split('/').slice(0, -1).join('/') || '/')
           }}
         />
         {loadingFile && <Loading />}
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)