[web] ui ducks for content view

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.state = { displayLarge: false }
-        this.selectView = this.selectView.bind(this)
-    }
-
-    selectView(View) {
-        this.setState({ View })
     }
 
     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 { flow, message, contentView, selectView } = this.props
-        const { displayLarge, View } = this.state
+        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)

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', '')}`

web/src/js/ducks/ui.js

@@ -1,42 +1,54 @@
-import {SELECT} from "./views/main"
+import { SELECT as SELECT_FLOW } from './views/main'
-export const SET_ACTIVE_MENU = 'SET_ACTIVE_MENU';
 
+export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU'
+export const SET_CONTENT_VIEW = 'UI_SET_CONTENT_VIEW'
 
 const defaultState = {
     activeMenu: 'Start',
+    contentView: 'ViewAuto',
 }
+
 export default function reducer(state = defaultState, action) {
     switch (action.type) {
+
         case SET_ACTIVE_MENU:
             return {
                 ...state,
-                activeMenu: action.activeMenu
+                activeMenu: action.activeMenu,
             }
-        case SELECT:
+
-            let isNewSelect = (action.flowId && !action.currentSelection)
+        case SELECT_FLOW:
-            let isDeselect = (!action.flowId && action.currentSelection)
+            if (action.flowId && !action.currentSelection) {
-            if(isNewSelect) {
                 return {
                     ...state,
-                    activeMenu: "Flow"
+                    activeMenu: 'Flow',
                 }
             }
-            if(isDeselect && state.activeMenu === "Flow") {
+
+            if (!action.flowId && state.activeMenu === 'Flow') {
                 return {
                     ...state,
-                    activeMenu: "Start"
+                    activeMenu: 'Start',
                 }
             }
+
             return state
+
+        case SET_CONTENT_VIEW:
+            return {
+                ...state,
+                contentView: action.contentView,
+            }
+
         default:
             return state
     }
 }
 
 export function setActiveMenu(activeMenu) {
-    return {
+    return { type: SET_ACTIVE_MENU, activeMenu }
-        type: SET_ACTIVE_MENU,
-        activeMenu
-    }
 }
 
+export function setContentView(contentView) {
+    return { type: SET_CONTENT_VIEW, contentView }
+}