(_configCache)
+ React.useEffect(() => {
+ if (!_configCache) {
+ _configPromise.then(setConfig)
+ }
+ }, [])
+ return config
+}
+
+export default _configPromise
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
index 5e07f14..daf3116 100644
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -7,7 +7,7 @@ import {setLogin} from 'reducers/login'
import {Page, Stats} from 'components'
import api from 'api'
import {findInput} from 'utils'
-import config from 'config.json'
+import {useConfig} from 'config'
const SettingsPage = connect((state) => ({login: state.login}), {setLogin})(function SettingsPage({login, setLogin}) {
const {register, handleSubmit} = useForm()
@@ -102,6 +102,7 @@ function CopyInput({value, ...props}) {
const selectField = findInput((ref) => ref?.select())
function ApiKeyDialog({login}) {
+ const config = useConfig()
const [show, setShow] = React.useState(false)
const onClick = React.useCallback(
(e) => {
@@ -131,7 +132,7 @@ function ApiKeyDialog({login}) {
)}
The API URL should be set to:
-
+
>
)
}
diff --git a/frontend/src/pages/TrackPage/TrackMap.tsx b/frontend/src/pages/TrackPage/TrackMap.tsx
index 683407b..d7732d6 100644
--- a/frontend/src/pages/TrackPage/TrackMap.tsx
+++ b/frontend/src/pages/TrackPage/TrackMap.tsx
@@ -7,7 +7,6 @@ import {Fill, Stroke, Style, Text, Circle} from 'ol/style'
import {Map} from 'components'
import type {TrackData, TrackPoint} from 'types'
-import config from 'config.json'
const isValidTrackPoint = (point: TrackPoint): boolean => {
const longitude = point.geometry?.coordinates?.[0]
diff --git a/frontend/src/pages/UploadPage.tsx b/frontend/src/pages/UploadPage.tsx
index 346fa1f..94ab4c5 100644
--- a/frontend/src/pages/UploadPage.tsx
+++ b/frontend/src/pages/UploadPage.tsx
@@ -6,7 +6,7 @@ import {Link} from 'react-router-dom'
import {FileUploadField, Page} from 'components'
import type {Track} from 'types'
import api from 'api'
-import config from '../config.json'
+import configPromise from 'config'
function isSameFile(a: File, b: File) {
return a.name === b.name && a.size === b.size
@@ -56,34 +56,41 @@ export function FileUploadStatus({
React.useEffect(
() => {
- const formData = new FormData()
- formData.append('body', file)
+ let xhr
- const xhr = new XMLHttpRequest()
+ async function _work() {
+ const formData = new FormData()
+ formData.append('body', file)
- const onProgress = (e) => {
- const progress = (e.loaded || 0) / (e.total || 1)
- setProgress(progress)
- }
+ xhr = new XMLHttpRequest()
- const onLoad = (e) => {
- onComplete(id, xhr.response)
- }
+ const onProgress = (e) => {
+ const progress = (e.loaded || 0) / (e.total || 1)
+ setProgress(progress)
+ }
- xhr.responseType = 'json'
- xhr.onload = onLoad
- xhr.upload.onprogress = onProgress
- if (slug) {
- xhr.open('PUT', `${config.apiUrl}/api/tracks/${slug}`)
- } else {
- xhr.open('POST', `${config.apiUrl}/api/tracks`)
- }
+ const onLoad = (e) => {
+ onComplete(id, xhr.response)
+ }
+
+ xhr.responseType = 'json'
+ xhr.onload = onLoad
+ xhr.upload.onprogress = onProgress
+
+ const config = await configPromise
+ if (slug) {
+ xhr.open('PUT', `${config.apiUrl}/api/tracks/${slug}`)
+ } else {
+ xhr.open('POST', `${config.apiUrl}/api/tracks`)
+ }
+
+ const accessToken = await api.getValidAccessToken()
- api.getValidAccessToken().then((accessToken) => {
xhr.setRequestHeader('Authorization', accessToken)
xhr.send(formData)
- })
+ }
+ _work()
return () => xhr.abort()
},
// eslint-disable-next-line react-hooks/exhaustive-deps