diff --git a/pkg/webui/console/views/device-location/index.js b/pkg/webui/console/views/device-location/index.js
index 6549f8bb0ca..b72852b30fd 100644
--- a/pkg/webui/console/views/device-location/index.js
+++ b/pkg/webui/console/views/device-location/index.js
@@ -1,4 +1,4 @@
-// Copyright © 2020 The Things Network Foundation, The Things Industries B.V.
+// Copyright © 2023 The Things Network Foundation, The Things Industries B.V.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
@@ -12,23 +12,21 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import React from 'react'
-import { connect } from 'react-redux'
+import React, { useCallback } from 'react'
import { Col, Row, Container } from 'react-grid-system'
-import bind from 'autobind-decorator'
import { defineMessages } from 'react-intl'
+import { useSelector, useDispatch } from 'react-redux'
import Breadcrumb from '@ttn-lw/components/breadcrumbs/breadcrumb'
-import { withBreadcrumb } from '@ttn-lw/components/breadcrumbs/context'
+import { useBreadcrumbs } from '@ttn-lw/components/breadcrumbs/context'
import IntlHelmet from '@ttn-lw/lib/components/intl-helmet'
import Message from '@ttn-lw/lib/components/message'
import LocationForm from '@console/components/location-form'
-import attachPromise from '@ttn-lw/lib/store/actions/attach-promise'
import sharedMessages from '@ttn-lw/lib/shared-messages'
-import PropTypes from '@ttn-lw/lib/prop-types'
+import attachPromise from '@ttn-lw/lib/store/actions/attach-promise'
import locationToMarkers from '@console/lib/location-to-markers'
@@ -44,76 +42,69 @@ const m = defineMessages({
setDeviceLocation: 'Set end device location manually',
})
-@connect(
- state => ({
- device: selectSelectedDevice(state),
- appId: selectSelectedApplicationId(state),
- devId: selectSelectedDeviceId(state),
- }),
- { updateDevice: attachPromise(updateDevice) },
-)
-@withBreadcrumb('device.single.location', props => {
- const { devId, appId } = props
- return (
+const DeviceGeneralSettings = () => {
+ const dispatch = useDispatch()
+ const appId = useSelector(selectSelectedApplicationId)
+ const devId = useSelector(selectSelectedDeviceId)
+ const device = useSelector(selectSelectedDevice)
+
+ useBreadcrumbs(
+ 'device.single.location',
+ />,
+ )
+
+ const handleSubmit = useCallback(
+ async location => {
+ const { locations } = device
+
+ await dispatch(
+ attachPromise(updateDevice(appId, devId, { locations: { ...locations, user: location } })),
+ )
+ },
+ [appId, devId, device, dispatch],
+ )
+
+ const handleDelete = useCallback(
+ async deleteAll => {
+ const { locations } = device
+ const { user, ...nonUserLocations } = locations || {}
+
+ const newLocations = {
+ ...(!deleteAll ? nonUserLocations : undefined),
+ }
+
+ return dispatch(attachPromise(updateDevice(appId, devId, { locations: newLocations })))
+ },
+ [appId, devId, device, dispatch],
+ )
+
+ const { user, ...nonUserLocations } = device.locations || {}
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
)
-})
-export default class DeviceGeneralSettings extends React.Component {
- static propTypes = {
- appId: PropTypes.string.isRequired,
- devId: PropTypes.string.isRequired,
- device: PropTypes.device.isRequired,
- updateDevice: PropTypes.func.isRequired,
- }
-
- @bind
- async handleSubmit(location) {
- const { device, appId, devId, updateDevice } = this.props
-
- await updateDevice(appId, devId, { locations: { ...device.locations, user: location } })
- }
-
- @bind
- async handleDelete(deleteAll) {
- const { device, devId, appId, updateDevice } = this.props
-
- const { user, ...nonUserLocations } = device.locations || {}
- const newLocations = {
- ...(!deleteAll ? nonUserLocations : undefined),
- }
-
- return updateDevice(appId, devId, { locations: newLocations })
- }
-
- render() {
- const { device, devId } = this.props
-
- const { user, ...nonUserLocations } = device.locations || {}
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- )
- }
}
+
+export default DeviceGeneralSettings