@instructure/outcomes-ui 2.1.3 → 2.1.5

package/es/translated/da/containers/ConnectedAlignmentCount.js

@@ -12,6 +12,8 @@ function mapStateToProps(state, ownProps) {
     count: getAlignedOutcomeCount(state, scope)
   };
 }
+/* eslint-disable react-redux/mapDispatchToProps-returns-object */
+
 
 function mapDispatchToProps(dispatch, ownProps) {
   var scope = ownProps.scope;
@@ -19,6 +21,8 @@ function mapDispatchToProps(dispatch, ownProps) {
     loadAlignments: loadAlignments
   }, dispatch, scope);
 }
+/* eslint-enable react-redux/mapDispatchToProps-returns-object */
+
 
 var ConnectedAlignmentCount = compose(connect(mapStateToProps, mapDispatchToProps), WithAlignmentSet)(AlignmentCount);
 export default ConnectedAlignmentCount;

package/es/translated/da/containers/ConnectedAlignmentWidget.js

@@ -0,0 +1,26 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { bindActionCreators as bindScopedActionCreators } from 'multireducer';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import * as alignmentActions from "../store/alignments/actions.js";
+import { getAlignedOutcomes } from "../store/alignments/selectors.js";
+import * as outcomePickerActions from "../store/OutcomePicker/actions.js";
+import AlignmentWidget from "../components/AlignmentWidget/index.js";
+import WithArtifact from "../components/WithArtifact.js";
+import ConnectedOutcomeTray from "./ConnectedOutcomeTray.js";
+
+var mapStateToProps = function mapStateToProps(state, ownProps) {
+  var scope = ownProps.scope;
+  return {
+    tray: ConnectedOutcomeTray,
+    alignedOutcomes: getAlignedOutcomes(state, scope)
+  };
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch, ownProps) {
+  var scope = ownProps.scope;
+  return _objectSpread(_objectSpread({}, bindScopedActionCreators(outcomePickerActions, dispatch, scope)), bindScopedActionCreators(alignmentActions, dispatch, scope));
+};
+
+var ConnectedAlignmentWidget = compose(connect(mapStateToProps, mapDispatchToProps), WithArtifact)(AlignmentWidget);
+export default ConnectedAlignmentWidget;

package/es/translated/da/containers/ConnectedOutcomesPerStudent.js

@@ -1,9 +1,10 @@
 import { connect } from 'react-redux';
 import { bindActionCreators as bindScopedActionCreators } from 'multireducer';
 import OutcomesPerStudent from "../components/OutcomesPerStudent/index.js";
-import { loadPage, viewReportAlignment, closeReportAlignment } from "../store/report/actions.js";
+import { loadPage, loadRemainingPages, viewReportAlignment, closeReportAlignment } from "../store/report/actions.js";
 import { setError } from "../store/context/actions.js";
-import { getLoading, getPageCount, getPageNumber, getUsers, getReportOutcome, getRollups, getScore, isOpen, hasAnyOutcomes } from "../store/report/selectors.js";
+import { formatCSVData, getLoading, getPageCount, getPageNumber, getUsers, getReportOutcome, getRollups, getScore, getLoadingRemainingPages, isOpen, hasAnyOutcomes } from "../store/report/selectors.js";
+import { getFeatures } from "../store/features/selectors.js";
 
 function mapStateToProps(state, ownProps) {
   var scope = ownProps.scope;
@@ -11,24 +12,32 @@ function mapStateToProps(state, ownProps) {
     pageCount: getPageCount(state, scope),
     currentPage: getPageNumber(state, scope),
     rollups: getRollups(state, scope),
-    users: getUsers(state, scope),
+    users: getUsers(state, scope, getPageNumber(state, scope)),
     getReportOutcome: getReportOutcome.bind(null, state, scope),
+    csvFetchingStatus: getLoadingRemainingPages(state, scope),
+    formatCSVData: formatCSVData.bind(null, state, scope),
     hasAnyOutcomes: hasAnyOutcomes(state, scope),
     getScore: getScore.bind(null, state, scope),
     isOpen: isOpen.bind(null, state, scope),
-    loading: getLoading(state, scope)
+    loading: getLoading(state, scope),
+    features: getFeatures(state)
   };
 }
+/* eslint-disable react-redux/mapDispatchToProps-returns-object */
+
 
 function mapDispatchToProps(dispatch, ownProps) {
   var scope = ownProps.scope;
   return bindScopedActionCreators({
     loadPage: loadPage,
+    loadRemainingPages: loadRemainingPages,
     viewReportAlignment: viewReportAlignment,
     closeReportAlignment: closeReportAlignment,
     setError: setError
   }, dispatch, scope);
 }
+/* eslint-enable react-redux/mapDispatchToProps-returns-object */
+
 
 var ConnectedOutcomesPerStudent = connect(mapStateToProps, mapDispatchToProps)(OutcomesPerStudent);
 export default ConnectedOutcomesPerStudent;

package/es/translated/da/containers/__tests__/AlignmentWidget.test.js

@@ -0,0 +1,42 @@
+import { expect } from 'chai';
+import React from 'react';
+import { mount } from 'enzyme';
+import createMockStore from "../../test/createMockStore.js";
+import AlignmentWidget from "../AlignmentWidget.js";
+describe('AlignmentWidget', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var store = createMockStore();
+    return Object.assign({
+      store: store,
+      artifactType: 'foo',
+      emptySetHeading: '',
+      artifactId: '1',
+      host: 'http://foo.outcomes.foo',
+      jwt: 'secretfoo'
+    }, props);
+  }
+
+  it('renders', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement("div", {
+      id: "app"
+    }, /*#__PURE__*/React.createElement(AlignmentWidget, makeProps())));
+    expect(wrapper.find('AlignmentWidget')).to.have.length(1);
+  });
+  it('sets the scope', function () {
+    var props = makeProps();
+    var wrapper = mount( /*#__PURE__*/React.createElement("div", {
+      id: "app"
+    }, /*#__PURE__*/React.createElement(AlignmentWidget, props)));
+    expect(wrapper.find('AlignmentWidget').prop('scope')).to.equal('foo:::1');
+  });
+  it('uses proper fallbacks if store is not passed in props', function () {
+    var props = makeProps({
+      store: void 0
+    });
+    var wrapper = mount( /*#__PURE__*/React.createElement("div", {
+      id: "app"
+    }, /*#__PURE__*/React.createElement(AlignmentWidget, props)));
+    expect(wrapper.find('AlignmentWidget').prop('scope')).to.equal('foo:::1');
+  });
+});

package/es/translated/da/containers/__tests__/ConnectedAlignmentWidget.test.js

@@ -0,0 +1,23 @@
+import { expect } from 'chai';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { mount } from 'enzyme';
+import { fromJS } from 'immutable';
+import createMockStore from "../../test/createMockStore.js";
+import ConnectedAlignmentWidget from "../ConnectedAlignmentWidget.js";
+describe('ConnectedAlignmentWidget', function () {
+  it('renders', function () {
+    var store = createMockStore(fromJS({
+      OutcomePicker: {
+        state: 'loading',
+        scope: 'scopeForTest'
+      }
+    }));
+    var wrapper = mount( /*#__PURE__*/React.createElement(Provider, {
+      store: store
+    }, /*#__PURE__*/React.createElement(ConnectedAlignmentWidget, {
+      tray: /*#__PURE__*/React.createElement("div", null)
+    })));
+    expect(wrapper.find('AlignmentWidget')).to.have.length(1);
+  });
+});

package/es/translated/da/containers/__tests__/OutcomesPerStudentReport.test.js

@@ -38,7 +38,8 @@ describe('OutcomesPerStudentReport', function () {
       artifactType: '',
       artifactId: '',
       host: '',
-      jwt: ''
+      jwt: '',
+      showAlert: function showAlert() {}
     };
   }
 

package/es/translated/da/demo.js

@@ -195,7 +195,7 @@ import { Checkbox } from '@instructure/ui-checkbox';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { Tabs } from '@instructure/ui-tabs';
 import { ApplyTheme } from '@instructure/ui-themeable';
-import { OutcomeAlignments, OutcomeCount, OutcomesPerStudentReport, OutcomeList, AlignmentButton } from "./index.js";
+import { OutcomeAlignments, OutcomeCount, OutcomesPerStudentReport, OutcomeList, AlignmentWidget } from "./index.js";
 var styles = {
   componentId: 'dCZbw',
   template: function template(theme) {
@@ -255,7 +255,7 @@ var DemoAlignment = function DemoAlignment(props) {
       displayMasteryDescription = props.displayMasteryDescription,
       displayMasteryPercentText = props.displayMasteryPercentText,
       jwt = props.jwt,
-      useAlignmentButton = props.useAlignmentButton;
+      useAlignmentWidget = props.useAlignmentWidget;
   return /*#__PURE__*/React.createElement("div", {
     className: styles.item,
     "data-automation": "artifact"
@@ -276,7 +276,7 @@ var DemoAlignment = function DemoAlignment(props) {
     host: outcomesHost,
     jwt: jwt,
     emptyText: "No outcomes are aligned"
-  }), useAlignmentButton ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(AlignmentButton, {
+  }), useAlignmentWidget ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(AlignmentWidget, {
     artifactType: artifactType,
     artifactTypeName: artifactTypeName,
     artifactId: artifactId,
@@ -416,14 +416,14 @@ function rerender() {
     jwt: createFirstGradeJwt
   }), /*#__PURE__*/React.createElement(DemoAlignment, {
     alignmentSetId: "",
-    useAlignmentButton: true,
+    useAlignmentWidget: true,
     name: "Quiz #103",
     artifactType: "quizzes.quiz",
     artifactId: "103",
     contextUuid: "dummy_uuid",
     emptySetHeading: "Align Institution outcomes to this quiz.",
     jwt: createJwt,
-    alignmentWidget: AlignmentButton
+    alignmentWidget: AlignmentWidget
   })), /*#__PURE__*/React.createElement(Tabs.Panel, {
     selected: currentTab === 'report',
     renderTitle: "Report",

package/es/translated/da/hooks/__tests__/useBoolean.test.js

@@ -0,0 +1,43 @@
+import { expect } from 'chai';
+import { renderHook, act } from '@testing-library/react-hooks/dom';
+import useBoolean from "../useBoolean.js";
+describe('useBoolean', function () {
+  it('creates custom hook with state equal to initial value if initial value is boolean', function () {
+    var _renderHook = renderHook(function () {
+      return useBoolean(false);
+    }),
+        result = _renderHook.result;
+
+    expect(result.current[0]).to.equal(false);
+  });
+  it('creates custom hook with state equal to initial value coerced to boolean if initial value is not boolean', function () {
+    var _renderHook2 = renderHook(function () {
+      return useBoolean('abc');
+    }),
+        result = _renderHook2.result;
+
+    expect(result.current[0]).to.equal(true);
+  });
+  it('changes state to true when first exported fn is called', function () {
+    var _renderHook3 = renderHook(function () {
+      return useBoolean();
+    }),
+        result = _renderHook3.result;
+
+    act(function () {
+      result.current[1]();
+    });
+    expect(result.current[0]).to.equal(true);
+  });
+  it('changes state to false when second exported fn is called', function () {
+    var _renderHook4 = renderHook(function () {
+      return useBoolean();
+    }),
+        result = _renderHook4.result;
+
+    act(function () {
+      result.current[2]();
+    });
+    expect(result.current[0]).to.equal(false);
+  });
+});

package/es/translated/da/hooks/__tests__/useCSVExport.test.js

@@ -0,0 +1,265 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { expect } from 'chai';
+import { renderHook } from '@testing-library/react-hooks/dom';
+import sinon from 'sinon';
+import useCSVExport, { NOT_EXPORTING, FETCHING_DATA, FORMATTING_CSV, CSV_COMPLETE, alertTypes } from "../useCSVExport.js";
+import { NOT_FETCHING, COMPLETED, IN_PROGRESS, ERROR } from "../../constants.js";
+import * as Alerts from "../../components/FlashAlert/index.js";
+describe('useCSVExport', function () {
+  var clock;
+  var showFlashAlert;
+  beforeEach(function () {
+    clock = sinon.useFakeTimers();
+    showFlashAlert = sinon.spy(Alerts, 'showFlashAlert');
+  });
+  afterEach(function () {
+    clock.restore();
+    showFlashAlert.restore();
+  });
+
+  var makeProps = function makeProps(props) {
+    return _objectSpread({
+      fetchCSVData: sinon.spy(),
+      fetchingStatus: NOT_FETCHING,
+      formatCSVData: sinon.spy(),
+      showProgressBar: sinon.spy(),
+      hideProgressBar: sinon.spy()
+    }, props);
+  };
+
+  describe('initializes', function () {
+    it('as not exporting', function () {
+      var _renderHook = renderHook(function () {
+        return useCSVExport(_objectSpread({}, makeProps({})));
+      }),
+          result = _renderHook.result;
+
+      expect(result.current.exportState).to.equal(NOT_EXPORTING);
+    });
+    it('formattedData as an empty array', function () {
+      var _renderHook2 = renderHook(function () {
+        return useCSVExport(_objectSpread({}, makeProps({})));
+      }),
+          result = _renderHook2.result;
+
+      expect(result.current.formattedData).to.be.empty;
+    });
+  });
+  describe('beginExport', function () {
+    it('when called sets the exportState to fetching_data and calls fetchCSVData if this is the first fetch', function () {
+      var props = makeProps({});
+
+      var _renderHook3 = renderHook(function () {
+        return useCSVExport(_objectSpread({}, props));
+      }),
+          result = _renderHook3.result;
+
+      result.current.beginExport();
+      expect(result.current.exportState).to.equal(FETCHING_DATA);
+      expect(props.fetchCSVData).to.have.been.called;
+      expect(props.formatCSVData).to.not.have.been.called;
+    });
+    it('when called sets the exportState to formatting_csv and calls formatCSVData if we have already completed a fetch', function () {
+      var formattedData = [[{
+        row1: 'row1'
+      }]];
+      var formatCSVDataMock = sinon.stub().returns(formattedData);
+      var props = makeProps({
+        fetchingStatus: COMPLETED,
+        formatCSVData: formatCSVDataMock
+      });
+
+      var _renderHook4 = renderHook(function () {
+        return useCSVExport(_objectSpread({}, props));
+      }),
+          result = _renderHook4.result;
+
+      result.current.beginExport();
+      expect(result.current.exportState).to.equal(FORMATTING_CSV);
+      expect(props.fetchCSVData).to.not.have.been.called;
+      expect(props.formatCSVData).to.have.been.called;
+    });
+    it('calls showFlashAlert with the starting message', function () {
+      var _renderHook5 = renderHook(function () {
+        return useCSVExport(_objectSpread({}, makeProps({})));
+      }),
+          result = _renderHook5.result;
+
+      result.current.beginExport();
+      expect(showFlashAlert).to.have.been.calledWith(alertTypes.starting);
+    });
+    it('calls showProgressBar', function () {
+      var props = makeProps({});
+
+      var _renderHook6 = renderHook(function () {
+        return useCSVExport(_objectSpread({}, props));
+      }),
+          result = _renderHook6.result;
+
+      result.current.beginExport();
+      expect(props.showProgressBar).to.have.been.calledOnce;
+    });
+  });
+  it('cancelExport sets the exportState to not_exporting and calls hideProgressBar and shows the cancelled alert', function () {
+    var props = makeProps({});
+
+    var _renderHook7 = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    }),
+        result = _renderHook7.result;
+
+    result.current.beginExport();
+    result.current.cancelExport();
+    expect(result.current.exportState).to.equal(NOT_EXPORTING);
+    expect(props.hideProgressBar).to.have.been.calledOnce;
+    expect(showFlashAlert).to.have.been.calledWith(alertTypes.cancelled);
+  });
+  it('sets the exportState to not_fetching if fetchCSVData throws an error', function () {
+    var fetchCSVDataError = sinon.stub().rejects();
+    var props = makeProps({
+      fetchCSVData: fetchCSVDataError
+    });
+    var newProps = makeProps({
+      fetchingStatus: ERROR
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(hook.result.current.exportState).to.equal(NOT_FETCHING);
+    });
+  });
+  it('calls showFlashAlert with the error message', function () {
+    var fetchCSVDataError = sinon.stub().rejects();
+    var props = makeProps({
+      fetchCSVData: fetchCSVDataError
+    });
+    var newProps = makeProps({
+      fetchingStatus: ERROR
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(showFlashAlert).to.have.been.calledWith(alertTypes.error);
+    });
+  });
+  it('does not call formatCSVData if fetchingStatus is still in progress', function () {
+    var newProps = makeProps({
+      fetchingStatus: IN_PROGRESS
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, makeProps({})));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(hook.result.current.exportState).to.equal(FETCHING_DATA);
+      expect(newProps.formatCSVData).to.not.have.been.called;
+    });
+  });
+  it('does not call formatCSVData if we are no longer fetching and did not complete', function () {
+    var newProps = makeProps({
+      fetchingStatus: NOT_FETCHING
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, makeProps({})));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(newProps.formatCSVData).to.not.have.been.called;
+    });
+  });
+  it('does not call formatCSVData if there is no export happening', function () {
+    var props = makeProps({
+      fetchingStatus: COMPLETED
+    });
+    renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    expect(props.formatCSVData).to.not.have.been.called;
+  });
+  it('does not call formatCSVData if fetching results in an error', function () {
+    var fetchCSVDataError = sinon.stub().rejects();
+    var props = makeProps({
+      fetchCSVData: fetchCSVDataError
+    });
+    var newProps = makeProps({
+      fetchingStatus: ERROR
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(newProps.formatCSVData).to.not.have.been.called;
+    });
+  });
+  it('sets the exportState to csv_complete when the data is formatted and shows the success alert', function () {
+    var formattedData = [[{
+      row1: 'row1'
+    }]];
+    var formatCSVDataMock = sinon.stub().returns(formattedData);
+    var props = makeProps({
+      formatCSVData: formatCSVDataMock
+    });
+    var newProps = makeProps({
+      fetchingStatus: COMPLETED
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(hook.result.current.formattedData).to.deep.equal(formattedData);
+      expect(hook.result.current.exportState).to.equal(CSV_COMPLETE);
+      expect(showFlashAlert).to.have.been.calledWith(alertTypes.success);
+    });
+  });
+  it('hides the progress bar and sets exportState to not_exporting once we have exported', function () {
+    var formattedData = [[{
+      row1: 'row1'
+    }]];
+    var formatCSVDataMock = sinon.stub().returns(formattedData);
+    var props = makeProps({
+      formatCSVData: formatCSVDataMock
+    });
+    var newProps = makeProps({
+      fetchingStatus: COMPLETED
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      clock.tick(2000);
+      expect(newProps.hideProgressBar).to.have.been.calledOnce;
+      expect(hook.result.exportState).to.equal(NOT_EXPORTING);
+    });
+  });
+  it('does not set the exportState to csv_complete if the formatted data is empty', function () {
+    var formatCSVDataMock = sinon.stub().returns([]);
+    var props = makeProps({
+      formatCSVData: formatCSVDataMock
+    });
+    var newProps = makeProps({
+      fetchingStatus: COMPLETED
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(hook.result.current.exportState).to.not.equal(CSV_COMPLETE);
+    });
+  });
+});

package/es/translated/da/hooks/useBoolean.js

@@ -0,0 +1,19 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState, useCallback } from 'react';
+
+var useBoolean = function useBoolean(initialState) {
+  var _useState = useState(Boolean(initialState)),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var setTrue = useCallback(function () {
+    return setState(true);
+  }, []);
+  var setFalse = useCallback(function () {
+    return setState(false);
+  }, []);
+  return [state, setTrue, setFalse];
+};
+
+export default useBoolean;

package/es/translated/da/hooks/useCSVExport.js

@@ -0,0 +1,129 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { COMPLETED, ERROR } from "../constants.js";
+import { showFlashAlert } from "../components/FlashAlert/index.js";
+export var NOT_EXPORTING = 'not_exporting';
+export var FETCHING_DATA = 'fetching_data';
+export var FORMATTING_CSV = 'formatting_csv';
+export var CSV_COMPLETE = 'csv_complete';
+export var alertTypes = {
+  starting: {
+    message: "CSV export has started. This may take a few minutes.",
+    type: 'success',
+    timeout: 5000
+  },
+  cancelled: {
+    message: "Your CSV export has been cancelled",
+    type: 'info',
+    timeout: 5000
+  },
+  success: {
+    message: "CSV export has completed",
+    type: 'success',
+    timeout: 5000
+  },
+  error: {
+    message: "There was an error in fetching the data. Please try again.",
+    type: 'error',
+    timeout: 5000
+  }
+};
+
+var useCSVExport = function useCSVExport(_ref) {
+  var fetchCSVData = _ref.fetchCSVData,
+      fetchingStatus = _ref.fetchingStatus,
+      formatCSVData = _ref.formatCSVData,
+      showProgressBar = _ref.showProgressBar,
+      hideProgressBar = _ref.hideProgressBar;
+
+  var _useState = useState(NOT_EXPORTING),
+      _useState2 = _slicedToArray(_useState, 2),
+      exportState = _useState2[0],
+      setExportState = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      formattedData = _useState4[0],
+      setFormattedData = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      progressValue = _useState6[0],
+      setProgressValue = _useState6[1];
+
+  var incrementProgressValue = function incrementProgressValue() {
+    return setProgressValue(function (prevValue) {
+      return prevValue + 1;
+    });
+  };
+
+  useEffect(function () {
+    if (exportState === FETCHING_DATA && fetchingStatus === COMPLETED) {
+      formatData();
+    } else if (exportState === FETCHING_DATA && fetchingStatus === ERROR) {
+      hideProgressBar();
+      showFlashAlert(alertTypes.error);
+      setExportState(NOT_EXPORTING);
+    }
+  }, [fetchingStatus]);
+  useEffect(function () {
+    if ((exportState === FETCHING_DATA || exportState === FORMATTING_CSV) && progressValue < 90) {
+      setTimeout(function () {
+        incrementProgressValue();
+      }, 1);
+    } else if (exportState === FORMATTING_CSV && formattedData.length > 0) {
+      setProgressValue(100);
+      showFlashAlert(alertTypes.success);
+      setExportState(CSV_COMPLETE);
+      setTimeout(function () {
+        hideProgressBar();
+        setExportState(NOT_EXPORTING);
+      }, 2000);
+    }
+  }, [exportState, formattedData, progressValue]);
+
+  var beginExport = function beginExport() {
+    showProgressBar();
+    showFlashAlert(alertTypes.starting);
+
+    if (fetchingStatus === COMPLETED) {
+      formatData();
+    } else {
+      fetchData();
+    }
+  };
+
+  var cancelExport = function cancelExport() {
+    showFlashAlert(alertTypes.cancelled);
+    setExportState(NOT_EXPORTING);
+    hideProgressBar();
+  };
+
+  var fetchData = function fetchData() {
+    setExportState(FETCHING_DATA);
+    fetchCSVData();
+  };
+
+  var formatData = function formatData() {
+    setExportState(FORMATTING_CSV);
+    setFormattedData(formatCSVData());
+  };
+
+  return {
+    beginExport: beginExport,
+    cancelExport: cancelExport,
+    exportState: exportState,
+    progressValue: progressValue,
+    formattedData: formattedData
+  };
+};
+
+useCSVExport.PropTypes = {
+  fetchCSVData: PropTypes.func.isRequired,
+  fetchingStatus: PropTypes.string.isRequired,
+  formatCSVData: PropTypes.func.isRequired,
+  showProgressBar: PropTypes.func.isRequired,
+  hideProgressBar: PropTypes.func.isRequired
+};
+export default useCSVExport;

package/es/translated/da/index.js

@@ -2,4 +2,4 @@ export { default as OutcomeAlignments } from "./containers/OutcomeAlignments.js"
 export { default as OutcomeCount } from "./containers/OutcomeCount.js";
 export { default as OutcomesPerStudentReport } from "./containers/OutcomesPerStudentReport.js";
 export { default as OutcomeList } from "./containers/OutcomeList.js";
-export { default as AlignmentButton } from "./containers/AlignmentButton.js";
+export { default as AlignmentWidget } from "./containers/AlignmentWidget.js";