fix: Fixes expandAll button functionality

src/course-home/outline-tab/OutlineTab.jsx

@@ -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');
@@ -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">
@@ -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>
@@ -176,6 +200,7 @@ const OutlineTab = ({ intl }) => {
                     defaultOpen={sections[sectionId].resumeBlock}
                     expand={expandAll}
                     section={sections[sectionId]}
+                    setExpandedSections={setExpandedSections}
                   />
                 ))}
               </ol>

src/course-home/outline-tab/Section.jsx

@@ -18,6 +18,7 @@ const Section = ({
   expand,
   intl,
   section,
+  setExpandedSections,
 }) => {
   const {
     complete,
@@ -32,12 +33,17 @@ const Section = ({
 
   const [open, setOpen] = useState(defaultOpen);
 
+  const updateExpandedSection = (status) => {
+    setOpen(status);
+    setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: status }));
+  };
+
   useEffect(() => {
     setOpen(expand);
   }, [expand]);
 
   useEffect(() => {
-    setOpen(defaultOpen);
+    updateExpandedSection(defaultOpen);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -78,20 +84,20 @@ const Section = ({
         styling="card-lg"
         title={sectionTitle}
         open={open}
-        onToggle={() => { setOpen(!open); }}
+        onToggle={() => updateExpandedSection(!open)}
         iconWhenClosed={(
           <IconButton
             alt={intl.formatMessage(messages.openSection)}
             icon={faPlus}
-            onClick={() => { setOpen(true); }}
+            onClick={() => updateExpandedSection(true)}
             size="sm"
           />
         )}
         iconWhenOpen={(
           <IconButton
             alt={intl.formatMessage(genericMessages.close)}
             icon={faMinus}
-            onClick={() => { setOpen(false); }}
+            onClick={() => updateExpandedSection(false)}
             size="sm"
           />
         )}
@@ -118,6 +124,7 @@ Section.propTypes = {
   expand: PropTypes.bool.isRequired,
   intl: intlShape.isRequired,
   section: PropTypes.shape().isRequired,
+  setExpandedSections: PropTypes.func.isRequired,
 };
 
 export default injectIntl(Section);