fix: output an error when useMap is called outside APIProvider (#117)

When used outside the APIProvider the useMap() and all dependent hooks would just silently fail and never return anything.

For a better developer experience, we will now log an error to the console when the `useMap()` hook is called from a component outside the APIProvider hierarchy.

src/hooks/__tests__/__snapshots__/use-map.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it should log an error when used outside the APIProvider 1`] = `
+[
+  [
+    "useMap(): failed to retrieve APIProviderContext. Make sure that the <APIProvider> component exists and that the component you are calling \`useMap()\` from is a sibling of the <APIProvider>.",
+  ],
+]
+`;

src/hooks/__tests__/use-map.test.tsx

@@ -92,3 +92,15 @@ test('it should return a map instance by its id', () => {
   renderHookResult = renderHook(() => useMap('unknown'), {wrapper});
   expect(renderHookResult.result.current).toBe(null);
 });
+
+test('it should log an error when used outside the APIProvider', () => {
+  const consoleErrorSpy = jest
+    .spyOn(console, 'error')
+    .mockImplementation(() => {});
+
+  const res = renderHook(() => useMap());
+  expect(res.result.current).toBe(null);
+
+  expect(consoleErrorSpy).toHaveBeenCalled();
+  expect(consoleErrorSpy.mock.calls).toMatchSnapshot();
+});

src/hooks/use-map.ts

@@ -2,16 +2,30 @@ import {useContext} from 'react';
 
 import {APIProviderContext} from '../components/api-provider';
 import {GoogleMapsContext} from '../components/map';
+import {logErrorOnce} from '../libraries/errors';
 
 /**
  * Retrieves a map-instance from the context. This is either an instance
  * identified by id or the parent map instance if no id is specified.
  * Returns null if neither can be found.
  */
 export const useMap = (id: string | null = null): google.maps.Map | null => {
-  const {mapInstances = {}} = useContext(APIProviderContext) || {};
+  const ctx = useContext(APIProviderContext);
   const {map} = useContext(GoogleMapsContext) || {};
 
+  if (ctx === null) {
+    logErrorOnce(
+      'useMap(): failed to retrieve APIProviderContext. ' +
+        'Make sure that the <APIProvider> component exists and that the ' +
+        'component you are calling `useMap()` from is a sibling of the ' +
+        '<APIProvider>.'
+    );
+
+    return null;
+  }
+
+  const {mapInstances} = ctx;
+
   // if an id is specified, the corresponding map or null is returned
   if (id !== null) return mapInstances[id] || null;