Merge pull request launchdarkly-labs#5 from launchdarkly-labs/subscri…

…beToFlagChanges Add Subscribe to flag updates
KyleLeneau · Jun 16, 2022 · f836ddb · f836ddb
2 parents 8de49eb + 375a0e8
commit f836ddb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/src/client/provider.tsx b/src/client/provider.tsx
@@ -1,8 +1,8 @@
 import React, { Component, PropsWithChildren } from 'react';
-import { initialize, LDOptions } from 'launchdarkly-js-client-sdk';
-import { ProviderConfig } from './types';
+import { initialize, LDOptions, LDClient, LDFlagChangeset, LDFlagSet } from 'launchdarkly-js-client-sdk';
+import { ProviderConfig, defaultReactOptions } from './types';
 import { Provider, LDContext as HocState } from './context';
-import { camelCaseKeys } from './utils';
+import { camelCaseKeys, getFlattenedFlagsFromChangeset } from './utils';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 class LDProvider extends Component<PropsWithChildren<ProviderConfig>, HocState> {
@@ -13,26 +13,29 @@ class LDProvider extends Component<PropsWithChildren<ProviderConfig>, HocState>
     const { clientSideID } = props;
 
     console.log(`initializing ld client with ${clientSideID}...`);
-    let ldClient;
-
-    if (typeof window !== 'undefined') {
-      const options = {
-        bootstrap: window.ssrFlags,
-      };
-      ldClient = initialize(clientSideID, { anonymous: true }, options);
-      this.state = {
-        flags: camelCaseKeys(options.bootstrap),
-        ldClient,
-      };
-    } else {
-      console.error(`Fix LDProvider to work on the server`);
-      //TODO: ldClient = this.importInitServerSdk(props.sdkKey, options);
-    }
+    const options = {
+      bootstrap: window.ssrFlags,
+    };
+    const ldClient = initialize(clientSideID, { anonymous: true }, options);
+    this.state = {
+      flags: camelCaseKeys(options.bootstrap),
+      ldClient,
+    };
   }
 
-  async importInitServerSdk(clientSideID: string, options: LDOptions) {
-    const { initServerSdk } = await import('../server');
-    return initServerSdk(clientSideID, options);
+  componentDidMount() {
+    this.subscribeToChanges()
+  }
+
+
+  subscribeToChanges = () => {
+    const { flags: targetFlags } = this.state;
+    this.state.ldClient.on('change', (changes: LDFlagChangeset) => {
+      const flattened: LDFlagSet = getFlattenedFlagsFromChangeset(changes, targetFlags);
+      if (Object.keys(flattened).length > 0) {
+        this.setState(({ flags }) => ({ flags: { ...flags, ...flattened } }));
+      }
+    });
   }
 
   render() {

diff --git a/src/client/utils.ts b/src/client/utils.ts
@@ -37,9 +37,10 @@ export const getFlattenedFlagsFromChangeset = (
 ): LDFlagSet => {
   const flattened: LDFlagSet = {};
   for (const key in changes) {
-    if (!targetFlags || targetFlags[key] !== undefined) {
+
+    const flagKey = camelCase(key);
+    if (!targetFlags || targetFlags[flagKey] !== undefined) {
       // tslint:disable-next-line:no-unsafe-any
-      const flagKey = camelCase(key);
       flattened[flagKey] = changes[key].current;
     }
   }