71 | {sketchList.splice(0, numSketchesPerRow)}
72 |
,
73 | );
74 | }
75 | if (rows.length === 0) return 'No sketches found';
76 | return {rows}
;
77 | }
78 |
79 | export default ClassSketchList;
80 |
--------------------------------------------------------------------------------
/src/components/Class/components/StudentListEntry.jsx:
--------------------------------------------------------------------------------
1 | import '../../../styles/ClassBox.scss';
2 |
3 | const StudentListEntry = function (props) {
4 | const { name } = props;
5 | return (
6 |
7 |
12 | );
13 | };
14 |
15 | export default StudentListEntry;
16 |
--------------------------------------------------------------------------------
/src/components/Class/containers/ClassPageContainer.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import { addInstrClass, addStudentClass } from '../../../actions/classesActions';
3 | import { addProgram } from '../../../actions/programsActions';
4 | import { togglePanel } from '../../../actions/uiActions';
5 | import { setMostRecentProgram } from '../../../actions/userDataActions';
6 | import { OPEN_PANEL_LEFT, CLOSED_PANEL_LEFT, PANEL_SIZE } from '../../../constants';
7 | import ClassPage from '../index';
8 |
9 | const mapStateToProps = (state) => {
10 | const left = (state.ui.panelOpen ? OPEN_PANEL_LEFT : CLOSED_PANEL_LEFT) + PANEL_SIZE;
11 | const calculatedWidth = state.ui.screenWidth - (left || 0);
12 | const cid = state.userData.currentClass;
13 | const blankClass = {
14 | name: '',
15 | creator: '',
16 | thumbnail: 0,
17 | programData: null,
18 | programs: null,
19 | wid: '',
20 | userData: {},
21 | instructors: [],
22 | members: null,
23 | cid: '',
24 | };
25 |
26 | return {
27 | calculatedWidth,
28 | left,
29 | screenHeight: state.ui.screenHeight,
30 | panelOpen: state.ui.panelOpen,
31 | uid: state.userData.uid,
32 | cid,
33 | classData:
34 | state.classes.getIn(['instrClasses', cid])?.toJS()
35 | || state.classes.getIn(['studClasses', cid])?.toJS()
36 | || blankClass,
37 | };
38 | };
39 |
40 | const mapDispatchToProps = (dispatch) => ({
41 | addInstrClass: (cid, data) => dispatch(addInstrClass(cid, data)),
42 | addStudentClass: (cid, data) => dispatch(addStudentClass(cid, data)),
43 | addProgram: (program, value) => dispatch(addProgram(program, value)),
44 | setMostRecentProgram: (value) => dispatch(setMostRecentProgram(value)),
45 | togglePanel: () => dispatch(togglePanel()),
46 | });
47 |
48 | const ClassPageContainer = connect(mapStateToProps, mapDispatchToProps)(ClassPage);
49 |
50 | export default ClassPageContainer;
51 |
--------------------------------------------------------------------------------
/src/components/Class/containers/CreateSketchModalContainer.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import { addProgram } from '../../../actions/programsActions';
3 | import { setMostRecentProgram } from '../../../actions/userDataActions';
4 | import CreateSketchModal from '../../Sketches/components/CreateSketchModal';
5 |
6 | const mapStateToProps = (state) => ({
7 | uid: state.userData.uid,
8 | });
9 |
10 | const mapDispatchToProps = (dispatch) => ({
11 | addProgram: (program, data) => {
12 | dispatch(addProgram(program, data));
13 | },
14 | setMostRecentProgram: (value) => dispatch(setMostRecentProgram(value)),
15 | });
16 |
17 | const CreateSketchModalContainer = connect(mapStateToProps, mapDispatchToProps)(CreateSketchModal);
18 |
19 | export default CreateSketchModalContainer;
20 |
--------------------------------------------------------------------------------
/src/components/Classes/components/ClassBox.tsx:
--------------------------------------------------------------------------------
1 | import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { Link } from 'react-router-dom';
4 | import '../../../styles/ClassBox.scss';
5 |
6 | interface ClassBoxProps {
7 | deleteFunc: () => void;
8 | img: string;
9 | instructorString: string;
10 | name: string;
11 | redirFunc: () => void;
12 | showLeaveButton: JSX.Element;
13 | }
14 |
15 | const ClassBox = function ({
16 | deleteFunc, img, instructorString, name, redirFunc, showLeaveButton,
17 | }: ClassBoxProps) {
18 | const leaveButton = showLeaveButton ? (
19 |
8 | {name}
9 |
11 | {name}
10 |
26 |
28 | ) : (
29 | ''
30 | );
31 |
32 | return (
33 |
34 |
35 | 
40 |
47 | );
48 | };
49 |
50 | export default ClassBox;
51 |
--------------------------------------------------------------------------------
/src/components/Classes/components/ConfirmLeaveModal.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import ReactModal from 'react-modal';
3 | import {
4 | Container, Row, Col, Button,
5 | } from 'reactstrap';
6 | import * as fetch from '../../../lib/fetch';
7 |
8 | const ConfirmLeaveModal = function (props) {
9 | const {
10 | isOpen, uid, cid, removeStudentClass, className, inClass, unsetClass,
11 | } = props;
12 |
13 | const [error, setError] = useState('');
14 |
15 | const closeModal = () => {
16 | const { onClose } = props;
17 | if (onClose && {}.toString.call(onClose) === '[object Function]') {
18 | onClose();
19 | }
20 | };
21 |
22 | const onLeaveSubmit = () => {
23 | const data = {
24 | uid,
25 | cid,
26 | };
27 | try {
28 | // Note: leaveClass doesn't currently return anything.
29 | fetch
30 | .leaveClass(data)
31 | .then((res) => {
32 | if (!res.ok) {
33 | setError(res.error || 'Failed to leave the class, please try again later');
34 | return;
35 | }
36 | removeStudentClass(cid);
37 | if (inClass) {
38 | unsetClass();
39 | } else {
40 | closeModal();
41 | }
42 | })
43 | .catch((err) => {
44 | setError('Failed to leave the class, please try again later');
45 | console.error(err);
46 | });
47 | } catch (err) {
48 | console.error(err);
49 | }
50 |
51 | // Testing stuff (do this instead of the try-catch block):
52 | // this.props.removeStudentClass(this.props.cid);
53 | // this.props.inClass ? this.props.unsetClass() : this.closeModal();
54 | // end of test stuff
55 |
56 | setError('');
57 | };
58 |
59 | return (
60 |
40 |
41 | {name}
42 |
44 |
45 | {leaveButton}
46 | {instructorString}
43 | 68 | Are you sure you want to permanently leave the class " 69 | {className} 70 | "? 71 |
72 |73 |
{error ||
}
74 | }
19 |
44 | );
45 | }
46 |
47 | export default Error;
48 |
--------------------------------------------------------------------------------
/src/components/Login/LoginInput.jsx:
--------------------------------------------------------------------------------
1 | import '../../styles/Login.scss';
2 |
3 | /** -------Props-------
4 | * type: string, if password, hides the input with dots; also used as the header for the input
5 | * waiting: boolean that disables the input if true
6 | * data: value inside the input
7 | * onChange: function to be called when input changes
8 | */
9 |
10 | const LoginInput = function ({
11 | type, waiting, data, onChange,
12 | }) {
13 | return (
14 |
20 |
26 | 29 | 30 | 31 | 34 | 35 | 36 | {isValidUser && ( 37 | 40 | )} 41 | 42 |
43 | Uh oh, something went wrong!
21 |22 | Error: 23 | {errorMsg} 24 |
25 |26 | 29 | 30 | 31 | 34 | 35 | 36 | {isValidUser && ( 37 | 40 | )} 41 | 42 |
15 |
26 |
27 | );
28 | };
29 |
30 | export default LoginInput;
31 |
--------------------------------------------------------------------------------
/src/components/Output/OutputContainer.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import { getLanguageData } from '../../util/languages/languages';
3 | import Output from './Output';
4 |
5 | const mapStateToProps = (state) => {
6 | const { mostRecentProgram } = state.userData;
7 | return {
8 | mostRecentProgram,
9 | runResult: state.programs.getIn([mostRecentProgram, 'code']),
10 | language: getLanguageData(state.programs.getIn([mostRecentProgram, 'language'])),
11 | screenHeight: state.ui.screenHeight,
12 | screenWidth: state.ui.screenWidth, // probably will need this
13 | };
14 | };
15 |
16 | const mapDispatchToProps = () => ({
17 | clearOutput: () => {},
18 | });
19 |
20 | const OutputContainer = connect(mapStateToProps, mapDispatchToProps)(Output);
21 |
22 | export default OutputContainer;
23 |
--------------------------------------------------------------------------------
/src/components/PageNotFound.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import { Button } from 'reactstrap';
3 | import '../styles/Page.scss';
4 | import { GH_REPO_NAME } from '../constants';
5 | import * as cookies from '../lib/cookies';
6 | import Footer from './common/Footer';
7 |
8 | const PageNotFound = function () {
9 | return (
10 | {type}
16 | onChange(e.target.value)}
24 | />
25 | 26 |
11 |
32 | );
33 | };
34 |
35 | export default PageNotFound;
36 |
--------------------------------------------------------------------------------
/src/components/Sketches/components/ConfirmDeleteModal.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import ReactModal from 'react-modal';
3 | import {
4 | Container, Row, Col, Button,
5 | } from 'reactstrap';
6 | import * as fetch from '../../../lib/fetch';
7 |
8 | const ConfirmDeleteModal = (props) => {
9 | const {
10 | onClose, isOpen, sketchName, uid, sketchKey, deleteProgram,
11 | } = props;
12 |
13 | const [_spinner, setSpinner] = useState(true);
14 | const [_error, setError] = useState('');
15 |
16 | const closeModal = () => {
17 | if (onClose && {}.toString.call(onClose) === '[object Function]') {
18 | onClose();
19 | }
20 | };
21 |
22 | const onDeleteSubmit = () => {
23 | const data = {
24 | uid,
25 | docID: sketchKey,
26 | name: sketchKey,
27 | };
28 | try {
29 | fetch
30 | .deleteSketch(data)
31 | .then((res) => {
32 | if (res.ok) {
33 | deleteProgram(sketchKey);
34 | closeModal();
35 | } else {
36 | setSpinner(false);
37 | setError(res.text() || 'Failed to delete sketch, please try again later');
38 | }
39 | })
40 | .catch((err) => {
41 | setSpinner(false);
42 | setError('Failed to create sketch, please try again later');
43 | console.error(err);
44 | });
45 | } catch (err) {
46 | console.error(err);
47 | }
48 | setSpinner(true);
49 | setError('');
50 | };
51 |
52 | return (
53 |
12 | Error: 404
13 |
15 | 16 | 19 | 20 |
21 |
31 | Uh oh, page not found!
14 |15 | 16 | 19 | 20 |
21 |
22 | Getting this problem a lot? Let us know 23 | {' '} 24 | 25 | on GitHub 26 | 27 | . 28 |
29 | 30 |61 | Are you sure you want to delete " 62 | {sketchName} 63 | "? 64 |
65 |66 |
Share This File
48 |57 |
{copyStatus}
58 |
57 | toggleHandler(dropdownOpen)}>
58 | {/* eslint-disable-next-line react/jsx-props-no-spreading */}
59 |
60 |
65 | {renderDropdownItems()}
66 |
67 |
68 | );
69 | }
70 |
71 | export default DropdownButton;
72 |
--------------------------------------------------------------------------------
/src/components/common/Footer.tsx:
--------------------------------------------------------------------------------
1 | import TLALogo from '../../img/tla-logo.svg';
2 | import '../../styles/Footer.scss';
3 |
4 | const Footer = () => {
5 | return (
6 |
15 | );
16 | };
17 |
18 | export default Footer;
19 |
--------------------------------------------------------------------------------
/src/components/common/ImageSelector.jsx:
--------------------------------------------------------------------------------
1 | import ReactModal from 'react-modal';
2 | import { Container } from 'reactstrap';
3 | import '../../styles/ImageSelector.scss';
4 |
5 | const ImageSelector = function (props) {
6 | // Extracting all data from props
7 | const {
8 | isOpen, closeModal, maxWidth, thumbnailPreview, icons, error, children,
9 | } = props;
10 | return (
11 |
61 |
64 |
20 |
25 | Choose a thumbnail
21 |
22 | {thumbnailPreview || null}
23 |
24 | 26 |
{icons}
27 | 28 |
{error ||
}
29 | }
30 | {children} 31 | {' '} 32 | {/* Footer buttons as passed in as children */} 33 |
26 |
40 | );
41 | };
42 |
43 | export default Loading;
44 |
--------------------------------------------------------------------------------
/src/components/common/OpenPanelButton.tsx:
--------------------------------------------------------------------------------
1 | import { faBars } from '@fortawesome/free-solid-svg-icons';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 |
4 | /** -------Props--------
5 | * panelOpen: boolean, is profile panel visible
6 | * togglePanel: function to call when you want the Profile Panel to disappear/reappear
7 | */
8 |
9 | interface OpenPanelButtonProps {
10 | panelOpen: boolean;
11 | togglePanel: () => void;
12 | }
13 |
14 | const OpenPanelButton = function ({ panelOpen, togglePanel }: OpenPanelButtonProps) {
15 | // if the left panel is closed, show nothing
16 | // otherwise show hamburger icon
17 | if (panelOpen) {
18 | return ;
19 | }
20 | return (
21 |
24 | );
25 | };
26 |
27 | export default OpenPanelButton;
28 |
--------------------------------------------------------------------------------
/src/components/common/SketchBox.tsx:
--------------------------------------------------------------------------------
1 | import '../../styles/SketchBox.scss';
2 | import { faDownload, faEdit, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 |
5 | import { Link } from 'react-router-dom';
6 | import { Row, Col } from 'reactstrap';
7 |
8 | interface SketchBoxProps {
9 | img: string;
10 | icon: any;
11 | name: string;
12 | deleteFunc: () => void;
13 | downloadFunc: () => void;
14 | editFunc: () => void;
15 | redirFunc: () => void;
16 | pathname: string;
17 | }
18 |
19 | function SketchBox({
20 | img, icon, name, deleteFunc, downloadFunc, editFunc, redirFunc, pathname,
21 | }: SketchBoxProps) {
22 | const buttonData = [
23 | {
24 | func: editFunc,
25 | icon: faEdit,
26 | },
27 | {
28 | func: downloadFunc,
29 | icon: faDownload,
30 | },
31 | {
32 | func: deleteFunc,
33 | icon: faTrashAlt,
34 | },
35 | ];
36 |
37 | return (
38 | Loading
27 | 30 | Looks like loading is taking a bit long! If it takes too long, submit an issue on 31 | {' '} 32 | 33 | 34 | Github 35 | 36 | . 37 |
38 | )} 39 |
39 |
44 |
49 |
55 |
56 | {buttonData
57 | .map((button) => (
58 |
66 |
67 | );
68 | }
69 |
70 | export default SketchBox;
71 |
--------------------------------------------------------------------------------
/src/components/common/Switch.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import '../../styles/Switch.scss';
3 |
4 | /**
5 | * Generic switch component. Props are as follows:
6 | * @param {boolean} [on] - whether the switch is set to the "on" position or not; optional prop, defaults to false
7 | * @param {function} onToggle - function to be called when switch is toggled. Has a single parameter
8 | * (bool) that holds whether the switch is in the "on" position (true) or not (false)
9 | * @param {JSX} onImg (optional): (JSX) element to be displayed on switch body when set to "on"
10 | * @param {JSX} offImg (optional): (JSX) element to be displayed on switch body when set to "off"
11 | */
12 | interface SwitchProps {
13 | on: boolean;
14 | onToggle: (on:boolean) => void;
15 | onImg?: JSX.Element;
16 | offImg?: JSX.Element;
17 |
18 | }
19 | const Switch = function (props: SwitchProps) {
20 | const [on, setOn] = useState(!props.on ? false : props.on);
21 |
22 | useEffect(() => {
23 | if (props.on !== on) {
24 | setOn(props.on);
25 | }
26 | });
27 |
28 | const onSwitchChange = () => {
29 | props.onToggle(!on);
30 | setOn(!on);
31 | };
32 |
33 | const switchedClass = on ? ' switch-on' : '';
34 |
35 | return (
36 |
43 | );
44 | };
45 |
46 | export default Switch;
47 |
--------------------------------------------------------------------------------
/src/components/common/ViewportAwareButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button, ButtonProps } from 'reactstrap';
3 |
4 | /** -------Props--------
5 | * isSmall: dictates display of text field
6 | * icon: desired icon (i.e.
49 |
50 | {name}
51 |
53 |
54 | 55 |