rename configId

configcat · Sep 26, 2024 · a6ba8d6 · a6ba8d6
1 parent 6e5f73e
commit a6ba8d6
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 44 deletions.
diff --git a/sandbox/package.json b/sandbox/package.json
@@ -10,7 +10,7 @@
     "@types/node": "^16.11.49",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
-    "configcat-react": "^4.6.0",
+    "configcat-react-local": "^4.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

diff --git a/sandbox/src/stories/Hoc.tsx b/sandbox/src/stories/Hoc.tsx
@@ -4,7 +4,7 @@ import { User } from 'configcat-common';
 
 
 export class HocComponent extends React.Component<
-  { featureFlagKey: string } & WithConfigCatClientProps,
+  { featureFlagKey: string, user?: User } & WithConfigCatClientProps,
   { isEnabled: boolean, loading: boolean }
 > {
   constructor(props: { featureFlagKey: string, user?: User } & WithConfigCatClientProps) {

diff --git a/sandbox/src/stories/MultipleConfigCatConfigs.tsx b/sandbox/src/stories/MultipleConfigCatConfigs.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
-import { ConfigCatProvider, User, useFeatureFlagByConfigId, withConfigCatClient } from 'configcat-react';
+import { ConfigCatProvider, useFeatureFlag, User, withConfigCatClient } from 'configcat-react';
 import { HocComponent} from  './Hoc';
 
 
 const CC_CONFIGID = { BACKEND: "BACKEND", SHARED: "SHARED"};
 
 const CC_SDK = { 
-  BACKEND: "TODO - INSERT BACKEND SDK KEY",
-  SHARED:"TODO - INSERT SHARED SDK KEY"}
+  BACKEND: "fnvWCKwpfPETf3O6BQgQAg/iMRmhH6DmECovlBvRtjpDw",
+  SHARED:"configcat-sdk-1/fnvWCKwpfPETf3O6BQgQAg/Idklvfo85EaPWoX9zOygNA"}
 
 const userObject = new User('microFrontendUser1');
 
-export const C1 = (args: { featureFlagKey: string, configId: string }) => {
+export const C1 = (args: { featureFlagKey: string, providerId: string }) => {
 
-  const { value: isFeatureEnabled, loading } = useFeatureFlagByConfigId(args.configId, args.featureFlagKey, false, userObject);
+  const { value: isFeatureEnabled, loading } = useFeatureFlag(args.featureFlagKey, false, userObject, args.providerId);
 
   return (
     <div>
@@ -26,7 +26,8 @@ export const C1 = (args: { featureFlagKey: string, configId: string }) => {
   );
 };
 
-const ConfigCatHocComponent = withConfigCatClient(HocComponent, CC_CONFIGID.BACKEND)
+const ConfigCatHocComponentBackEnd = withConfigCatClient(HocComponent, CC_CONFIGID.BACKEND)
+const ConfigCatHocComponentShared = withConfigCatClient(HocComponent, CC_CONFIGID.SHARED)
 
 export const MultipleConfigCatConfigs = () => {
 
@@ -35,19 +36,21 @@ export const MultipleConfigCatConfigs = () => {
       <h1>Embeded provider test</h1>
 
         <div>
-          <ConfigCatProvider sdkKey={CC_SDK.SHARED} options={{pollIntervalSeconds:10}} configId={CC_CONFIGID.SHARED}>
-
-            <C1 featureFlagKey={"sharedfeature1"} configId={CC_CONFIGID.SHARED}></C1>
-
-            <ConfigCatProvider sdkKey={CC_SDK.BACKEND} options={{pollIntervalSeconds:10}} configId={CC_CONFIGID.BACKEND}>
-              <C1 featureFlagKey={"isDebugModeOn"} configId={CC_CONFIGID.BACKEND}></C1>
-              <C1 featureFlagKey={"sharedfeature1"} configId={CC_CONFIGID.SHARED}></C1>
-
-
-            {/* Higher-Order Components sample */}
-              <ConfigCatHocComponent featureFlagKey={"isDebugModeOn"} user={userObject}/>
-            </ConfigCatProvider>
-
+          <ConfigCatProvider sdkKey={CC_SDK.SHARED} options={{pollIntervalSeconds:10}} id={CC_CONFIGID.SHARED}> 
+                Level1
+                <C1 featureFlagKey={"sharedfeature1"} providerId={CC_CONFIGID.SHARED}></C1>
+                <br />
+                <ConfigCatProvider sdkKey={CC_SDK.BACKEND} options={{pollIntervalSeconds:10}} id={CC_CONFIGID.BACKEND}>
+                    Level2 - Functional Component samples
+
+                    <C1 featureFlagKey={"isDebugModeOn"} providerId={CC_CONFIGID.BACKEND}></C1>
+                    <C1 featureFlagKey={"sharedfeature1"} providerId={CC_CONFIGID.SHARED}></C1>
+                    <br />
+                    Level2 - Higher-Order Component samples
+
+                    <ConfigCatHocComponentBackEnd featureFlagKey={"isDebugModeOn"} user={userObject}/>
+                    <ConfigCatHocComponentShared featureFlagKey={"sharedfeature1"} user={userObject}/>
+                </ConfigCatProvider>
           </ConfigCatProvider>
         </div>
 

diff --git a/src/ConfigCatContext.tsx b/src/ConfigCatContext.tsx
@@ -16,18 +16,18 @@ ConfigCatContext.displayName = "ConfigCatContext";
 
 const ConfigCatContextRegistry = new Map<string, React.Context<ConfigCatContextData | undefined>>();
 
-export function getOrCreateConfigCatContext(configId: string): React.Context<ConfigCatContextData | undefined> {
+export function getOrCreateConfigCatContext(providerId: string): React.Context<ConfigCatContextData | undefined> {
 
-  let context: React.Context<ConfigCatContextData | undefined> | undefined = ConfigCatContextRegistry.get(configId.toLowerCase());
+  let context: React.Context<ConfigCatContextData | undefined> | undefined = ConfigCatContextRegistry.get(providerId.toLowerCase());
 
   if (!context) {
     context = React.createContext<ConfigCatContextData | undefined>(
       void 0
     );
 
-    context.displayName = "ConfigCatContext_" + configId;
+    context.displayName = "ConfigCatContext_" + providerId;
 
-    ConfigCatContextRegistry.set(configId.toLowerCase(), context);
+    ConfigCatContextRegistry.set(providerId.toLowerCase(), context);
   }
 
   return context;

diff --git a/src/ConfigCatHOC.tsx b/src/ConfigCatHOC.tsx
@@ -26,16 +26,16 @@ export interface WithConfigCatClientProps {
 
 function withConfigCatClient<P>(
   WrappedComponent: React.ComponentType<P & WithConfigCatClientProps>,
-  configId?: string
+  providerId?: string
 ): React.ComponentType<Omit<P, keyof WithConfigCatClientProps>> {
 
-  const configCatContext = configId ? getOrCreateConfigCatContext(configId) : ConfigCatContext;
+  const configCatContext = providerId ? getOrCreateConfigCatContext(providerId) : ConfigCatContext;
 
   return (props: P) => (
     <configCatContext.Consumer>
       {(context: ConfigCatContextData | undefined) => {
         if (!context) {
-          throw createConfigCatProviderError("withConfigCatClient", configId);
+          throw createConfigCatProviderError("withConfigCatClient", providerId);
         }
         return (
           <WrappedComponent

diff --git a/src/ConfigCatHooks.tsx b/src/ConfigCatHooks.tsx
@@ -5,13 +5,13 @@ import { useContext, useEffect, useState } from "react";
 import ConfigCatContext, { getOrCreateConfigCatContext } from "./ConfigCatContext";
 import { createConfigCatProviderError } from "./ConfigCatProvider";
 
-function useFeatureFlag<T extends SettingValue>(key: string, defaultValue: T, user?: User, configId?: string): {
+function useFeatureFlag<T extends SettingValue>(key: string, defaultValue: T, user?: User, providerId?: string): {
   value: SettingTypeOf<T>;
   loading: boolean;
 } {
-  const configCatContext = useContext(ConfigCatContext);
+  const configCatContext = useContext(providerId ? getOrCreateConfigCatContext(providerId) : ConfigCatContext);
 
-  if (!configCatContext) throw createConfigCatProviderError("useFeatureFlag", configId);
+  if (!configCatContext) throw createConfigCatProviderError("useFeatureFlag", providerId);
 
   const [featureFlagValue, setFeatureFlag] = useState(defaultValue as SettingTypeOf<T>);
   const [loading, setLoading] = useState(true);
@@ -24,11 +24,11 @@ function useFeatureFlag<T extends SettingValue>(key: string, defaultValue: T, us
   return { value: featureFlagValue, loading };
 }
 
-function useConfigCatClient(configId?: string): IConfigCatClient {
+function useConfigCatClient(providerId?: string): IConfigCatClient {
 
-  const configCatContext = useContext(configId ? getOrCreateConfigCatContext(configId) : ConfigCatContext);
+  const configCatContext = useContext(providerId ? getOrCreateConfigCatContext(providerId) : ConfigCatContext);
 
-  if (!configCatContext) throw createConfigCatProviderError("useConfigCatClient", configId);
+  if (!configCatContext) throw createConfigCatProviderError("useConfigCatClient", providerId);
 
   return configCatContext.client;
 }

diff --git a/src/ConfigCatProvider.tsx b/src/ConfigCatProvider.tsx
@@ -2,8 +2,7 @@
 
 import type { ClientCacheState, HookEvents, IConfig, IConfigCatClient, IConfigCatClientSnapshot, IConfigCatKernel, IEvaluationDetails, RefreshResult, SettingKeyValue, SettingTypeOf, SettingValue, User } from "configcat-common";
 import { PollingMode, getClient } from "configcat-common";
-import type { PropsWithChildren } from "react";
-import React, { Component } from "react";
+import React, { Component, type PropsWithChildren } from "react";
 import { LocalStorageCache } from "./Cache";
 import ConfigCatContext, { type ConfigCatContextData, getOrCreateConfigCatContext } from "./ConfigCatContext";
 import { HttpConfigFetcher } from "./ConfigFetcher";
@@ -14,7 +13,7 @@ type ConfigCatProviderProps = {
   sdkKey: string;
   pollingMode?: PollingMode;
   options?: IReactAutoPollOptions | IReactLazyLoadingOptions | IReactManualPollOptions;
-  configId?: string;
+  id?: string;
 };
 
 type ConfigCatProviderState = {
@@ -84,9 +83,9 @@ class ConfigCatProvider extends Component<PropsWithChildren<ConfigCatProviderPro
     this.setState({ lastUpdated: new Date() });
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
 
-    const context: React.Context<ConfigCatContextData | undefined> = this.props.configId ? getOrCreateConfigCatContext(this.props.configId) : ConfigCatContext;
+    const context: React.Context<ConfigCatContextData | undefined> = this.props.id ? getOrCreateConfigCatContext(this.props.id) : ConfigCatContext;
 
     return (
       <context.Provider value={this.state}>
@@ -181,11 +180,11 @@ class ConfigCatClientStub implements IConfigCatClient {
   }
 }
 
-export function createConfigCatProviderError(methodName: string, configId?: string): Error {
+export function createConfigCatProviderError(methodName: string, providerId?: string): Error {
 
-  const configIdText: string = configId ? ` with configId="${configId}"` : "";
+  const providerIdText: string = providerId ? ` with id="${providerId}"` : "";
 
-  return Error(`${methodName} must be used in ConfigCatProvider${configIdText}!`);
+  return Error(`${methodName} must be used in ConfigCatProvider${providerIdText}!`);
 }
 
 export default ConfigCatProvider;
diff --git a/src/index.ts b/src/index.ts
@@ -3,7 +3,7 @@
 import type { IAutoPollOptions, IConfigCatLogger, ILazyLoadingOptions, IManualPollOptions } from "configcat-common";
 import type { GetValueType, WithConfigCatClientProps } from "./ConfigCatHOC";
 import withConfigCatClient from "./ConfigCatHOC";
-import { useConfigCatClient, useConfigCatClientByConfigId, useFeatureFlag, useFeatureFlagByConfigId } from "./ConfigCatHooks";
+import { useConfigCatClient, useFeatureFlag } from "./ConfigCatHooks";
 import ConfigCatProvider from "./ConfigCatProvider";
 
 export { createConsoleLogger, createFlagOverridesFromMap } from "configcat-common";
@@ -20,7 +20,7 @@ export type IReactManualPollOptions = IManualPollOptions;
 export type IReactConfigCatLogger = IConfigCatLogger;
 
 export type { WithConfigCatClientProps, GetValueType };
-export { ConfigCatProvider, useFeatureFlag, useConfigCatClient, withConfigCatClient, useFeatureFlagByConfigId, useConfigCatClientByConfigId };
+export { ConfigCatProvider, useFeatureFlag, useConfigCatClient, withConfigCatClient };
 
 /* Public types re-export from common-js */