Feature/react bootstrap 4 (#38)

* Updated babel configuration

* Update style to SASS

* Update dependencies

* Update for new eslint rules and react-bootstrap

* Update jquery according to security alert

* Update devdep to ^3.0.0

Author: chunfantasy

.babelrc

@@ -1,12 +1,12 @@
 {
-  "presets": [ "react" ],
+  "presets": [ "@babel/preset-react" ],
   "plugins": [
     "add-module-exports",
-    "transform-class-properties",
-    "transform-es2015-destructuring",
-    "transform-es2015-modules-commonjs",
-    "transform-es2015-parameters",
-    "transform-es2015-spread",
-    "transform-object-rest-spread"
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-transform-modules-commonjs",
+    "@babel/plugin-transform-parameters",
+    "@babel/plugin-transform-spread",
+    "@babel/plugin-proposal-object-rest-spread"
   ]
 }

components/Chart.jsx

@@ -71,7 +71,9 @@ const arrayConverter = (arr, separate) => {
 };
 
 const Chart = props => {
-    const { rssi, rssiMax, animationDuration, yMin, yMax, separateFrequencies } = props;
+    const {
+        rssi, rssiMax, animationDuration, yMin, yMax, separateFrequencies,
+    } = props;
     const sep = separateFrequencies ? 'separated' : 'continuous';
     const rssiData = arrayConverter(rssi, separateFrequencies);
     const rssiMaxData = arrayConverter(rssiMax, separateFrequencies);

components/ControlPanel.jsx

@@ -37,7 +37,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactBootstrapSlider from 'react-bootstrap-slider';
-import { Checkbox, Button } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
 
 const ControlPanel = props => {
     const {
@@ -52,7 +53,7 @@ const ControlPanel = props => {
     } = props;
     const sliderDisabled = disabled ? 'disabled' : null;
     return (
-        <div >
+        <Form>
             Sweep Delay (ms)<br />
             <ReactBootstrapSlider
                 value={10}
@@ -93,20 +94,24 @@ const ControlPanel = props => {
                 ticks_labels={['10', '1000']}
                 disabled={sliderDisabled}
             />
-            <Checkbox
-                disabled={disabled}
-                onChange={event => onScanAdvertisementsToggle(event.target.checked)}
-            >
-                Advertisements only
-            </Checkbox>
-            <Checkbox
-                disabled={disabled}
-                onChange={event => onSeparateFrequencies(event.target.checked)}
-            >
-                Separate Frequencies
-            </Checkbox>
+            <Form.Group controlId="advCheck">
+                <Form.Check
+                    disabled={disabled}
+                    onChange={event => onScanAdvertisementsToggle(event.target.checked)}
+                    type="checkbox"
+                    label="Advertisements only"
+                />
+            </Form.Group>
+            <Form.Group controlId="freqCheck">
+                <Form.Check
+                    disabled={disabled}
+                    onChange={event => onSeparateFrequencies(event.target.checked)}
+                    type="checkbox"
+                    label="Separate Frequencies"
+                />
+            </Form.Group>
             <Button disabled={disabled} onClick={onToggleLED}>Toggle LED</Button>
-        </div>
+        </Form>
     );
 };
 

index.jsx

@@ -43,7 +43,7 @@ import Chart from './components/Chart';
 import ControlPanel from './components/ControlPanel';
 import reduceApp from './reducers/appReducer';
 import * as RssiActions from './actions/rssiActions';
-import './resources/css/index.less';
+import './resources/css/index.scss';
 
 const yRange = {
     min: -110,
@@ -75,17 +75,26 @@ export default {
         )
     ),
     decorateSidePanel: SidePanel => (
-        props => (
+        ({
+            onDelayChange,
+            onMaxScansChange,
+            onChannelScanRepeatChange,
+            onAnimationDurationChange,
+            onScanAdvertisementsToggle,
+            onSeparateFrequencies,
+            onToggleLED,
+            disabled,
+        }) => (
             <SidePanel>
                 <ControlPanel
-                    onDelayChange={props.onDelayChange}
-                    onMaxScansChange={props.onMaxScansChange}
-                    onChannelScanRepeatChange={props.onChannelScanRepeatChange}
-                    onAnimationDurationChange={props.onAnimationDurationChange}
-                    onScanAdvertisementsToggle={props.onScanAdvertisementsToggle}
-                    onSeparateFrequencies={props.onSeparateFrequencies}
-                    onToggleLED={props.onToggleLED}
-                    disabled={props.disabled}
+                    onDelayChange={onDelayChange}
+                    onMaxScansChange={onMaxScansChange}
+                    onChannelScanRepeatChange={onChannelScanRepeatChange}
+                    onAnimationDurationChange={onAnimationDurationChange}
+                    onScanAdvertisementsToggle={onScanAdvertisementsToggle}
+                    onSeparateFrequencies={onSeparateFrequencies}
+                    onToggleLED={onToggleLED}
+                    disabled={disabled}
                 />
             </SidePanel>
         )
@@ -95,13 +104,15 @@ export default {
         onDelayChange: delay => dispatch(RssiActions.setDelay(delay)),
         onMaxScansChange: maxScans => dispatch(RssiActions.setMaxScans(maxScans)),
         onChannelScanRepeatChange: scanRepeat => dispatch(
-            RssiActions.setScanRepeatTimes(scanRepeat)),
+            RssiActions.setScanRepeatTimes(scanRepeat),
+        ),
         onAnimationDurationChange: animationDuration => dispatch({
             type: 'RSSI_CHANGE_ANIMATION_DURATION',
             animationDuration,
         }),
         onScanAdvertisementsToggle: scanAdvertisementChannels => dispatch(
-            RssiActions.scanAdvertisementChannels(scanAdvertisementChannels)),
+            RssiActions.scanAdvertisementChannels(scanAdvertisementChannels),
+        ),
         onSeparateFrequencies: separateFrequencies => dispatch({
             type: 'RSSI_SEPARATE_FREQUENCIES',
             separateFrequencies,
@@ -112,7 +123,7 @@ export default {
         disabled: state.app.port === null,
         ...props,
     }),
-    mapSerialPortSelectorState: (state, props) => ({
+    mapDeviceSelectorState: (state, props) => ({
         portIndicatorStatus: (state.app.port !== null) ? 'on' : 'off',
         ...props,
     }),

package.json

@@ -31,12 +31,12 @@
     "clean-modules": "rimraf \"node_modules/!(rimraf|.bin)\""
   },
   "devDependencies": {
-    "bootstrap": "4.1.0",
-    "chart.js": "2.7.2",
-    "jquery": "3.3.1",
-    "pc-nrfconnect-devdep": "git+https://github.com/NordicSemiconductor/pc-nrfconnect-devdep.git#semver:^1.3.0",
-    "react-bootstrap-slider": "2.1.4",
-    "react-chartjs-2": "2.7.0"
+    "bootstrap": "4.3.1",
+    "chart.js": "2.7.3",
+    "jquery": "3.4.0",
+    "pc-nrfconnect-devdep": "git+https://github.com/NordicSemiconductor/pc-nrfconnect-devdep.git#semver:^3.0.0",
+    "react-bootstrap-slider": "2.2.2",
+    "react-chartjs-2": "2.7.4"
   },
   "dependencies": {},
   "engines": {