Main tree

industry-tree-group.js

import React, { useState, useEffect, useRef } from "react";
import styles from "./industry-tree.module.scss";

const IndustryTreeGroup = ({ group = {}, onChange = () => {}, industryTitle = "" }) => {
  const [checked, setChecked] = useState([]);
  const [collapsed, setCollapsed] = useState(true);
  const indeterminateCheckbox = useRef(null);

  const toggleAll = event => {
    if (event.target.checked) {
      setChecked(group.children.map(child => child.value));
    } else {
      setChecked([]);
    }
  };

  useEffect(() => {
    if (checked.length === group.children.length) {
      setCollapsed(false);
    }

    if (checked.length < group.children.length && checked.length > 0) {
      indeterminateCheckbox.current.indeterminate = true;
    } else {
      indeterminateCheckbox.current.indeterminate = false;
    }

    onChange(checked, industryTitle);
  }, [checked]);

  const allChecked = () => {
    return checked.length === group.children.length;
  };

  const handleCheckChange = (event, id) => {
    if (event.target.checked) {
      setChecked([...checked, id]);
    } else {
      const tmpChecked = [...checked];
      tmpChecked.splice(checked.indexOf(id), 1);
      setChecked(tmpChecked);
    }
  };

  const isChecked = id => {
    return checked.includes(id);
  };

  const handleKeyPress = event => {
    if (event.key === "Enter") {
      setCollapsed(!collapsed);
    }
  };

  return (
    <div
      className={styles.industry_dropdown__section}
      onClick={() => setCollapsed(!collapsed)}
      tabIndex="0"
      role="button"
      onKeyPress={handleKeyPress}
    >
      <div className={styles.industry_dropdown__header}>
        <input
          type="checkbox"
          onClick={event => event.stopPropagation()}
          onChange={toggleAll}
          checked={allChecked()}
          ref={indeterminateCheckbox}
        />
        <span className={styles.industry_dropdown__label}>{group.label}</span>
      </div>
      <ul
        className={styles.industry_dropdown__group_ul}
        style={{ display: collapsed ? "none" : "block" }}
        onClick={event => event.stopPropagation()}
        onKeyPress={event => event.stopPropagation()}
      >
        {group?.children
          ? group.children.map(child => (
              <li
                key={child.value}
                className={styles.industry_dropdown__option}
              >
                <input
                  type="checkbox"
                  onChange={event => handleCheckChange(event, child.value)}
                  checked={isChecked(child.value)}
                />
                <span className={styles.industry_dropdown__label}>
                  {child.label}
                </span>
              </li>
            ))
          : "Loading"}
      </ul>
    </div>
  );
};

export default IndustryTreeGroup;

industry-tree.js

import React, { useState, useEffect } from "react";
import "react-dropdown-tree-select/dist/styles.css";
import styles from "./industry-tree.module.scss";
import IndustryTreeGroup from "./industry-tree-group";

const IndustryTree = () => {
  const [industries, setIndustries] = useState([]);
  const [loading, setLoading] = useState(false);
  const [selectedIndustries, setSelectedIndustries] = useState({});

  const transformData = json => {
    const transformed = json.map(el => {
      return {
        label: el.name,
        value: el.id,
        children: el.industries.map(child => ({
          label: child.name,
          value: child.id
        }))
      };
    });
    console.log(transformed);
    setIndustries(transformed);
  };

  useEffect(() => {
    const getTree = async () => {
      try {
        setLoading(true);
        const result = await fetch("https://dev.privco.com/search/industry");
        if (result.ok) {
          const json = await result.json();
          transformData(json);
        }
      } catch (err) {
        throw new Error(err);
      } finally {
        setLoading(false);
      }
    };

    getTree();
  }, []);

  const handleSelected = (newSelections, industryName) => {
    setSelectedIndustries({...selectedIndustries, [industryName]: newSelections});
  };

  return (
    <div className={styles.industry_dropdown}>
      <div className={styles.industry_dropdown__value}>
        <span>
          {JSON.stringify(selectedIndustries)}
        </span>
      </div>
      <div className={styles.industry_dropdown__list}>
        {industries.map(el => (
          <IndustryTreeGroup industryTitle={el.label} key={el.value} group={el} onChange={handleSelected}/>
        ))}
      </div>
    </div>
  );
};

export default IndustryTree;