{"size": 1941, "ext": "js", "max_stars_repo_path": "src/ui/components/Presentation/ThirdStep/ThirdStep.js", "max_stars_repo_name": "ChamHerz/audiolab", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/ui/components/Presentation/ThirdStep/ThirdStep.js", "max_issues_repo_name": "ChamHerz/audiolab", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/ui/components/Presentation/ThirdStep/ThirdStep.js", "max_forks_repo_name": "ChamHerz/audiolab", "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.1304347826, "max_line_length": 69, "alphanum_fraction": 0.5986604843}
import React, { useEffect, useState } from "react";
import { findAllSegmentByProject } from "../../../api/segment";
import { Checkbox, Table } from "semantic-ui-react";
import { map } from "lodash";

import "./ThirdStep.scss";

export default function ThirdStep(props) {
  const { projectFinalSelected } = props;
  const [segments, setSegments] = useState([]);

  useEffect(() => {
    if (projectFinalSelected) {
      findAllSegmentByProject(projectFinalSelected.id)
        .then((response) => {
          console.log("findAllSegmentByProject", response);
          if (response?.data) {
            setSegments(response.data);
          }
        })
        .catch((err) => {
          console.log("error, ", err);
        });
    }
  }, [projectFinalSelected]);

  return (
    <Table celled compact definition inverted className="third-step">
      <Table.Header fullWidth>
        <Table.Row>
          <Table.HeaderCell />
          <Table.HeaderCell>Audio</Table.HeaderCell>
          <Table.HeaderCell>Segmento</Table.HeaderCell>
          <Table.HeaderCell>Inicio</Table.HeaderCell>
          <Table.HeaderCell>Fin</Table.HeaderCell>
        </Table.Row>
      </Table.Header>

      <Table.Body>
        {map(segments, (oneSegment, index) => (
          <Segment key={index} segment={oneSegment} />
        ))}
      </Table.Body>
    </Table>
  );
}

function Segment(props) {
  const [state, setState] = useState(false);
  const { segment } = props;

  const onChange = () => {
    console.log("cambiar");
    setState(!state);
  };

  return (
    <Table.Row>
      <Table.Cell collapsing>
        <Checkbox onChange={() => onChange()} checked={state} />
      </Table.Cell>
      <Table.Cell>{segment.audio.name}</Table.Cell>
      <Table.Cell>{segment.segment.labelText}</Table.Cell>
      <Table.Cell>{segment.segment.startTime}</Table.Cell>
      <Table.Cell>{segment.segment.endTime}</Table.Cell>
    </Table.Row>
  );
}
