diff --git a/src/Page/Home/Schedule.tsx b/src/Page/Home/Schedule.tsx
new file mode 100644
index 000000000..3e737f8a8
--- /dev/null
+++ b/src/Page/Home/Schedule.tsx
@@ -0,0 +1,214 @@
+import React, { FunctionComponent, Component, CSSProperties } from "react";
+import moment from "moment";
+
+import Table from "react-bootstrap/Table";
+
+interface AssignmentCellProps {
+ title: string,
+ link: string | null,
+ highlight?: boolean
+}
+
+const AssignmentCell: FunctionComponent
=
+ ({ title, link, highlight }: AssignmentCellProps) => {
+
+ let cellStyle: CSSProperties = {};
+ if (highlight) {
+ cellStyle={
+ backgroundColor: "#e6e0f3",
+ }
+ }
+
+ if (link === null) {
+ return (
+
+ {title}
+ |
+ );
+ }
+ return (
+
+ {title}
+ |
+ );
+}
+
+interface ScheduleCellProps {
+ title: string,
+ description: string,
+ highlight?: boolean,
+ showDescription?: boolean
+}
+
+const ScheduleCell: FunctionComponent =
+ ({ title, description, highlight, showDescription }: ScheduleCellProps) => {
+
+ let cellStyle: CSSProperties = {};
+ if (highlight) {
+ cellStyle={
+ backgroundColor: "#e6e0f3",
+ }
+ }
+
+ return (
+
+ {title}
+
+ {showDescription ? description : null}
+ |
+ );
+}
+
+interface ScheduleDay {
+ title: string,
+ date: moment.Moment,
+ active: boolean,
+ description: string
+}
+
+interface ScheduleRow {
+ num: number,
+ title: string,
+ visible: boolean,
+ days: Array,
+ dates: {
+ start: moment.Moment,
+ end: moment.Moment
+ },
+ assignments: string,
+ assignmentLink: string
+}
+
+// @ts-ignore
+const ScheduleRow: FunctionComponent =
+ ({ num, title, visible, days, dates, assignments, assignmentLink }: ScheduleRow) => {
+
+ // If not visible, return
+ if (!visible) {
+ return null;
+ }
+
+ // If we're between the dates, highlight
+ let highlight = false;
+ if (moment() >= dates.start && moment() <= dates.end) {
+ highlight = true;
+ }
+
+ // Generate the two columns and their information
+ // using the ScheduleCall function
+ // Here it's num+1 because the quarter starts in Week 1, not Week 0
+ return (
+
+ | {num+1} |
+ {
+ days.map((day: ScheduleDay, index: number) => (
+ = dates.start}
+ />
+ ))
+ }
+
+
+ );
+}
+
+interface ScheduleState {
+ scheduleData?: Array
+}
+
+export default class Schedule extends Component<{}, ScheduleState> {
+ constructor(props: {}) {
+ super(props);
+
+ this.state = {};
+ }
+
+ componentDidMount() {
+ let dirtyScheduleData = require("../../res/schedule.json");
+ const scheduleData: Array = dirtyScheduleData.map(
+ ({ days, dates, ...v }: {
+ days: Array<{
+ title: string,
+ active: boolean,
+ description: string,
+ date: string
+ }>,
+ dates: { start: string, end: string}
+ }) => {
+ // Convert the array of days to ScheduleDays
+ interface DirtyScheduleDate extends Omit {
+ date: string
+ };
+
+ const momentDays: Array = days.map(
+ ({ date, ...p }: DirtyScheduleDate) => {
+ return {
+ date: moment(date, "YYYY-MM-DD"),
+ ...p
+ }
+ }
+ )
+
+ // Individually convert the start and end date
+ return {
+ days: momentDays,
+ dates: {
+ start: moment(dates.start, "YYYY-MM-DD"),
+ end: moment(dates.end, "YYYY-MM-DD")
+ },
+ ...v
+ }
+ }
+ )
+
+ this.setState({ scheduleData });
+ }
+
+ render () {
+ // @ts-ignore
+ let scheduleData = this.state.scheduleData;
+ if (!scheduleData) {
+ return null
+ }
+
+ return (
+
+
Course Schedule
+
+
+
+ | Week |
+ Tuesday |
+ Thursday |
+ Assignment |
+
+ {
+ // @ts-ignore
+ scheduleData.map((scheduleData, index) =>
+ (
+
+ ))
+ }
+
+
+
@@ -23,7 +23,7 @@ const Labs: FunctionComponent = () => (
working knowledge of Python - after all, what better way to learn
Python than to practice it?
- {/* */}
+
);
diff --git a/src/Page/Labs/index.tsx b/src/Page/Labs/index.tsx
new file mode 100644
index 000000000..1f2aecd5b
--- /dev/null
+++ b/src/Page/Labs/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Labs"
diff --git a/src/Page/Lectures/LectureTable.tsx b/src/Page/Lectures/LectureTable.tsx
new file mode 100644
index 000000000..113435469
--- /dev/null
+++ b/src/Page/Lectures/LectureTable.tsx
@@ -0,0 +1,170 @@
+import React, { FunctionComponent, Component, CSSProperties } from 'react';
+import moment from 'moment';
+import Table from "react-bootstrap/Table";
+
+interface LectureRowProps {
+ title: string,
+ date: moment.Moment,
+ // URL props:
+ handout?: {
+ title: string,
+ url: string,
+ },
+ condensed: string,
+ full: string,
+ video: string,
+ code: string,
+ // Display props:
+ visible: boolean,
+ active: boolean,
+ highlight?: boolean
+}
+
+const Lecture: FunctionComponent =
+ ({title, handout, date, condensed, full, video, visible, code, active,
+ highlight}: LectureRowProps) => {
+
+ if (!visible) {
+ return null;
+ }
+
+ // Check date for row highlighting
+ let rowStyle: CSSProperties = {};
+ if (highlight) {
+ rowStyle={
+ backgroundColor: "#e6e0f3",
+ fontWeight: "bold"
+ }
+ }
+
+ // Are condensed slides linked?
+ let condensedLink: JSX.Element | null;
+ if (!condensed || condensed === "#") {
+ condensedLink = N/A
;
+ } else {
+ condensedLink = (Condensed Slides);
+ }
+
+ // Are full slides linked?
+ let fullLink: JSX.Element | null;
+ if (!full || full === "#") {
+ fullLink = null;
+ } else {
+ fullLink = ;
+ }
+
+ // Is video linked?
+ let videoLink: JSX.Element | null;
+ if (!video || video === "#") {
+ videoLink = N/A
;
+ } else {
+ videoLink = (Video);
+ }
+
+ // Is there code?
+ let codeLink: JSX.Element | null;
+ if (!code || code === "#") {
+ codeLink = N/A
;
+ } else {
+ codeLink = (Code);
+ }
+
+ const localdate = moment(date).local()
+ const formattedDate: string = localdate.format("MMMM Do YYYY");
+
+ return (
+
+
+ {title}
+ {handout
+ ? (<>
Reading: {handout.title})
+ : null}
+ |
+ {formattedDate} |
+ {condensedLink}
+
+ {fullLink}
+ |
+ {videoLink} |
+ {codeLink} |
+
+ );
+}
+
+interface LectureDataState {
+ highlight: number,
+ lectureData?: Array
+}
+
+export default class LectureData extends Component<{}, LectureDataState> {
+ constructor(props: {}) {
+ super(props);
+
+ this.state = {
+ highlight: -1
+ }
+ }
+
+ componentDidMount() {
+ let lectureData = require('../../res/lectures.json');
+ lectureData = lectureData.map(
+
+ ({ date, ...v }: { date: string }) => {
+ return {
+ date: moment(date, "YYYY-MM-DD"),
+ ...v
+ }
+ }
+ )
+
+ let i;
+ for (i = 0; i < lectureData.length; i++) {
+ if (moment().isSameOrBefore(lectureData[i].date, 'day')) {
+ break;
+ }
+ }
+
+ // Only highlight first row if date is less than a week away
+ if (i === 0 && moment().diff(lectureData[i].date, "days") >= -7) {
+ this.setState({ lectureData });
+ }
+ else {
+ this.setState({ lectureData, highlight: i });
+ }
+ }
+
+ render () {
+ let lectureData = this.state.lectureData;
+ if (!lectureData) {
+ return null
+ }
+
+ return (
+
+
+
+
+ | Title |
+ Date |
+ Slides |
+ Video |
+ Code |
+
+
+
+ {
+ lectureData.map((lectureData, index) =>
+ (
+
+ ))
+ }
+
+
+
@@ -14,7 +14,7 @@ const Lectures: FunctionComponent = () => (
Slides are heavily animated, so both the compressed and
full versions of the slide decks are uploaded.
- {/**/}
+
)
diff --git a/src/Page/Lectures/index.tsx b/src/Page/Lectures/index.tsx
new file mode 100644
index 000000000..7a168b019
--- /dev/null
+++ b/src/Page/Lectures/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Lectures"
diff --git a/src/pages/NoMatch.tsx b/src/Page/NoMatch/NoMatch.tsx
similarity index 100%
rename from src/pages/NoMatch.tsx
rename to src/Page/NoMatch/NoMatch.tsx
diff --git a/src/Page/NoMatch/index.tsx b/src/Page/NoMatch/index.tsx
new file mode 100644
index 000000000..e048206c2
--- /dev/null
+++ b/src/Page/NoMatch/index.tsx
@@ -0,0 +1 @@
+export { default } from "./NoMatch"
diff --git a/src/Page/Page.tsx b/src/Page/Page.tsx
new file mode 100644
index 000000000..870c6b9b3
--- /dev/null
+++ b/src/Page/Page.tsx
@@ -0,0 +1,258 @@
+import React, { Component } from 'react';
+import ReactMarkdown from 'react-markdown';
+import NoMatch from './NoMatch';
+import CodeBlock from './CodeBlock';
+
+import { useLocation, useParams } from 'react-router-dom'
+import toc from 'markdown-toc-unlazy';
+import uslug from 'uslug';
+
+
+const safeFetch: (url: string, options?: RequestInit) => Promise
+ = (url, options) => {
+ if (options == null) {
+ options = {}
+ }
+
+ if (options.credentials == null) options.credentials = 'same-origin'
+
+ return fetch(url, options).then(function(response) {
+ if (response.status >= 200 && response.status < 300) {
+ return response.text();
+
+ } else {
+ var error = new Error(
+ response.statusText || response.status.toString()
+ );
+
+ return Promise.reject(error);
+ }
+ }).catch(err => {
+ return Promise.reject(err);
+ });
+}
+
+function flatten(text: string, child: string | JSX.Element): string {
+ // @ts-ignore
+ return typeof child === 'string'
+ ? text + child
+ // @ts-ignore
+ : React.Children.toArray(child.props.children).reduce(flatten, text)
+}
+
+/**
+ * The Header object renders each markdown header and uses a reference to scroll
+ * to this header when the parent component passes the prop to do so.
+ *
+ * @param children The children of the react component.
+ * @param level The level of the header (1, 2, 3, ...).
+ * @param scrollTo The element to scroll to. If this matches the slug, the
+ * component will atempt to scroll here.
+ */
+const Header =
+ ({ children, level, scrollTo }:
+ { children: JSX.Element, level: number, scrollTo: string }) => {
+ const DOMChildren = React.Children.toArray(children);
+
+ // @ts-ignore
+ const text: string = DOMChildren.reduce(flatten, '');
+ const slug = uslug(text);
+
+ const scrollRef = React.useRef(null);
+ React.useEffect(() => {
+ if ((scrollTo === slug) && (scrollRef.current)) {
+ const ref = scrollRef.current! as HTMLElement;
+ ref.scrollIntoView();
+ }
+ }, [scrollTo, slug]);
+
+ return React.createElement('h' + level,
+ {id: slug, ref: scrollRef},
+ children)
+}
+
+const PageWrapper = () => {
+ const location = useLocation();
+ const match = { params: useParams() };
+
+ return ;
+}
+
+export interface PageState {
+ md: string | 404,
+ scrollTo: string | null,
+ failed?: boolean,
+ [x: string]: any
+}
+
+class Page extends Component {
+ // Constructor
+ constructor(props: any) {
+ super(props);
+ this.state = {
+ md: '',
+ scrollTo: null
+ };
+
+ this.customSlug = this.customSlug.bind(this);
+ }
+
+ fetchFile(path: string) {
+ return safeFetch("page/".concat(path));
+ }
+
+ fetchMarkdown(slug: string) {
+ this.fetchFile(`${slug}.md`)
+ .then((response) => {
+ this.setState({
+ md: response
+ });
+ })
+ .catch((e) => {
+ this.setState({
+ md: 404
+ })
+ });
+ }
+
+ customSlug(s: string) {
+ /* Create a slug for s that prepends the current path */
+ const currLocation: string = this.props.location.pathname;
+ return currLocation + '#' + uslug(s)
+ }
+
+ componentDidMount() {
+ this.fetchMarkdown(this.props.match.params.slug);
+ }
+
+ componentDidUpdate(prevProps: any) {
+ if (this.props.match.params.slug !== prevProps.match.params.slug) {
+ this.fetchMarkdown(this.props.match.params.slug);
+ }
+
+ // Find the hash of the targeted element and scroll into view.
+ const currHash: string = this.props.location.hash;
+ const elemID: string = currHash.slice(1);
+ if (currHash && (this.state.scrollTo !== elemID)) {
+ this.setState({ scrollTo: elemID })
+ }
+
+ // Clear the hash if there isn't one anymore
+ if (!currHash && this.state.scrollTo) {
+ this.setState({ scrollTo: null });
+ }
+ }
+
+ render(): JSX.Element | null {
+ if (this.state.md === 404) {
+ return (
+
+
+
+ );
+ }
+
+ const CustomMarkdown = (props: any) => (
+ (),
+ heading: (props: any) => Header({
+ scrollTo: this.state.scrollTo,
+ ...props
+ })
+ }}
+ {...props}
+ />
+ );
+
+ // Check for the string "[[TOC]]" in the text. If it exists,
+ // render a TOC there indexing all content after [[TOC]]; if not,
+ // render just the content without the table of contents.
+ var TOC_indicator: string = "[[TOC]]";
+ var TOC_nobullets: string = "[[TOC_NO_BULLET]]";
+ if (this.state.md.includes(TOC_indicator)) {
+ // Then we render the TOC in standard bulleted markdown
+ var preTOC: string = this.state.md.slice(0, this.state.md.indexOf(TOC_indicator));
+ var postTOC: string = this.state.md.slice(this.state.md.indexOf(TOC_indicator) + TOC_indicator.length);
+
+ // Remove the automatic bullet from the TOC; keep the indent
+ var TOC: string = toc(postTOC, { slugify: this.customSlug }).content;
+ return (
+
+
+ );
+ }
+ else if (this.state.md.includes(TOC_nobullets)) {
+ // Then we render the TOC indented without bullets
+ // eslint-disable-next-line
+ var preTOC: string = this.state.md.slice(0, this.state.md.indexOf(TOC_nobullets));
+ // eslint-disable-next-line
+ var postTOC: string = this.state.md.slice(this.state.md.indexOf(TOC_nobullets) + TOC_nobullets.length);
+
+ // Remove the automatic bullet from the TOC; keep the indent
+ // eslint-disable-next-line
+ var TOC: string = toc(postTOC, { slugify: this.customSlug }).content;
+ var TOC_arr: string[] = TOC.split("\n");
+ var i = 0;
+ for (i = 0; i < TOC_arr.length; ++i) {
+ if (TOC_arr[i].includes('-')) {
+ TOC_arr[i] = TOC_arr[i].replace('-', ' '.repeat(TOC_arr[i].indexOf('-')));
+ }
+ if (TOC_arr[i].includes('*')) {
+ TOC_arr[i] = TOC_arr[i].replace('*', ' '.repeat(TOC_arr[i].indexOf('*')));
+ }
+ if (TOC_arr[i].includes('+')) {
+ TOC_arr[i] = TOC_arr[i].replace('+', ' '.repeat(TOC_arr[i].indexOf('+')));
+ }
+ }
+ TOC = TOC_arr.join(' \n');
+ console.log(TOC);
+
+ return (
+
+
+ );
+ }
+ else {
+ return (
+
+ );
+ }
+
+
+ }
+}
+
+export default PageWrapper;
\ No newline at end of file
diff --git a/src/Page/index.tsx b/src/Page/index.tsx
new file mode 100644
index 000000000..6adc609c1
--- /dev/null
+++ b/src/Page/index.tsx
@@ -0,0 +1 @@
+export { default } from './Page';
\ No newline at end of file
diff --git a/src/components/LectureTable.tsx b/src/components/LectureTable.tsx
deleted file mode 100644
index a026fa388..000000000
--- a/src/components/LectureTable.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import React, { FunctionComponent, Component, CSSProperties } from 'react';
-import moment from 'moment';
-import Table from "react-bootstrap/Table";
-
-interface LectureRowProps {
- title: string,
- date: moment.Moment,
- // URL props:
- handout?: {
- title: string,
- url: string,
- },
- condensed: string,
- full: string,
- video: string,
- code: string,
- // Display props:
- visible: boolean,
- active: boolean,
- highlight?: boolean
-}
-
-const Lecture: FunctionComponent =
- ({title, handout, date, condensed, full, video, visible, code, active,
- highlight}: LectureRowProps) => {
-
- if (!visible) {
- return null;
- }
-
- // Check date for row highlighting
- let rowStyle: CSSProperties = {};
- if (highlight) {
- rowStyle={
- backgroundColor: "#e6e0f3",
- fontWeight: "bold"
- }
- }
-
- // Are condensed slides linked?
- let condensedLink: JSX.Element | null;
- if (!condensed || condensed === "#") {
- condensedLink = N/A
;
- } else {
- condensedLink = (Condensed Slides);
- }
-
- // Are full slides linked?
- let fullLink: JSX.Element | null;
- if (!full || full === "#") {
- fullLink = null;
- } else {
- fullLink = ;
- }
-
- // Is video linked?
- let videoLink: JSX.Element | null;
- if (!video || video === "#") {
- videoLink = N/A
;
- } else {
- videoLink = (Video);
- }
-
- // Is there code?
- let codeLink: JSX.Element | null;
- if (!code || code === "#") {
- codeLink = N/A
;
- } else {
- codeLink = (Code);
- }
-
- const localdate = moment(date).local()
- const formattedDate: string = localdate.format("MMMM Do YYYY");
-
- return (
-
-
- {title}
- {handout
- ? (<>
Reading: {handout.title})
- : null}
- |
- {formattedDate} |
- {condensedLink}
-
- {fullLink}
- |
- {videoLink} |
- {codeLink} |
-
- );
-}
-
-interface LectureDataState {
- highlight: number,
- lectureData?: Array
-}
-
-export class LectureData extends Component<{}, LectureDataState> {
- constructor(props: {}) {
- super(props);
-
- this.state = {
- highlight: -1
- }
- }
-
- componentDidMount() {
- let lectureData = require('../res/lectures.json');
- lectureData = lectureData.map(
-
- ({ date, ...v }: { date: string }) => {
- return {
- date: moment(date, "YYYY-MM-DD"),
- ...v
- }
- }
- )
-
- let i;
- for (i = 0; i < lectureData.length; i++) {
- if (moment().isSameOrBefore(lectureData[i].date, 'day')) {
- break;
- }
- }
-
- // Only highlight first row if date is less than a week away
- if (i === 0 && moment().diff(lectureData[i].date, "days") >= -7) {
- this.setState({ lectureData });
- }
- else {
- this.setState({ lectureData, highlight: i });
- }
- }
-
- render () {
- let lectureData = this.state.lectureData;
- if (!lectureData) {
- return null
- }
-
- return (
-
-
-
-
- | Title |
- Date |
- Slides |
- Video |
- Code |
-
-
-
- {
- lectureData.map((lectureData, index) =>
- (
-
- ))
- }
-
-
-
-
{this.state.vidInfo.title}
-
-
-
-
Notes: {this.state.vidInfo.notes}
-
-
Transcript:
-
-
-
-
- );
- }
-
- const CustomMarkdown = (props: any) => (
- (),
- heading: (props) => Header({
- scrollTo: this.state.scrollTo,
- ...props
- })
- }}
- {...props}
- />
- );
-
- // Check for the string "[[TOC]]" in the text. If it exists,
- // render a TOC there indexing all content after [[TOC]]; if not,
- // render just the content without the table of contents.
- var TOC_indicator: string = "[[TOC]]";
- var TOC_nobullets: string = "[[TOC_NO_BULLET]]";
- if (this.state.md.includes(TOC_indicator)) {
- // Then we render the TOC in standard bulleted markdown
- var preTOC: string = this.state.md.slice(0, this.state.md.indexOf(TOC_indicator));
- var postTOC: string = this.state.md.slice(this.state.md.indexOf(TOC_indicator) + TOC_indicator.length);
-
- // Remove the automatic bullet from the TOC; keep the indent
- var TOC: string = toc(postTOC, { slugify: this.customSlug }).content;
- return (
-
-
- );
- }
- else if (this.state.md.includes(TOC_nobullets)) {
- // Then we render the TOC indented without bullets
- // eslint-disable-next-line
- var preTOC: string = this.state.md.slice(0, this.state.md.indexOf(TOC_nobullets));
- // eslint-disable-next-line
- var postTOC: string = this.state.md.slice(this.state.md.indexOf(TOC_nobullets) + TOC_nobullets.length);
-
- // Remove the automatic bullet from the TOC; keep the indent
- // eslint-disable-next-line
- var TOC: string = toc(postTOC, { slugify: this.customSlug }).content;
- var TOC_arr: string[] = TOC.split("\n");
- var i = 0;
- for (i = 0; i < TOC_arr.length; ++i) {
- if (TOC_arr[i].includes('-')) {
- TOC_arr[i] = TOC_arr[i].replace('-', ' '.repeat(TOC_arr[i].indexOf('-')));
- }
- if (TOC_arr[i].includes('*')) {
- TOC_arr[i] = TOC_arr[i].replace('*', ' '.repeat(TOC_arr[i].indexOf('*')));
- }
- if (TOC_arr[i].includes('+')) {
- TOC_arr[i] = TOC_arr[i].replace('+', ' '.repeat(TOC_arr[i].indexOf('+')));
- }
- }
- TOC = TOC_arr.join(' \n');
- console.log(TOC);
-
- return (
-
-
- );
- }
- else {
- return (
-
- );
- }
-
-
- }
-}
diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx
deleted file mode 100644
index e958a7ec1..000000000
--- a/src/components/Schedule.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import React, { FunctionComponent, Component, CSSProperties } from "react";
-import moment from "moment";
-
-import Table from "react-bootstrap/Table";
-
-interface AssignmentCellProps {
- title: string,
- link: string | null,
- highlight?: boolean
-}
-
-const AssignmentCell: FunctionComponent =
- ({ title, link, highlight }: AssignmentCellProps) => {
-
- let cellStyle: CSSProperties = {};
- if (highlight) {
- cellStyle={
- backgroundColor: "#e6e0f3",
- }
- }
-
- if (link === null) {
- return (
-
- {title}
- |
- );
- }
- return (
-
- {title}
- |
- );
-}
-
-interface ScheduleCellProps {
- title: string,
- description: string,
- highlight?: boolean,
- showDescription?: boolean
-}
-
-const ScheduleCell: FunctionComponent =
- ({ title, description, highlight, showDescription }: ScheduleCellProps) => {
-
- let cellStyle: CSSProperties = {};
- if (highlight) {
- cellStyle={
- backgroundColor: "#e6e0f3",
- }
- }
-
- return (
-
- {title}
-
- {showDescription ? description : null}
- |
- );
-}
-
-interface ScheduleDay {
- title: string,
- date: moment.Moment,
- active: boolean,
- description: string
-}
-
-interface ScheduleRow {
- num: number,
- title: string,
- visible: boolean,
- days: Array,
- dates: {
- start: moment.Moment,
- end: moment.Moment
- },
- assignments: string,
- assignmentLink: string
-}
-
-// @ts-ignore
-const ScheduleRow: FunctionComponent =
- ({ num, title, visible, days, dates, assignments, assignmentLink }: ScheduleRow) => {
-
- // If not visible, return
- if (!visible) {
- return null;
- }
-
- // If we're between the dates, highlight
- let highlight = false;
- if (moment() >= dates.start && moment() <= dates.end) {
- highlight = true;
- }
-
- // Generate the two columns and their information
- // using the ScheduleCall function
- // Here it's num+1 because the quarter starts in Week 1, not Week 0
- return (
-
- | {num+1} |
- {
- days.map((day: ScheduleDay, index: number) => (
- = dates.start}
- />
- ))
- }
-
-
- );
-}
-
-interface ScheduleState {
- scheduleData?: Array
-}
-
-export class Schedule extends Component<{}, ScheduleState> {
- constructor(props: {}) {
- super(props);
-
- this.state = {};
- }
-
- componentDidMount() {
- let dirtyScheduleData = require("../res/schedule.json");
- const scheduleData: Array = dirtyScheduleData.map(
- ({ days, dates, ...v }: {
- days: Array<{
- title: string,
- active: boolean,
- description: string,
- date: string
- }>,
- dates: { start: string, end: string}
- }) => {
- // Convert the array of days to ScheduleDays
- interface DirtyScheduleDate extends Omit {
- date: string
- };
-
- const momentDays: Array = days.map(
- ({ date, ...p }: DirtyScheduleDate) => {
- return {
- date: moment(date, "YYYY-MM-DD"),
- ...p
- }
- }
- )
-
- // Individually convert the start and end date
- return {
- days: momentDays,
- dates: {
- start: moment(dates.start, "YYYY-MM-DD"),
- end: moment(dates.end, "YYYY-MM-DD")
- },
- ...v
- }
- }
- )
-
- this.setState({ scheduleData });
- }
-
- render () {
- // @ts-ignore
- let scheduleData = this.state.scheduleData;
- if (!scheduleData) {
- return null
- }
-
- return (
-
-
Course Schedule
-
-
-
- | Week |
- Tuesday |
- Thursday |
- Assignment |
-
- {
- // @ts-ignore
- scheduleData.map((scheduleData, index) =>
- (
-
- ))
- }
-
-
-