Skip to content

Commit

Permalink
Remember orgs page state (#1081)
Browse files Browse the repository at this point in the history 
* Store org search query in url param

* Store open orgs in url param

* State/props cleanup
  • Loading branch information
@bruceplai
bruceplai committed Feb 11, 2022
1 parent 038d2a6 commit d58ebac
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 67 deletions.
24 changes: 12 additions & 12 deletions src/components/Dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand All @@ -65,7 +66,7 @@ export const Dropdown = ({
item
xs={10}
className={clsx(classes.dropdown, {
[classes.open]: colorStyle === true,
[classes.open]: isOpen,
})}
>
<Grid>
Expand All @@ -74,7 +75,7 @@ export const Dropdown = ({
filtersActive={filtersActive}
checkboxValue={checkboxValue}
dropdownLength={dropdownLength}
isOpen={colorStyle}
isOpen={isOpen}
isChildThumbnail={false}
/>
</Grid>
Expand All @@ -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>
Expand All @@ -101,7 +101,7 @@ export const Dropdown = ({
/>
</Grid>
)}
{openChild && children}
{isOpen && children}
</Grid>
);
};
Expand Down
34 changes: 19 additions & 15 deletions src/pages/Contributors/Affiliated.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' }}>
Expand Down Expand Up @@ -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>
))}
Expand Down
36 changes: 19 additions & 17 deletions src/pages/Contributors/AffiliatedOrganizations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,13 @@ const useStyles = makeStyles((theme) => ({
}));

export const AffiliatedOrganizations = ({
organizations,
expandedOrgs,
filtersActive,
inputValue,
onOrgClick,
organizationData,
organizations,
showIndexContrib,
filtersActive,
}) => {
const classes = useStyles();

Expand All @@ -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) {
Expand All @@ -99,7 +101,7 @@ export const AffiliatedOrganizations = ({

if (!exist) {
mapsearchedChildParent['childNodes'] = [];
mapsearchedChildParent['isOpen'] = false;
mapsearchedChildParent['allChildrenShown'] = false;
parentChildobj = mapsearchedChildParent;
parentdata.push(mapsearchedChildParent);
} else {
Expand All @@ -115,7 +117,7 @@ export const AffiliatedOrganizations = ({
}
} else {
org['childNodes'] = [];
org['isOpen'] = false;
org['allChildrenShown'] = false;
parentdata.push(org);
}
}
Expand All @@ -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
Expand Down Expand Up @@ -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}
Expand All @@ -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 ? (
Expand Down
89 changes: 66 additions & 23 deletions src/pages/Contributors/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useLocation } from 'react-router-dom';
import {
ArrayParam,
BooleanParam,
StringParam,
useQueryParam,
Expand Down Expand Up @@ -55,7 +56,6 @@ export default function Contributors() {
const location = useLocation();
const [affiliatedCount, setAffiliatedCount] = useState(0);
const [affiliatedOrganizations, setAffiliatedOrganizations] = useState([]);
const [inputValue, setInputValue] = useState('');
const [organizations, setOrganizations] = useState([]);
const [organizationNames, setOrganizationNames] = useState([]);
const [filtersActive, setFiltersActive] = useState(false);
Expand All @@ -65,14 +65,22 @@ export default function Contributors() {
const [unaffiliatedOrganizations, setUnaffiliatedOrganizations] = useState(
[]
);
const [showIndexContrib, setShowIndexContrib] = useQueryParam(
'contrib',
withDefault(BooleanParam, false)
const [expandedOrgs, setExpandedOrgs] = useQueryParam(
'opened',
withDefault(ArrayParam, [])
);
const [orgStatus, setOrgStatus] = useQueryParam(
'status',
withDefault(StringParam, 'any')
);
const [searchQuery, setSearchQuery] = useQueryParam(
'query',
withDefault(StringParam, '')
);
const [showIndexContrib, setShowIndexContrib] = useQueryParam(
'contrib',
withDefault(BooleanParam, false)
);

useEffect(() => {
const fetchData = async () => {
Expand Down Expand Up @@ -124,9 +132,26 @@ export default function Contributors() {
}
// handle case of user entering bookmarked URL directly
} else if (!location.query) {
const queryParams = location.search.replace('?', '').split('&');
setOrgStatus(queryParams[1].split('=')[1]);
setShowIndexContrib(!!(Number(queryParams[0].split('=')[1])));
const expanded = [];
const queryParams = {};
location.search.replace('?', '').split('&').forEach((param) => {
const [key, val] = param.split('=');
if (key === 'opened') {
expanded.push(val);
} else {
queryParams[key] = val;
}
});
setExpandedOrgs(expanded);
if ('query' in queryParams) {
setSearchQuery(queryParams.query);
}
if ('status' in queryParams) {
setOrgStatus(queryParams.status);
}
if ('contrib' in queryParams) {
setShowIndexContrib(!!Number(queryParams.contrib));
}
}
}, [
location.search,
Expand All @@ -139,7 +164,7 @@ export default function Contributors() {
unafflCount = 0;
const affiliated = [];
const unaffiliated = [];
const input = inputValue.toLowerCase().replace(/\s/g, '');
const input = searchQuery.toLowerCase().replace(/\s/g, '');
for (const org of organizations) {
const orgName = org.name.toLowerCase().replace(/\s/g, '');
if (
Expand All @@ -160,7 +185,7 @@ export default function Contributors() {
setUnaffiliatedCount(unafflCount);
setAffiliatedOrganizations(affiliated);
setUnaffiliatedOrganizations(unaffiliated);
}, [inputValue, organizations, showIndexContrib]);
}, [searchQuery, organizations, showIndexContrib]);

TabPanel.propTypes = {
children: PropTypes.node,
Expand Down Expand Up @@ -189,6 +214,22 @@ export default function Contributors() {
}
};

const handleInputValueChange = (value) => {
setSearchQuery(value);
setExpandedOrgs([]);
};

const handleOrgClick = (org) => {
const expanded = [...expandedOrgs];
const idx = expanded.indexOf(org.id.toString());
if (idx > -1) {
expanded.splice(idx, 1);
} else {
expanded.push(org.id.toString());
}
setExpandedOrgs(expanded);
};

const handleTabValueChange = (value) => {
switch (value) {
case 0:
Expand Down Expand Up @@ -222,8 +263,8 @@ export default function Contributors() {
<Grid item xs={12}>
<OrganizationSearch
options={organizationNames}
inputValue={inputValue}
setInputValue={setInputValue}
inputValue={searchQuery}
setInputValue={handleInputValueChange}
/>
</Grid>
</Grid>
Expand Down Expand Up @@ -295,15 +336,16 @@ export default function Contributors() {
totalUnaffiliatedCount={totalUnaffiliatedCount}
/>
<Affiliated
organizations={affiliatedOrganizations}
inputValue={inputValue}
affiliatedCount={affiliatedCount}
classes={classes}
affiliation='affiliated'
organizationData={organizations}
expandedOrgs={expandedOrgs}
filtersActive={filtersActive}
affiliatedCount={affiliatedCount}
totalAffiliatedCount={totalAffiliatedCount}
inputValue={searchQuery}
onOrgClick={handleOrgClick}
organizationData={organizations}
organizations={affiliatedOrganizations}
showIndexContrib={showIndexContrib}
totalAffiliatedCount={totalAffiliatedCount}
/>
</TabPanel>
<TabPanel value={getTabValue(orgStatus)} index={1}>
Expand All @@ -316,15 +358,16 @@ export default function Contributors() {
</TabPanel>
<TabPanel value={getTabValue(orgStatus)} index={2}>
<Affiliated
organizations={affiliatedOrganizations}
inputValue={inputValue}
affiliatedCount={affiliatedCount}
classes={classes}
affiliation='affiliated'
organizationData={organizations}
expandedOrgs={expandedOrgs}
filtersActive={filtersActive}
affiliatedCount={affiliatedCount}
totalAffiliatedCount={totalAffiliatedCount}
inputValue={searchQuery}
onOrgClick={handleOrgClick}
organizationData={organizations}
organizations={affiliatedOrganizations}
showIndexContrib={showIndexContrib}
totalAffiliatedCount={totalAffiliatedCount}
/>
</TabPanel>
</Grid>
Expand Down

0 comments on commit d58ebac

Please sign in to comment.