th-369: Map render on reload (#374)

* th-369: * map render on reload

* th-369: * types

---------

Co-authored-by: albsbz <[email protected]>

Author: albsbz

frontend/src/libs/hooks/use-app-map/use-app-map.hook.ts

@@ -31,24 +31,25 @@ const useAppMap = ({
   const mapService = useRef<MapService | null>(null);
 
   const dispatch = useAppDispatch();
+  useEffect(() => {
+    MapConnector.dropMap();
+  }, []);
 
   useEffect(() => {
     const configMap = async (): Promise<void> => {
       await MapConnector.getInstance();
-      window.addEventListener('load', function () {
-        mapService.current = new MapConnector().getMapService({
-          mapElement: mapReference.current,
-          center: center ?? DEFAULT_CENTER,
-          zoom,
-        });
+      mapService.current = new MapConnector().getMapService({
+        mapElement: mapReference.current,
+        center: center ?? DEFAULT_CENTER,
+        zoom,
+      });
 
-        if (center && destination) {
-          mapService.current.removeMarkers();
-          mapService.current.addMarker(destination);
+      if (center && destination) {
+        mapService.current.removeMarkers();
+        mapService.current.addMarker(destination);
 
-          void mapService.current.calculateRouteAndTime(center, destination);
-        }
-      });
+        void mapService.current.calculateRouteAndTime(center, destination);
+      }
     };
     void configMap();
   }, [center, destination, mapReference, zoom]);

frontend/src/libs/packages/map/map-connector.package.ts

@@ -46,7 +46,7 @@ class MapConnector implements IMapConnector {
   }
 
   public getMapService(parameters: MapServiceParameters): MapService {
-    const setMap = (map: google.maps.Map): void => {
+    const setMap = (map: google.maps.Map | null): void => {
       MapConnector.map = map;
     };
 
@@ -58,6 +58,11 @@ class MapConnector implements IMapConnector {
       setMap,
     });
   }
+
+  public static dropMap(): void {
+    this.map = null;
+    this.markers = [];
+  }
 }
 
 export { MapConnector };

frontend/src/pages/homepage/homepage.tsx

@@ -1,25 +1,26 @@
-import { type Libraries, LoadScript } from '@react-google-maps/api';
-
-import { Map } from '~/libs/components/map/map.js';
 import {
+  useAppMap,
   useAppSelector,
   useEffect,
   useHomePageSocketService,
-  useMemo,
+  useRef,
 } from '~/libs/hooks/hooks.js';
-import { config } from '~/libs/packages/config/config.js';
 import { selectTrucks } from '~/slices/trucks/selectors.js';
 
 import { TruckList } from './components/truck-list/truck-list.js';
-import { getTruckLocations } from './libs/helpers/get-truck-locations.helper.js';
 import styles from './styles.module.scss';
 
-const libraries: Libraries = ['places'];
-
 const HomePage: React.FC = () => {
   const trucks = useAppSelector(selectTrucks);
 
-  const truckMarkers = useMemo(() => getTruckLocations(trucks), [trucks]);
+  const mapReference = useRef<HTMLDivElement | null>(null);
+
+  useAppMap({
+    center: null,
+    destination: null,
+    className: styles.map,
+    mapReference: mapReference,
+  });
 
   const { connectToHomeRoom, disconnectFromHomeRoom } =
     useHomePageSocketService();
@@ -33,19 +34,14 @@ const HomePage: React.FC = () => {
   }, [connectToHomeRoom, disconnectFromHomeRoom]);
 
   return (
-    <LoadScript
-      googleMapsApiKey={config.ENV.API.GOOGLE_MAPS_API_KEY}
-      libraries={libraries}
-    >
-      <div className={styles.container}>
-        <section className={styles.trucks}>
-          <TruckList trucks={trucks} />
-        </section>
-        <section className={styles.map}>
-          <Map className={styles['map-component']} markers={truckMarkers} />
-        </section>
-      </div>
-    </LoadScript>
+    <div className={styles.container}>
+      <section className={styles.trucks}>
+        <TruckList trucks={trucks} />
+      </section>
+      <section className={styles.map}>
+        <div ref={mapReference} id="map" className={styles.map} />
+      </section>
+    </div>
   );
 };
 

frontend/src/pages/order-status/order-status.tsx

@@ -60,7 +60,7 @@ const OrderStatusPage: React.FC = () => {
   const mapReference = useRef<HTMLDivElement>(null);
 
   useAppMap({
-    center: truckLocation ?? DEFAULT_CENTER, //FIXME: When the page refreshes, the truck data goes down. In addition, this value always comes as null
+    center: truckLocation ?? DEFAULT_CENTER,
     destination: order ? jsonToLatLngLiteral(order.startPoint) : null,
     className: styles.map,
     mapReference: mapReference,