diff --git a/frontend/src/components/Map/index.js b/frontend/src/components/Map/index.js index d703064..ac4822f 100644 --- a/frontend/src/components/Map/index.js +++ b/frontend/src/components/Map/index.js @@ -60,6 +60,7 @@ export function Layer({layerClass, getDefaultOptions, children, ...props}) { ...(getDefaultOptions ? getDefaultOptions() : {}), ...props, }), + // eslint-disable-next-line react-hooks/exhaustive-deps [] ) @@ -111,6 +112,7 @@ function View({...options}) { new OlView({ ...options, }), + // eslint-disable-next-line react-hooks/exhaustive-deps [] ) diff --git a/frontend/src/pages/TrackPage/index.tsx b/frontend/src/pages/TrackPage/index.tsx index efa281f..6a152e2 100644 --- a/frontend/src/pages/TrackPage/index.tsx +++ b/frontend/src/pages/TrackPage/index.tsx @@ -18,7 +18,7 @@ import TrackMap from './TrackMap' function useTriggerSubject() { const subject$ = React.useMemo(() => new Subject(), []) - const trigger = React.useCallback(() => subject$.next(null), []) + const trigger = React.useCallback(() => subject$.next(null), [subject$]) return [trigger, subject$] } @@ -68,12 +68,12 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage( body: {comment: {body}}, }) reloadComments() - }, []) + }, [slug, reloadComments]) const onDeleteComment = React.useCallback(async (id) => { await api.delete(`/tracks/${slug}/comments/${id}`) reloadComments() - }, []) + }, [slug, reloadComments]) const isAuthor = login?.username === data?.track?.author?.username diff --git a/frontend/src/pages/UploadPage.tsx b/frontend/src/pages/UploadPage.tsx index b29b28f..e2f2014 100644 --- a/frontend/src/pages/UploadPage.tsx +++ b/frontend/src/pages/UploadPage.tsx @@ -51,33 +51,37 @@ function FileUploadStatus({ }) { const [progress, setProgress] = React.useState(0) - React.useEffect(() => { - const formData = new FormData() - formData.append('body', file) + React.useEffect( + () => { + const formData = new FormData() + formData.append('body', file) - const xhr = new XMLHttpRequest() + const xhr = new XMLHttpRequest() - const onProgress = (e) => { - const progress = (e.loaded || 0) / (e.total || 1) - setProgress(progress) - } + const onProgress = (e) => { + const progress = (e.loaded || 0) / (e.total || 1) + setProgress(progress) + } - const onLoad = (e) => { - onComplete(id, xhr.response) - } + const onLoad = (e) => { + onComplete(id, xhr.response) + } - xhr.responseType = 'json' - xhr.onload = onLoad - xhr.upload.onprogress = onProgress - xhr.open('POST', '/api/tracks') + xhr.responseType = 'json' + xhr.onload = onLoad + xhr.upload.onprogress = onProgress + xhr.open('POST', '/api/tracks') - api.getValidAccessToken().then((accessToken) => { - xhr.setRequestHeader('Authorization', accessToken) - xhr.send(formData) - }) + api.getValidAccessToken().then((accessToken) => { + xhr.setRequestHeader('Authorization', accessToken) + xhr.send(formData) + }) - return () => xhr.abort() - }, [file]) + return () => xhr.abort() + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [file] + ) return ( @@ -107,9 +111,13 @@ export default function UploadPage() { [setFiles] ) - React.useLayoutEffect(() => { - setLabelRefState(labelRef.current) - }, [labelRef.current]) + React.useLayoutEffect( + () => { + setLabelRefState(labelRef.current) + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [labelRef.current] + ) function onSelectFiles(fileList) { const newFiles = Array.from(fileList).map((file) => ({