Prettier

src/api.js

@@ -23,7 +23,10 @@ class API {
 
   async post(url, {body: body_, ...options}) {
     const body = typeof body_ !== 'string' ? JSON.stringify(body_) : body_
-    return await this.fetch(url, {...options, body, method: 'post',
+    return await this.fetch(url, {
+      ...options,
+      body,
+      method: 'post',
       headers: {
         ...(options.headers || {}),
         'Content-Type': 'application/json',
@@ -37,7 +40,7 @@ class API {
   }
 
   async delete(url, options = {}) {
-    return await this.get(url,  {...options, method: 'delete'})
+    return await this.get(url, {...options, method: 'delete'})
   }
 }
 

src/components/Map/index.js

@@ -6,18 +6,21 @@ import OlTileLayer from 'ol/layer/Tile'
 import OlVectorLayer from 'ol/layer/Vector'
 import OlGroupLayer from 'ol/layer/Group'
 import OSM from 'ol/source/OSM'
-import proj4 from 'proj4';
+import proj4 from 'proj4'
-import {register} from 'ol/proj/proj4';
+import {register} from 'ol/proj/proj4'
 
 import OlLayerSwitcher from 'ol-layerswitcher'
 
 // Import styles for open layers + addons
 import 'ol/ol.css'
-import "ol-layerswitcher/dist/ol-layerswitcher.css";
+import 'ol-layerswitcher/dist/ol-layerswitcher.css'
 
 // Prepare projection
-proj4.defs('projLayer1', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs');
+proj4.defs(
-register(proj4);
+  'projLayer1',
+  '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs'
+)
+register(proj4)
 
 const MapContext = React.createContext()
 const MapLayerContext = React.createContext()

src/index.js

@@ -24,4 +24,3 @@ ReactDOM.render(
   </Provider>,
   document.getElementById('root')
 )
-

src/pages/TrackPage/TrackComments.tsx

@@ -40,13 +40,19 @@ export default function TrackComments({comments, onSubmit, onDelete, login, hide
                   <FormattedDate date={comment.createdAt} relative />
                 </div>
               </Comment.Metadata>
-              <Comment.Text><Markdown>{comment.body}</Markdown></Comment.Text>
+              <Comment.Text>
+                <Markdown>{comment.body}</Markdown>
+              </Comment.Text>
               {login?.username === comment.author.username && (
                 <Comment.Actions>
-                <Comment.Action onClick={(e) => {
+                  <Comment.Action
-                  onDelete(comment.id)
+                    onClick={(e) => {
-                  e.preventDefault()
+                      onDelete(comment.id)
-                }}>Delete</Comment.Action>
+                      e.preventDefault()
+                    }}
+                  >
+                    Delete
+                  </Comment.Action>
                 </Comment.Actions>
               )}
             </Comment.Content>

src/pages/TrackPage/TrackMap.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import {Vector as VectorSource} from 'ol/source';
+import {Vector as VectorSource} from 'ol/source'
-import {Geometry, LineString, Point} from 'ol/geom';
+import {Geometry, LineString, Point} from 'ol/geom'
-import Feature from 'ol/Feature';
+import Feature from 'ol/Feature'
-import {fromLonLat} from 'ol/proj';
+import {fromLonLat} from 'ol/proj'
-import {Fill, Stroke, Style, Text, Circle} from 'ol/style';
+import {Fill, Stroke, Style, Text, Circle} from 'ol/style'
 
 import {Map} from 'components'
 import type {TrackData, TrackPoint} from 'types'
@@ -11,8 +11,8 @@ import type {TrackData, TrackPoint} from 'types'
 const isValidTrackPoint = (point: TrackPoint): boolean =>
   point.latitude != null && point.longitude != null && (point.latitude !== 0 || point.longitude !== 0)
 
-const WARN_DISTANCE= 200
+const WARN_DISTANCE = 200
-const MIN_DISTANCE= 150
+const MIN_DISTANCE = 150
 
 const evaluateDistanceColor = function (distance) {
   if (distance < MIN_DISTANCE) {
@@ -24,7 +24,6 @@ const evaluateDistanceColor = function (distance) {
   }
 }
 
-
 const evaluateDistanceForFillColor = function (distance) {
   const redFill = new Fill({color: 'rgba(255, 0, 0, 0.2)'})
   const orangeFill = new Fill({color: 'rgba(245,134,0,0.2)'})
@@ -82,7 +81,6 @@ function pointStyleFunction(feature, resolution) {
   })
 }
 
-
 function PointLayer({features, title, visible}) {
   return <Map.VectorLayer {...{title, visible}} style={pointStyleFunction} source={new VectorSource({features})} />
 }
@@ -137,7 +135,6 @@ export default function TrackMap({trackData, ...props}: {trackData: TrackData})
     return {trackVectorSource, trackPointsD1, trackPointsD2, trackPointsUntaggedD1, trackPointsUntaggedD2, viewExtent}
   }, [trackData?.points])
 
-
   const trackLayerStyle = React.useMemo(
     () =>
       new Style({
@@ -172,8 +169,7 @@ export default function TrackMap({trackData, ...props}: {trackData: TrackData})
 
       <Map.View maxZoom={22} zoom={15} center={fromLonLat([9.1797, 48.7784])} />
       <Map.FitView extent={viewExtent} />
-      <Map.LayerSwitcher groupSelectStyle='children' startActive activationMode='click' reverse={false} />
+      <Map.LayerSwitcher groupSelectStyle="children" startActive activationMode="click" reverse={false} />
     </Map>
   )
 }
-

src/pages/TrackPage/index.tsx

@@ -11,10 +11,10 @@ import api from 'api'
 import {Page} from 'components'
 import type {Track, TrackData, TrackComment} from 'types'
 
-import TrackActions  from './TrackActions'
+import TrackActions from './TrackActions'
-import TrackComments  from './TrackComments'
+import TrackComments from './TrackComments'
-import TrackDetails  from './TrackDetails'
+import TrackDetails from './TrackDetails'
-import TrackMap  from './TrackMap'
+import TrackMap from './TrackMap'
 
 function useTriggerSubject() {
   const subject$ = React.useMemo(() => new Subject(), [])
@@ -50,7 +50,7 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
       const comments$ = concat(of(null), reloadComments$).pipe(
         switchMap(() => slug$),
         map((slug) => `/tracks/${slug}/comments`),
-        switchMap(url => api.get(url)),
+        switchMap((url) => api.get(url)),
         pluck('comments'),
         startWith(null) // show track infos before comments are loaded
       )
@@ -65,7 +65,7 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
 
   const onSubmitComment = React.useCallback(async ({body}) => {
     await api.post(`/tracks/${slug}/comments`, {
-      body: {comment: {body}}
+      body: {comment: {body}},
     })
     reloadComments()
   }, [])
@@ -107,12 +107,20 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
         </Grid.Row>
       </Grid>
 
-    {track?.description && <Segment basic>
+      {track?.description && (
-                  <Header as="h2" dividing>Description</Header>
+        <Segment basic>
-      <Markdown>{track.description}</Markdown>
+          <Header as="h2" dividing>
-      </Segment>}
+            Description
+          </Header>
+          <Markdown>{track.description}</Markdown>
+        </Segment>
+      )}
 
-      <TrackComments {...{hideLoader: loading, comments, login}} onSubmit={onSubmitComment} onDelete={onDeleteComment} />
+      <TrackComments
+        {...{hideLoader: loading, comments, login}}
+        onSubmit={onSubmitComment}
+        onDelete={onDeleteComment}
+      />
 
       {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
     </Page>

src/pages/TracksPage.tsx

@@ -53,7 +53,7 @@ function TrackList({privateFeed}: {privateFeed: boolean}) {
           return {url, query}
         }),
         distinctUntilChanged(_.isEqual),
-        switchMap((request) => concat(of(null), from(api.get(request.url, {query: request.query})))),
+        switchMap((request) => concat(of(null), from(api.get(request.url, {query: request.query}))))
       ),
     null,
     [page, privateFeed]