From 9618024ac9dff76b03b0cb6758e974b0361de1f0 Mon Sep 17 00:00:00 2001
From: Maciej Kasprzyk <kapustka.maciek@gmail.com>
Date: Thu, 11 Apr 2024 11:50:57 +0200
Subject: [PATCH] refactor: replace direct MapContext usage with useMap (#306)

---
 src/components/advanced-marker.tsx |  7 +++----
 src/components/info-window.tsx     | 12 +++---------
 src/components/marker.tsx          |  5 ++---
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/advanced-marker.tsx b/src/components/advanced-marker.tsx
index 4d70c666..ae636d9c 100644
--- a/src/components/advanced-marker.tsx
+++ b/src/components/advanced-marker.tsx
@@ -3,7 +3,6 @@ import React, {
   Children,
   forwardRef,
   useCallback,
-  useContext,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -11,10 +10,10 @@ import React, {
 } from 'react';
 
 import {createPortal} from 'react-dom';
-import {GoogleMapsContext} from './map';
+import {useMap} from '../hooks/use-map';
+import {useMapsLibrary} from '../hooks/use-maps-library';
 
 import type {Ref, PropsWithChildren} from 'react';
-import {useMapsLibrary} from '../hooks/use-maps-library';
 
 export interface AdvancedMarkerContextValue {
   marker: google.maps.marker.AdvancedMarkerElement;
@@ -52,7 +51,7 @@ function useAdvancedMarker(props: AdvancedMarkerProps) {
   const [contentContainer, setContentContainer] =
     useState<HTMLDivElement | null>(null);
 
-  const map = useContext(GoogleMapsContext)?.map;
+  const map = useMap();
   const markerLibrary = useMapsLibrary('marker');
 
   const {
diff --git a/src/components/info-window.tsx b/src/components/info-window.tsx
index 5fd084f5..77b6f28c 100644
--- a/src/components/info-window.tsx
+++ b/src/components/info-window.tsx
@@ -1,14 +1,8 @@
 /* eslint-disable complexity */
-import React, {
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
+import React, {PropsWithChildren, useEffect, useRef, useState} from 'react';
 import {createPortal} from 'react-dom';
 
-import {GoogleMapsContext} from './map';
+import {useMap} from '../hooks/use-map';
 
 /**
  * Props for the Info Window Component
@@ -25,7 +19,7 @@ export type InfoWindowProps = google.maps.InfoWindowOptions & {
 export const InfoWindow = (props: PropsWithChildren<InfoWindowProps>) => {
   const {children, anchor, shouldFocus, onCloseClick, ...infoWindowOptions} =
     props;
-  const map = useContext(GoogleMapsContext)?.map;
+  const map = useMap();
 
   const infoWindowRef = useRef<google.maps.InfoWindow | null>(null);
   const [contentContainer, setContentContainer] =
diff --git a/src/components/marker.tsx b/src/components/marker.tsx
index a95d406e..3fbf86b8 100644
--- a/src/components/marker.tsx
+++ b/src/components/marker.tsx
@@ -2,13 +2,12 @@
 import React, {
   forwardRef,
   useCallback,
-  useContext,
   useEffect,
   useImperativeHandle,
   useState
 } from 'react';
 
-import {GoogleMapsContext} from './map';
+import {useMap} from '../hooks/use-map';
 
 import type {Ref} from 'react';
 
@@ -28,7 +27,7 @@ export type MarkerRef = Ref<google.maps.Marker | null>;
 
 function useMarker(props: MarkerProps) {
   const [marker, setMarker] = useState<google.maps.Marker | null>(null);
-  const map = useContext(GoogleMapsContext)?.map;
+  const map = useMap();
 
   const {
     onClick,