aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/js')
-rw-r--r--web/src/js/components/ContentView.jsx37
-rw-r--r--web/src/js/components/ContentView/ViewSelector.jsx2
-rw-r--r--web/src/js/ducks/ui.js40
3 files changed, 50 insertions, 29 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', '')}`
diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js
index f8234fdb..f513f49c 100644
--- a/web/src/js/ducks/ui.js
+++ b/web/src/js/ducks/ui.js
@@ -1,42 +1,54 @@
-import {SELECT} from "./views/main"
-export const SET_ACTIVE_MENU = 'SET_ACTIVE_MENU';
+import { SELECT as SELECT_FLOW } from './views/main'
+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)
- let isDeselect = (!action.flowId && action.currentSelection)
- if(isNewSelect) {
+
+ case SELECT_FLOW:
+ if (action.flowId && !action.currentSelection) {
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 {
- type: SET_ACTIVE_MENU,
- activeMenu
- }
+ return { type: SET_ACTIVE_MENU, activeMenu }
}
+export function setContentView(contentView) {
+ return { type: SET_CONTENT_VIEW, contentView }
+}