Skip to content

Commit

Permalink
console: Refactor pubsub form component and implement suggestions
Browse files Browse the repository at this point in the history
  • Loading branch information
@PavelJankoski
PavelJankoski committed Nov 23, 2023
1 parent 27efc6a commit 1ad3498
Show file tree
Hide file tree
Showing 6 changed files with 342 additions and 398 deletions.
19 changes: 7 additions & 12 deletions config/storybook/preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,27 +23,22 @@ import { createMemoryHistory } from 'history'
import messages from '@ttn-lw/locales/en.json'
import backendMessages from '@ttn-lw/locales/.backend/en.json'

import { EnvProvider } from '@ttn-lw/lib/components/env'

import '../../pkg/webui/styles/main.styl'
import 'focus-visible/dist/focus-visible'
import createStore from './store'
import Center from './center'
import env from './env'

const history = createMemoryHistory()
const store = createStore(history)

export const decorators = [
Story => (
<EnvProvider env={env}>
<Provider store={store}>
<IntlProvider key="key" messages={{ ...messages, ...backendMessages }} locale="en-US">
<ConnectedRouter history={history}>
<Center>{Story()}</Center>
</ConnectedRouter>
</IntlProvider>
</Provider>
</EnvProvider>
<Provider store={store}>
<IntlProvider key="key" messages={{ ...messages, ...backendMessages }} locale="en-US">
<ConnectedRouter history={history}>
<Center>{Story()}</Center>
</ConnectedRouter>
</IntlProvider>
</Provider>
),
]
22 changes: 9 additions & 13 deletions pkg/webui/console.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import sentryConfig from '@ttn-lw/constants/sentry'
import { BreadcrumbsProvider } from '@ttn-lw/components/breadcrumbs/context'
import Header from '@ttn-lw/components/header'

import { EnvProvider } from '@ttn-lw/lib/components/env'
import { ErrorView } from '@ttn-lw/lib/components/error-view'
import { FullViewError } from '@ttn-lw/lib/components/full-view-error'
import Init from '@ttn-lw/lib/components/init'
Expand All @@ -33,7 +32,6 @@ import Logo from '@console/containers/logo'

import App from '@console/views/app'

import env from '@ttn-lw/lib/env'
import { selectApplicationRootPath, selectSentryDsnConfig } from '@ttn-lw/lib/selectors/env'

import createStore from './console/store'
Expand All @@ -58,17 +56,15 @@ const errorRender = error => (

DOM.render(
<ErrorView errorRender={errorRender}>
<EnvProvider env={env}>
<Provider store={store}>
<WithLocale>
<Init>
<BreadcrumbsProvider>
<App history={history} />
</BreadcrumbsProvider>
</Init>
</WithLocale>
</Provider>
</EnvProvider>
<Provider store={store}>
<WithLocale>
<Init>
<BreadcrumbsProvider>
<App history={history} />
</BreadcrumbsProvider>
</Init>
</WithLocale>
</Provider>
</ErrorView>,
rootElement,
)
248 changes: 124 additions & 124 deletions pkg/webui/console/components/location-form/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,8 @@ const LocationForm = props => {
} = props

const form = useRef(null)
const [latitude, setLatitude] = useState(defaultLocation[0])
const [longitude, setLongitude] = useState(defaultLocation[1])
const [latitude, setLatitude] = useState(props.initialValues.latitude)
const [longitude, setLongitude] = useState(props.initialValues.longitude)
const [zoom, setZoom] = useState(14)
const [error, setError] = useState(undefined)
const [mapCenter, setMapCenter] = useState(undefined)
Expand All @@ -123,39 +123,41 @@ const LocationForm = props => {
markers.push({ position: { longitude, latitude } })
}

useEffect(() => {
if (entryExists) {
setLatitude(initialValues.latitude)
setLongitude(initialValues.longitude)
setMapCenter([initialValues.latitude, initialValues.longitude])
}
}, [entryExists, initialValues.latitude, initialValues.longitude])

useEffect(() => {
if (!hasLocationSet(initialValues) && additionalMarkers.length === 0) {
if ('geolocation' in navigator) {
const getCurrentLocation = useCallback(async () => {
let newState = { mapCenter: defaultLocation }
if (
!hasLocationSet(initialValues) &&
additionalMarkers.length === 0 &&
'geolocation' in navigator
) {
newState = await new Promise(resolve => {
navigator.geolocation.getCurrentPosition(
position => {
const latitude = isNaN(position.coords.latitude)
? defaultLocation[0]
: position.coords.latitude
const longitude = isNaN(position.coords.longitude)
? defaultLocation[1]
: position.coords.longitude
setLatitude(latitude)
setLongitude(longitude)
setMapCenter([latitude, longitude])
resolve({
mapCenter: [
isNaN(position.coords.latitude) ? defaultLocation[0] : position.coords.latitude,
isNaN(position.coords.longitude) ? defaultLocation[1] : position.coords.longitude,
],
})
},
() => {
setMapCenter(defaultLocation)
setZoom(2)
resolve({ mapCenter: defaultLocation, zoom: 2 })
},
)
}
})
}
setLoading(false)

return newState
}, [additionalMarkers.length, initialValues])

useEffect(() => {
getCurrentLocation().then(res => {
setMapCenter(res.mapCenter)
setZoom(res.zoom ?? 2)
setLoading(false)
})
}, [getCurrentLocation])

const handleSubmit = useCallback(
async (values, { setSubmitting }) => {
setError(undefined)
Expand Down Expand Up @@ -245,106 +247,104 @@ const LocationForm = props => {
}, [deleteAll, entityId, onDelete])

return (
<React.Fragment>
<Form
error={error}
validateOnChange
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
formikRef={form}
>
<Form.SubTitle title={formTitle} />
{children}
<Message content={sharedMessages.location} component="h4" className="mb-cs-xs mt-0" />
{!entryExists && <Notification content={noLocationSetInfo} info small />}
<Overlay loading={loading} visible={loading} spinnerMessage={m.loadingLocation}>
<LocationMap
widget
leafletConfig={{ zoom, minZoom: 1 }}
mapCenter={mapCenter}
markers={markers}
onClick={handleClick}
clickable
centerOnMarkers
/>
</Overlay>
<Message
content={updatesDisabled ? m.mapDescriptionDisabled : m.mapDescription}
component="p"
className="p-0 mt-cs-xs mb-cs-l tc-subtle-gray"
/>
{updatesDisabled && disabledInfo && <Notification content={disabledInfo} info small />}
<Form.Field
type="number"
step="any"
title={sharedMessages.latitude}
description={sharedMessages.latitudeDesc}
name="latitude"
component={Input}
required={!updatesDisabled}
disabled={updatesDisabled}
onBlur={handleLatitudeChange}
/>
<Form.Field
type="number"
step="any"
title={sharedMessages.longitude}
description={sharedMessages.longitudeDesc}
name="longitude"
component={Input}
required={!updatesDisabled}
disabled={updatesDisabled}
onBlur={handleLongitudeChange}
<Form
error={error}
validateOnChange
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
formikRef={form}
>
<Form.SubTitle title={formTitle} />
{children}
<Message content={sharedMessages.location} component="h4" className="mb-cs-xs mt-0" />
{!entryExists && <Notification content={noLocationSetInfo} info small />}
<Overlay loading={loading} visible={loading} spinnerMessage={m.loadingLocation}>
<LocationMap
widget
leafletConfig={{ zoom, minZoom: 1 }}
mapCenter={mapCenter}
markers={markers}
onClick={handleClick}
clickable
centerOnMarkers
/>
<Form.Field
type="number"
step="1"
title={sharedMessages.altitude}
description={sharedMessages.altitudeDesc}
name="altitude"
component={Input}
required={!updatesDisabled}
disabled={updatesDisabled}
</Overlay>
<Message
content={updatesDisabled ? m.mapDescriptionDisabled : m.mapDescription}
component="p"
className="p-0 mt-cs-xs mb-cs-l tc-subtle-gray"
/>
{updatesDisabled && disabledInfo && <Notification content={disabledInfo} info small />}
<Form.Field
type="number"
step="any"
title={sharedMessages.latitude}
description={sharedMessages.latitudeDesc}
name="latitude"
component={Input}
required={!updatesDisabled}
disabled={updatesDisabled}
onBlur={handleLatitudeChange}
/>
<Form.Field
type="number"
step="any"
title={sharedMessages.longitude}
description={sharedMessages.longitudeDesc}
name="longitude"
component={Input}
required={!updatesDisabled}
disabled={updatesDisabled}
onBlur={handleLongitudeChange}
/>
<Form.Field
type="number"
step="1"
title={sharedMessages.altitude}
description={sharedMessages.altitudeDesc}
name="altitude"
component={Input}
required={!updatesDisabled}
disabled={updatesDisabled}
/>
<SubmitBar>
<Form.Submit component={SubmitButton} message={sharedMessages.saveChanges} />
<ModalButton
type="button"
icon="delete"
message={m.deleteLocation}
modalData={{
children: (
<div>
<Message
content={onlyAutomaticExists ? m.deleteAllWarning : m.deleteWarning}
component="span"
/>
{entryExists && automaticExists && (
<>
<br />
<br />
<Message content={m.deleteAllInfo} component="span" />
<Checkbox
name="delete-all"
label={m.deleteAllLocations}
onChange={handleDeleteAllCheck}
className="mt-cs-m"
value={deleteAll}
/>
</>
)}
</div>
),
}}
onApprove={handleDelete}
disabled={updatesDisabled || !anyEntryExists}
naked
danger
/>
<SubmitBar>
<Form.Submit component={SubmitButton} message={sharedMessages.saveChanges} />
<ModalButton
type="button"
icon="delete"
message={m.deleteLocation}
modalData={{
children: (
<div>
<Message
content={onlyAutomaticExists ? m.deleteAllWarning : m.deleteWarning}
component="span"
/>
{entryExists && automaticExists && (
<>
<br />
<br />
<Message content={m.deleteAllInfo} component="span" />
<Checkbox
name="delete-all"
label={m.deleteAllLocations}
onChange={handleDeleteAllCheck}
className="mt-cs-m"
value={deleteAll}
/>
</>
)}
</div>
),
}}
onApprove={handleDelete}
disabled={updatesDisabled || !anyEntryExists}
naked
danger
/>
</SubmitBar>
</Form>
</React.Fragment>
</SubmitBar>
</Form>
)
}

Expand Down
Loading

0 comments on commit 1ad3498

Please sign in to comment.