Add condition for toggles

vvmgev · Dec 21, 2023 · 1e1e24c · 1e1e24c
1 parent e7d5245
commit 1e1e24c
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/browser-extension/src/options/components/app/app.tsx b/browser-extension/src/options/components/app/app.tsx
@@ -6,7 +6,6 @@ import Footer from "../footer/footer";
 import SideBar from "../sideBar/sideBar";
 import RuleRoutes from "./routes";
 import BrowserSupport from "./browserSupport";
-import BrowserSupportService from "src/services/BrowserSupportService";
 import SideBarContextProvider, {
   SideBarContext,
 } from "src/context/sideBarContext";

diff --git a/browser-extension/src/options/components/sideBar/components/record/record.tsx b/browser-extension/src/options/components/sideBar/components/record/record.tsx
@@ -6,14 +6,14 @@ import { FeatureToggleContext } from "src/context/featureToggleContext";
 
 const Record: FC = (): ReactElement => {
   const location = useLocation();
-  const { featureShowRecord } = useContext(FeatureToggleContext);
+  const toggles = useContext(FeatureToggleContext);
   return (
     <div>
       <div className="flex">
         <div className="pl-2 mb-2 text-slate-400 whitespace-nowrap">
           Record Session
         </div>
-        {featureShowRecord ? (
+        {toggles?.featureShowRecord ? (
           <sup className="text-xs inline-block bottom-4 text-red-500 whitespace-nowrap">
             &nbsp;Beta
           </sup>
@@ -23,7 +23,7 @@ const Record: FC = (): ReactElement => {
           </sup>
         )}
       </div>
-      <Link to={featureShowRecord ? "/record" : "#"}>
+      <Link to={toggles?.featureShowRecord ? "/record" : "#"}>
         <div
           className={`${
             location.pathname === "/record" ? "text-sky-500" : ""
@@ -33,7 +33,7 @@ const Record: FC = (): ReactElement => {
           <span className="whitespace-nowrap">Record</span>
         </div>
       </Link>
-      <Link to={featureShowRecord ? "/record/session" : "#"}>
+      <Link to={toggles?.featureShowRecord ? "/record/session" : "#"}>
         <div
           className={`${
             location.pathname === "/record/session" ? "text-sky-500" : ""

diff --git a/browser-extension/src/options/components/sideBar/sideBar.tsx b/browser-extension/src/options/components/sideBar/sideBar.tsx
@@ -13,8 +13,10 @@ import { FeatureToggleContext } from "src/context/featureToggleContext";
 
 const SideBar = () => {
   const { full, setFull } = useContext(SideBarContext);
-  const { featureShowRecord } = useContext(FeatureToggleContext);
-  const AnimationElement = featureShowRecord ? SkeletonAnimation : Fragment;
+  const toggles = useContext(FeatureToggleContext);
+  const AnimationElement = toggles?.featureShowRecord
+    ? SkeletonAnimation
+    : Fragment;
   return (
     <ColorCover
       classes={`rounded-none h-full p-0 flex flex-col overflow-hidden ${
@@ -31,7 +33,7 @@ const SideBar = () => {
       </div>
       <div
         className={`${
-          featureShowRecord ? "" : "py-2"
+          toggles?.featureShowRecord ? "" : "py-2"
         } border-b border-slate-700`}
       >
         <AnimationElement>

diff --git a/browser-extension/src/popup/components/footer/footer.tsx b/browser-extension/src/popup/components/footer/footer.tsx
@@ -10,10 +10,10 @@ import { addProtocol } from "src/utils";
 const Footer = () => {
   const [url, setUrl] = useState<string>();
   const searchRef = useRef<HTMLInputElement>();
-  const { featureShowRecord } = useContext(FeatureToggleContext);
+  const toggles = useContext(FeatureToggleContext);
   return (
     <div>
-      {featureShowRecord && (
+      {toggles?.featureShowRecord && (
         <ColorCover classes="border-b-0 border-l-0 border-r-0 h-[initial] rounded-none pt-0 flex flex-col gap-1">
           <div className="text-sm m-0 text-gray-400">
             Record Session And Replay In Your Browser & Share