feat: add wrapper component and warning

src/Gargantext/Hooks/UseFeatureFlag.js

@@ -9,8 +9,10 @@ export const _useFeatureFlag = function useFeatureFlag(cookieKeys) {
 
   const [isFeatureEnabled, setIsFeatureEnabled] = useState(checkFeatureFlag);
 
+  
   useEffect(() => {
     const hasEnabledFlag = checkFeatureFlag();
+    isFeatureEnabled && console.error("Warning: feature flags are in use");
 
     if (isFeatureEnabled !== hasEnabledFlag) {
       setIsFeatureEnabled(hasEnabledFlag);

src/Gargantext/Hooks/UseFeatureFlag.purs

 module Gargantext.Hooks.UseFeatureFlag where
 
 import Prelude
-import Effect (Effect)
+
 import Effect.Uncurried (runEffectFn1, EffectFn1)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
-import Reactix.DOM.HTML as H
+
 foreign import _useFeatureFlag :: EffectFn1 (Array String) Boolean
+
+here :: R2.Here
+here = R2.here "Gargantext.Hooks.UseFeatureFlag"
+
 {-
   useFeatureFlag is a custom React hook that determines whether a feature flag is enabled based on the presence and value of specific cookies. 
   It checks the cookies provided as keys and returns true if any of them are set to 'true'. Otherwise, it returns false.
-  This hook is useful for conditional rendering of features based on user-specific settings or feature toggles managed via cookies.
+
+  This hook is useful for conditional rendering of features based on user-specific feature toggles managed via cookies.
   Usage :
+
 parentCpt :: R.Component ()
 parentCpt = here.component "container" cpt
   where
@@ -24,3 +30,25 @@ parentCpt = here.component "container" cpt
 useFeatureFlag :: Array String -> R.Hooks Boolean
 useFeatureFlag keys =
   R.unsafeHooksEffect $ runEffectFn1 _useFeatureFlag keys
+
+type FeatureProps =
+  ( render :: Boolean -> R.Element
+  , keys :: Array String
+  )
+
+{-
+  Use feature component two wrap your component behind a feature flag.
+  It might be cleaner to use it instead of directly using the useFeatureFlag hook
+  Usage:
+  feature { keys: [ "keyOne" ], render: \shouldRender -> if shouldRender then H.text "hello" else H.text "you cant see me" }
+-}
+feature :: R2.Leaf (FeatureProps)
+feature =
+  ( \{ keys, render } _ -> do
+      shouldRender <- useFeatureFlag keys
+      pure $
+        render shouldRender
+  )
+    # R.hooksComponent "flagged"
+    # R2.leaf
+