Added a bunch of documentation for components

schedules_web/src/components/App.tsx

@@ -6,6 +6,9 @@ import Header from './Header';
 
 require('../css/core.css');
 
+/**
+ * The root component for the app
+ */
 const App = () => (
     <div>
         <Container>

schedules_web/src/components/CourseSectionCard.tsx

@@ -11,6 +11,10 @@ interface CourseSectionCardProps {
 
 require('../css/button-text-override.css');
 
+/**
+ * Renders information about a single course section, and includes a
+ * button for adding/removing it from the current schedule.
+ */
 const CourseSectionCard = ({
     courseSection,
     courseSectionAction,

schedules_web/src/components/CourseSectionList.tsx

@@ -9,6 +9,10 @@ interface CourseSectionListProps {
     destructive?: boolean;
 }
 
+/**
+ * Renders a list of CourseSectionCards for every course section in
+ * the current schedule.
+ */
 const CourseSectionList = ({
     courseSections,
     courseSectionAction,

schedules_web/src/components/ExportModal.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { downloadFile } from '../util/utilities';
 
-interface Props {
+interface ExportModalProps {
     isModalOpen: boolean;
     toggleModal: () => void;
     calendarUrl: () => string;
@@ -10,45 +10,50 @@ interface Props {
     downloadIcs: () => Promise<void>;
 }
 
-class ExportModal extends React.Component<Props, {}> {
-    render() {
-        const { isModalOpen, toggleModal, calendarUrl, openCalendarAsWebcal, downloadIcs } = this.props;
-        return (
-            <Modal isOpen={isModalOpen} toggle={toggleModal}>
-                <ModalHeader toggle={toggleModal}>Your calendar has been generated!</ModalHeader>
-                <ModalBody>
-                    <h5>Apple Calendar</h5>
-                    To add your schedule to Apple Calendar, click the "Add to calendar" button below. If you are on a
-                    device running macOS or iOS, this will open a dialogue which will walk you through adding the
-                    calendar.
-                    <hr />
-                    <h5>Google Calendar</h5>
-                    <strong>On desktop:</strong>
-                    <br />
-                    Open your <a href="https://calendar.google.com/">Google Calendar</a>. Click the "Settings" button in
-                    the top right, and then click the Settings tab. In the menu on the left, click "Add calendar" and
-                    "From URL". Now, paste the following link inside the text box: <br />
-                    <code>{calendarUrl()}</code>
-                    <br />
-                    <strong>On mobile (Android only):</strong>
-                    <br />
-                    Click the "Download calendar file" button. This will download the calendar file which you may then
-                    open and add to your calendar.
-                    <hr />
-                    <h5>.ics file</h5>
-                    To download a .ics file containing your schedule, click the "Download calendar file" button below.
-                </ModalBody>
-                <ModalFooter>
-                    <Button color="secondary" onClick={downloadIcs}>
-                        Download calendar file
-                    </Button>
-                    <Button color="primary" onClick={openCalendarAsWebcal}>
-                        Add to calendar
-                    </Button>{' '}
-                </ModalFooter>
-            </Modal>
-        );
-    }
-}
+/**
+ * Modal view that contains buttons for exporting your schedule as
+ * well as instructions for importing your schedule into different
+ * calendar managers
+ */
+const ExportModal = ({
+    isModalOpen,
+    toggleModal,
+    calendarUrl,
+    openCalendarAsWebcal,
+    downloadIcs,
+}: ExportModalProps) => (
+    <Modal isOpen={isModalOpen} toggle={toggleModal}>
+        <ModalHeader toggle={toggleModal}>Your calendar has been generated!</ModalHeader>
+        <ModalBody>
+            <h5>Apple Calendar</h5>
+            To add your schedule to Apple Calendar, click the "Add to calendar" button below. If you are on a device
+            running macOS or iOS, this will open a dialogue which will walk you through adding the calendar.
+            <hr />
+            <h5>Google Calendar</h5>
+            <strong>On desktop:</strong>
+            <br />
+            Open your <a href="https://calendar.google.com/">Google Calendar</a>. Click the "Settings" button in the top
+            right, and then click the Settings tab. In the menu on the left, click "Add calendar" and "From URL". Now,
+            paste the following link inside the text box: <br />
+            <code>{calendarUrl()}</code>
+            <br />
+            <strong>On mobile (Android only):</strong>
+            <br />
+            Click the "Download calendar file" button. This will download the calendar file which you may then open and
+            add to your calendar.
+            <hr />
+            <h5>.ics file</h5>
+            To download a .ics file containing your schedule, click the "Download calendar file" button below.
+        </ModalBody>
+        <ModalFooter>
+            <Button color="secondary" onClick={downloadIcs}>
+                Download calendar file
+            </Button>
+            <Button color="primary" onClick={openCalendarAsWebcal}>
+                Add to calendar
+            </Button>{' '}
+        </ModalFooter>
+    </Modal>
+);
 
 export default ExportModal;

schedules_web/src/components/Header.tsx

 import * as React from 'react';
 import { Col, Row, UncontrolledTooltip } from 'reactstrap';
 
+/**
+ * Renders the app header with information and instructions for using Schedules.
+ */
 const Header = () => (
     <div>
         <Row className="justify-content-center my-5">

schedules_web/src/components/ScheduleBadge.tsx

@@ -19,6 +19,12 @@ interface State {
 
 require('../css/icon-badge.css');
 
+/**
+ * Contains all functionality for viewing your schedule, such as the
+ * shopping cart, list of course sections, and the generate calendar modal.
+ *
+ * TODO: Split this component up
+ */
 class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
     constructor(props: ScheduleBadgeProps) {
         super(props);

schedules_web/src/components/ScheduleRoot.tsx

@@ -10,6 +10,11 @@ interface ScheduleRootProps {
     downloadIcs: () => Promise<void>;
 }
 
+/**
+ * Weird component that renders the ScheduleBadge
+ *
+ * TODO: Remove this component? Or maybe refactor some of ScheduleBadge into this
+ */
 const ScheduleRoot = ({
     schedule,
     removeCourseSection,

schedules_web/src/components/SearchRoot.tsx

@@ -11,6 +11,10 @@ interface SearchRootProps {
     addCourseSection: (courseSectionToAdd: CourseSection) => void;
 }
 
+/**
+ * Renders the SearchBar and a list of CourseSections returned from the Search.
+ * Also renders an error if there is one.
+ */
 const SearchRoot = ({ search, searchCourseSections, addCourseSection }: SearchRootProps) => (
     <div>
         <SearchBar onSearch={searchCourseSections} />
@@ -26,6 +30,9 @@ const SearchRoot = ({ search, searchCourseSections, addCourseSection }: SearchRo
     </div>
 );
 
+/**
+ * Renders a basic error message.
+ */
 const Error = () => (
     <Row className="justify-content-center">
         <Col md="8">

schedules_web/src/containers/Search.tsx

@@ -4,10 +4,13 @@ import { searchCourseSections } from '../actions/search/search.actions';
 import SearchRoot from '../components/SearchRoot';
 import { State } from '../reducers';
 
+// Takes the current Redux state and returns objects which will be
+// passed to the component as Props
 const mapStateToProps = (state: State) => ({
     search: state.search,
 });
 
+// Pass mapStateToProps and other values to the component's props
 export default connect(
     mapStateToProps,
     { searchCourseSections, addCourseSection }