gradual-rollout

import { FlagProvider } from '@unleash/proxy-client-react';

function App() {
  return (
    <FlagProvider config={{
      url: 'your-unleash-proxy-url',
      clientKey: 'your-client-key',
      refreshInterval: 15,
      appName: 'banking-app',
      context: { 
        userId: 'default-user' // Initial context
      }
    }}>
      <YourBankingApp />
    </FlagProvider>
  );
}

import { useUnleashContext, useFlag } from '@unleash/proxy-client-react';
import { useState, useEffect } from 'react';

const FeatureTest = () => {
  const [testUserId, setTestUserId] = useState('');
  const updateContext = useUnleashContext();
  const isFeatureEnabled = useFlag('your-banking-feature-flag');

  const handleUserChange = async (newUserId) => {
    if (newUserId) {
      // Update context and wait for new flags to load
      await updateContext({ userId: newUserId });
      console.log('Flags updated for user:', newUserId);
    }
  };

  return (
    <div style={{ 
      position: 'fixed', 
      top: '10px', 
      right: '10px', 
      background: '#f0f0f0', 
      padding: '15px',
      border: '1px solid #ccc',
      borderRadius: '5px',
      zIndex: 1000
    }}>
      <h4>Feature Flag Test</h4>
      <input 
        type="text"
        placeholder="Enter User ID (e.g., user1)"
        value={testUserId}
        onChange={(e) => setTestUserId(e.target.value)}
        onKeyPress={(e) => {
          if (e.key === 'Enter') {
            handleUserChange(testUserId);
          }
        }}
      />
      <button onClick={() => handleUserChange(testUserId)}>
        Update User
      </button>

      <div style={{ marginTop: '10px' }}>
        <strong>Feature Status: </strong>
        <span style={{ 
          color: isFeatureEnabled ? 'green' : 'red',
          fontWeight: 'bold'
        }}>
          {isFeatureEnabled ? 'ENABLED' : 'DISABLED'}
        </span>
      </div>

      <div style={{ marginTop: '5px', fontSize: '12px' }}>
        Current User: {testUserId || 'default-user'}
      </div>
    </div>
  );
};

import { useUnleashContext } from '@unleash/proxy-client-react';

const LoginComponent = () => {
  const updateContext = useUnleashContext();

  const handleLogin = async (user) => {
    // Your existing login logic
    const loggedInUser = await authenticateUser(user);

    // Update Unleash context with real user ID
    await updateContext({ 
      userId: loggedInUser.id,
      // You can add more context if needed
      userType: loggedInUser.accountType, // e.g., 'premium', 'basic'
      environment: 'development'
    });

    console.log('Feature flags updated for user:', loggedInUser.id);
  };

  // ... rest of your login component
};

import { useFlag } from '@unleash/proxy-client-react';

const BankingFeatureComponent = () => {
  const showNewFeature = useFlag('your-banking-feature-flag');

  return (
    <div>
      {showNewFeature ? (
        <div>
          {/* New banking feature UI */}
          <h3>🎉 New Enhanced Dashboard!</h3>
          {/* Your new feature content */}
        </div>
      ) : (
        <div>
          {/* Original banking feature UI */}
          <h3>Standard Dashboard</h3>
          {/* Your existing content */}
        </div>
      )}
    </div>
  );
};

import { useFlag, useUnleashContext } from '@unleash/proxy-client-react';
import { useState } from 'react';

const TestComponent = () => {
  const [testUserId, setTestUserId] = useState('');
  const updateContext = useUnleashContext();
  const enabled = useFlag('filtering-feature');

  const handleTestUser = async () => {
    if (testUserId) {
      console.log('Updating context with user:', testUserId);
      await updateContext({ userId: testUserId });
      console.log('Context updated, checking flag...');
    }
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', margin: '10px' }}>
      <h3>Feature Flag Test</h3>

      {/* Current flag status */}
      <div style={{ marginBottom: '20px' }}>
        <strong>Flag Status: </strong>
        {enabled ? (
          <span style={{ color: 'green' }}>✅ filtering-feature is ENABLED</span>
        ) : (
          <span style={{ color: 'red' }}>❌ filtering-feature is DISABLED</span>
        )}
      </div>

      {/* Test different users */}
      <div>
        <input
          type="text"
          placeholder="Enter test user ID (e.g., user1)"
          value={testUserId}
          onChange={(e) => setTestUserId(e.target.value)}
          style={{ marginRight: '10px', padding: '5px' }}
        />
        <button onClick={handleTestUser} style={{ padding: '5px 10px' }}>
          Test User
        </button>
      </div>

      <div style={{ marginTop: '10px', fontSize: '12px', color: '#666' }}>
        Try different user IDs to test the gradual rollout
      </div>
    </div>
  );
};

export default TestComponent;