fix: Remove unnecessary withOptimizely usage from Experiment and Feature components, and fix timeout log message (#42)

Summary:

Experiment and Feature were refactored to use hooks internally. Now, they access the context set by OptimizelyProvider via useContext, so there's no need to use withOptimizely on them.

In this PR I removed withOptimizely from those components, and fixed a log message related to timeout so that it shows the correct timeout when a component timeout prop was used.

Test Plan:

Manually tested, existing unit tests pass

Author: mjc1283

src/Experiment.tsx

@@ -19,15 +19,14 @@ import { UserAttributes } from '@optimizely/optimizely-sdk';
 
 import { useExperiment } from './hooks';
 import { VariationProps } from './Variation';
-import { withOptimizely, WithOptimizelyProps } from './withOptimizely';
 
 export type ChildrenRenderFunction = (
   variation: string | null,
   clientReady?: boolean,
   didTimeout?: boolean
 ) => React.ReactNode;
 
-export interface ExperimentProps extends WithOptimizelyProps {
+export interface ExperimentProps {
   // TODO add support for overrideUserId
   experiment: string;
   autoUpdate?: boolean;
@@ -78,4 +77,4 @@ const Experiment: React.FunctionComponent<ExperimentProps> = props => {
   return match ? React.cloneElement(match, { variation }) : null;
 };
 
-export const OptimizelyExperiment = withOptimizely(Experiment);
+export const OptimizelyExperiment = Experiment;

src/Feature.tsx

@@ -18,7 +18,6 @@ import { UserAttributes } from '@optimizely/optimizely-sdk';
 
 import { VariableValuesObject } from './client';
 import { useFeature } from './hooks';
-import { withOptimizely, WithOptimizelyProps } from './withOptimizely';
 
 export type ChildrenRenderFunction = (
   isEnabled: boolean,
@@ -27,7 +26,7 @@ export type ChildrenRenderFunction = (
   didTimeout: boolean
 ) => React.ReactNode;
 
-export interface FeatureProps extends WithOptimizelyProps {
+export interface FeatureProps {
   feature: string;
   timeout?: number;
   autoUpdate?: boolean;
@@ -54,4 +53,4 @@ const FeatureComponent: React.FunctionComponent<FeatureProps> = props => {
   return <>{children(isEnabled, variables, clientReady, didTimeout)}</>;
 };
 
-export const OptimizelyFeature = withOptimizely(FeatureComponent);
+export const OptimizelyFeature = FeatureComponent;

src/hooks.ts

@@ -110,7 +110,9 @@ const initializeWhenClientReadyFn = (
           return;
         }
         setState((state: HookState) => ({ ...state, didTimeout: true }));
-        logger.info(`${type}="${name}" could not be set before timeout of ${timeout}ms, reason="${res.reason || ''}"`);
+        logger.info(
+          `${type}="${name}" could not be set before timeout of ${finalReadyTimeout}ms, reason="${res.reason || ''}"`
+        );
         // Since we timed out, wait for the dataReadyPromise to resolve before setting up.
         return res.dataReadyPromise!.then(() => {
           logger.info(`${type}="${name}" is now set, but after timeout.`);