From 13a8bb37510a05532ba4db654d49e1552c2fcea7 Mon Sep 17 00:00:00 2001
From: Roman Edirisinghe <rediris@users.noreply.github.com>
Date: Tue, 13 Feb 2024 16:21:38 -0500
Subject: [PATCH] Resolves react warning in console

See https://github.com/openedx/frontend-app-learner-dashboard/issues/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.
---
 .../WidgetContainers/LoadedSidebar/index.jsx    | 17 ++++++++++++++---
 .../WidgetContainers/NoCoursesSidebar/index.jsx | 17 ++++++++++++++---
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/containers/WidgetContainers/LoadedSidebar/index.jsx b/src/containers/WidgetContainers/LoadedSidebar/index.jsx
index 8f5f2224..119afd11 100644
--- 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
index c3e669ad..90e7f830 100644
--- 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;
 };