fix lint errors

apps/frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import 'react-loading-skeleton/dist/skeleton.css'
 
 import { QueryClientProvider } from '@tanstack/react-query'
+import { APIProvider } from '@vis.gl/react-google-maps'
 import { Amplify, Auth } from 'aws-amplify'
 import { arSA, enUS } from 'date-fns/locale'
 import React, { useEffect, useState } from 'react'
@@ -14,7 +15,6 @@ import Login from './pages/Login/Login'
 import { queryClient } from './query/query'
 import Store from './store/Store'
 import { LANGUAGES } from './utils/constants'
-import { APIProvider } from '@vis.gl/react-google-maps'
 
 // Configure amplify
 Amplify.configure(awsconfig)

apps/frontend/src/components/Fields/MapField/MapField.tsx

@@ -1,14 +1,21 @@
+/* global google */
 import './MapField.scss'
 
 import { MapPoint, Nullish } from '@3dp4me/types'
-import _ from 'lodash'
+import {
+    AdvancedMarker,
+    ControlPosition,
+    Map,
+    MapControl,
+    MapMouseEvent,
+    Pin,
+} from '@vis.gl/react-google-maps'
+import { useEffect, useState } from 'react'
+import styled from 'styled-components'
 
 import { useTranslations } from '../../../hooks/useTranslations'
-import { AdvancedMarker, ControlPosition, Map, MapControl, MapMouseEvent, Pin } from '@vis.gl/react-google-maps'
-import { PlaceAutocomplete } from './PlaceAutocomplete'
 import { MapHandler } from './MapHandler'
-import { useEffect, useState } from 'react'
-import styled from 'styled-components'
+import { PlaceAutocomplete } from './PlaceAutocomplete'
 
 export interface MapFieldProps {
     value: Nullish<MapPoint>
@@ -18,11 +25,6 @@ export interface MapFieldProps {
     fieldId: string
 }
 
-interface Viewport extends MapPoint {
-    zoom: number
-    transitionDuration: number
-}
-
 const AMMAN_LAT_LNG = {
     lat: 31.9544,
     lng: 35.9106,
@@ -35,18 +37,12 @@ const AutoCompleteControl = styled.div`
     background: #fff;
 `
 
-const MapField = ({
-    value,
-    displayName,
-    isDisabled,
-    onChange,
-    fieldId,
-}: MapFieldProps) => {
+const MapField = ({ value, displayName, isDisabled, onChange, fieldId }: MapFieldProps) => {
     const translations = useTranslations()[0]
     const [location, setLocation] = useState<Nullish<MapPoint>>(null)
 
     useEffect(() => {
-        setLocation(value ? value : { latitude: AMMAN_LAT_LNG.lat, longitude: AMMAN_LAT_LNG.lng })
+        setLocation(value || { latitude: AMMAN_LAT_LNG.lat, longitude: AMMAN_LAT_LNG.lng })
     }, [])
 
     const addMarker = (event: MapMouseEvent) => {
@@ -59,37 +55,29 @@ const MapField = ({
     }
 
     const onPlaceSelect = (place: Nullish<google.maps.places.PlaceResult>) => {
-        const location = place?.geometry?.location
-        if (!location) return
+        const loc = place?.geometry?.location
+        if (!loc) return
 
         const selectedLocation = {
-            latitude: location.lat(),
-            longitude: location.lng(),
+            latitude: loc.lat(),
+            longitude: loc.lng(),
         }
 
         onChange(fieldId, selectedLocation)
         setLocation(selectedLocation)
     }
 
-    const pinForLocation = (lat: number , lng: number) => {
-        return (
-            <AdvancedMarker
-                position={{lat: lat, lng: lng}}>
-
-                <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
-            </AdvancedMarker>
-        )
-    }
+    const pinForLocation = (lat: number, lng: number) => (
+        <AdvancedMarker position={{ lat, lng }}>
+            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
+        </AdvancedMarker>
+    )
 
     const displayMap = () => {
-        const center = !!value ? { lat: value.latitude, lng: value.longitude } : AMMAN_LAT_LNG
+        const center = value ? { lat: value.latitude, lng: value.longitude } : AMMAN_LAT_LNG
         if (isDisabled) {
             return (
-                <Map
-                    mapId={DEMO_MAP_ID}
-                    defaultZoom={13}
-                    defaultCenter={center}
-                >
+                <Map mapId={DEMO_MAP_ID} defaultZoom={13} defaultCenter={center}>
                     {!!value && pinForLocation(value.latitude, value.longitude)}
                 </Map>
             )
@@ -100,26 +88,23 @@ const MapField = ({
                 key={`${fieldId}-map`}
                 mapId={DEMO_MAP_ID}
                 defaultZoom={13}
-                defaultCenter={ center }
+                defaultCenter={center}
                 disableDefaultUI={true}
                 onClick={addMarker}
             >
                 {!!value && pinForLocation(value.latitude, value.longitude)}
             </Map>,
-            <MapControl 
-                position={ControlPosition.TOP}
-                key={`${fieldId}-map-control`}
-            >
+            <MapControl position={ControlPosition.TOP} key={`${fieldId}-map-control`}>
                 <AutoCompleteControl>
-                    <PlaceAutocomplete onPlaceSelect={onPlaceSelect}/>
+                    <PlaceAutocomplete onPlaceSelect={onPlaceSelect} />
                 </AutoCompleteControl>
             </MapControl>,
             <MapHandler key={`${fieldId}-map-handler`} place={location} />,
         ]
     }
 
     const getMapLink = () => {
-        const lat= value?.latitude
+        const lat = value?.latitude
         const lng = value?.longitude
         return `https://maps.google.com/?q=${lat},${lng}`
     }

apps/frontend/src/components/Fields/MapField/MapHandler.tsx

@@ -1,28 +1,24 @@
-
 import './MapField.scss'
-import _ from 'lodash'
-import { useEffect, useRef, useState } from 'react'
-import { MapPoint, Nullish } from '@3dp4me/types';
-import {
-    useMap
-  } from '@vis.gl/react-google-maps';
+
+import { MapPoint, Nullish } from '@3dp4me/types'
+import { useMap } from '@vis.gl/react-google-maps'
+import { useEffect } from 'react'
 
 interface MapHandlerProps {
-    place: Nullish<MapPoint>;
+    place: Nullish<MapPoint>
 }
-  
+
 export const MapHandler = ({ place }: MapHandlerProps) => {
-    const map = useMap();
-  
+    const map = useMap()
+
     useEffect(() => {
-      if (!map || !place ) return;
-
-      if (place) {
-        // const bounds = new google.maps.LatLngBounds({ lat: place.latitude, lng: place.longitude });
-        map.setCenter({ lat: place.latitude, lng: place.longitude });
-      }
-    }, [map, place]);
-
-    return null;
-  };
-
+        if (!map || !place) return
+
+        if (place) {
+            // const bounds = new google.maps.LatLngBounds({ lat: place.latitude, lng: place.longitude });
+            map.setCenter({ lat: place.latitude, lng: place.longitude })
+        }
+    }, [map, place])
+
+    return null
+}

apps/frontend/src/components/Fields/MapField/PlaceAutocomplete.tsx

@@ -1,54 +1,54 @@
+/* global google */
 import './MapField.scss'
-import _ from 'lodash'
+
+import { Nullish } from '@3dp4me/types'
+import { useMapsLibrary } from '@vis.gl/react-google-maps'
 import { useEffect, useRef, useState } from 'react'
-import { Nullish } from '@3dp4me/types';
-import {
-    useMapsLibrary,
-  } from '@vis.gl/react-google-maps';
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 interface PlaceAutocompleteProps {
-    onPlaceSelect: (place: Nullish<google.maps.places.PlaceResult>) => void;
+    onPlaceSelect: (place: Nullish<google.maps.places.PlaceResult>) => void
 }
 
 const AutocompleteContainer = styled.div`
-  width: 300px;
-
-  input {
-    width: 100%;
-    height: 40px;
-    padding: 0 12px;
-    font-size: 18px;
-    box-sizing: border-box;
-  }
+    width: 300px;
+
+    input {
+        width: 100%;
+        height: 40px;
+        padding: 0 12px;
+        font-size: 18px;
+        box-sizing: border-box;
+    }
 `
 
 export const PlaceAutocomplete = ({ onPlaceSelect }: PlaceAutocompleteProps) => {
-    const [placeAutocomplete, setPlaceAutocomplete] = useState<Nullish<google.maps.places.Autocomplete>>(null);
-    const inputRef = useRef<HTMLInputElement>(null);
-    const places = useMapsLibrary('places');
-
+    const [placeAutocomplete, setPlaceAutocomplete] =
+        useState<Nullish<google.maps.places.Autocomplete>>(null)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const places = useMapsLibrary('places')
+
     useEffect(() => {
-      if (!places || !inputRef.current) return;
-  
-      const options = {
-        fields: ['geometry', 'name', 'formatted_address']
-      };
-  
-      setPlaceAutocomplete(new places.Autocomplete(inputRef.current, options));
-    }, [places]);
-  
+        if (!places || !inputRef.current) return
+
+        const options = {
+            fields: ['geometry', 'name', 'formatted_address'],
+        }
+
+        setPlaceAutocomplete(new places.Autocomplete(inputRef.current, options))
+    }, [places])
+
     useEffect(() => {
-      if (!placeAutocomplete) return;
-  
-      placeAutocomplete.addListener('place_changed', () => {
-        onPlaceSelect(placeAutocomplete.getPlace());
-      });
-    }, [onPlaceSelect, placeAutocomplete]);
-  
+        if (!placeAutocomplete) return
+
+        placeAutocomplete.addListener('place_changed', () => {
+            onPlaceSelect(placeAutocomplete.getPlace())
+        })
+    }, [onPlaceSelect, placeAutocomplete])
+
     return (
-      <AutocompleteContainer>
-        <input ref={inputRef} />
-      </AutocompleteContainer>
-    );
-  };
+        <AutocompleteContainer>
+            <input ref={inputRef} />
+        </AutocompleteContainer>
+    )
+}

apps/frontend/src/components/Fields/SignatureField.tsx

@@ -112,8 +112,7 @@ const SignatureField = <T extends string>({
 }
 
 const hashSignature = (sig: Nullish<Signature>): string => {
-    if (!sig)
-        return hash(Math.random())
+    if (!sig) return hash(Math.random())
 
     return hash(JSON.stringify(sig))
 }

turbo.json

@@ -32,7 +32,8 @@
         "REACT_APP_COGNITO_WEB_CLIENT_ID",
         "REACT_APP_OAUTH_DOMAIN",
         "REACT_APP_CALLBACK_URL",
-        "REACT_APP_BACKEND_BASE_URL"
+        "REACT_APP_BACKEND_BASE_URL",
+        "REACT_APP_GOOGLE_MAPS_API_KEY"
       ]
     },
     "deploy": {