Commit 5e5b1258 authored by Zac Wood's avatar Zac Wood

Added a bunch of documentation for components

parent c9553734
Pipeline #2867 passed with stage
in 2 minutes and 22 seconds
......@@ -6,6 +6,9 @@ import Header from './Header';
require('../css/core.css');
/**
* The root component for the app
*/
const App = () => (
<div>
<Container>
......
......@@ -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,
......
......@@ -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,
......
......@@ -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;
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">
......
......@@ -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);
......
......@@ -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,
......
......@@ -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">
......
......@@ -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 }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment