Merge branch 'main' into update-landing-909

Author: bruceplai

src/pages/Contributors/Affiliated.js

@@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
     '& h4': {
       paddingLeft: '10px',
       color: theme.palette.secondary.dark,
-      [theme.breakpoints.between('xs','sm')]: {
+      [theme.breakpoints.between('xs', 'sm')]: {
         fontSize: '15px',
       },
       [theme.breakpoints.up('md')]: {
@@ -78,7 +78,7 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   codeforallText: {
-    fontSize:'24px',
+    fontSize: '24px',
     [theme.breakpoints.up('sm')]: {
       fontSize: '12px',
     },
@@ -114,13 +114,13 @@ const useStyles = makeStyles((theme) => ({
 /* eslint complexity: [0, 0]*/
 export const Affiliated = (props) => {
   const {
+    affiliatedCount,
     classes,
     inputValue,
     organizations,
     organizationData,
     filtersActive,
-    affiliatedCount,
-    totalaffiliatedCount,
+    totalAffiliatedCount,
     showIndexContrib,
   } = props;
   const classesLocal = useStyles();
@@ -132,8 +132,8 @@ export const Affiliated = (props) => {
           Affiliated Organizations
           <span style={{ paddingLeft: '9px' }}>
             {filtersActive
-              ? `(${affiliatedCount}/${totalaffiliatedCount})`
-              : `(${totalaffiliatedCount})`}
+              ? `(${affiliatedCount}/${totalAffiliatedCount})`
+              : `(${totalAffiliatedCount})`}
           </span>
         </Typography>
       </Grid>
@@ -146,10 +146,18 @@ export const Affiliated = (props) => {
         })}
       >
         <Grid>
-          <img src='/images/code_for_All.png' alt='code for all logo' className={classesLocal.codeforAllIcon}/>
+          <img
+            src='/images/code_for_All.png'
+            alt='code for all logo'
+            className={classesLocal.codeforAllIcon}
+          />
         </Grid>
         <Grid>
-          <Typography variant='h4' noWrap className={classesLocal.codeforallText}>
+          <Typography
+            variant='h4'
+            noWrap
+            className={classesLocal.codeforallText}
+          >
             <Link
               href='/organization/code-for-all'
               target='_blank'
@@ -159,8 +167,8 @@ export const Affiliated = (props) => {
             </Link>
             <span style={{ paddingLeft: '5px' }}>
               {filtersActive
-                ? `(${affiliatedCount}/${totalaffiliatedCount})`
-                : ` (${totalaffiliatedCount})`}
+                ? `(${affiliatedCount}/${totalAffiliatedCount})`
+                : ` (${totalAffiliatedCount})`}
             </span>
           </Typography>
         </Grid>
@@ -185,12 +193,15 @@ export const Affiliated = (props) => {
           data-cy='code-for-all-chevron'
           onClick={() => setDropdownOpen(!dropdownOpen)}
         >
-          <DropdownArrow open={dropdownOpen} handleArrow={() => setDropdownOpen(!dropdownOpen)} />
+          <DropdownArrow
+            open={dropdownOpen}
+            handleArrow={() => setDropdownOpen(!dropdownOpen)}
+          />
         </Grid>
       </Grid>
       <Grid>
-        {dropdownOpen && (
-          !organizations['Code for All'] ? (
+        {dropdownOpen &&
+          (!organizations ? (
             !inputValue ? (
               <h3 className={classes.loaders}>Loading...</h3>
             ) : (
@@ -206,8 +217,7 @@ export const Affiliated = (props) => {
                 filtersActive={filtersActive}
               />
             </Grid>
-          )
-        )}
+          ))}
       </Grid>
     </Grid>
   );

src/pages/Contributors/AffiliatedOrganizations.js

@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme) => ({
     flexWrap: 'wrap',
     marginTop: '10px',
     justifyContent: 'center',
-    [theme.breakpoints.between('xs','sm')]: {
+    [theme.breakpoints.between('xs', 'sm')]: {
       marginLeft: '0',
       justifyContent: 'center',
       alignItems: 'center',
@@ -73,17 +73,14 @@ export const AffiliatedOrganizations = ({
   const classes = useStyles();
 
   const isChildThumbnail = true;
-  let organizationArray;
   let parentdata;
   let parentChildobj;
   let mapsearchedChildParent;
 
   const getParentData = () => {
-    organizationArray = organizations['Code for All'].filter((item) => item);
-
     parentdata = [];
 
-    organizationArray.forEach((org) => {
+    organizations.forEach((org) => {
       if (org.depth === 3) {
         org['childNodes'] = [];
         org['isOpen'] = false;
@@ -131,7 +128,13 @@ export const AffiliatedOrganizations = ({
   useEffect(() => {
     setCurrentThumbnails(getParentData);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputValue, organizations, organizationData, showIndexContrib,filtersActive]);
+  }, [
+    inputValue,
+    organizations,
+    organizationData,
+    showIndexContrib,
+    filtersActive,
+  ]);
 
   let childSort;
   let childNode;
@@ -155,7 +158,11 @@ export const AffiliatedOrganizations = ({
               inputValue={inputValue}
               filtersActive={filtersActive}
             >
-              <Grid container style={ { justifyContent:"center" } } alignItems='center'>
+              <Grid
+                container
+                style={{ justifyContent: 'center' }}
+                alignItems='center'
+              >
                 {childNode.length > 0 ? (
                   <Grid
                     item
@@ -166,7 +173,10 @@ export const AffiliatedOrganizations = ({
                     {childNode.map((child, idx) => {
                       return (
                         <Grid
-                          item xs={12} sm={5} lg={5}
+                          item
+                          xs={12}
+                          sm={5}
+                          lg={5}
                           className={classes.afflnThumbnails}
                           key={`affiliatedThumbnail_child_${i}_${idx}`}
                         >
@@ -224,7 +234,10 @@ export const AffiliatedOrganizations = ({
     inputValue !== ''
   ) {
     return (
-      <Grid className={classes.thumbnailGrid} data-cy='affiliated-organizations'>
+      <Grid
+        className={classes.thumbnailGrid}
+        data-cy='affiliated-organizations'
+      >
         {currentThumbnails.map((org, i) => {
           return (
             <Dropdown

src/pages/Contributors/UnaffiliatedOrganizations.js

@@ -55,7 +55,7 @@ export const UnaffiliatedOrganizations = (props) => {
     filtersActive,
     organization,
     showIndexContrib,
-    totalunaffiliatedCount,
+    totalUnaffiliatedCount,
     unaffiliatedCount,
   } = props;
   const classes = useStyles();
@@ -69,13 +69,22 @@ export const UnaffiliatedOrganizations = (props) => {
           <span style={{ paddingLeft: '1px' }}>
             {' '}
             {filtersActive
-              ? `(${unaffiliatedCount}/${totalunaffiliatedCount})`
-              : `(${totalunaffiliatedCount})`}{' '}
+              ? `(${unaffiliatedCount}/${totalUnaffiliatedCount})`
+              : `(${totalUnaffiliatedCount})`}{' '}
           </span>
         </Typography>
       </Grid>
       {showIndexContrib ? (
-        <Grid item xs={12}  sm={12} md={12} container direction="row" justify="center" alignItems="center">
+        <Grid
+          item
+          xs={12}
+          sm={12}
+          md={12}
+          container
+          direction='row'
+          justify='center'
+          alignItems='center'
+        >
           <Typography color='primary' className={classes.noargText}>
             {' '}
             No organization found{' '}
@@ -98,8 +107,7 @@ export const UnaffiliatedOrganizations = (props) => {
                     isChildThumbnail={isChildThumbnail}
                   ></ContributorThumbnail>
                 </Grid>
-              ))
-            }
+              ))}
           </Grid>
         </Grid>
       )}