use hplatform hook

src/components/Platform/index.tsx

@@ -1,11 +1,12 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import { ILoadHMapOptions, loadHMap } from '../libs/loadHMap';
 import { initHPlatform } from '../libs/initPlatform';
 import { DefaultOptionsType } from '../libs/defaults';
 import { PlatformContext } from '../../contexts/platform';
 
-export interface IHPlatform extends ILoadHMapOptions {
+export interface IHPlatform {
   children: React.ReactNode | React.ReactNode[];
+  options: ILoadHMapOptions;
 }
 
 export interface IHPlatformState {
@@ -15,24 +16,34 @@ export interface IHPlatformState {
 }
 
 export const HPlatform = (props: IHPlatform) => {
-  const loadMapCB = useCallback(() => {
-    loadHMap(props).then((options: DefaultOptionsType) => {
-      const platform = initHPlatform(options);
-      setPlatformState((prevState: IHPlatformState) => ({
-        ...prevState,
-        platform,
+  // Reload the map resources if the options changes
+  useEffect(() => {
+    loadHMap(props.options).then((options: DefaultOptionsType) => {
+      setPlatformState({
+        ...platformState,
         options,
-      }));
+      });
     });
-  }, [props]);
+  }, [props.options]);
+
+  const initilizePlatform = () => {
+    const platform = initHPlatform(platformState.options);
+    setPlatformState((prevState: IHPlatformState) => ({
+      ...prevState,
+      platform,
+    }));
+  };
+
   const [platformState, setPlatformState] = useState<IHPlatformState>({
-    reInitMap: loadMapCB,
+    reInitMap: initilizePlatform,
     platform: {},
   });
 
   useEffect(() => {
-    loadMapCB();
-  }, [platformState.platform.A]);
+    // initialize the platform when the js files are loaded the options are updated
+    platformState.options && initilizePlatform();
+  }, [platformState.options]);
+
   const { platform, options } = platformState;
 
   return (
@@ -43,3 +54,11 @@ export const HPlatform = (props: IHPlatform) => {
     </PlatformContext.Provider>
   );
 };
+
+// Use this to create A Here Map Platform
+export const useHPlatform = (
+  platformOptions: ILoadHMapOptions,
+  children?: React.ReactNode | ReactNode[]
+) => {
+  return <HPlatform options={platformOptions}>{children}</HPlatform>;
+};

src/components/libs/initPlatform.ts

@@ -1,7 +1,8 @@
 import { DefaultOptionsType } from './defaults';
 
-export const initHPlatform = (options: DefaultOptionsType) => {
-  const { app_id, app_code, apikey } = options;
+export const initHPlatform = (options?: DefaultOptionsType) => {
+  const { app_id, app_code, apikey } = options || {};
+  console.log({ options });
   if ((!app_id || !app_code) && !apikey) {
     throw new Error('Options must include appId and appCode OR an apiKey');
   }

src/components/libs/loadHMap.ts

@@ -3,14 +3,21 @@ import { DefaultOptionsType, defaultOptions } from './defaults';
 import merge from 'lodash.merge';
 
 // Merges the option with the defaults to create a unison and make required values available
-const optionMerger = (options: ILoadHMapOptions) =>
-  merge(defaultOptions, options);
+const optionMerger = (options: ILoadHMapOptions) => {
+  const { appId, appKey, apiKey, ...opts } = options;
+  return merge(defaultOptions, { ...opts, app_id: appId, app_code: appKey });
+};
 
 export interface ILoadHMapOptions {
   version?: string; // Version of the api to load. Defaults to v3
   interactive?: boolean; // Adds interactive scripts
   includeUI?: boolean; // Should add the UI scripts
   includePlaces?: boolean; // Include the places script
+  useHTTPS?: boolean;
+  useCIT?: boolean;
+  appId?: string;
+  appKey?: string;
+  apiKey?: string;
 }
 
 export const loadHMap = async (

src/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC, HTMLAttributes, ReactChild } from 'react';
-import { HPlatform } from './components/Platform';
+import { useHPlatform } from './components/Platform';
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
   /** custom content, defaults to 'the snozzberries taste like snozzberries' */
@@ -8,17 +8,21 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 // Please do not use types off of a default export module or else Storybook Docs will suffer.
 // see: https://github.com/storybookjs/storybook/issues/9556
-/**
- * A custom Thing component. Neat!
- */
+
 export const Thing: FC<Props> = ({ children }) => {
-  return (
-    <div>
-      <HPlatform >
-        {children || `the snozzberries taste like snozzberries`}
-      </HPlatform>
-    </div>
+  const renderHereComponents = useHPlatform(
+    {
+      appId: '2Ts3vDUTLPW8kNUtyFRY',
+      appKey: 'MDivMVFtNkpim-dWuetlWw',
+      useCIT: true,
+      useHTTPS: true,
+      interactive: true,
+      includeUI: true,
+      includePlaces: true,
+    },
+    <>{children || `the snozzberries taste like snozzberries`}</>
   );
+  return <div>{renderHereComponents}</div>;
 };
 
 export * from './components';