From 33c6ee80d22eb63e4e0957de291ef23b27352dbf Mon Sep 17 00:00:00 2001
From: Brian Lagman <blagman@launchdarkly.com>
Date: Thu, 16 Jun 2022 15:03:25 -0700
Subject: [PATCH 1/4] Add changes to subscribe to changes

---
 example/app/routes/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/example/app/routes/index.tsx b/example/app/routes/index.tsx
index cc28108..f3d7199 100644
--- a/example/app/routes/index.tsx
+++ b/example/app/routes/index.tsx
@@ -1,11 +1,11 @@
 import { useFlags } from 'remix-sdk/client';
 
 export default function Index() {
-  const { devTestFlag } = useFlags();
+  const { thisIsASpecialTest } = useFlags();
 
   return (
     <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
-      <h1>{devTestFlag ? `Welcome to Remix with LD!` : `Welcome to Remix!`}</h1>
+      <h1>{thisIsASpecialTest ? `Welcome to Remix with LD!` : `Welcome to Remix!`}</h1>
       <ul>
         <li>
           <a target="_blank" href="https://remix.run/tutorials/blog" rel="noreferrer">

From bd836f4c16ef511ab4e38038287054fbeb0c3fc7 Mon Sep 17 00:00:00 2001
From: Brian Lagman <blagman@launchdarkly.com>
Date: Thu, 16 Jun 2022 15:05:34 -0700
Subject: [PATCH 2/4] Add provider changes

---
 src/client/provider.tsx | 51 ++++++++++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/client/provider.tsx b/src/client/provider.tsx
index 6dec8ea..da423d4 100644
--- 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,29 +13,38 @@ 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 ldClient;
+    
+    // if (typeof window !== 'undefined') {
+    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) => {
+      console.log('changes', changes)
+      const flattened: LDFlagSet = getFlattenedFlagsFromChangeset(changes, targetFlags);
+      console.log('flattened', flattened)
+      if (Object.keys(flattened).length > 0) {
+        this.setState(({ flags }) => ({ flags: { ...flags, ...flattened } }));
+      }
+    });
   }
 
   render() {
+    console.log('this.state', this.state)
     return <Provider value={this.state}>{this.props.children}</Provider>;
   }
 }

From 33f2e8d9b83871152fbe857ed61b0087d775e4f4 Mon Sep 17 00:00:00 2001
From: Brian Lagman <blagman@launchdarkly.com>
Date: Thu, 16 Jun 2022 15:06:51 -0700
Subject: [PATCH 3/4] Remove comments

---
 src/client/provider.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/client/provider.tsx b/src/client/provider.tsx
index da423d4..c0acaf3 100644
--- a/src/client/provider.tsx
+++ b/src/client/provider.tsx
@@ -13,9 +13,6 @@ class LDProvider extends Component<PropsWithChildren<ProviderConfig>, HocState>
     const { clientSideID } = props;
 
     console.log(`initializing ld client with ${clientSideID}...`);
-    // const ldClient;
-    
-    // if (typeof window !== 'undefined') {
     const options = {
       bootstrap: window.ssrFlags,
     };

From 375a0e86e40a5201fc9d2a97fac5306cf4230e91 Mon Sep 17 00:00:00 2001
From: Brian Lagman <blagman@launchdarkly.com>
Date: Thu, 16 Jun 2022 15:45:51 -0700
Subject: [PATCH 4/4] Fix bug that fixes the hot reload

---
 example/app/routes/index.tsx | 4 ++--
 src/client/provider.tsx      | 3 ---
 src/client/utils.ts          | 5 +++--
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/example/app/routes/index.tsx b/example/app/routes/index.tsx
index f3d7199..cc28108 100644
--- a/example/app/routes/index.tsx
+++ b/example/app/routes/index.tsx
@@ -1,11 +1,11 @@
 import { useFlags } from 'remix-sdk/client';
 
 export default function Index() {
-  const { thisIsASpecialTest } = useFlags();
+  const { devTestFlag } = useFlags();
 
   return (
     <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
-      <h1>{thisIsASpecialTest ? `Welcome to Remix with LD!` : `Welcome to Remix!`}</h1>
+      <h1>{devTestFlag ? `Welcome to Remix with LD!` : `Welcome to Remix!`}</h1>
       <ul>
         <li>
           <a target="_blank" href="https://remix.run/tutorials/blog" rel="noreferrer">
diff --git a/src/client/provider.tsx b/src/client/provider.tsx
index c0acaf3..6bf9ee8 100644
--- a/src/client/provider.tsx
+++ b/src/client/provider.tsx
@@ -31,9 +31,7 @@ class LDProvider extends Component<PropsWithChildren<ProviderConfig>, HocState>
   subscribeToChanges = () => {
     const { flags: targetFlags } = this.state;
     this.state.ldClient.on('change', (changes: LDFlagChangeset) => {
-      console.log('changes', changes)
       const flattened: LDFlagSet = getFlattenedFlagsFromChangeset(changes, targetFlags);
-      console.log('flattened', flattened)
       if (Object.keys(flattened).length > 0) {
         this.setState(({ flags }) => ({ flags: { ...flags, ...flattened } }));
       }
@@ -41,7 +39,6 @@ class LDProvider extends Component<PropsWithChildren<ProviderConfig>, HocState>
   }
 
   render() {
-    console.log('this.state', this.state)
     return <Provider value={this.state}>{this.props.children}</Provider>;
   }
 }
diff --git a/src/client/utils.ts b/src/client/utils.ts
index a8ffc85..a5b306a 100644
--- 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;
     }
   }