Commit f12ce1f0 authored by Yoelis Acourt's avatar Yoelis Acourt

feat: add wrapper component and warning

parent 6f699f82
...@@ -9,8 +9,10 @@ export const _useFeatureFlag = function useFeatureFlag(cookieKeys) { ...@@ -9,8 +9,10 @@ export const _useFeatureFlag = function useFeatureFlag(cookieKeys) {
const [isFeatureEnabled, setIsFeatureEnabled] = useState(checkFeatureFlag); const [isFeatureEnabled, setIsFeatureEnabled] = useState(checkFeatureFlag);
useEffect(() => { useEffect(() => {
const hasEnabledFlag = checkFeatureFlag(); const hasEnabledFlag = checkFeatureFlag();
isFeatureEnabled && console.error("Warning: feature flags are in use");
if (isFeatureEnabled !== hasEnabledFlag) { if (isFeatureEnabled !== hasEnabledFlag) {
setIsFeatureEnabled(hasEnabledFlag); setIsFeatureEnabled(hasEnabledFlag);
......
module Gargantext.Hooks.UseFeatureFlag where module Gargantext.Hooks.UseFeatureFlag where
import Prelude import Prelude
import Effect (Effect)
import Effect.Uncurried (runEffectFn1, EffectFn1) import Effect.Uncurried (runEffectFn1, EffectFn1)
import Gargantext.Utils.Reactix as R2 import Gargantext.Utils.Reactix as R2
import Reactix as R import Reactix as R
import Reactix.DOM.HTML as H
foreign import _useFeatureFlag :: EffectFn1 (Array String) Boolean 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. 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. 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 : Usage :
parentCpt :: R.Component () parentCpt :: R.Component ()
parentCpt = here.component "container" cpt parentCpt = here.component "container" cpt
where where
...@@ -24,3 +30,25 @@ parentCpt = here.component "container" cpt ...@@ -24,3 +30,25 @@ parentCpt = here.component "container" cpt
useFeatureFlag :: Array String -> R.Hooks Boolean useFeatureFlag :: Array String -> R.Hooks Boolean
useFeatureFlag keys = useFeatureFlag keys =
R.unsafeHooksEffect $ runEffectFn1 _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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment