All files / src/pages/Contributors AffiliatedOrganizations.js

86.67% Statements 26/30
68.75% Branches 11/16
88.89% Functions 8/9
85.71% Lines 24/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84                61x 6x     1566x     6x 6x 6x   1560x 144x 144x 144x       1560x 6300x 1410x       6x       6x     6x 144x 48x   96x           6x 6x     144x 144x         312x                                                
import React, { useState } from "react";
import { Dropdown } from "../../components/Dropdown";
import { ContributorThumbnail } from "../../components/ContributorThumbnail";
import { useStyles } from "./styles.js";
import { Typography } from "@material-ui/core";
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
 
export const AffiliatedOrganizations = ({ organizations }) => {
  const classes = useStyles();
 
 
  const parentOrg =organizations['Code for All'].filter(item => item);
 
 
  const getParentData = () => {
    const parentdata = [];
    parentOrg.forEach((data)=>{
 
      if (data.depth === 3){
        data['childNodes'] = [];
        data['isOpen'] = false;
        parentdata.push(data)
 
 
      }
      if (data.depth === 4){
        const obj =  parentdata.find((d)=> data.path.includes(d.path))
        obj.childNodes.push(data);
      }
 
    })
    return parentdata
  }
 
 
  const [currentThumbnails, setCurrentThumbnails] = useState(getParentData);
 
 
  const getChildrenLength = (org) => {
    if (org.childNodes.length > 0) {
      return org.childNodes.length;
    } else {
      return 0;
    }
  };
 
 
 
  Eif (currentThumbnails) {
    return (
      <Grid dropdownlength={currentThumbnails.length}>
        {currentThumbnails.map((org, i) => {
          const childNode = org.isOpen ?  org.childNodes : org.childNodes.slice(0,8)
          return (
            <Dropdown organization={org} key={i} dropdownLength={getChildrenLength(org)} isOpen={parentOrg.length < 3 ? true : false}>
              {childNode.length > 0 ? (
                <div className={classes.affiliatedThumbnailsWrapper}>
                  {childNode.map((child, idx) => (
                    <Typography className={classes.afflnThumbnails} key={idx}>
                      <ContributorThumbnail organization={child} />
                    </Typography>
                  ))}
                </div>
              ) : null}
 
              <Button data-cy="viewBtnClick" id="viewAllButton" className={classes.button}  onClick={() => {
                const data = [...currentThumbnails]
                data[i].isOpen = data[i].isOpen ? false : true;
                setCurrentThumbnails(data)
              }}> View All </Button>
 
            </Dropdown>
          );
 
        })}
      </Grid>
    );
 
  }  else {
    return null;
  }
}