Resolves react warning in console

See openedx#291 As an aside, it's worth noting these files are practically the same, and with very little effort could be refactored into one in the spirit of DRY-ness.
gymnasium · Feb 13, 2024 · 13a8bb3 · 13a8bb3
1 parent 73ed886
commit 13a8bb3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/src/containers/WidgetContainers/LoadedSidebar/index.jsx b/src/containers/WidgetContainers/LoadedSidebar/index.jsx
@@ -7,9 +7,21 @@ import hooks from 'widgets/ProductRecommendations/hooks';
 export const WidgetSidebar = ({ setSidebarShowing }) => {
   const { inRecommendationsVariant, isExperimentActive } = hooks.useShowRecommendationsFooter();
 
-  if (!inRecommendationsVariant && isExperimentActive) {
-    setSidebarShowing(true);
+  React.useEffect(() => {
+    if (!inRecommendationsVariant && isExperimentActive) {
+      setSidebarShowing(true);
+      return (
+        <div className="widget-sidebar">
+          <div className="d-flex flex-column">
+            <RecommendationsPanel />
+          </div>
+        </div>
+      );
+    }
+    return null;
+  }, [inRecommendationsVariant, isExperimentActive, setSidebarShowing]);
 
+  if (!inRecommendationsVariant && isExperimentActive) {
     return (
       <div className="widget-sidebar">
         <div className="d-flex flex-column">
@@ -18,7 +30,6 @@ export const WidgetSidebar = ({ setSidebarShowing }) => {
       </div>
     );
   }
-
   return null;
 };
 

diff --git a/src/containers/WidgetContainers/NoCoursesSidebar/index.jsx b/src/containers/WidgetContainers/NoCoursesSidebar/index.jsx
@@ -7,9 +7,21 @@ import hooks from 'widgets/ProductRecommendations/hooks';
 export const WidgetSidebar = ({ setSidebarShowing }) => {
   const { inRecommendationsVariant, isExperimentActive } = hooks.useShowRecommendationsFooter();
 
-  if (!inRecommendationsVariant && isExperimentActive) {
-    setSidebarShowing(true);
+  React.useEffect(() => {
+    if (!inRecommendationsVariant && isExperimentActive) {
+      setSidebarShowing(true);
+      return (
+        <div className="widget-sidebar px-2">
+          <div className="d-flex">
+            <RecommendationsPanel />
+          </div>
+        </div>
+      );
+    }
+    return null;
+  }, [inRecommendationsVariant, isExperimentActive, setSidebarShowing]);
 
+  if (!inRecommendationsVariant && isExperimentActive) {
     return (
       <div className="widget-sidebar px-2">
         <div className="d-flex">
@@ -18,7 +30,6 @@ export const WidgetSidebar = ({ setSidebarShowing }) => {
       </div>
     );
   }
-
   return null;
 };