Merge pull request #1156 from civictechindex/orgs-page-state-1081

Remember orgs page state (#1081)
civictechindex · Feb 17, 2022 · 0ec4bf9 · 0ec4bf9
2 parents df0738c + 642cc95
commit 0ec4bf9
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 71 deletions.
diff --git a/cypress/integration/pages/organizations.spec.js b/cypress/integration/pages/organizations.spec.js
@@ -62,12 +62,16 @@ describe('Organizations Page (using API)', () => {
     cy.get('[data-cy=organization-search]').type(affiliatedOrg).type('{enter}');
     cy.get('[data-cy=affiliated-organizations]').within(() => {
       cy.get('[data-cy=thumbnail-dropdown]').should('have.length', 1);
-      cy.get('[data-cy=contributor-thumbnail-text]').contains(affiliatedOrg);
+      cy.get('[data-cy=thumbnail-dropdown]').eq(0).click().within(() => {
+        cy.get('[data-cy=contributor-thumbnail-text]').contains(affiliatedOrg);
+      });
     });
     cy.get('[data-cy=affiliated-organizations]').within(() => {
       cy.get('[data-cy=thumbnail-dropdown]').should('have.length', parentOrgCount2);
     });
-    cy.get('[data-cy=organization-search]').clear();
+    cy.get('[data-cy=organization-search]').within(() => {
+      cy.get('input').clear();
+    });
   });
 
   it('should find affiliatedOrg via partial search', () => {
@@ -81,9 +85,13 @@ describe('Organizations Page (using API)', () => {
     cy.get('[data-cy=organization-search-list]').click();
     cy.get('[data-cy=affiliated-organizations]').within(() => {
       cy.get('[data-cy=thumbnail-dropdown]').should('have.length', 1);
-      cy.get('[data-cy=contributor-thumbnail-text]').contains(affiliatedOrg);
+      cy.get('[data-cy=thumbnail-dropdown]').eq(0).click().within(() => {
+        cy.get('[data-cy=contributor-thumbnail-text]').contains(affiliatedOrg);
+      });
+    });
+    cy.get('[data-cy=organization-search]').within(() => {
+      cy.get('input').clear();
     });
-    cy.get('[data-cy=organization-search]').clear();
   });
 
   it('should visit organizations page from home page link', () => {

diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js
@@ -36,19 +36,20 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export const Dropdown = ({
-  organization,
+  checkboxValue,
   children,
   dropdownLength,
-  isOpen,
-  checkboxValue,
-  inputValue,
   filtersActive,
+  isOpen,
+  onClick,
+  organization,
 }) => {
   const [openChild, setOpenChild] = useState(isOpen ? true : false);
   const [colorStyle, setColor] = useState(isOpen ? true : false);
   const classes = useStyles();
 
-  const handleOpen = () => {
+  const handleClick = () => {
+    onClick(organization);
     setOpenChild(!openChild);
     setColor(!colorStyle);
   };
@@ -65,7 +66,7 @@ export const Dropdown = ({
           item
           xs={10}
           className={clsx(classes.dropdown, {
-            [classes.open]: colorStyle === true,
+            [classes.open]: isOpen,
           })}
         >
           <Grid>
@@ -74,7 +75,7 @@ export const Dropdown = ({
               filtersActive={filtersActive}
               checkboxValue={checkboxValue}
               dropdownLength={dropdownLength}
-              isOpen={colorStyle}
+              isOpen={isOpen}
               isChildThumbnail={false}
             />
           </Grid>
@@ -83,12 +84,11 @@ export const Dropdown = ({
             item
             container
             className={classes.flexGrid}
-            onClick={handleOpen}
+            onClick={handleClick}
           >
             <DropdownArrow
-              open={openChild}
-              setOpenFunction={setOpenChild}
-              handleArrow={handleOpen}
+              open={isOpen}
+              handleArrow={handleClick}
             />
           </Grid>
         </Grid>
@@ -101,7 +101,7 @@ export const Dropdown = ({
           />
         </Grid>
       )}
-      {openChild && children}
+      {isOpen && children}
     </Grid>
   );
 };

diff --git a/src/pages/Contributors/Affiliated.js b/src/pages/Contributors/Affiliated.js
@@ -117,26 +117,28 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 /* eslint complexity: [0, 0]*/
-export const Affiliated = (props) => {
-  const {
-    affiliatedCount,
-    classes,
-    inputValue,
-    organizations,
-    organizationData,
-    filtersActive,
-    totalAffiliatedCount,
-    showIndexContrib,
-  } = props;
+export const Affiliated = ({
+  affiliatedCount,
+  classes,
+  expandedOrgs,
+  inputValue,
+  onOrgClick,
+  organizations,
+  organizationData,
+  filtersActive,
+  totalAffiliatedCount,
+  showIndexContrib,
+}) => {
   const classesLocal = useStyles();
   const [dropdownOpen, setDropdownOpen] = useState(false);
   useEffect(() => {
-    if (filtersActive && organizations.length) {
+    if ((filtersActive || expandedOrgs.length) && organizations.length) {
       setDropdownOpen(true);
     } else {
       setDropdownOpen(false);
     }
-  }, [filtersActive, organizations])
+  }, [expandedOrgs, filtersActive, organizations])
+
   return (
     <Grid>
       <Grid style={{ padding: '40px' }}>
@@ -221,11 +223,13 @@ export const Affiliated = (props) => {
           ) : (
             <Grid item xs={12} sm={10} className={classesLocal.dropDownGrid}>
               <AffiliatedOrganizations
-                organizations={organizations}
+                expandedOrgs={expandedOrgs}
+                filtersActive={filtersActive}
                 inputValue={inputValue}
+                onOrgClick={onOrgClick}
                 organizationData={organizationData}
+                organizations={organizations}
                 showIndexContrib={showIndexContrib}
-                filtersActive={filtersActive}
               />
             </Grid>
           ))}

diff --git a/src/pages/Contributors/AffiliatedOrganizations.js b/src/pages/Contributors/AffiliatedOrganizations.js
@@ -64,11 +64,13 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export const AffiliatedOrganizations = ({
-  organizations,
+  expandedOrgs,
+  filtersActive,
   inputValue,
+  onOrgClick,
   organizationData,
+  organizations,
   showIndexContrib,
-  filtersActive,
 }) => {
   const classes = useStyles();
 
@@ -83,7 +85,7 @@ export const AffiliatedOrganizations = ({
     organizations.forEach((org) => {
       if (org.depth === 3) {
         org['childNodes'] = [];
-        org['isOpen'] = false;
+        org['allChildrenShown'] = false;
         parentdata.push(org);
       }
       if (org.depth === 4) {
@@ -99,7 +101,7 @@ export const AffiliatedOrganizations = ({
 
         if (!exist) {
           mapsearchedChildParent['childNodes'] = [];
-          mapsearchedChildParent['isOpen'] = false;
+          mapsearchedChildParent['allChildrenShown'] = false;
           parentChildobj = mapsearchedChildParent;
           parentdata.push(mapsearchedChildParent);
         } else {
@@ -115,7 +117,7 @@ export const AffiliatedOrganizations = ({
           }
         } else {
           org['childNodes'] = [];
-          org['isOpen'] = false;
+          org['allChildrenShown'] = false;
           parentdata.push(org);
         }
       }
@@ -141,16 +143,16 @@ export const AffiliatedOrganizations = ({
       >
         {currentThumbnails.map((org, i) => {
           childSort = org.childNodes;
-          childNode = org.isOpen ? childSort : childSort.slice(0, 6);
+          childNode = org.allChildrenShown ? childSort : childSort.slice(0, 6);
           return (
             <Dropdown
               checkboxValue={showIndexContrib}
-              organization={org}
-              key={`affiliatedThumbnailsWrapper_${i}`}
               dropdownLength={org.childNodes.length}
-              isOpen={false}
-              inputValue={inputValue}
               filtersActive={filtersActive}
+              isOpen={expandedOrgs.includes(org.id.toString())}
+              key={`affiliatedThumbnailsWrapper_${i}`}
+              onClick={onOrgClick}
+              organization={org}
             >
               <Grid
                 container
@@ -207,11 +209,11 @@ export const AffiliatedOrganizations = ({
                       className={classes.button}
                       onClick={() => {
                         const data = [...currentThumbnails];
-                        data[i].isOpen = !data[i].isOpen;
+                        data[i].allChildrenShown = !data[i].allChildrenShown;
                         setCurrentThumbnails(data);
                       }}
                     >
-                      {currentThumbnails[i].isOpen ? 'View Less' : 'View All'}
+                      {currentThumbnails[i].allChildrenShown ? 'View Less' : 'View All'}
                     </Button>
                   </Grid>
                 ) : null}
@@ -230,13 +232,13 @@ export const AffiliatedOrganizations = ({
         {currentThumbnails.map((org, i) => {
           return (
             <Dropdown
-              organization={org}
-              key={`affiliatedThumbnailsWrapper_${i}`}
-              dropdownLength={org.childNodes.length}
-              isOpen={org.childNodes.length <= 6 && i === 0}
-              inputValue={inputValue}
               checkboxValue={showIndexContrib}
+              dropdownLength={org.childNodes.length}
               filtersActive={filtersActive}
+              isOpen={expandedOrgs.includes(org.id.toString())}
+              onClick={onOrgClick}
+              key={`affiliatedThumbnailsWrapper_${i}`}
+              organization={org}
             >
               <Box className={classes.affiliatedThumbnailsWrapper}>
                 {org.childNodes.length === 0 ? (