refactor: simplify option applying hooks

Author: pyjun01

src/components/GoogleMap/index.tsx

@@ -66,15 +66,15 @@ export const GoogleMap = forwardRef<google.maps.Map, GoogleMapProps>(
     ref,
   ) {
     const containerRef = useRef<HTMLDivElement>(null);
-    const maps = useImportLibrary('maps');
+    const mapsLib = useImportLibrary('maps');
     const [map, setMap] = useState<google.maps.Map | null>(null);
 
     useEffect(() => {
-      if (!maps?.Map) {
+      if (!mapsLib?.Map) {
         return;
       }
 
-      const map = new maps.Map(containerRef.current!, {
+      const map = new mapsLib.Map(containerRef.current!, {
         center: initialCenter || center || mapOptions.center,
         zoom: initialZoom || zoom || mapOptions.zoom,
         ...mapOptions,
@@ -84,7 +84,7 @@ export const GoogleMap = forwardRef<google.maps.Map, GoogleMapProps>(
       onLoad?.(map);
 
       passRef(ref, map);
-    }, [maps?.Map]);
+    }, [mapsLib?.Map]);
 
     useApplyMapOptions(map, {
       ...mapOptions,

src/components/InfoWindow/index.tsx

@@ -31,7 +31,7 @@ export const InfoWindow = forwardRef<google.maps.InfoWindow, InfoWindowProps>(
     ref,
   ) {
     const map = useMapContext();
-    const maps = useImportLibrary('maps');
+    const mapsLib = useImportLibrary('maps');
 
     const [infoWindow, setInfoWindow] = useState<google.maps.InfoWindow | null>(
       null,
@@ -48,11 +48,11 @@ export const InfoWindow = forwardRef<google.maps.InfoWindow, InfoWindowProps>(
     );
 
     useEffect(() => {
-      if (!maps?.InfoWindow) {
+      if (!mapsLib?.InfoWindow) {
         return;
       }
 
-      const infoWindow = new maps.InfoWindow({
+      const infoWindow = new mapsLib.InfoWindow({
         ariaLabel,
         content,
         disableAutoPan,
@@ -65,7 +65,7 @@ export const InfoWindow = forwardRef<google.maps.InfoWindow, InfoWindowProps>(
 
       setInfoWindow(infoWindow);
       passRef(ref, infoWindow);
-    }, [maps?.InfoWindow]);
+    }, [mapsLib?.InfoWindow]);
 
     useEffect(() => {
       if (!infoWindow) {

src/hooks/useApplyMapOptions.ts

@@ -4,299 +4,67 @@ export const useApplyMapOptions = (
   map: google.maps.Map | null,
   {
     center,
-    clickableIcons,
     heading,
     mapTypeId,
     streetView,
     tilt,
     zoom,
-    backgroundColor,
-    controlSize,
-    disableDefaultUI,
-    disableDoubleClickZoom,
-    draggableCursor,
-    draggingCursor,
-    fullscreenControl,
-    fullscreenControlOptions,
-    gestureHandling,
-    isFractionalZoomEnabled,
-    keyboardShortcuts,
-    mapTypeControl,
-    mapTypeControlOptions,
-    maxZoom,
-    minZoom,
-    noClear,
-    panControl,
-    panControlOptions,
-    restriction,
-    rotateControl,
-    rotateControlOptions,
-    scaleControl,
-    scaleControlOptions,
-    scrollwheel,
-    streetViewControl,
-    streetViewControlOptions,
-    styles,
-    zoomControl,
-    zoomControlOptions,
+    ...options
   }: google.maps.MapOptions,
 ) => {
-  const useMapOptionEffect = (fn, deps) =>
+  const useMapOptionEffect = (
+    fn: (map: google.maps.Map) => void,
+    deps: unknown[],
+  ) =>
     useEffect(() => {
       if (map) {
         fn(map);
       }
     }, deps);
 
+  useEffect(() => {
+    map?.setOptions(options);
+  }, Object.values(options));
+
   useMapOptionEffect(
-    (map: google.maps.Map) => {
+    (map) => {
       center && map.setCenter(center);
     },
     [center],
   );
 
   useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setClickableIcons(clickableIcons ?? true);
-    },
-    [clickableIcons],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
+    (map) => {
       typeof heading === 'number' && map.setHeading(heading);
     },
     [heading],
   );
 
   useMapOptionEffect(
-    (map: google.maps.Map) => {
+    (map) => {
       mapTypeId && map.setMapTypeId(mapTypeId);
     },
     [mapTypeId],
   );
 
   useMapOptionEffect(
-    (map: google.maps.Map) => {
+    (map) => {
       streetView && map.setStreetView(streetView);
     },
     [streetView],
   );
 
   useMapOptionEffect(
-    (map: google.maps.Map) => {
+    (map) => {
       typeof tilt === 'number' && map.setTilt(tilt);
     },
     [tilt],
   );
 
   useMapOptionEffect(
-    (map: google.maps.Map) => {
+    (map) => {
       typeof zoom === 'number' && map.setZoom(zoom);
     },
     [zoom],
   );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ backgroundColor });
-    },
-    [backgroundColor],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ controlSize });
-    },
-    [controlSize],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ disableDefaultUI });
-    },
-    [disableDefaultUI],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ disableDoubleClickZoom });
-    },
-    [disableDoubleClickZoom],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ draggableCursor });
-    },
-    [draggableCursor],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ draggingCursor });
-    },
-    [draggingCursor],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ fullscreenControl });
-    },
-    [fullscreenControl],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ fullscreenControlOptions });
-    },
-    [fullscreenControlOptions?.position],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ gestureHandling });
-    },
-    [gestureHandling],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ isFractionalZoomEnabled });
-    },
-    [isFractionalZoomEnabled],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ keyboardShortcuts });
-    },
-    [keyboardShortcuts],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ mapTypeControl });
-    },
-    [mapTypeControl],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ mapTypeControlOptions });
-    },
-    [mapTypeControlOptions],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ maxZoom });
-    },
-    [maxZoom],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ minZoom });
-    },
-    [minZoom],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ noClear });
-    },
-    [noClear],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ panControl });
-    },
-    [panControl],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ panControlOptions });
-    },
-    [panControlOptions],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ restriction });
-    },
-    [restriction],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ rotateControl });
-    },
-    [rotateControl],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ rotateControlOptions });
-    },
-    [rotateControlOptions],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ scaleControl });
-    },
-    [scaleControl],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ scaleControlOptions });
-    },
-    [scaleControlOptions],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ scrollwheel });
-    },
-    [scrollwheel],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ streetViewControl });
-    },
-    [streetViewControl],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ streetViewControlOptions });
-    },
-    [streetViewControlOptions],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ styles });
-    },
-    [styles],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ zoomControl });
-    },
-    [zoomControl],
-  );
-
-  useMapOptionEffect(
-    (map: google.maps.Map) => {
-      map.setOptions({ zoomControlOptions });
-    },
-    [zoomControlOptions?.position],
-  );
 };