From be2884dbbd9f3246d2e8b8be76a39354462d34e8 Mon Sep 17 00:00:00 2001
From: sundasnoreen12 <sundasnoreen12@gmail.com>
Date: Tue, 13 Feb 2024 01:20:35 +0500
Subject: [PATCH] fix: fixed incontextsidebar issues

---
 .../CourseContentUnavailable.jsx              |  16 ++-
 .../discussions-home/DiscussionsHome.jsx      | 125 +++++++++---------
 src/index.scss                                |   8 +-
 3 files changed, 82 insertions(+), 67 deletions(-)

diff --git a/src/discussions/course-content-unavailable/CourseContentUnavailable.jsx b/src/discussions/course-content-unavailable/CourseContentUnavailable.jsx
index ae05e2d31..13c74dc96 100644
--- a/src/discussions/course-content-unavailable/CourseContentUnavailable.jsx
+++ b/src/discussions/course-content-unavailable/CourseContentUnavailable.jsx
@@ -1,15 +1,23 @@
 import React, { useCallback } from 'react';
 import propTypes from 'prop-types';
 
+import classNames from 'classnames';
+import { useLocation } from 'react-router-dom';
+
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
 
 import ContentUnavailableIcon from '../../assets/ContentUnavailable';
+import { useIsOnDesktop, useIsOnXLDesktop } from '../data/hooks';
 import messages from '../messages';
 
 const CourseContentUnavailable = ({ subTitleMessage }) => {
+  const location = useLocation();
   const intl = useIntl();
+  const isOnDesktop = useIsOnDesktop();
+  const isOnXLDesktop = useIsOnXLDesktop();
+  const enableInContextSidebar = Boolean(new URLSearchParams(location.search).get('inContextSidebar') !== null);
 
   const redirectToDashboard = useCallback(() => {
     window.location.replace(`${getConfig().LMS_BASE_URL}/dashboard`);
@@ -17,13 +25,19 @@ const CourseContentUnavailable = ({ subTitleMessage }) => {
 
   return (
     <div className="min-content-height justify-content-center align-items-center d-flex w-100 flex-column bg-white">
-      <div className="d-flex flex-column align-items-center content-unavailable">
+      <div className={classNames('d-flex flex-column align-items-center', {
+        'content-unavailable-desktop': isOnDesktop || isOnXLDesktop,
+        'content-unavailable-mobile': !isOnDesktop && !isOnXLDesktop,
+      })}
+      >
         <ContentUnavailableIcon />
         <h3 className="pt-3 font-weight-bold text-primary-500 text-center">{intl.formatMessage(messages.contentUnavailableTitle)}</h3>
         <p className="pb-2 text-gray-500 text-center">{intl.formatMessage(subTitleMessage)}</p>
+        {!enableInContextSidebar && (
         <Button onClick={redirectToDashboard} variant="outline-dark" className="font-size-14 py-2 px-2.5">
           {intl.formatMessage(messages.contentUnavailableAction)}
         </Button>
+        )}
       </div>
     </div>
   );
diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx
index b8ad8a81f..eb84de94a 100644
--- a/src/discussions/discussions-home/DiscussionsHome.jsx
+++ b/src/discussions/discussions-home/DiscussionsHome.jsx
@@ -53,6 +53,8 @@ const DiscussionsHome = () => {
   const isOnDesktop = useIsOnDesktop();
   let displaySidebar = useSidebarVisible();
   const enableInContextSidebar = Boolean(new URLSearchParams(location.search).get('inContextSidebar') !== null);
+  const isUserEnrolled = enableInContextSidebar ? Boolean(new URLSearchParams(location.search).get('isEnrolled') === 'true') : isEnrolled && courseStatus === LOADED;
+
   const {
     courseId, postId, topicId, category, learnerUsername,
   } = params;
@@ -98,84 +100,79 @@ const DiscussionsHome = () => {
               {!enableInContextSidebar && (
                 <NavigationBar />
               )}
-              {isEnrolled && courseStatus === LOADED && <PostActionsBar />}
+              {isUserEnrolled && <PostActionsBar />}
             </div>
             <DiscussionsRestrictionBanner />
           </div>
-          {courseStatus === LOADED && (
-            <>
-              {provider === DiscussionProvider.LEGACY && (
+          {provider === DiscussionProvider.LEGACY && (
+          <Suspense fallback={(<Spinner />)}>
+            <Routes>
+              {[
+                ROUTES.TOPICS.CATEGORY,
+                ROUTES.TOPICS.CATEGORY_POST,
+                ROUTES.TOPICS.CATEGORY_POST_EDIT,
+                ROUTES.TOPICS.TOPIC,
+                ROUTES.TOPICS.TOPIC_POST,
+                ROUTES.TOPICS.TOPIC_POST_EDIT,
+              ].map((route) => (
+                <Route
+                  key={route}
+                  path={route}
+                  element={<LegacyBreadcrumbMenu />}
+                />
+              ))}
+            </Routes>
+          </Suspense>
+          )}
+          {!isUserEnrolled && (
+            <Suspense fallback={(<Spinner />)}>
+              <Routes>
+                {ALL_ROUTES.map((route) => (
+                  <Route
+                    key={route}
+                    path={route}
+                    element={(<ContentUnavailable subTitleMessage={messages.contentUnavailableSubTitle} />)}
+                  />
+                ))}
+              </Routes>
+            </Suspense>
+          )}
+          {isUserEnrolled && (
+            <div className="d-flex flex-row position-relative">
+              <Suspense fallback={(<Spinner />)}>
+                <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
+              </Suspense>
+              {displayContentArea && (
               <Suspense fallback={(<Spinner />)}>
-                <Routes>
-                  {[
-                    ROUTES.TOPICS.CATEGORY,
-                    ROUTES.TOPICS.CATEGORY_POST,
-                    ROUTES.TOPICS.CATEGORY_POST_EDIT,
-                    ROUTES.TOPICS.TOPIC,
-                    ROUTES.TOPICS.TOPIC_POST,
-                    ROUTES.TOPICS.TOPIC_POST_EDIT,
-                  ].map((route) => (
+                <DiscussionContent />
+              </Suspense>
+              )}
+              {!displayContentArea && (
+              <Routes>
+                <>
+                  {ROUTES.TOPICS.PATH.map(route => (
                     <Route
                       key={route}
-                      path={route}
-                      element={<LegacyBreadcrumbMenu />}
+                      path={`${route}/*`}
+                      element={(enableInContext || enableInContextSidebar) ? <InContextEmptyTopics /> : <EmptyTopics />}
                     />
                   ))}
-                </Routes>
-              </Suspense>
-              )}
-              {!isEnrolled && (
-              <Suspense fallback={(<Spinner />)}>
-                <Routes>
-                  {ALL_ROUTES.map((route) => (
+                  <Route
+                    path={ROUTES.POSTS.MY_POSTS}
+                    element={<EmptyPosts subTitleMessage={messages.emptyMyPosts} />}
+                  />
+                  {[`${ROUTES.POSTS.PATH}/*`, ROUTES.POSTS.ALL_POSTS, ROUTES.LEARNERS.POSTS].map((route) => (
                     <Route
                       key={route}
                       path={route}
-                      element={(<ContentUnavailable subTitleMessage={messages.contentUnavailableSubTitle} />)}
+                      element={<EmptyPosts subTitleMessage={messages.emptyAllPosts} />}
                     />
                   ))}
-                </Routes>
-              </Suspense>
+                  <Route path={ROUTES.LEARNERS.PATH} element={<EmptyLearners />} />
+                </>
+              </Routes>
               )}
-              {isEnrolled && (
-              <div className="d-flex flex-row position-relative">
-                <Suspense fallback={(<Spinner />)}>
-                  <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
-                </Suspense>
-                {displayContentArea && (
-                <Suspense fallback={(<Spinner />)}>
-                  <DiscussionContent />
-                </Suspense>
-                )}
-                {!displayContentArea && (
-                <Routes>
-                  <>
-                    {ROUTES.TOPICS.PATH.map(route => (
-                      <Route
-                        key={route}
-                        path={`${route}/*`}
-                        element={(enableInContext || enableInContextSidebar)
-                          ? <InContextEmptyTopics /> : <EmptyTopics />}
-                      />
-                    ))}
-                    <Route
-                      path={ROUTES.POSTS.MY_POSTS}
-                      element={<EmptyPosts subTitleMessage={messages.emptyMyPosts} />}
-                    />
-                    {[`${ROUTES.POSTS.PATH}/*`, ROUTES.POSTS.ALL_POSTS, ROUTES.LEARNERS.POSTS].map((route) => (
-                      <Route
-                        key={route}
-                        path={route}
-                        element={<EmptyPosts subTitleMessage={messages.emptyAllPosts} />}
-                      />
-                    ))}
-                    <Route path={ROUTES.LEARNERS.PATH} element={<EmptyLearners />} />
-                  </>
-                </Routes>
-                )}
-              </div>
-              )}
-            </>
+            </div>
           )}
           {!enableInContextSidebar && (
             <DiscussionsProductTour />
diff --git a/src/index.scss b/src/index.scss
index fae5441aa..8dd0182b5 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -568,6 +568,10 @@ code {
   word-break: break-all;
 }
 
-.content-unavailable {
-  width: 515px;
+.content-unavailable-desktop {
+  width: 28rem !important;
+}
+
+.content-unavailable-mobile {
+  padding: 0px 16px !important;
 }