feature(cardview): create card component

app/components/Channels/CardChannel.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { btc } from 'utils'
+import styles from './CardChannel.scss'
+
+const CardChannel = ({ channel }) => (
+  <li className={styles.channel}>
+    CardChannel
+  </li>
+)
+
+CardChannel.propTypes = {
+  
+}
+
+export default CardChannel

app/components/Channels/CardChannel.scss

@@ -0,0 +1,6 @@
+.channel {
+  width: 40%;
+  margin: 0 5% 20px 5%;
+  height: 500px;
+  background: red;
+}

app/reducers/channels.js

@@ -21,6 +21,10 @@ export const CLOSING_CHANNEL = 'CLOSING_CHANNEL'
 export const CLOSING_SUCCESSFUL = 'CLOSING_SUCCESSFUL'
 export const CLOSING_FAILURE = 'CLOSING_FAILURE'
 
+export const UPDATE_SEARCH_QUERY = 'UPDATE_SEARCH_QUERY'
+
+export const SET_VIEW_TYPE = 'SET_VIEW_TYPE'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -69,6 +73,20 @@ export function openingFailure() {
   }
 }
 
+export function updateChannelSearchQuery(searchQuery) {
+  return {
+    type: UPDATE_SEARCH_QUERY,
+    searchQuery
+  }
+}
+
+export function setViewType(viewType) {
+  return {
+    type: SET_VIEW_TYPE,
+    viewType
+  }
+}
+
 // Send IPC event for peers
 export const fetchChannels = () => async (dispatch) => {
   dispatch(getChannels())
@@ -180,7 +198,11 @@ const ACTION_HANDLERS = {
   [OPENING_CHANNEL]: state => ({ ...state, openingChannel: true }),
   [OPENING_FAILURE]: state => ({ ...state, openingChannel: false }),
 
-  [CLOSING_CHANNEL]: state => ({ ...state, closingChannel: true })
+  [CLOSING_CHANNEL]: state => ({ ...state, closingChannel: true }),
+  
+  [UPDATE_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery }),
+  
+  [SET_VIEW_TYPE]: (state, { viewType }) => ({ ...state, viewType })
 }
 
 const channelsSelectors = {}
@@ -189,6 +211,7 @@ const channelsSelector = state => state.channels.channels
 const pendingOpenChannelsSelector = state => state.channels.pendingChannels.pending_open_channels
 const pendingClosedChannelsSelector = state => state.channels.pendingChannels.pending_closing_channels
 const pendingForceClosedChannelsSelector = state => state.channels.pendingChannels.pending_force_closing_channels
+const channelSearchQuerySelector = state => state.channels.searchQuery
 
 channelsSelectors.channelModalOpen = createSelector(
   channelSelector,
@@ -200,8 +223,11 @@ channelsSelectors.allChannels = createSelector(
   pendingOpenChannelsSelector,
   pendingClosedChannelsSelector,
   pendingForceClosedChannelsSelector,
-  (channels, pendingOpenChannels, pendingClosedChannels, pendingForcedClosedChannels) => (
+  channelSearchQuerySelector,
-    [...channels, ...pendingOpenChannels, ...pendingClosedChannels, ...pendingForcedClosedChannels]
+  (channels, pendingOpenChannels, pendingClosedChannels, pendingForcedClosedChannels, searchQuery) => (
+    [...channels, ...pendingOpenChannels, ...pendingClosedChannels, ...pendingForcedClosedChannels].filter(channel => 
+      channel.remote_pubkey.includes(searchQuery) || channel.channel_point.includes(searchQuery)
+    )
   )
 )
 
@@ -227,7 +253,9 @@ const initialState = {
     push_amt: ''
   },
   openingChannel: false,
-  closingChannel: false
+  closingChannel: false,
+  searchQuery: '',
+  viewType: 0
 }
 
 export default function channelsReducer(state = initialState, action) {

app/routes/channels/components/Channels.js

@@ -5,6 +5,7 @@ import { FaAlignJustify, FaThLarge } from 'react-icons/lib/fa'
 import { MdSearch } from 'react-icons/lib/md'
 
 import Channel from 'components/Channels/Channel'
+import CardChannel from 'components/Channels/CardChannel'
 import ChannelForm from 'components/ChannelForm'
 
 import styles from './Channels.scss'
@@ -19,8 +20,10 @@ class Channels extends Component {
 
   render() {
     const {
-      channels: { channels },
+      channels: { channels, searchQuery, viewType },
       allChannels,
+      updateChannelSearchQuery,
+      setViewType,
       
       closeChannelForm,
       openChannelForm,
@@ -45,20 +48,20 @@ class Channels extends Component {
             <MdSearch />
           </label>
           <input
-            value={''}
+            value={searchQuery}
-            onChange={event => console.log('event: ', event)}
+            onChange={event => updateChannelSearchQuery(event.target.value)}
             className={`${styles.text} ${styles.input}`}
-            placeholder='Search channels by funding transaction, channel id, remote public key, etc'
+            placeholder='Search channels by funding transaction or remote public key'
             type='text'
             id='channelSearch'
           />
         </div>
         <header className={styles.header}>
           <div className={styles.layoutsContainer}>
-            <span className={styles.active}>
+            <span className={viewType === 0 && styles.active} onClick={() => setViewType(0)}>
               <FaAlignJustify />
             </span>
-            <span>
+            <span className={viewType === 1 && styles.active} onClick={() => setViewType(1)}>
               <FaThLarge />
             </span>
           </div>
@@ -70,9 +73,8 @@ class Channels extends Component {
         </header>
 
         <div className={styles.channels}>
-          <ul>
+          <ul className={viewType === 1 && styles.cardsContainer}>
-          {
+          { viewType === 0 && allChannels.map((channel, index) => {
-            allChannels.map((channel, index) => {
               return (
                 <Channel
                   key={index}
@@ -84,6 +86,14 @@ class Channels extends Component {
               )
             })
           }
+          { viewType === 1 && allChannels.map((channel, index) => {
+              return (
+                <CardChannel key={index}>
+                  card channel
+                </CardChannel>
+              )
+            })
+          }
           </ul>
         </div>
       </div>

app/routes/channels/components/Channels.scss

@@ -1,9 +1,5 @@
 @import '../../../variables.scss';
 
-.container {
-
-}
-
 .search {
   height: 75px;
   padding: 2px 25px;
@@ -73,4 +69,11 @@
 
 .channels {
   padding: 10px 40px 40px 40px;
+
+  .cardsContainer {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+  }
 }

app/routes/channels/containers/ChannelsContainer.js

@@ -4,6 +4,8 @@ import { connect } from 'react-redux'
 import {
   fetchChannels,
   openChannel,
+  updateChannelSearchQuery,
+  setViewType,
 
   channelsSelectors
 } from 'reducers/channels'
@@ -27,6 +29,8 @@ import Channels from '../components/Channels'
 const mapDispatchToProps = {
   fetchChannels,
   openChannel,
+  updateChannelSearchQuery,
+  setViewType,
   
   openChannelForm,
   closeChannelForm,