dce-reactkit 1.0.20 → 2.0.0

package/src-old/components/Wizard/Question/CSV.js

@@ -1,307 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import CSVParser from 'papaparse';
-import genUUID from 'uuid/v1';
-
-// Import bootstrap components
-import { Label, Input } from 'reactstrap';
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-// Import other components
-import CSVPreview from '../../CSV';
-import Alert from '../../Alert';
-import Button from '../../Button';
-import LoadSplash from '../../Splash/Load';
-import ErrorSplash from '../../Splash/Error';
-import Question from '.';
-
-// Import glyphs
-import File from '../../../glyphs/File';
-import Chevron from '../../../glyphs/Chevron';
-import Check from '../../../glyphs/Check';
-
-const STAGE = {
-  CHOOSING_FILE: 1,
-  PROCESSING_FILE: 2,
-  MATCHING_COLUMNS: 3,
-  PREVIEW: 4,
-  ERROR: 6,
-};
-
-/**
- * onAnswered is called with the following:
- * {
- *   header: list of header column names
- *   data: row object { header: column cell value }
- * }
- */
-
-class CSV extends Component {
-  constructor(props) {
-    super(props);
-
-    this.id = genUUID();
-
-    // Initialize state
-    this.state = {
-      stage: STAGE.CHOOSING_FILE,
-      csv: [],
-    };
-
-    // Bind functions
-    this.endChoosingFileStage = this.endChoosingFileStage.bind(this);
-  }
-
-  endChoosingFileStage(file) {
-    // Deconstruct props
-    const {
-      noHeader,
-      noPreview,
-      onAnswered,
-      headersToMatch, // [{ key, title, description, required, validator }]
-    } = this.props;
-
-    // Determine the next stage
-    let nextStage;
-    if (headersToMatch) {
-      nextStage = STAGE.MATCHING_COLUMNS;
-    } else {
-      nextStage = STAGE.PREVIEW;
-    }
-
-    // Set state
-    this.setState({
-      stage: STAGE.PROCESSING_FILE,
-    });
-
-    // Advance to next stage
-    CSVParser.parse(file, {
-      header: !noHeader,
-      complete: (results) => {
-        // CSV processed successfully
-
-        // Deconstruct results from csv parser
-        const {
-          data,
-          errors,
-          meta,
-        } = results;
-
-        // Check for errors
-        let csv;
-        if (errors && errors.length > 0) {
-          // An error occurred
-          nextStage = STAGE.ERROR;
-        } else {
-          // Build csv file
-          csv = {
-            data,
-            headers: meta.fields,
-          };
-        }
-
-        // If next stage is preview but noPreview is true, just finish
-        if (nextStage === STAGE.PREVIEW && noPreview) {
-          // Just finish now
-          onAnswered(csv);
-          return;
-        }
-
-        // Save results and move on to next stage
-        this.setState({
-          csv,
-          stage: nextStage,
-        });
-      },
-    });
-  }
-
-  render() {
-    // Deconstruct props
-    const {
-      title,
-      subtitle,
-      uploadButtonTitle,
-      noHeader,
-      headersToMatch,
-      onAnswered,
-    } = this.props;
-
-    // Deconstruct state
-    const {
-      stage,
-      csv,
-    } = this.state;
-
-    let body;
-
-    // Error
-    if (stage === STAGE.ERROR) {
-      body = (
-        <ErrorSplash
-          title="Invalid CSV"
-          body="The CSV you chose could not be processed. Please check your CSV file and try again."
-          buttons={[{
-            text: 'Try Again',
-            onClick: () => {
-              this.setState({
-                stage: STAGE.CHOOSING_FILE,
-              });
-            },
-          }]}
-        />
-      );
-    }
-
-    // File chooser
-    if (stage === STAGE.CHOOSING_FILE) {
-      body = (
-        <div className="text-center">
-          <Label className="btn btn-info btn-lg" for={this.id}>
-            <File
-              type="csv"
-              className="mr-2"
-            />
-            {uploadButtonTitle}
-            <Input
-              type="file"
-              accept=".csv"
-              id={this.id}
-              className="d-none"
-              onChange={(e) => {
-                this.endChoosingFileStage(e.target.files[0]);
-              }}
-            />
-          </Label>
-        </div>
-      );
-    }
-
-    // Processing file
-    if (stage === STAGE.PROCESSING_FILE) {
-      body = (
-        <LoadSplash
-          message="Processing CSV"
-        />
-      );
-    }
-
-    // Preview
-    if (stage === STAGE.PREVIEW) {
-      body = (
-        <div>
-          <Alert
-            color="info"
-            className="text-center"
-          >
-            <h3>
-              CSV Preview
-            </h3>
-            Please double check the preview below before continuing.
-            <div
-              className="mt-2"
-            >
-              <Button
-                text={(
-                  <span>
-                    <Chevron direction="left" className="mr-2" />
-                    Choose New File
-                  </span>
-                )}
-                onClick={() => {
-                  this.setState({
-                    stage: STAGE.CHOOSING_FILE,
-                  });
-                }}
-                className="mr-2"
-                color="secondary"
-                size="lg"
-              />
-              <Button
-                color="success"
-                size="lg"
-                onClick={() => {
-                  onAnswered(csv);
-                }}
-              >
-                <Check
-                  className="mr-2"
-                />
-                Looks Good
-              </Button>
-            </div>
-          </Alert>
-          <CSVPreview
-            noHeader={noHeader}
-            csv={csv}
-            numRowsToPreview={4}
-            onReupload={() => {
-              this.setState({
-                stage: STAGE.CHOOSING_FILE,
-              });
-            }}
-          />
-        </div>
-      );
-    }
-
-    // Matching
-    if (stage === STAGE.MATCHING_COLUMNS) {
-      body = (
-        <CSVPreview
-          noHeader={noHeader}
-          csv={csv}
-          numRowsToPreview={4}
-          headersToMatch={headersToMatch}
-          onReupload={() => {
-            this.setState({
-              stage: STAGE.CHOOSING_FILE,
-            });
-          }}
-          onFinished={(newCSV) => {
-            onAnswered(newCSV);
-          }}
-        />
-      );
-    }
-
-    // Render the question with its appropriate body
-    return (
-      <Question
-        title={title}
-        subtitle={subtitle}
-      >
-        {body}
-      </Question>
-    );
-  }
-}
-
-CSV.propTypes = {
-  /* The title of the question */
-  title: PropTypes.string,
-  /* The subtitle of the question */
-  subtitle: PropTypes.string,
-  /* The title of the "upload file" button */
-  uploadButtonTitle: PropTypes.string,
-  /* If true, we don't use the first row of the csv as a header row  */
-  noHeader: PropTypes.bool,
-  /* If true and no matching is occurring, no preview will be shown */
-  noPreview: PropTypes.bool,
-  /* A function to call when the csv is properly uploaded and processed */
-  onAnswered: PropTypes.func.isRequired,
-  /* For full description of headersToMatch, see /autoMatch.js */
-  headersToMatch: PropTypes.arrayOf(PropTypes.object),
-};
-
-CSV.defaultProps = {
-  title: 'Upload CSV',
-  subtitle: null,
-  uploadButtonTitle: 'Choose File',
-  noHeader: false,
-  noPreview: false,
-  headersToMatch: null,
-};
-
-export default CSV;

package/src-old/components/Wizard/Question/Chooser/Assignment.js

@@ -1,108 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import initCACCL from 'caccl/client/cached';
-import CACCLInstance from 'caccl/APIInstanceClass';
-
-// Import other components
-import Chooser from '.';
-
-/**
- * onAnswered is called with the following:
- * {
- *   dropdownItem: dropdownItems[].name OR undefined (if choose button clicked),
- *   value: the chosen assignment
- * }
- */
-
-class AssignmentChooser extends Component {
-  render() {
-    // Deconstruct props
-    const {
-      title,
-      subtitle,
-      courseId,
-      onAnswered,
-      loadMessage,
-      buttonTitle,
-      buttonColor,
-      dropdownTitle,
-      dropdownColor,
-      dropdownItems,
-      filter,
-      api,
-    } = this.props;
-
-    // Set up chooser
-    const getItems = () => {
-      return api.course.assignment.list({ courseId })
-        .then((assignments) => {
-          if (filter) {
-            return assignments.filter(filter);
-          }
-          return assignments;
-        });
-    };
-
-    // Render a chooser
-    return (
-      <Chooser
-        title={title || 'Choose an Assignment'}
-        subtitle={subtitle}
-        getItems={getItems}
-        onAnswered={onAnswered}
-        buttonTitle={buttonTitle}
-        buttonColor={buttonColor}
-        dropdownTitle={dropdownTitle}
-        dropdownColor={dropdownColor}
-        dropdownItems={dropdownItems}
-        loadMessage={loadMessage || 'Waiting on Canvas'}
-      />
-    );
-  }
-}
-
-AssignmentChooser.propTypes = {
-  /* Title of the chooser */
-  title: PropTypes.string,
-  /* Subtitle of the chooser */
-  subtitle: PropTypes.string,
-  /* The course ID to query for assignments */
-  courseId: PropTypes.number.isRequired,
-  /* Filter function (for assignments.filter) to filter the assignment list */
-  filter: PropTypes.func,
-  /* Handler for when the question is answered */
-  onAnswered: PropTypes.func.isRequired,
-  /* Message to display while loading assignments */
-  loadMessage: PropTypes.string,
-  /* Title of the "choose" button (also displayed if no dropdown) */
-  buttonTitle: PropTypes.string,
-  /* Color of the "choose" button (also displayed if no dropdown) */
-  buttonColor: PropTypes.string,
-  /* Title of the dropdown menu (not displayed if no dropdown items) */
-  dropdownTitle: PropTypes.string,
-  /* Color of the dropdown menu (not displayed if no dropdown items) */
-  dropdownColor: PropTypes.string,
-  /* Dropdown items (mostly same definition as those in /components/Dropdown)
-   *   but also an additional 'name' prop that is passed when the dropdown is
-   *   clicked. */
-  dropdownItems: PropTypes.arrayOf(PropTypes.object),
-  /* CACCL instance to use to get the list of assignment */
-  api: PropTypes.instanceOf(CACCLInstance),
-};
-
-const { api } = initCACCL();
-
-AssignmentChooser.defaultProps = {
-  api,
-  title: 'Choose an Assignment:',
-  subtitle: null,
-  filter: null,
-  loadMessage: 'Waiting on Canvas',
-  buttonTitle: 'Choose',
-  buttonColor: 'info',
-  dropdownTitle: null,
-  dropdownColor: null,
-  dropdownItems: null,
-};
-
-export default AssignmentChooser;

package/src-old/components/Wizard/Question/Chooser/Course.js

@@ -1,214 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import initCACCL from 'caccl/client/cached';
-import CACCLInstance from 'caccl/APIInstanceClass';
-
-// Import other components
-import Chooser from '.';
-
-/**
- * onAnswered is called with the following:
- * {
- *   dropdownItem: dropdownItems[].name OR undefined (if choose button clicked),
- *   value: the chosen course
- * }
- */
-
-class CourseChooser extends Component {
-  render() {
-    // Deconstruct props
-    const {
-      title,
-      subtitle,
-      onAnswered,
-      loadMessage,
-      buttonTitle,
-      buttonColor,
-      dropdownTitle,
-      dropdownColor,
-      dropdownItems,
-      filter,
-      api,
-    } = this.props;
-
-    // Set up chooser
-    const getItems = () => {
-      return api.user.self.listCourses({ includeTerm: true })
-        .then((courses) => {
-          // Filter courses
-          let filteredCourses = courses;
-          if (filter) {
-            filteredCourses = courses.filter(filter);
-          }
-
-          // Pre-process courses
-          // > Add user's role
-          // > Divide into terms
-          const terms = {}; // Name to [] list of courses
-          filteredCourses.forEach((course) => {
-            const updatedCourse = course;
-            // Get role in course
-            updatedCourse.subtitle = 'You\'re a member of this course.';
-            if (
-              course.enrollments
-              && course.enrollments.length > 0
-            ) {
-              let isTeacher;
-              let isTA;
-              let isDesigner;
-              let isStudent;
-              let isObserver;
-              course.enrollments.forEach((enrollment) => {
-                switch (enrollment.type) {
-                  case 'teacher':
-                    isTeacher = true;
-                    break;
-                  case 'ta':
-                    isTA = true;
-                    break;
-                  case 'designer':
-                    isDesigner = true;
-                    break;
-                  case 'student':
-                    isStudent = true;
-                    break;
-                  case 'observer':
-                    isObserver = true;
-                    break;
-                  default:
-                    break;
-                }
-              });
-              if (isTeacher) {
-                updatedCourse.subtitle = (
-                  <span>
-                    You&apos;re a
-                    <em>  teacher  </em>
-                    in this course.
-                  </span>
-                );
-              } else if (isTA) {
-                updatedCourse.subtitle = (
-                  <span>
-                    You&apos;re a
-                    <em> TA </em>
-                    in this course.
-                  </span>
-                );
-              } else if (isDesigner) {
-                updatedCourse.subtitle = (
-                  <span>
-                    You&apos;re a
-                    <em> designer </em>
-                    for this course.
-                  </span>
-                );
-              } else if (isStudent) {
-                updatedCourse.subtitle = (
-                  <span>
-                    You&apos;re a
-                    <em> student </em>
-                    in this course.
-                  </span>
-                );
-              } else if (isObserver) {
-                updatedCourse.subtitle = (
-                  <span>
-                    You&apos;re an
-                    <em> observer </em>
-                    of this course.
-                  </span>
-                );
-              }
-            }
-
-            // Prepare the term
-            const termName = course.term.name;
-            if (!terms[termName]) {
-              terms[termName] = {
-                title: termName,
-                items: [],
-              };
-            }
-            terms[termName].items.push(updatedCourse);
-          });
-
-          // Sort terms
-          const termsList = Object.values(terms);
-          function _compareFunction(a, b) {
-            if (a.title < b.title) {
-              return 1;
-            }
-            if (a.title > b.title) {
-              return -1;
-            }
-            return 0;
-          }
-          termsList.sort(_compareFunction);
-
-          // Resolve with list of terms
-          return Promise.resolve(termsList);
-        });
-    };
-
-    // Render a chooser
-    return (
-      <Chooser
-        title={title || 'Choose a Course'}
-        subtitle={subtitle}
-        getItems={getItems}
-        onAnswered={onAnswered}
-        buttonTitle={buttonTitle}
-        buttonColor={buttonColor}
-        dropdownTitle={dropdownTitle}
-        dropdownColor={dropdownColor}
-        dropdownItems={dropdownItems}
-        loadMessage={loadMessage || 'Waiting on Canvas'}
-      />
-    );
-  }
-}
-
-CourseChooser.propTypes = {
-  /* Title of the chooser */
-  title: PropTypes.string,
-  /* Subtitle of the chooser */
-  subtitle: PropTypes.string,
-  /* Filter function (for courses.filter) to filter the course list */
-  filter: PropTypes.func,
-  /* Handler for when the question is answered */
-  onAnswered: PropTypes.func.isRequired,
-  /* Message to display while loading courses */
-  loadMessage: PropTypes.string,
-  /* Title of the "choose" button (also displayed if no dropdown) */
-  buttonTitle: PropTypes.string,
-  /* Color of the "choose" button (also displayed if no dropdown) */
-  buttonColor: PropTypes.string,
-  /* Title of the dropdown menu (not displayed if no dropdown items) */
-  dropdownTitle: PropTypes.string,
-  /* Color of the dropdown menu (not displayed if no dropdown items) */
-  dropdownColor: PropTypes.string,
-  /* Dropdown items (mostly same definition as those in /components/Dropdown)
-   *   but also an additional 'name' prop that is passed when the dropdown is
-   *   clicked. */
-  dropdownItems: PropTypes.arrayOf(PropTypes.object),
-  /* CACCL instance to use to get the list of assignment */
-  api: PropTypes.instanceOf(CACCLInstance),
-};
-
-const { api } = initCACCL();
-
-CourseChooser.defaultProps = {
-  api,
-  title: 'Choose a Course:',
-  subtitle: null,
-  filter: null,
-  loadMessage: 'Waiting on Canvas',
-  buttonTitle: 'Choose',
-  buttonColor: 'info',
-  dropdownTitle: null,
-  dropdownColor: null,
-  dropdownItems: null,
-};
-
-export default CourseChooser;

package/src-old/components/Wizard/Question/Chooser/helpers/divideIntoSections.js

@@ -1,16 +0,0 @@
-// Sections are defined: [{title, items}]
-export default (items) => {
-  // Detect sections
-  const isDividedIntoSections = (
-    items
-    && items.length > 0
-    && items[0].title
-    && items[0].items
-    && items[0].items.length > 0
-  );
-  return (
-    isDividedIntoSections
-      ? items
-      : [{ items }]
-  );
-};

package/src-old/components/Wizard/Question/Chooser/helpers/genGetItemsPromise.js

@@ -1,20 +0,0 @@
-export default (items, getItems) => {
-  // Use either items or getItems (whichever is included)
-  let lst = items || getItems;
-
-  // If no items, just resolve with empty list
-  if (!lst) {
-    return Promise.resolve([]);
-  }
-
-  // Call functions if type is function
-  if (typeof lst === 'function') {
-    lst = lst();
-  }
-
-  // Return a promise
-  if (lst) {
-    return Promise.resolve(lst);
-  }
-  return Promise.resolve([]);
-};

package/src-old/components/Wizard/Question/Chooser/helpers/preprocessSections.js

@@ -1,36 +0,0 @@
-// Given an option to be displayed in a list, infer the title of the option
-// Supports course, assignment, quiz, etc. types of Canvas objects
-export default (sections) => {
-  return sections.map((section) => {
-    const newSection = section;
-
-    // Add titles, subtitles
-    newSection.items = section.items.map((item) => {
-      const newItem = item;
-
-      // Add basic title fields
-      newItem.title = (
-        item.title
-        || item.name
-        || item.description
-      );
-
-      // Add user-based titles
-      if (
-        !newItem.title
-        && (item.user && item.user.name)
-      ) {
-        newItem.title = item.user.name;
-      }
-
-      // Add default title if no other title is added
-      if (!newItem.title) {
-        newItem.title = 'Untitled Option';
-      }
-
-      return newItem;
-    });
-
-    return newSection;
-  });
-};