From 8f73dc79c073a5fc955b5d13d9eb421f38868bf9 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Fri, 1 Jul 2016 23:43:26 +0800
Subject: [web] ui ducks for content view

---
 web/src/js/components/ContentView.jsx | 37 ++++++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 14 deletions(-)

(limited to 'web/src/js/components/ContentView.jsx')

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)
-- 
cgit v1.2.3


From db991e2bccc10e8e31fb200cba2a99bf94e83914 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Tue, 5 Jul 2016 22:49:16 +0800
Subject: [web] set display large

---
 web/src/js/components/ContentView.jsx | 94 ++++++++++++++---------------------
 1 file changed, 36 insertions(+), 58 deletions(-)

(limited to 'web/src/js/components/ContentView.jsx')

diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index 9d11ecd9..d6ee5497 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/web/src/js/components/ContentView.jsx
@@ -5,83 +5,61 @@ 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'
+import { setContentView, setDisplayLarge } from '../ducks/ui'
 
-class ContentView extends Component {
+ContentView.propTypes = {
+    // It may seem a bit weird at the first glance:
+    // Every view takes the flow and the message as props, e.g.
+    // <Auto flow={flow} message={flow.request}/>
+    flow: React.PropTypes.object.isRequired,
+    message: React.PropTypes.object.isRequired,
+}
 
-    static propTypes = {
-        // It may seem a bit weird at the first glance:
-        // Every view takes the flow and the message as props, e.g.
-        // <Auto flow={flow} message={flow.request}/>
-        flow: React.PropTypes.object.isRequired,
-        message: React.PropTypes.object.isRequired,
-    }
+ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
 
-    constructor(props, context) {
-        super(props, context)
+function ContentView({ flow, message, contentView, selectView, displayLarge }) {
 
-        this.state = { displayLarge: false }
+    if (message.contentLength === 0) {
+        return <MetaViews.ContentEmpty {...this.props}/>
     }
 
-    displayLarge() {
-        this.setState({ displayLarge: true })
+    if (message.contentLength === null) {
+        return <MetaViews.ContentMissing {...this.props}/>
     }
 
-    componentWillReceiveProps(nextProps) {
-        // @todo move to ui ducks
-        if (nextProps.message !== this.props.message) {
-            this.setState({ displayLarge: false })
-        }
+    if (!displayLarge && ContentView.isContentTooLarge(message)) {
+        return <MetaViews.ContentTooLarge {...this.props} onClick={() => this.props.setDisplayLarge(true)}/>
     }
 
-    isContentTooLarge(msg) {
-        return msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
-    }
-
-    render() {
-        const { flow, message, contentView, selectView } = this.props
-        const { displayLarge } = this.state
-
-        const View = ContentViews[contentView]
+    const View = ContentViews[contentView]
 
-        if (message.contentLength === 0) {
-            return <MetaViews.ContentEmpty {...this.props}/>
-        }
-
-        if (message.contentLength === null) {
-            return <MetaViews.ContentMissing {...this.props}/>
-        }
-
-        if (!displayLarge && this.isContentTooLarge(message)) {
-            return <MetaViews.ContentTooLarge {...this.props} onClick={this.displayLarge}/>
-        }
-
-        return (
-            <div>
-                {View.textView ? (
-                    <ContentLoader flow={flow} message={message}>
-                        <View content="" />
-                    </ContentLoader>
-                ) : (
-                    <View flow={flow} message={message} />
-                )}
-                <div className="view-options text-center">
-                    <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"/>
-                    </a>
-                </div>
+    return (
+        <div>
+            {View.textView ? (
+                <ContentLoader flow={flow} message={message}>
+                    <View content="" />
+                </ContentLoader>
+            ) : (
+                <View flow={flow} message={message} />
+            )}
+            <div className="view-options text-center">
+                <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"/>
+                </a>
             </div>
-        )
-    }
+        </div>
+    )
 }
 
 export default connect(
     state => ({
         contentView: state.ui.contentView,
+        displayLarge: state.ui.displayLarge,
     }),
     {
         selectView: setContentView,
+        setDisplayLarge,
     }
 )(ContentView)
-- 
cgit v1.2.3


From 666017125ac9dc38200753cdbe86eeb21bd5864a Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Fri, 8 Jul 2016 21:43:18 +0800
Subject: [web] add tests for main view and ui

---
 web/src/js/components/ContentView.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'web/src/js/components/ContentView.jsx')

diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index d6ee5497..6a982a5d 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/web/src/js/components/ContentView.jsx
@@ -17,18 +17,19 @@ ContentView.propTypes = {
 
 ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
 
-function ContentView({ flow, message, contentView, selectView, displayLarge }) {
+function ContentView(props) {
+    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge } = props
 
     if (message.contentLength === 0) {
-        return <MetaViews.ContentEmpty {...this.props}/>
+        return <MetaViews.ContentEmpty {...props}/>
     }
 
     if (message.contentLength === null) {
-        return <MetaViews.ContentMissing {...this.props}/>
+        return <MetaViews.ContentMissing {...props}/>
     }
 
     if (!displayLarge && ContentView.isContentTooLarge(message)) {
-        return <MetaViews.ContentTooLarge {...this.props} onClick={() => this.props.setDisplayLarge(true)}/>
+        return <MetaViews.ContentTooLarge {...props} onClick={() => setDisplayLarge(true)}/>
     }
 
     const View = ContentViews[contentView]
-- 
cgit v1.2.3