{"size": 2225, "ext": "js", "max_stars_repo_path": "src/components/Skills.js", "max_stars_repo_name": "Richard2415/Portfolio-Final", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Skills.js", "max_issues_repo_name": "Richard2415/Portfolio-Final", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Skills.js", "max_forks_repo_name": "Richard2415/Portfolio-Final", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.8961038961, "max_line_length": 138, "alphanum_fraction": 0.551011236}
import React, { useEffect, useState, lazy, Suspense } from "react";
import CustomNav from "./NavBar";
import { Container, Row, Col, Spinner} from "react-bootstrap";
import { skillsList, skillsData } from "../utils/helperList";

const SkillsBarChart = lazy(() => import("../utils/skillBarChart"));
const IconCard = lazy(() => import("../utils/IconCard"));

const Skills = () => {

  const [barData, setBarData] = useState([]);

  useEffect(() => {
    setChartData(skillsData);
  }, []);

  const setChartData = (skillsData) => {

    const skillNames = skillsData.map(obj => obj.name);

    // initialize data with 0.
    const defaultSkillData = skillNames.map(() => 0)

    const nameWiseData = skillsData.map(obj => {
      let tempObj = {
        name: obj.name,
        data: defaultSkillData
      };
      return tempObj;
    });

    skillsData.forEach(skillsDataObj => {
      nameWiseData.forEach(categoryObj => {
        if (skillsDataObj.name === categoryObj.name) {
          let categoryIndex = skillNames.indexOf(skillsDataObj.name);
          if (categoryIndex !== -1) {
            let arrData = JSON.parse(JSON.stringify(categoryObj.data));
            arrData[categoryIndex] = skillsDataObj.rating;
            categoryObj.data = arrData;
          }
        }
      });
    });

    setBarData(nameWiseData);
  }

  return (
    <>
      <CustomNav />
      <Container className="mt-5">
        <Suspense fallback={<div className="d-flex justify-content-center mt-5"><Spinner animation="border" variant="secondary" /></div>}>
          <Row xs={1} md={2}>
            <Col>
              <div className="py-3">
                {barData.length > 0 &&
                  <SkillsBarChart skillsData={barData} skills={barData.map(obj => obj.name)} />
                }
              </div>
            </Col>
            <Col className="skill-icons-container">
              <Row className="justify-content-evenly">
                {skillsList.map(skill => (
                  <IconCard key={skill.label} src={skill.src} label={skill.label} />
                ))}
              </Row>
            </Col>
          </Row>
          
        </Suspense>
      </Container>
    </>
  )
};

export default Skills;
