feat(channels): add channel refresh button

app/components/Activity/ActivityActions/ActivityRefresh.js

@@ -1,59 +1,19 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { injectIntl } from 'react-intl'
-import styled from 'styled-components'
-import delay from 'lib/utils/delay'
-import { Button, Spinner } from 'components/UI'
 import Sync from 'components/Icon/Sync'
+import { ActionButton } from 'components/UI'
 import messages from './messages'
 
-const StyledButton = styled(Button)`
-  color: ${props => (props.active ? props.theme.colors.lightningOrange : null)};
-  &:hover {
-    color: ${props => props.theme.colors.lightningOrange};
-  }
-`
-StyledButton.propTypes = {
-  active: PropTypes.bool,
-}
-
-const ActivityRefresh = injectIntl(({ intl, onClick, ...rest }) => {
-  const [status, setStatus] = useState(null)
-  const buttonRef = useRef()
-
-  async function fetchActivity() {
-    await onClick()
-    await delay(1000)
-    setStatus('done')
-  }
-
-  useEffect(() => {
-    if (status === 'fetching') {
-      fetchActivity()
-    } else if (status === 'done') {
-      buttonRef.current.blur()
-    }
-  }, [status])
-
-  function handleClick() {
-    setStatus('fetching')
-  }
-
-  return (
-    <StyledButton
-      ref={buttonRef}
-      active={status === 'fetching'}
-      className="hint--bottom-left"
-      data-hint={intl.formatMessage({ ...messages.refresh_button_hint })}
-      onClick={handleClick}
-      size="small"
-      variant="secondary"
-      {...rest}
-    >
-      {status === 'fetching' ? <Spinner /> : <Sync height="16px" width="16px" />}
-    </StyledButton>
-  )
-})
+const ActivityRefresh = injectIntl(({ intl, onClick, ...rest }) => (
+  <ActionButton
+    hint={intl.formatMessage({ ...messages.refresh_button_hint })}
+    onClick={onClick}
+    {...rest}
+  >
+    <Sync height="16px" width="16px" />
+  </ActionButton>
+))
 
 ActivityRefresh.propTypes = {
   onClick: PropTypes.func.isRequired,

app/components/Channels/ChannelFilter.js

@@ -20,6 +20,7 @@ const ChannelFilter = ({ changeFilter, filter, filters, ...rest }) => {
         initialSelectedItem={filter}
         items={items}
         onValueSelected={changeFilter}
+        width={1}
       />
     </Form>
   )

app/components/Channels/Channels.js

@@ -21,6 +21,7 @@ class Channels extends React.Component {
     channels: PropTypes.array,
     channelViewMode: PropTypes.string.isRequired,
     currencyName: PropTypes.string.isRequired,
+    fetchChannels: PropTypes.func.isRequired,
     filter: PropTypes.string.isRequired,
     filters: PropTypes.array.isRequired,
     networkInfo: PropTypes.shape({
@@ -50,6 +51,7 @@ class Channels extends React.Component {
       changeFilter,
       channelViewMode,
       currencyName,
+      fetchChannels,
       filter,
       filters,
       networkInfo,
@@ -69,6 +71,7 @@ class Channels extends React.Component {
             channelBalance={channelBalance}
             channels={allChannels}
             channelViewMode={channelViewMode}
+            fetchChannels={fetchChannels}
             filter={filter}
             filters={filters}
             openModal={openModal}

app/components/Channels/ChannelsActions.js

@@ -5,10 +5,12 @@ import { Flex } from 'rebass'
 import { Button } from 'components/UI'
 import ChannelFilter from './ChannelFilter'
 import ChannelSearch from './ChannelSearch'
+import ChannelsRefresh from './ChannelsRefresh'
 import ChannelsViewSwitcher from './ChannelsViewSwitcher'
 import messages from './messages'
 
 const ChannelsActions = ({
+  fetchChannels,
   filter,
   filters,
   searchQuery,
@@ -40,6 +42,7 @@ const ChannelsActions = ({
       ml={3}
       setChannelViewMode={setChannelViewMode}
     />
+    <ChannelsRefresh bg="blue" ml={2} onClick={fetchChannels} />
 
     <Button ml="auto" onClick={() => openModal('CHANNEL_CREATE')}>
       <FormattedMessage {...messages.create_new_button_text} />
@@ -50,6 +53,7 @@ const ChannelsActions = ({
 ChannelsActions.propTypes = {
   changeFilter: PropTypes.func.isRequired,
   channelViewMode: PropTypes.string.isRequired,
+  fetchChannels: PropTypes.func.isRequired,
   filter: PropTypes.string.isRequired,
   filters: PropTypes.array.isRequired,
   intl: intlShape.isRequired,

app/components/Channels/ChannelsHeader.js

@@ -9,6 +9,7 @@ const ChannelsHeader = ({
   channelBalance,
   channelViewMode,
   changeFilter,
+  fetchChannels,
   filter,
   filters,
   updateChannelSearchQuery,
@@ -22,6 +23,7 @@ const ChannelsHeader = ({
     <ChannelsActions
       changeFilter={changeFilter}
       channelViewMode={channelViewMode}
+      fetchChannels={fetchChannels}
       filter={filter}
       filters={filters}
       openModal={openModal}
@@ -37,6 +39,7 @@ ChannelsHeader.propTypes = {
   channelBalance: PropTypes.number.isRequired,
   channels: PropTypes.array,
   channelViewMode: PropTypes.string.isRequired,
+  fetchChannels: PropTypes.func.isRequired,
   filter: PropTypes.string.isRequired,
   filters: PropTypes.array.isRequired,
   openModal: PropTypes.func.isRequired,

app/components/Channels/ChannelsRefresh.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { injectIntl } from 'react-intl'
+import Sync from 'components/Icon/Sync'
+import { ActionButton } from 'components/UI'
+import messages from './messages'
+
+const ChannelsRefresh = injectIntl(({ intl, onClick, ...rest }) => (
+  <ActionButton
+    hint={intl.formatMessage({ ...messages.refresh_button_hint })}
+    onClick={onClick}
+    {...rest}
+  >
+    <Sync height="16px" width="16px" />
+  </ActionButton>
+))
+
+ChannelsRefresh.propTypes = {
+  onClick: PropTypes.func.isRequired,
+}
+
+export default ChannelsRefresh

app/components/Channels/index.js

@@ -23,6 +23,7 @@ export ChannelSearch from './ChannelSearch'
 export ChannelStatus from './ChannelStatus'
 export ChannelsHeader from './ChannelsHeader'
 export ChannelsInfo from './ChannelsInfo'
+export ChannelsRefresh from './ChannelsRefresh'
 export ChannelSummaryList from './ChannelSummaryList'
 export ChannelSummaryListItem from './ChannelSummaryListItem'
 export ChannelsViewSwitcher from './ChannelsViewSwitcher'

app/components/Channels/messages.js

@@ -84,4 +84,5 @@ export default defineMessages({
   node_search_description: 'Search for nodes by name, public key, or paste their pubkey@host',
   node_search_results_header: '{count, plural, =0 {No results}  other {Search results ({count})}}',
   node_suggestions_title: 'Suggested Nodes',
+  refresh_button_hint: 'Refresh channels list',
 })

app/components/UI/ActionButton.js

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import delay from 'lib/utils/delay'
+import Button from './Button'
+import Spinner from './Spinner'
+
+const StyledButton = styled(Button)`
+  color: ${props => (props.active ? props.theme.colors.lightningOrange : null)};
+  &:hover {
+    color: ${props => props.theme.colors.lightningOrange};
+  }
+`
+StyledButton.propTypes = {
+  active: PropTypes.bool,
+}
+
+const ActionButton = ({ children, hint, onClick, timeout, ...rest }) => {
+  const [status, setStatus] = useState(null)
+  const buttonRef = useRef()
+
+  async function triggerAction() {
+    await onClick()
+    await delay(timeout)
+    setStatus('done')
+  }
+
+  useEffect(() => {
+    if (status === 'fetching') {
+      triggerAction()
+    } else if (status === 'done') {
+      buttonRef.current.blur()
+    }
+  }, [status])
+
+  function handleClick() {
+    setStatus('fetching')
+  }
+
+  return (
+    <StyledButton
+      ref={buttonRef}
+      active={status === 'fetching'}
+      className="hint--bottom-left"
+      data-hint={hint}
+      onClick={handleClick}
+      size="small"
+      variant="secondary"
+      {...rest}
+    >
+      {status === 'fetching' ? <Spinner /> : children}
+    </StyledButton>
+  )
+}
+
+ActionButton.propTypes = {
+  children: PropTypes.node,
+  hint: PropTypes.node,
+  onClick: PropTypes.func.isRequired,
+  timeout: PropTypes.number,
+}
+
+ActionButton.defaultProps = {
+  timeout: 1000,
+}
+
+export default ActionButton

app/components/UI/index.js

@@ -1,4 +1,5 @@
 export ActionBar from './ActionBar'
+export ActionButton from './ActionButton'
 export BackgroundPrimary from './BackgroundPrimary'
 export BackgroundSecondary from './BackgroundSecondary'
 export BackgroundTertiary from './BackgroundTertiary'

app/containers/Channels.js

@@ -4,6 +4,7 @@ import { openModal } from 'reducers/modal'
 import {
   changeFilter,
   channelsSelectors,
+  fetchChannels,
   showCloseChannelDialog,
   setSelectedChannel,
   setChannelViewMode,
@@ -32,6 +33,7 @@ const mapDispatchToProps = {
   setChannelViewMode,
   openModal,
   updateChannelSearchQuery,
+  fetchChannels,
 }
 
 export default connect(