{"size": 1570, "ext": "js", "max_stars_repo_path": "web-react/src/components/OrganizationHierarchy.js", "max_stars_repo_name": "arpendu11/grand-data-lake-frontend", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "web-react/src/components/OrganizationHierarchy.js", "max_issues_repo_name": "arpendu11/grand-data-lake-frontend", "max_issues_repo_issues_event_min_datetime": "2020-06-28T03:43:35.000Z", "max_issues_repo_issues_event_max_datetime": "2022-01-22T12:53:02.000Z", "max_forks_repo_path": "web-react/src/components/OrganizationHierarchy.js", "max_forks_repo_name": "arpendu11/grand-data-lake-frontend", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 8, "max_forks_count": null, "avg_line_length": 28.5454545455, "max_line_length": 72, "alphanum_fraction": 0.6197452229}
import React, { useEffect, useRef } from 'react';
import { useQuery } from '@apollo/react-hooks';
// import gql from 'graphql-tag';
import Title from './Title';
// import TidyTreeChart from './TidyTreeChart';
// import TangledTreeChart from './TangledTreeChart';
// import SimpleD3Tree from './SimpleD3Tree';
// import DendogramTreeChart from './DendogramTreeChart';
import GoOrgChart from './GoOrgChart';
import testData from '../testData.json';

// const GET_SELECTED_USER_QUERY = gql`
// {
//   User {
//     key:id
//     name:firstName
//     title:employeeTitle
//     photo
//     parent {
//       id
//     }
//   }
// }
// `;
const GET_SELECTED_USER_QUERY = testData;

export default function OrganizationHierarchy() {
  // const { loading, error, data } = useQuery(GET_SELECTED_USER_QUERY);
  const { loading, error, data } = GET_SELECTED_USER_QUERY;
  const videoRef = useRef();

  useEffect(() => {
    navigator.mediaDevices
      .getUserMedia({ video: true, audio: false })
      .then((stream) => {
        videoRef.current.srcObject = stream;
        videoRef.current.play();
      });
  }, []);

  if (error) return <p>Error</p>;
  if (loading) return <p>Loading...</p>;

  return (
    <React.Fragment>
      <Title>Organizational Hierarchy</Title>
      {/* <TangledTreeChart data={data['User'][82]} /> */}
      {/* <TidyTreeChart data={data['User'][82]} /> */}
      {/* <SimpleD3Tree data={data['User'][82]} /> */}
      {/* <DendogramTreeChart data={data['User'][82]} /> */}
      <GoOrgChart data={data['User']} />
    </React.Fragment>
  );
}
