feat: useFeatureFlag

feat: add useFeatureFlag hook

package-lock.json

@@ -40,6 +40,7 @@
         "http-proxy-middleware": "^3.0.3",
         "immer": "~9.0.5",
         "isomorphic-unfetch": "~3.1.0",
+        "js-cookie": "^3.0.5",
         "markdown-it": "~13.0.1",
         "minify": "^11.3.0",
         "prop-types": "~15.6.2",
@@ -7810,6 +7811,14 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "license": "MIT"

package.json

@@ -56,6 +56,7 @@
     "http-proxy-middleware": "^3.0.3",
     "immer": "~9.0.5",
     "isomorphic-unfetch": "~3.1.0",
+    "js-cookie": "^3.0.5",
     "markdown-it": "~13.0.1",
     "minify": "^11.3.0",
     "prop-types": "~15.6.2",

src/Gargantext/Hooks/UseFeatureFlag.js

+'use strict';
+
+import { useEffect, useState } from 'react';
+import Cookies from 'js-cookie';
+
+export const _useFeatureFlag = function useFeatureFlag(cookieKeys) {
+  const checkFeatureFlag = () =>
+    cookieKeys.some((key) => Cookies.get(key) === 'true');
+
+  const [isFeatureEnabled, setIsFeatureEnabled] = useState(checkFeatureFlag);
+
+  useEffect(() => {
+    const hasEnabledFlag = checkFeatureFlag();
+
+    if (isFeatureEnabled !== hasEnabledFlag) {
+      setIsFeatureEnabled(hasEnabledFlag);
+    }
+  }, [cookieKeys, isFeatureEnabled]);
+
+  return isFeatureEnabled;
+};
+
+

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
+{-
+  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.
+  Usage :
+parentCpt :: R.Component ()
+parentCpt = here.component "container" cpt
+  where
+  cpt _ _ = do
+    shouldBeVisible <- useFeatureFlag ["keyOne", "keyTwo", "keyThree"]
+    pure $ 
+      H.div {} [if shouldBeVisible then H.text "I should be visible" else H.text "Im not visible"]
+  
+-}
+useFeatureFlag :: Array String -> R.Hooks Boolean
+useFeatureFlag keys =
+  R.unsafeHooksEffect $ runEffectFn1 _useFeatureFlag keys