Skip to content

Commit

Permalink
fix: fixed incontextsidebar issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@sundasnoreen12
sundasnoreen12 committed Feb 12, 2024
1 parent 5ab6566 commit be2884d
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 67 deletions.
16 changes: 15 additions & 1 deletion src/discussions/course-content-unavailable/CourseContentUnavailable.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,43 @@
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`);
}, []);

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>
);
Expand Down
125 changes: 61 additions & 64 deletions src/discussions/discussions-home/DiscussionsHome.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 />
Expand Down
8 changes: 6 additions & 2 deletions src/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit be2884d

Please sign in to comment.