From 7a17b0c4fc91c46b2632def45693a471592da75a Mon Sep 17 00:00:00 2001
From: hinakhadim <hina.khadim@arbisoft.com>
Date: Mon, 4 Mar 2024 16:05:34 +0500
Subject: [PATCH 1/2] fix: Fixes expandAll button functionality

---
 src/course-home/outline-tab/OutlineTab.jsx | 27 +++++++++++++++++++++-
 src/course-home/outline-tab/Section.jsx    |  9 +++++---
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx
index a2ce8101ea..073cfd953d 100644
--- a/src/course-home/outline-tab/OutlineTab.jsx
+++ b/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>
diff --git a/src/course-home/outline-tab/Section.jsx b/src/course-home/outline-tab/Section.jsx
index 3de888a89a..1236614433 100644
--- a/src/course-home/outline-tab/Section.jsx
+++ b/src/course-home/outline-tab/Section.jsx
@@ -18,6 +18,7 @@ const Section = ({
   expand,
   intl,
   section,
+  setExpandedSections,
 }) => {
   const {
     complete,
@@ -38,6 +39,7 @@ const Section = ({
 
   useEffect(() => {
     setOpen(defaultOpen);
+    setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: defaultOpen }));
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -78,12 +80,12 @@ const Section = ({
         styling="card-lg"
         title={sectionTitle}
         open={open}
-        onToggle={() => { setOpen(!open); }}
+        onToggle={() => { setOpen(!open); setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: !open })); }}
         iconWhenClosed={(
           <IconButton
             alt={intl.formatMessage(messages.openSection)}
             icon={faPlus}
-            onClick={() => { setOpen(true); }}
+            onClick={() => { setOpen(true); setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: true })); }}
             size="sm"
           />
         )}
@@ -91,7 +93,7 @@ const Section = ({
           <IconButton
             alt={intl.formatMessage(genericMessages.close)}
             icon={faMinus}
-            onClick={() => { setOpen(false); }}
+            onClick={() => { setOpen(false); setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: false })); }}
             size="sm"
           />
         )}
@@ -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);

From 73713b40d7959e466c0a35fe853daad9c37d4e67 Mon Sep 17 00:00:00 2001
From: hinakhadim <hina.khadim@arbisoft.com>
Date: Tue, 5 Mar 2024 15:45:49 +0500
Subject: [PATCH 2/2] refactor: Add generic function to update section Expand
 status

---
 src/course-home/outline-tab/Section.jsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/course-home/outline-tab/Section.jsx b/src/course-home/outline-tab/Section.jsx
index 1236614433..e08adff48b 100644
--- a/src/course-home/outline-tab/Section.jsx
+++ b/src/course-home/outline-tab/Section.jsx
@@ -33,13 +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);
-    setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: defaultOpen }));
+    updateExpandedSection(defaultOpen);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -80,12 +84,12 @@ const Section = ({
         styling="card-lg"
         title={sectionTitle}
         open={open}
-        onToggle={() => { setOpen(!open); setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: !open })); }}
+        onToggle={() => updateExpandedSection(!open)}
         iconWhenClosed={(
           <IconButton
             alt={intl.formatMessage(messages.openSection)}
             icon={faPlus}
-            onClick={() => { setOpen(true); setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: true })); }}
+            onClick={() => updateExpandedSection(true)}
             size="sm"
           />
         )}
@@ -93,7 +97,7 @@ const Section = ({
           <IconButton
             alt={intl.formatMessage(genericMessages.close)}
             icon={faMinus}
-            onClick={() => { setOpen(false); setExpandedSections((prevObj) => ({ ...prevObj, [section.id]: false })); }}
+            onClick={() => updateExpandedSection(false)}
             size="sm"
           />
         )}