Refactor Device importer class component and others

pkg/webui/components/toast/index.js

@@ -22,41 +22,39 @@ import createToast from './toast'
 import './react-toastify.styl'
 import style from './toast.styl'
 
-class ToastContainer extends React.Component {
-  static propTypes = {
-    autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-    closeButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
-    closeOnClick: PropTypes.bool,
-    hideProgressBar: PropTypes.bool,
-    limit: PropTypes.number,
-    pauseOnFocusLoss: PropTypes.bool,
-    pauseOnHover: PropTypes.bool,
-    position: PropTypes.oneOf([
-      'bottom-right',
-      'bottom-left',
-      'top-right',
-      'top-left',
-      'top-center',
-      'bottom-center',
-    ]),
-    transition: PropTypes.func,
-  }
-
-  static defaultProps = {
-    autoClose: undefined,
-    position: 'bottom-right',
-    closeButton: false,
-    hideProgressBar: true,
-    pauseOnHover: true,
-    closeOnClick: true,
-    pauseOnFocusLoss: true,
-    limit: 2,
-    transition: cssTransition({ enter: style.slideInRight, exit: style.slideOutRight }),
-  }
+const ToastContainer = ({ ...props }) => (
+  <Container toastClassName={style.toast} bodyClassName={style.body} {...props} />
+)
+
+ToastContainer.propTypes = {
+  autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+  closeButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
+  closeOnClick: PropTypes.bool,
+  hideProgressBar: PropTypes.bool,
+  limit: PropTypes.number,
+  pauseOnFocusLoss: PropTypes.bool,
+  pauseOnHover: PropTypes.bool,
+  position: PropTypes.oneOf([
+    'bottom-right',
+    'bottom-left',
+    'top-right',
+    'top-left',
+    'top-center',
+    'bottom-center',
+  ]),
+  transition: PropTypes.func,
+}
 
-  render() {
-    return <Container toastClassName={style.toast} bodyClassName={style.body} {...this.props} />
-  }
+ToastContainer.defaultProps = {
+  autoClose: undefined,
+  position: 'bottom-right',
+  closeButton: false,
+  hideProgressBar: true,
+  pauseOnHover: true,
+  closeOnClick: true,
+  pauseOnFocusLoss: true,
+  limit: 2,
+  transition: cssTransition({ enter: style.slideInRight, exit: style.slideOutRight }),
 }
 
 const toast = createToast()

pkg/webui/console/components/device-map/index.js

@@ -20,24 +20,23 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 
 import locationToMarkers from '@console/lib/location-to-markers'
 
-export default class DeviceMap extends React.Component {
-  static propTypes = {
-    device: PropTypes.device.isRequired,
-  }
-
-  render() {
-    const { device } = this.props
-    const { device_id } = device.ids
-    const { application_id } = device.ids.application_ids
-
-    const markers = locationToMarkers(device.locations)
-
-    return (
-      <MapWidget
-        id="device-map-widget"
-        markers={markers}
-        path={`/applications/${application_id}/devices/${device_id}/location`}
-      />
-    )
-  }
+const DeviceMap = ({ device }) => {
+  const { device_id } = device.ids
+  const { application_id } = device.ids.application_ids
+
+  const markers = locationToMarkers(device.locations)
+
+  return (
+    <MapWidget
+      id="device-map-widget"
+      markers={markers}
+      path={`/applications/${application_id}/devices/${device_id}/location`}
+    />
+  )
 }
+
+DeviceMap.propTypes = {
+  device: PropTypes.device.isRequired,
+}
+
+export default DeviceMap

pkg/webui/console/components/gateway-map/index.js

@@ -18,31 +18,30 @@ import MapWidget from '@ttn-lw/components/map/widget'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
-export default class GatewayMap extends React.Component {
-  static propTypes = {
-    gateway: PropTypes.gateway.isRequired,
-  }
-
-  render() {
-    const { gateway } = this.props
-    const { gateway_id } = gateway.ids
-
-    const markers =
-      gateway.antennas && gateway.antennas.length > 0 && gateway.antennas[0].location
-        ? gateway.antennas.map(location => ({
-            position: {
-              latitude: location.location.latitude || 0,
-              longitude: location.location.longitude || 0,
-            },
-          }))
-        : []
-
-    return (
-      <MapWidget
-        id="gateway-map-widget"
-        markers={markers}
-        path={`/gateways/${gateway_id}/location`}
-      />
-    )
-  }
+const GatewayMap = ({ gateway }) => {
+  const { gateway_id } = gateway.ids
+
+  const markers =
+    gateway.antennas && gateway.antennas.length > 0 && gateway.antennas[0].location
+      ? gateway.antennas.map(location => ({
+          position: {
+            latitude: location.location.latitude || 0,
+            longitude: location.location.longitude || 0,
+          },
+        }))
+      : []
+
+  return (
+    <MapWidget
+      id="gateway-map-widget"
+      markers={markers}
+      path={`/gateways/${gateway_id}/location`}
+    />
+  )
 }
+
+GatewayMap.propTypes = {
+  gateway: PropTypes.gateway.isRequired,
+}
+
+export default GatewayMap