feature Flags

src/App.jsx

@@ -20,11 +20,13 @@ import { ModalPopup } from "./pages/CustomModalPopup/ModalPopup";
 import { GithubProfileFinder } from "./pages/GithubProfileFinder/GithubProfileFinder";
 import { SearchAutoComplete } from "./pages/SearchAutoComplete/SearchAutoComplete";
 import { TicTacToe } from "./pages/TicTacToe";
+import FeatureFlagGlobalState from "./pages/Feature-flag/context/FeatureFlagsContext";
+import { FeatureFlags } from "./pages/Feature-flag/FeatureFlags";
 
 function App() {
   return (
     <ThemeProvider defaultTheme="system" storageKey="ui-theme">
-      <Header />      
+      <Header />
       <Routes>
         <Route path="React-Projects">
           <Route index element={<Home />} />
@@ -62,6 +64,15 @@ function App() {
           <Route path="search-auto-complete" element={<SearchAutoComplete />} />
           {/* Tic Tac Toe */}
           <Route path="tic-tac-toe" element={<TicTacToe />} />
+          {/* Feature Flag */}
+          <Route
+            path="feature-flags"
+            element={
+              <FeatureFlagGlobalState>
+                <FeatureFlags />
+              </FeatureFlagGlobalState>
+            }
+          />
 
           {/* Error Page */}
           <Route path="*" element={<NotFound />} />

src/data/projects.js

@@ -63,6 +63,11 @@ export const projects = [
     id: 13,
     name: 'Tic Tac Toe',
     path: 'tic-tac-toe'
+  },
+  {
+    id: 14,
+    name: 'Feature Flags',
+    path: 'feature-flags',
   }
 ];
 

src/pages/Feature-flag/FeatureFlags.jsx

@@ -0,0 +1,56 @@
+import RandomColor from "../RandomColor";
+import { TicTacToe } from "../TicTacToe";
+import Accordion from "../accordion/accordion";
+import LightDarkMode from "../light-dark-mode/Light-dark-mode";
+import TreeView from "../tree-view/TreeView";
+import { FeatureFlagsContext } from "./context/FeatureFlagsContext";
+import menus from "../tree-view/data";
+import TabTest from "../tree-view/custom-tabs/Tab-test";
+import { useContext } from "react";
+
+export const FeatureFlags = () => {
+  const { loading, enabledFlags } = useContext(FeatureFlagsContext);
+
+  const componentsToRender = [
+    {
+      key: "showLightAndDarkMode",
+      component: <LightDarkMode />,
+    },
+
+    {
+      key: "showTicTacToeBoard",
+      component: <TicTacToe />,
+    },
+    {
+      key: "showRandomColorGenerator",
+      component: <RandomColor />,
+    },
+    {
+      key: "showAccordion",
+      component: <Accordion />,
+    },
+    {
+      key: "showTreeView",
+      component: <TreeView menus={menus} />,
+    },
+    {
+      key : 'showTabs',
+      component : <TabTest />
+    }
+  ];
+
+  function checkEnabledFlags(getCurrentKey) {
+    return enabledFlags[getCurrentKey];
+  }
+
+  if (loading) return <h1 className="text-lg text-center">Loading</h1>;
+
+  return (
+    <div>
+      <h1 className="text-2xl text-center bg-gr py-4">Feature Flags</h1>
+      {componentsToRender.map((componentItem) =>
+        checkEnabledFlags(componentItem.key) ? componentItem.component : null,
+      )}
+    </div>
+  );
+}

src/pages/Feature-flag/context/FeatureFlagsContext.jsx

@@ -0,0 +1,34 @@
+import { createContext, useState, useEffect } from "react";
+import featureFlagsDataServiceCall from "../data";
+
+export const FeatureFlagsContext = createContext(null);
+
+export default function FeatureFlagGlobalState({ children }) {
+  const [loading, setLoading] = useState(false);
+  const [enabledFlags, setEnabledFlags] = useState({});
+
+  async function fetchFeatureFlags() {
+    try {
+      setLoading(true);
+      // original service call
+      const response = await featureFlagsDataServiceCall();
+      console.log(response);
+      setEnabledFlags(response);
+      setLoading(false);
+    } catch (error) {
+      setLoading(false);
+      console.log(error);
+      throw new Error(error);
+    }
+  }
+
+  useEffect(() => {
+    fetchFeatureFlags();
+  }, []);
+
+  return (
+    <FeatureFlagsContext.Provider value={{ loading, enabledFlags }}>
+      {children}
+    </FeatureFlagsContext.Provider>
+  );
+}

src/pages/Feature-flag/data.js

@@ -0,0 +1,18 @@
+const dummyApiResponse = {
+  showLightAndDarkMode: false,
+  showTicTacToeBoard: true,
+  showRandomColorGenerator: true,
+  showAccordion: true,
+  showTreeView: false,
+  showTabs: true,
+};
+
+function featureFlagsDataServiceCall() {
+
+  return new Promise((resolve, reject) => {
+    if (dummyApiResponse) setTimeout(resolve(dummyApiResponse), 500);
+    else reject("Some error eccured! Please Try again");
+  });
+}
+
+export default featureFlagsDataServiceCall;

src/pages/RandomColor.jsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 
 function RandomColor() {
   const [typeOfColor, settypeOfColor] = useState("hex");
-  const [color, setcolor] = useState("#2123da");
+  const [color, setcolor] = useState("#432383");
 
   function randomColorUtility(length) {
     return Math.floor(Math.random() * length);