115 lines
2.7 KiB
TypeScript
115 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, ReactNode } from 'react';
|
|
import { FeatureFlagService } from '@/lib/feature/FeatureFlagService';
|
|
|
|
/**
|
|
* ModeGuard - Conditional rendering component based on feature availability
|
|
*
|
|
* Usage:
|
|
* <ModeGuard feature="platform.dashboard">
|
|
* <DashboardContent />
|
|
* </ModeGuard>
|
|
*
|
|
* <ModeGuard feature="alpha_features">
|
|
* <AlphaContent />
|
|
* </ModeGuard>
|
|
*/
|
|
|
|
interface ModeGuardProps {
|
|
feature: string;
|
|
children: ReactNode;
|
|
fallback?: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Client-side feature guard component
|
|
* Uses API-driven feature flags instead of environment mode
|
|
*/
|
|
export function ModeGuard({ feature, children, fallback = null }: ModeGuardProps) {
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
const [isEnabled, setIsEnabled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true);
|
|
|
|
// Check feature availability using API-driven service
|
|
const checkFeature = async () => {
|
|
try {
|
|
const service = await FeatureFlagService.fromAPI();
|
|
setIsEnabled(service.isEnabled(feature));
|
|
} catch (error) {
|
|
console.error('Error checking feature:', error);
|
|
setIsEnabled(false);
|
|
}
|
|
};
|
|
|
|
checkFeature();
|
|
}, [feature]);
|
|
|
|
if (!isMounted) {
|
|
return <>{fallback}</>;
|
|
}
|
|
|
|
if (!isEnabled) {
|
|
return <>{fallback}</>;
|
|
}
|
|
|
|
return <>{children}</>;
|
|
}
|
|
|
|
/**
|
|
* Hook to check feature availability in client components
|
|
*/
|
|
export function useFeature(feature: string): boolean {
|
|
const [isEnabled, setIsEnabled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const checkFeature = async () => {
|
|
try {
|
|
const service = await FeatureFlagService.fromAPI();
|
|
setIsEnabled(service.isEnabled(feature));
|
|
} catch (error) {
|
|
console.error('Error checking feature:', error);
|
|
setIsEnabled(false);
|
|
}
|
|
};
|
|
|
|
checkFeature();
|
|
}, [feature]);
|
|
|
|
return isEnabled;
|
|
}
|
|
|
|
/**
|
|
* Hook to check multiple features
|
|
*/
|
|
export function useFeatures(features: string[]): Record<string, boolean> {
|
|
const [featureStates, setFeatureStates] = useState<Record<string, boolean>>({});
|
|
|
|
useEffect(() => {
|
|
const checkFeatures = async () => {
|
|
try {
|
|
const service = await FeatureFlagService.fromAPI();
|
|
const states: Record<string, boolean> = {};
|
|
|
|
features.forEach(feature => {
|
|
states[feature] = service.isEnabled(feature);
|
|
});
|
|
|
|
setFeatureStates(states);
|
|
} catch (error) {
|
|
console.error('Error checking features:', error);
|
|
const states: Record<string, boolean> = {};
|
|
features.forEach(feature => {
|
|
states[feature] = false;
|
|
});
|
|
setFeatureStates(states);
|
|
}
|
|
};
|
|
|
|
checkFeatures();
|
|
}, [features]);
|
|
|
|
return featureStates;
|
|
} |