[web] ui ducks for content view

2 files changed, 24 insertions, 15 deletions

diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index 1533684e..9d11ecd9 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/web/src/js/components/ContentView.jsx
@@ -1,11 +1,13 @@
 import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
 import { MessageUtils } from '../flow/utils.js'
-import { ViewAuto, ViewImage } from './ContentView/ContentViews'
+import * as ContentViews from './ContentView/ContentViews'
 import * as MetaViews from './ContentView/MetaViews'
 import ContentLoader from './ContentView/ContentLoader'
 import ViewSelector from './ContentView/ViewSelector'
+import { setContentView } from '../ducks/ui'
 
-export default class ContentView extends Component {
+class ContentView extends Component {
 
     static propTypes = {
         // It may seem a bit weird at the first glance:
@@ -18,12 +20,7 @@ export default class ContentView extends Component {
     constructor(props, context) {
         super(props, context)
 
-        this.state = { displayLarge: false, View: ViewAuto }
-        this.selectView = this.selectView.bind(this)
-    }
-
-    selectView(View) {
-        this.setState({ View })
+        this.state = { displayLarge: false }
     }
 
     displayLarge() {
@@ -31,18 +28,21 @@ export default class ContentView extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
+        // @todo move to ui ducks
         if (nextProps.message !== this.props.message) {
-            this.setState({ displayLarge: false, View: ViewAuto })
+            this.setState({ displayLarge: false })
         }
     }
 
     isContentTooLarge(msg) {
-        return msg.contentLength > 1024 * 1024 * (ViewImage.matches(msg) ? 10 : 0.2)
+        return msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
     }
 
     render() {
-        const { flow, message } = this.props
-        const { displayLarge, View } = this.state
+        const { flow, message, contentView, selectView } = this.props
+        const { displayLarge } = this.state
+
+        const View = ContentViews[contentView]
 
         if (message.contentLength === 0) {
             return <MetaViews.ContentEmpty {...this.props}/>
@@ -60,13 +60,13 @@ export default class ContentView extends Component {
             <div>
                 {View.textView ? (
                     <ContentLoader flow={flow} message={message}>
-                        <this.state.View content="" />
+                        <View content="" />
                     </ContentLoader>
                 ) : (
                     <View flow={flow} message={message} />
                 )}
                 <div className="view-options text-center">
-                    <ViewSelector onSelectView={this.selectView} active={View} message={message}/>
+                    <ViewSelector onSelectView={selectView} active={View} message={message}/>
                     &nbsp;
                     <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}>
                         <i className="fa fa-download"/>
@@ -76,3 +76,12 @@ export default class ContentView extends Component {
         )
     }
 }
+
+export default connect(
+    state => ({
+        contentView: state.ui.contentView,
+    }),
+    {
+        selectView: setContentView,
+    }
+)(ContentView)
diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx
index df3a5b83..9b151a5b 100644
--- a/web/src/js/components/ContentView/ViewSelector.jsx
+++ b/web/src/js/components/ContentView/ViewSelector.jsx
@@ -14,7 +14,7 @@ export default function ViewSelector({ active, message, onSelectView }) {
             {views.map(View => (
                 <button
                     key={View.name}
-                    onClick={() => onSelectView(View)}
+                    onClick={() => onSelectView(View.name)}
                     className={classnames('btn btn-default', { active: View === active })}>
                     {View === ViewAuto ? (
                         `auto: ${ViewAuto.findView(message).name.toLowerCase().replace('view', '')}`