{"size": 5168, "ext": "js", "max_stars_repo_path": "src/components/ViewCourse/sections/ViewCourseInstructors.js", "max_stars_repo_name": "zburke/ui-courses", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/ViewCourse/sections/ViewCourseInstructors.js", "max_issues_repo_name": "zburke/ui-courses", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/ViewCourse/sections/ViewCourseInstructors.js", "max_forks_repo_name": "zburke/ui-courses", "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": 39.1515151515, "max_line_length": 113, "alphanum_fraction": 0.5247678019}
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import get from 'lodash/get';
import { withStripes, CalloutContext } from '@folio/stripes/core';
import { Card, Button } from '@folio/stripes/components';
import withOkapiKy from '../../../util/withOkapiKy';
import css from './Instructors.css';


const ViewCourseInstructors = (props) => {
  const callout = useContext(CalloutContext);
  function removeInstructor(instructorId) {
    const oldCount = props.record.courseListingObject.instructorObjects.length;
    const clid = props.record.courseListingId;
    props.okapiKy(`coursereserves/courselistings/${clid}/instructors/${instructorId}`, {
      method: 'DELETE',
      headers: { Accept: 'text/plain' },
    })
      .text()
      .then(() => { props.mutator.instructorCount.replace(oldCount - 1); })
      .catch(exception => callout.sendCallout({
        type: 'error',
        message: <FormattedMessage id="ui-courses.removeInstructor.failure" values={{ message: exception }} />,
      }));
  }

  const { record, stripes } = props;
  const courseListingObject = record.courseListingObject || {};
  const instructorObjects = courseListingObject.instructorObjects || [];
  const permissions = {
    add: stripes.hasPerm('course-reserves-storage.courselistings.instructors.item.post'),
    edit: stripes.hasPerm('course-reserves-storage.courselistings.instructors.item.put'),
    delete: stripes.hasPerm('course-reserves-storage.courselistings.instructors.item.delete'),
  };

  const n = instructorObjects.length;

  return (
    <Card headerStart={<FormattedMessage id="ui-courses.instructor.pluralized" values={{ count: n }} />}>
      {n > 0 &&
        <table className={css.instructors}>
          <thead>
            <tr>
              <th align="left"><FormattedMessage id="ui-courses.field.instructorName" /></th>
              <th align="left"><FormattedMessage id="ui-courses.field.barcode" /></th>
              <th align="left"><FormattedMessage id="ui-courses.field.patronGroup" /></th>
            </tr>
          </thead>
          <tbody>
            {
              instructorObjects.map((instructor, index) => (
                <tr key={index}>
                  <td>{instructor.name}</td>
                  <td>{instructor.barcode}</td>
                  <td>{get(instructor, 'patronGroupObject.group')}</td>
                  <td>
                    {
                      permissions.edit && !instructor.patronGroupObject && (
                        <FormattedMessage id="ui-courses.editInstructor">
                          {ariaLabel => (
                            <Button
                              aria-label={ariaLabel}
                              buttonStyle="primary"
                              id={`clickable-edit-instructor-${index}`}
                              marginBottom0
                              to={`/cr/instructors/${courseListingObject.id}/${record.id}/${instructor.id}/edit`}
                            >
                              <FormattedMessage id="ui-courses.button.editInstructor" />
                            </Button>
                          )}
                        </FormattedMessage>
                      )
                    }
                    {
                      permissions.delete && (
                        <FormattedMessage id="ui-courses.removeInstructor">
                          {ariaLabel => (
                            <Button
                              aria-label={ariaLabel}
                              buttonStyle="primary"
                              id={`clickable-remove-instructor-${index}`}
                              marginBottom0
                              onClick={() => removeInstructor(instructor.id)}
                            >
                              <FormattedMessage id="ui-courses.button.removeInstructor" />
                            </Button>
                          )}
                        </FormattedMessage>
                      )
                    }
                  </td>
                </tr>
              ))
            }
          </tbody>
        </table>
      }
      {permissions.add && (
        <FormattedMessage id="ui-courses.addInstructor">
          {ariaLabel => (
            <Button
              aria-label={ariaLabel}
              buttonStyle="primary"
              id="clickable-add-instructor"
              to={`/cr/instructors/${courseListingObject.id}/${record.id}/add`}
              marginBottom0
            >
              <FormattedMessage id="ui-courses.button.addInstructor" />
            </Button>
          )}
        </FormattedMessage>
      )}
    </Card>
  );
};

ViewCourseInstructors.propTypes = {
  record: PropTypes.object.isRequired,
  stripes: PropTypes.shape({
    hasPerm: PropTypes.func.isRequired,
  }).isRequired,
  mutator: PropTypes.shape({
    instructorCount: PropTypes.shape({
      replace: PropTypes.func.isRequired,
    }).isRequired,
  }).isRequired,
  okapiKy: PropTypes.func.isRequired,
};

export default withOkapiKy(withStripes(ViewCourseInstructors));
