{"size": 3892, "ext": "js", "max_stars_repo_path": "src/components/ChooseJobProfile/ChooseJobProfile.js", "max_stars_repo_name": "zburke/ui-data-export", "max_stars_repo_stars_event_min_datetime": "2020-10-15T12:00:06.000Z", "max_stars_repo_stars_event_max_datetime": "2020-10-15T12:00:06.000Z", "max_issues_repo_path": "src/components/ChooseJobProfile/ChooseJobProfile.js", "max_issues_repo_name": "zburke/ui-data-export", "max_issues_repo_issues_event_min_datetime": "2020-01-16T11:44:46.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-30T13:03:39.000Z", "max_forks_repo_path": "src/components/ChooseJobProfile/ChooseJobProfile.js", "max_forks_repo_name": "zburke/ui-data-export", "max_forks_repo_forks_event_min_datetime": "2020-05-22T09:32:54.000Z", "max_forks_repo_forks_event_max_datetime": "2022-01-28T15:04:38.000Z"}
{"max_stars_count": 1, "max_issues_count": 283, "max_forks_count": 6, "avg_line_length": 30.6456692913, "max_line_length": 107, "alphanum_fraction": 0.6554470709}
import React, {
  useState,
  useEffect,
  useRef,
} from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';

import { stripesConnect } from '@folio/stripes/core';
import {
  JobProfiles,
  useJobProfilesProperties,
  DEFAULT_JOB_PROFILES_COLUMNS,
  useListFormatter,
} from '@folio/stripes-data-transfer-components';

import ConfirmationModal from './ConfirmationModal/ConfirmationModal';
import { jobProfilesManifest } from '../../common';
import { ListSelect } from './ChooseJobProfileSelect/ChooseJobProfileSelect';

const customProperties = {
  columnWidths: { description: '40%' },
  columnMapping: { description: 'ui-data-export.description' },
  visibleColumns: [
    DEFAULT_JOB_PROFILES_COLUMNS.NAME,
    'description',
    DEFAULT_JOB_PROFILES_COLUMNS.UPDATED,
    DEFAULT_JOB_PROFILES_COLUMNS.UPDATED_BY,
  ],
};

const ChooseJobProfileComponent = ({
  resources,
  mutator,
  history,
  location,
}) => {
  const [isConfirmationModalOpen, setConfirmationModalState] = useState(false);
  const [selectedProfile, setSelectedProfile] = useState({});
  const fileDefinitionIdRef = useRef(null);

  useEffect(() => {
    fileDefinitionIdRef.current = location.state?.fileDefinitionId;
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const changeSelectHandler = event => {
    setSelectedProfile({
      ...selectedProfile,
      idType: event.target.value,
    });
  };

  return (
    <>
      <JobProfiles
        parentResources={resources}
        parentMutator={mutator}
        formatter={useListFormatter({})}
        hasSearchForm={false}
        lastMenu={<div />}
        titleId="ui-data-export.jobProfiles.selectProfile.title"
        searchResultsProps={{
          rowProps: null,
          onRowClick: (e, profile) => {
            setConfirmationModalState(true);
            setSelectedProfile(profile);
          },
        }}
        {...useJobProfilesProperties(customProperties)}
      />
      <ConfirmationModal
        id="choose-job-profile-confirmation-modal"
        open={isConfirmationModalOpen}
        disabledCofirmButton={!selectedProfile.idType}
        heading={<FormattedMessage id="ui-data-export.jobProfiles.selectProfile.modal.title" />}
        message={(
          <div>
            <FormattedMessage
              id="ui-data-export.jobProfiles.selectProfile.modal.message"
              values={{ profile: selectedProfile.name }}
            />
            <ListSelect onChange={changeSelectHandler} />
          </div>
        )}
        confirmLabel={<FormattedMessage id="ui-data-export.run" />}
        cancelLabel={<FormattedMessage id="ui-data-export.cancel" />}
        onCancel={() => setConfirmationModalState(false)}
        onConfirm={async () => {
          try {
            await mutator.export.POST({
              fileDefinitionId: fileDefinitionIdRef.current,
              jobProfileId: selectedProfile.id,
              idType: selectedProfile.idType,
            });

            history.push('/data-export');
          } catch (error) {
            setConfirmationModalState(false);
            console.error(error);
          }
        }}
      />
    </>
  );
};

ChooseJobProfileComponent.propTypes = {
  history: PropTypes.shape({ push: PropTypes.func.isRequired }).isRequired,
  location: PropTypes.shape({ state: PropTypes.shape({ fileDefinitionId: PropTypes.string }) }).isRequired,
  mutator: PropTypes.shape({ export: PropTypes.shape({ POST: PropTypes.func.isRequired }) }).isRequired,
  resources: PropTypes.shape({}).isRequired,
};

ChooseJobProfileComponent.manifest = Object.freeze({
  ...jobProfilesManifest,
  export: {
    type: 'okapi',
    path: 'data-export/export',
    clientGeneratePk: false,
    throwErrors: false,
    fetch: false,
  },
});

export { ChooseJobProfileComponent };
export default stripesConnect(ChooseJobProfileComponent);
