From eef5deca7080d3c507b9e10caf2e28271871b75f Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Fri, 26 Feb 2021 20:09:52 +0100
Subject: [PATCH] frontend: Format and lint

---
 frontend/src/components/Map/index.js   |  2 +
 frontend/src/pages/TrackPage/index.tsx |  6 +--
 frontend/src/pages/UploadPage.tsx      | 56 +++++++++++++++-----------
 3 files changed, 37 insertions(+), 27 deletions(-)

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 (
     <span>
@@ -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) => ({