Larger modal for wifiscans

src/components/WifiChannels/WifiChannelCard.js

@@ -0,0 +1,35 @@
+import {
+    CCard,
+    CCardTitle,
+    CCardBody,
+    CDataTable,
+    CCardHeader
+  } from '@coreui/react';
+import React from 'react';
+import 'react-widgets/styles.css';
+
+const WifiChannelCard = ({ channel }) => {
+    const columns = [
+        { key: 'SSID', _style: { width: '70%' }},
+        { key: 'Signal' },
+    ];
+
+    return (
+        <CCard>
+            <CCardHeader>
+                <CCardTitle>
+                    Channel #{channel.channel}
+                </CCardTitle>
+            </CCardHeader>
+            <CCardBody>
+                <CDataTable
+                    items={channel.devices}
+                    fields={columns}
+                    style={{ color: 'white' }}
+                />
+            </CCardBody>
+        </CCard>
+    );
+}
+
+export default WifiChannelCard;

src/components/WifiChannels/WifiChannelTable.js

@@ -0,0 +1,30 @@
+import {
+    CCol,
+    CRow
+  } from '@coreui/react';
+import React from 'react';
+import WifiChannelCard from './WifiChannelCard';
+
+const WifiChannelTable = ({channels}) => (
+    <CRow>
+        <CCol>
+            {
+                channels.map((channel, index) => {
+                    if(index % 2 === 0) return <WifiChannelCard channel={channel}/>;
+                    return <></>
+                })
+            }
+        </CCol>
+        <CCol>
+            {
+                channels.map((channel, index) => {
+                    if(index % 2 === 1) return <WifiChannelCard channel={channel}/>;
+                    return <></>
+                })
+            }
+        </CCol>
+    </CRow>
+)
+
+
+export default WifiChannelTable;

src/widgets/WifiScanModalWidget.js

@@ -10,15 +10,11 @@ import {
     CFormGroup,
     CInputRadio,
     CLabel,
-    CForm,
-    CCard,
-    CCardTitle,
-    CCardBody,
-    CDataTable,
-    CCardHeader
+    CForm
   } from '@coreui/react';
   import React, { useState, useEffect } from 'react';
   import { useSelector } from 'react-redux';
+  import WifiChannelTable from '../components/WifiChannels/WifiChannelTable';
   import 'react-widgets/styles.css';
   import { getToken } from '../utils/authHelper';
   import axiosInstance from '../utils/axiosInstance';
@@ -97,8 +93,15 @@ import {
         .post(`/device/${selectedDeviceId}/wifiscan`, parameters, { headers })
         .then((response) => {
             const scanList = response.data.results.status.scan.scan;
-            setChannelList(parseThroughList(scanList));
-            setHadSuccess(true);
+
+            if(scanList){
+              setChannelList(parseThroughList(scanList));
+              setHadSuccess(true);
+            }
+            else{
+              setHadFailure(true);
+            }
+            
         })
         .catch((error) => {
           setHadFailure(true);
@@ -111,13 +114,8 @@ import {
         });
     };
 
-    const columns = [
-        { key: 'SSID', _style: { width: '70%' }},
-        { key: 'Signal' },
-    ];
-  
     return (
-      <CModal show={show} onClose={toggleModal}>
+      <CModal size="lg" show={show} onClose={toggleModal}>
         <CModalHeader closeButton>
           <CModalTitle>Wifi Scan</CModalTitle>
         </CModalHeader>
@@ -138,30 +136,13 @@ import {
             </CForm>
           </CRow>
           <div style={{marginTop: '3%'}} hidden={!hadSuccess && !hadFailure}>
-            {
-                channelList.map((channel) => 
-                        <CCard>
-                            <CCardHeader>
-                                <CCardTitle>
-                                    Channel #{channel.channel}
-                                </CCardTitle>
-                            </CCardHeader>
-                            <CCardBody>
-                                <CDataTable
-                                    items={channel.devices}
-                                    fields={columns}
-                                    style={{ color: 'white' }}
-                                />
-                            </CCardBody>
-                        </CCard>
-                )
-            }
+            <WifiChannelTable channels={channelList}/>
           </div>
         </CModalBody>
         <CModalFooter>
           <div hidden={!checkingIfSure}>Are you sure?</div>
           <CButton hidden={checkingIfSure} color="primary" onClick={() => confirmingIfSure()}>
-            Scan
+            {(hadSuccess || hadFailure) ? 'Re-Scan' : 'Scan'}
           </CButton>
           <CButton
             hidden={!checkingIfSure}