Fix channel status

assets/css/_global.scss

@@ -833,6 +833,13 @@ i.survey-status {
   height: 12px;
 }
 
+.channel-paused {
+  display: block;
+  color: var(--reference-color12);
+  width: 12px;
+  height: 12px;
+}
+
 .wizard-content {
   > div {
     min-height: 110vh;

assets/js/actions/channel.js

@@ -130,14 +130,14 @@ export const deletePattern = (index: number) => (dispatch: Function, getState: (
   dispatch(removePattern(index))
 }
 
-export const pause = (channel: Channel) => (dispatch) => {
+export const pause = (id: number) => (dispatch: Function) => {
   return api
-    .pauseChannel(channel)
-    .then((response) => dispatch(fetchChannel(channel.id)))
+    .pauseChannel(id)
+    .then((response) => dispatch(fetchChannel(id)))
 }
 
-export const unpause = (channel: Channel) => (dispatch) => {
+export const unpause = (id: number) => (dispatch: Function) => {
   return api
-    .unpauseChannel(channel)
-    .then((response) => dispatch(fetchChannel(channel.id)))
+    .unpauseChannel(id)
+    .then((response) => dispatch(fetchChannel(id)))
 }

assets/js/api.js

@@ -368,12 +368,12 @@ export const createChannel = (provider, baseUrl, channel) => {
   return apiPostJSON(`channels`, channelSchema, { provider, baseUrl, channel })
 }
 
-export const pauseChannel = (channel) => {
-  return apiPostJSON(`channels/${channel.id}/pause`, channelSchema)
+export const pauseChannel = (channelId) => {
+  return apiPostJSON(`channels/${channelId}/pause`)
 }
 
-export const unpauseChannel = (channel) => {
-  return apiPostJSON(`channels/${channel.id}/unpause`, channelSchema)
+export const unpauseChannel = (channelId) => {
+  return apiPostJSON(`channels/${channelId}/unpause`)
 }
 
 export const updateQuestionnaire = (projectId, questionnaire) => {

assets/js/components/channels/ChannelIndex.jsx

@@ -18,7 +18,6 @@ import {
   ConfirmationModal,
   PagingFooter,
   channelFriendlyName,
-  Tooltip,
 } from "../ui"
 import { Preloader } from "react-materialize"
 import { config } from "../../config"
@@ -230,21 +229,6 @@ class ChannelIndex extends Component<any> {
         </li>
       )
     }
-
-    const pauseIconForChannel = (channel) => {
-      const { statusInfo } = channel
-      console.log({statusInfo, label: "1--------"})
-      const { t } = this.props
-      return (
-        <td className="action">
-          <Tooltip text={t("Pause channel")}>
-            <a onClick={(e) => this.pause(e, channel)}>
-              <i className="material-icons">pause</i>
-            </a>
-          </Tooltip>
-        </td>
-      )
-    }
 
     let providerUIs = []
     config.verboice.forEach((_, index) => {
@@ -327,8 +311,12 @@ class ChannelIndex extends Component<any> {
                     </td>
                     <td>{`${channel.provider}${channelFriendlyName(channel)}`}</td>
                     <td className="tdError">
-                      {status == "down" || status == "error" || status == "paused" ? (
+                      {status == "down" || status == "error" ? (
                         <span className="questionnaire-error" />
+                      ) : status == "paused" ? (
+                        <span className="channel-paused">
+                          <i className="material-icons">pause</i>
+                        </span>
                       ) : null}
                     </td>
                   </tr>

assets/js/components/channels/ChannelPause.jsx

@@ -1,4 +1,4 @@
-import React, { PropTypes } from "react"
+import { PropTypes } from "react"
 import { bindActionCreators } from "redux"
 import { connect } from "react-redux"
 import { translate } from "react-i18next"
@@ -16,9 +16,9 @@ const ChannelPause = ({ channel, t, actions }) => {
   const pauseChannel = (channel, pause) => {
     console.log(`About to ${pause ? "pause" : "unpause"} channel ${channel.id}`)
     if (pause) {
-      actions.pause(channel)
+      actions.pause(channel.id)
     } else {
-      actions.unpause(channel)
+      actions.unpause(channel.id)
     }
   }
 

assets/js/components/channels/DownChannelsStatus.jsx

@@ -1,6 +1,7 @@
 import React, { PureComponent, PropTypes } from "react"
 import TimeAgo from "react-timeago"
 import { translate, Trans } from "react-i18next"
+import every from "lodash/every"
 import map from "lodash/map"
 
 class DownChannelsStatus extends PureComponent {
@@ -12,7 +13,9 @@ class DownChannelsStatus extends PureComponent {
   render() {
     const { channels, timestamp } = this.props
     const channelNames = map(channels, (channel) => channel.name)
-    return this.downChannelsDescription(channelNames, timestamp)
+    const paused = every(channels, (channel) => channel.statusInfo && channel.statusInfo.status == "paused")
+    const text = paused ? "paused" : "down"
+    return this.downChannelsDescription(channelNames, timestamp, text)
   }
 
   downChannelsFormatter(number, unit, suffix, date, defaultFormatter) {
@@ -36,21 +39,21 @@ class DownChannelsStatus extends PureComponent {
     }
   }
 
-  downChannelsDescription(channelNames, timestamp) {
+  downChannelsDescription(channelNames, timestamp, text) {
     const names = channelNames.join(", ")
     if (channelNames.length > 1) {
       return (
         <Trans>
-          Channels <em>{{ names }}</em> down{" "}
-          <TimeAgo date={timestamp} formatter={this.bindedDownChannelsFormatter} />
+          Channels <em>{{ names }}</em> {{text}}{" "}
+          {timestamp && <TimeAgo date={timestamp} formatter={this.bindedDownChannelsFormatter} />}
         </Trans>
       )
     } else {
       const name = channelNames[0]
       return (
         <Trans>
-          Channel <em>{{ name }}</em> down{" "}
-          <TimeAgo date={timestamp} formatter={this.bindedDownChannelsFormatter} />
+          Channel <em>{{ name }}</em> {{text}}{" "}
+          {timestamp && <TimeAgo date={timestamp} formatter={this.bindedDownChannelsFormatter} />}
         </Trans>
       )
     }

locales/template/translation.json

@@ -79,9 +79,9 @@
   "Changed description of <i>{{surveyName}}</i> survey": "",
   "Changes are still being saved. Please wait": "",
   "Channel": "",
-  "Channel <1><0>{{ name }}</0></1> down<3>{\" \"}</3> <5></5>": "Channel <1><0>{{ name }}</0></1> down<3>{\" \"}</3> <5></5>",
+  "Channel <1><0>{{ name }}</0></1> <3>{{text}}</3><4>{\" \"}</4> {timestamp && <6></6>}": "Channel <1><0>{{ name }}</0></1> <3>{{text}}</3><4>{\" \"}</4> {timestamp && <6></6>}",
   "Channels": "",
-  "Channels <1><0>{{ names }}</0></1> down<3>{\" \"}</3> <5></5>": "Channels <1><0>{{ names }}</0></1> down<3>{\" \"}</3> <5></5>",
+  "Channels <1><0>{{ names }}</0></1> <3>{{text}}</3><4>{\" \"}</4> {timestamp && <6></6>}": "Channels <1><0>{{ names }}</0></1> <3>{{text}}</3><4>{\" \"}</4> {timestamp && <6></6>}",
   "Checking this box will make the survey accept written numbers as valid numeric responses, like \"one\" or \"fifty five\". Written numbers are supported up to one hundred (100).": "",
   "Choose a key for each language": "",
   "Choose the data you want to be able to access through a public link": "",