Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Fixes expandAll button functionality #1312

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion src/course-home/outline-tab/OutlineTab.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,14 @@ const OutlineTab = ({ intl }) => {

const location = useLocation();

const getSectionsExpandStatus = (status = false) => courses[rootCourseId].sectionIds.reduce((obj, sectionId) => {
// eslint-disable-next-line no-param-reassign
obj[sectionId] = status;
return obj;
}, {});

const [expandedSections, setExpandedSections] = useState(() => getSectionsExpandStatus());

useEffect(() => {
const currentParams = new URLSearchParams(location.search);
const startCourse = currentParams.get('start_course');
Expand All @@ -123,6 +131,15 @@ const OutlineTab = ({ intl }) => {
}
}, [location.search]);

useEffect(() => {
const allSectionsExpanded = Object.values(expandedSections);
const isAllExpanded = allSectionsExpanded.every(Boolean);
if (isAllExpanded) { setExpandAll(true); }

const isAllCollapsed = allSectionsExpanded.every(val => val === false);
if (isAllCollapsed) { setExpandAll(false); }
}, [expandedSections]);

return (
<>
<div data-learner-type={learnerType} className="row w-100 mx-0 my-3 justify-content-between">
Expand Down Expand Up @@ -163,7 +180,14 @@ const OutlineTab = ({ intl }) => {
<>
<div className="row w-100 m-0 mb-3 justify-content-end">
<div className="col-12 col-md-auto p-0">
<Button variant="outline-primary" block onClick={() => { setExpandAll(!expandAll); }}>
<Button
variant="outline-primary"
block
onClick={() => {
setExpandAll(!expandAll);
setExpandedSections(() => getSectionsExpandStatus(!expandAll));
}}
>
{expandAll ? intl.formatMessage(messages.collapseAll) : intl.formatMessage(messages.expandAll)}
</Button>
</div>
Expand All @@ -176,6 +200,7 @@ const OutlineTab = ({ intl }) => {
defaultOpen={sections[sectionId].resumeBlock}
expand={expandAll}
section={sections[sectionId]}
setExpandedSections={setExpandedSections}
/>
))}
</ol>
Expand Down
9 changes: 6 additions & 3 deletions src/course-home/outline-tab/Section.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const Section = ({
expand,
intl,
section,
setExpandedSections,
}) => {
const {
complete,
Expand All @@ -38,6 +39,7 @@ const Section = ({

useEffect(() => {
setOpen(defaultOpen);
setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: defaultOpen }));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Expand Down Expand Up @@ -78,20 +80,20 @@ const Section = ({
styling="card-lg"
title={sectionTitle}
open={open}
onToggle={() => { setOpen(!open); }}
onToggle={() => { setOpen(!open); setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: !open })); }}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like at this point the on event is getting verbose enough that a proper handling function would be better. There's also a lot in common with the next two changes, so it's probably going to be worth it for DRYness.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated it

iconWhenClosed={(
<IconButton
alt={intl.formatMessage(messages.openSection)}
icon={faPlus}
onClick={() => { setOpen(true); }}
onClick={() => { setOpen(true); setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: true })); }}
size="sm"
/>
)}
iconWhenOpen={(
<IconButton
alt={intl.formatMessage(genericMessages.close)}
icon={faMinus}
onClick={() => { setOpen(false); }}
onClick={() => { setOpen(false); setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: false })); }}
size="sm"
/>
)}
Expand All @@ -118,6 +120,7 @@ Section.propTypes = {
expand: PropTypes.bool.isRequired,
intl: intlShape.isRequired,
section: PropTypes.shape().isRequired,
setExpandedSections: PropTypes.func.isRequired,
};

export default injectIntl(Section);
Loading