11 |
29 |
30 | )
31 | }
32 | }
--------------------------------------------------------------------------------
/src/Components/Courses/CoursePage/Assignment/AdminSubmission/Body.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Container,
4 | Panel,
5 | Table,
6 | Button,
7 | Modal,
8 | Form,
9 | FormGroup,
10 | ControlLabel,
11 | FormControl,
12 | InputNumber,
13 | Divider,
14 | Alert
15 | } from 'rsuite';
16 | import ReactHtmlParser from 'react-html-parser';
17 |
18 | export default class Body extends React.Component {
19 | constructor(props) {
20 | super(props);
21 |
22 | this.state = {
23 | show: false,
24 | modalData: {},
25 | formValue: {}
26 | };
27 | }
28 |
29 | reviewAssignment = rowData => {
30 | this.props.firebase
31 | .user(rowData.studentId)
32 | .child('enrolledCourses')
33 | .on('value', snapshot => {
34 | let match = [];
35 | let submissions = [];
36 | let coursesList = this.props.coursesList;
37 |
38 | snapshot.forEach(item => {
39 | let course = item.val();
40 | course.enrolledCourseKey = item.key;
41 |
42 | if (course.submissions) {
43 | submissions.push(course);
44 | }
45 | });
46 |
47 | //Get courseId and submissions of the course
48 | submissions = submissions
49 | .map(item => {
50 | const innerKeys = Object.keys(item.submissions);
51 |
52 | const s = innerKeys.map(submissionKey => {
53 | return {
54 | submissionKey,
55 | data: item.submissions[submissionKey]
56 | };
57 | });
58 |
59 | return {
60 | courseId: item.courseId,
61 | enrolledCourseKey: item.enrolledCourseKey,
62 | submissions: s
63 | };
64 | })
65 | .flat();
66 |
67 | //Get matching course with matching rowData.snapshotKey
68 | match = submissions.filter(item => {
69 | const temp = Object.keys(item.submissions).map(key => {
70 | return item.submissions[key].submissionKey;
71 | });
72 |
73 | return temp.includes(rowData.snapshotKey);
74 | });
75 |
76 | //Get only the submission that match the rowData.snapshotKey
77 | match = match.map(item => {
78 | item.submissions = item.submissions.filter(inner => {
79 | return inner.submissionKey === rowData.snapshotKey;
80 | });
81 |
82 | item.submissions = item.submissions[0];
83 | return item;
84 | });
85 |
86 | let assId = match.map(item => {
87 | return `-${item.submissions.data.assId}`;
88 | })[0];
89 |
90 | //Extracting assignments to obtain original questions
91 | let assignments = coursesList.map(item => {
92 | return item.assignments;
93 | });
94 |
95 | assignments = assignments.filter((course, i) => {
96 | if(course){
97 | const keys = Object.keys(course);
98 | return keys.includes(assId);
99 | }
100 | });
101 |
102 | assignments = assignments[0][assId].questions;
103 |
104 | this.setState({
105 | show: true,
106 | modalData: {
107 | questions: assignments,
108 | submissionData: match[0],
109 | rowData
110 | }
111 | });
112 | });
113 | };
114 |
115 | close = () => {
116 | this.setState({ show: false });
117 | };
118 |
119 | onReviewSubmit = modalData => {
120 | let { marks, comments } = this.state.formValue;
121 | const uid = this.props.firebase.auth.currentUser.uid;
122 | let { rowData, submissionData } = modalData;
123 | marks = marks ? marks : rowData.marks ? rowData.marks : null;
124 |
125 | if (!marks) {
126 | Alert.error('Marks cannot be empty.');
127 | } else {
128 | const date = Date.now();
129 |
130 | comments = comments
131 | ? comments
132 | : rowData.comments
133 | ? rowData.comments
134 | : null;
135 | this.props.firebase
136 | .course(`-${submissionData.courseId}`)
137 | .child('submissions')
138 | .child(rowData.key)
139 | .update({
140 | status: 'reviewed',
141 | comments,
142 | reviewedOn: date,
143 | reviewedBy: uid,
144 | marks: marks
145 | })
146 | .then(() => {
147 | this.props.firebase
148 | .user(rowData.studentId)
149 | .child('enrolledCourses')
150 | .child(submissionData.enrolledCourseKey)
151 | .child('submissions')
152 | .child(submissionData.submissions.submissionKey)
153 | .update({
154 | status: 'reviewed',
155 | reviewedOn: date,
156 | reviewer: this.props.authUser.name,
157 | reviewerId: uid,
158 | comments,
159 | marks
160 | })
161 | .then(() => {
162 | Alert.success('Successfully reviewed.');
163 | this.setState({ show: false });
164 | });
165 | });
166 | }
167 | };
168 |
169 | renderModal = modalData => {
170 | let { submissionData, questions, rowData } = modalData;
171 | let answer = submissionData.submissions.data.answers;
172 |
173 | answer = Object.keys(answer).map(key => {
174 | return answer[key];
175 | });
176 |
177 | let qna = [];
178 |
179 | for (let i = 0; i < questions.length; i++) {
180 | qna.push({
181 | question: questions[i],
182 | answer: answer[i]
183 | });
184 | }
185 |
186 | return (
187 | {item.title}
341 |
13 |
17 | )
18 |
19 | const BreadCrumb = (props) => (
20 |
14 |
16 |
29 |
32 |
33 | )
34 | }
35 |
36 |
37 |
38 | const WrappedComponents = mainTemplate(Header, BreadCrumb, body);
39 | const condition = authUser => authUser && !!(authUser.roles.userRole === 'admin');
40 |
41 | export default compose(withCourse, withAuthorization(condition))(WrappedComponents);
42 |
--------------------------------------------------------------------------------
/src/Components/Courses/CoursePage/Assignment/AssignmentModal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Modal,
4 | Container,
5 | Uploader,
6 | Form,
7 | FormGroup,
8 | FormControl,
9 | ControlLabel,
10 | SelectPicker,
11 | Button,
12 | ButtonToolbar,
13 | Alert,
14 | Progress
15 | } from 'rsuite';
16 |
17 | const { Line } = Progress;
18 |
19 | export default class AssignmentModal extends React.Component {
20 | constructor(props) {
21 | super(props);
22 | this.state = {
23 | curriculum: [],
24 | formValue: {
25 | title: '',
26 | curriculum: '',
27 | type: '',
28 | uploaded: false
29 | },
30 | assFile: null,
31 | uploaderDisabled: false,
32 | uploadProgressShow: false,
33 | uploadProgress: 0
34 | };
35 |
36 | this.onUploadChange = this.onUploadChange.bind(this);
37 | this.getCurriculums = this.getCurriculums.bind(this);
38 | this.formSubmit = this.formSubmit.bind(this);
39 | this.formNext = this.formNext.bind(this);
40 | }
41 |
42 | getCurriculums() {
43 | //Get curriculums
44 | this.props.firebase
45 | .courseCurriculums('-' + this.props.match.params.id)
46 | .once('value')
47 | .then(snapshot => {
48 | const curriculums = snapshot.val();
49 |
50 | if (curriculums) {
51 | const objKeys = Object.keys(curriculums);
52 | let curriculum = [];
53 |
54 | objKeys.forEach(item => {
55 | const obj = {
56 | value: item,
57 | label: curriculums[item].title.trim()
58 | };
59 | curriculum.push(obj);
60 | this.setState({ curriculum });
61 | });
62 | }
63 | });
64 | }
65 |
66 | componentDidMount() {
67 | this.getCurriculums();
68 | }
69 |
70 | onUploadChange(file) {
71 | if (this.state.assFile) {
72 | this.setState({
73 | assFile: null
74 | });
75 | } else {
76 | this.setState({
77 | assFile: file
78 | });
79 | }
80 | }
81 |
82 | formSubmit() {
83 | const { title, curriculum, type } = this.state.formValue;
84 | const courseId = '-' + this.props.match.params.id;
85 | const { assFile } = this.state;
86 |
87 | const timestamp = Date.now();
88 | if (!title || !assFile || !curriculum) {
89 | Alert.error('Please fill in all fields.');
90 | } else {
91 | const upload = this.props.firebase
92 | .assignmentRef()
93 | .child(
94 | `${this.props.courseTitle}/${timestamp}_${assFile[0].blobFile.name}`
95 | )
96 | .put(assFile[0].blobFile);
97 |
98 | upload.on(
99 | 'state_changed',
100 | snapshot => {
101 | let uploadProgress =
102 | (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
103 | this.setState({ uploadProgressShow: true, uploadProgress });
104 | },
105 | () => {
106 | Alert.error('Upload failed...Please try again...');
107 | },
108 |
109 | async () => {
110 | //Uploaded Successfully...
111 | Alert.success('Created successfully');
112 | this.setState({ uploaded: true });
113 | const url = await upload.snapshot.ref
114 | .getDownloadURL()
115 | .then(downloadURL => {
116 | return downloadURL;
117 | });
118 |
119 | //Store to realtime db
120 | this.props.firebase
121 | .course(courseId)
122 | .child('assignments')
123 | .push(
124 | {
125 | curriId: curriculum.substr(1),
126 | title,
127 | type,
128 | attachmentUrl: url
129 | },
130 | err => {
131 | if (err) {
132 | Alert.error(
133 | 'An error occured while creating assignment. Please try again.',
134 | 5000
135 | );
136 | }
137 | }
138 | )
139 | .then(rsp => {
140 | window.location.reload(false);
141 | });
142 | }
143 | );
144 | }
145 | }
146 |
147 | formNext() {
148 | const { title, curriculum, type } = this.state.formValue;
149 | const courseId = '-' + this.props.match.params.id;
150 |
151 | if (!title || !curriculum) {
152 | Alert.error('Please fill in all fields.');
153 | } else {
154 | this.props.firebase
155 | .course(courseId)
156 | .child('assignments')
157 | .push(
158 | {
159 | curriId: curriculum,
160 | title,
161 | type
162 | },
163 | err => {
164 | if (err) {
165 | Alert.error(
166 | 'An error occured while creating assignment. Please try again.',
167 | 5000
168 | );
169 | }
170 | }
171 | )
172 | .then(rsp => {
173 | const assKey = rsp.key.substr(1);
174 |
175 | this.props.history.push(
176 | `/courses/${courseId.substr(1)}/assignment/${assKey}`
177 | );
178 | });
179 | }
180 | }
181 |
182 | render() {
183 | const { curriculum } = this.state;
184 | const { assFile } = this.state;
185 | const uploaderDisabled = assFile ? true : false;
186 |
187 | return (
188 |
30 |
31 |
189 |
190 | Create an Assignment
191 |
192 |
193 |
194 |
312 |
313 |
314 |
315 |
316 | );
317 | }
318 | }
319 |
320 | const assignmentType = [
321 | {
322 | value: 'file',
323 | label: 'Attachment only'
324 | },
325 | {
326 | value: 'subjective',
327 | label: 'Subjective'
328 | }
329 | ];
330 |
--------------------------------------------------------------------------------
/src/Components/Courses/CoursePage/Assignment/AssignmentPage.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import SunEditor from "suneditor-react";
3 | import { compose } from "recompose";
4 |
5 | import "suneditor/dist/css/suneditor.min.css";
6 |
7 | import {
8 | Container,
9 | Nav,
10 | Navbar,
11 | Icon,
12 | Button,
13 | Alert,
14 | Form,
15 | ControlLabel,
16 | FormGroup,
17 | FormControl,
18 | ButtonGroup,
19 | Modal,
20 | } from "rsuite";
21 | import ReactHtmlParser from "react-html-parser";
22 | import { withAuthentication } from "../../../Session";
23 | import withAssignment from "./withAssignment";
24 |
25 | class AssignmentPage extends React.Component {
26 | constructor(props) {
27 | super(props);
28 |
29 | this.state = {
30 | contentState: "",
31 | assignmentsQ: [],
32 | show: false,
33 | };
34 | }
35 |
36 | componentDidMount() {
37 | const assignmentId = this.props.match.params.id;
38 | const courseId = this.props.match.url
39 | .replace(/\/.*?\//g, "")
40 | .replace(assignmentId, "");
41 |
42 | this.props.firebase
43 | .assignments(`-${courseId}`)
44 | .child(`-${assignmentId}`)
45 | .child("questions")
46 | .on("value", (snapshot) => {
47 | this.setState({
48 | assignmentsQ: snapshot.val() ? snapshot.val() : [],
49 | });
50 | });
51 | }
52 |
53 | studentHasAttempted = (assignmentId) => {
54 | const uid = this.props.authUser? this.props.firebase.auth.currentUser.uid: null;
55 | let submissions = [];
56 | if(uid){
57 | this.props.firebase.user(uid).child('enrolledCourses').on('value', snapshot => {
58 | snapshot.forEach(child => {
59 | const submission = child.val().submissions;
60 | if(submission){
61 | submissions.push(submission)
62 | }
63 | })
64 | })
65 | }
66 |
67 | if(submissions.length){
68 | submissions = submissions.map(item => {
69 | const keys = Object.keys(item);
70 | // return item[key].assId;
71 | return keys.map(key => {
72 | return item[key].assId;
73 | })
74 | })
75 |
76 | submissions = submissions.flat();
77 | }
78 |
79 | return submissions.includes(assignmentId)? true : false;
80 | }
81 |
82 | editorOnChange = (contentState) => {
83 | this.setState({ contentState });
84 | };
85 |
86 | saveQuestions = () => {
87 | const assignmentId = this.props.match.params.id;
88 | const courseId = this.props.match.url
89 | .replace(/\/.*?\//g, "")
90 | .replace(assignmentId, "");
91 | this.props.updateAssignment(
92 | "-" + courseId,
93 | "-" + assignmentId,
94 | this.state.assignmentsQ
95 | );
96 | this.closeModal();
97 | };
98 |
99 | addQuestion = () => {
100 | if (this.state.contentState) {
101 | let assignmentsQ = this.state.assignmentsQ
102 | ? this.state.assignmentsQ
103 | : [];
104 | assignmentsQ.push(this.state.contentState);
105 | this.setState({ assignmentsQ });
106 | } else {
107 | Alert.error("Content cannot be blank.");
108 | }
109 |
110 | this.setState({ contentState: "" });
111 | };
112 |
113 | removeQ = (i) => {
114 | let assignmentsQ = this.state.assignmentsQ;
115 | assignmentsQ = assignmentsQ.filter((ass, index) => {
116 | return index != i;
117 | });
118 |
119 | this.setState({ assignmentsQ });
120 | };
121 |
122 | renderQuestions = (stud = false) => {
123 | const assignmentsQ = this.state.assignmentsQ;
124 | const assignmentId = this.props.match.params.id;
125 |
126 | const attempted = (this.studentHasAttempted(assignmentId));
127 | const disabledAdmin = this.props.authUser? (this.props.authUser.roles.userRole === 'admin'? true : null) : false;
128 |
129 | return (
130 |
132 |
134 |
135 |
191 | Assignment
133 |{item.shortDescription}
; 165 | } 166 | } 167 | 168 | renderAssignments = (assignment) => { 169 | return( 170 |
256 |
276 |
281 |
286 |
291 |
300 |
301 |
306 |
315 |
316 |
321 |
330 |
331 |
336 |
347 |
348 | {this.state.loading ? (
349 |
353 |
367 | {curriculum ? (
368 | curriculum.map((item, i) => {
369 | const allowPreview = !!item.allowPreview;
370 | return (
371 |
377 | {this.renderCurriculum(
378 | allowPreview,
379 | isCourseCreator,
380 | item,
381 | enrolledToCourse,
382 | )}
383 |
384 | );
385 | })
386 | ) : (
387 |
388 |
390 | )}
391 | {authUser && isCourseCreator ? (
392 |
397 | ) : null}
398 |
399 |
400 |
401 |
410 |
411 |
448 | {authUser && isCourseCreator ? (
449 |
456 | ) : null}
457 |
458 | :
465 | {assignments ? (
466 | assignments.map((item, i) => {
467 | let curi = curriculum.filter(curri => {
468 | return curri.curriculumId === item.curriId.substr(1);
469 | })
470 |
471 | return (
472 |
476 | {this.renderAssignments(item)}
477 |
478 | );
479 | })
480 | ) : (
481 |
482 |
484 | )}
485 | {authUser && isCourseCreator ? (
486 |
493 | ) : null}
494 | */}
495 |
496 |
497 | )}
498 |
499 |
500 |
501 |
507 |
516 |
523 |
531 |
532 | {this.renderEnrollButton(
533 | isCourseCreator,
534 | authUser,
535 | enrolledToCourse,
536 | courseId
537 | )}
538 |
539 |
540 |
541 |
542 |
543 | );
544 | }
545 | }
--------------------------------------------------------------------------------
/src/Components/Courses/CoursePage/Curriculum/CurriculumModal.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Modal,
4 | Form,
5 | FormGroup,
6 | ControlLabel,
7 | FormControl,
8 | Container,
9 | Button,
10 | ButtonToolbar,
11 | Alert,
12 | Toggle,
13 | } from "rsuite";
14 |
15 | export default class CurriculumModal extends React.Component {
16 | constructor(props) {
17 | super(props);
18 | this.state = {
19 | editorContext: null,
20 | content: null,
21 | formValue: {
22 | title: "",
23 | shortDescription: "",
24 | allowPreview: false,
25 | }
26 | };
27 | this.formSubmit = this.formSubmit.bind(this);
28 | }
29 |
30 | close() {
31 | this.setState({ show: false });
32 | }
33 | open(size) {
34 | this.setState({ show: true });
35 | }
36 |
37 | onDanteSaveHandler(editorContext, content) {
38 | this.setState({ editorContext, content });
39 | }
40 |
41 | formSubmit() {
42 | let { title, shortDescription, allowPreview } = this.state.formValue;
43 | const courseId = this.props.match.params.id;
44 | allowPreview = !!(allowPreview);
45 |
46 | if (!title || !shortDescription) {
47 | Alert.error("Title and description cannot be empty.", 5000);
48 | } else {
49 | this.props.firebase
50 | .courseCurriculums(`-${courseId}`)
51 | .push({ title, shortDescription, allowPreview }, err => {
52 | if (err) {
53 | Alert.error(
54 | "An error occurred while creating curriculum. Please try again.",
55 | 5000
56 | );
57 | }
58 | })
59 | .then(rsp => {
60 | const curriculumId = rsp.key.substr(1, rsp.key.length);
61 | this.props.history.push(
62 | `/courses/${courseId}/curriculum/${curriculumId}`
63 | );
64 | });
65 | }
66 | }
67 |
68 | render() {
69 | return (
70 |
257 |
263 |
265 |
266 |
272 |
274 |
275 | {title}
292 |297 | {description} 298 |
299 |Duration
307 |312 | {duration} Hours 313 |
314 |Academic Qualification
322 |327 | {qualification[0].toUpperCase() + qualification.substr(1)} 328 |
329 |337 | Requirements 338 |
339 |344 | {prerequisite} 345 |
346 |358 | Curriculum 359 |
360 |406 | Assignments 407 |
408 | { (enrolledToCourse || (authUser && authUser.roles.userRole) === 'admin')? 409 |Enroll to view assignments...
459 | } 460 | {/*
508 | 
514 |
515 | 528 | {levelOfStudy} 529 |
530 |
71 |
72 | Add Curriculum
73 |
74 |
75 |
76 |
77 |
110 |
111 |
112 |
113 | );
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/src/Components/Courses/CoursePage/Curriculum/CurriculumPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SunEditor from 'suneditor-react';
3 | import { compose } from 'recompose';
4 |
5 | import 'suneditor/dist/css/suneditor.min.css';
6 |
7 | import { Container, Nav, Navbar, Icon } from 'rsuite';
8 | import withCurriculum from './withCurriculum';
9 | import { AuthUserContext } from '../../../Session';
10 |
11 | class CurriculumPage extends React.Component{
12 | constructor(props){
13 | super(props);
14 |
15 | this.state = {
16 | contentState: '',
17 | sunEditor: {
18 | editing: false,
19 | resizingBar: false,
20 | enable: false,
21 | showToolbar: false,
22 | disable: true,
23 | }
24 | }
25 |
26 | this.editorOnChange = this.editorOnChange.bind(this);
27 | this.editorSave = this.editorSave.bind(this);
28 | this.editToggle = this.editToggle.bind(this);
29 | }
30 |
31 | componentDidMount(){
32 | const curriId = this.props.match.params.id;
33 | const courseId = this.props.match.url.replace(/\/.*?\//g, '').replace(curriId, '');
34 | this.props.getCurriculum(courseId, curriId);
35 |
36 | this.props.firebase.courseCurriculums(`-${courseId}`)
37 | .child(`-${curriId}`)
38 | .child('curriculumContent')
39 | .on('value', snapshot=> {
40 | this.setState({contentState: snapshot.val()})
41 | }
42 | )
43 | }
44 |
45 | editToggle(){
46 | this.setState({
47 | sunEditor:{
48 | editing: !this.state.sunEditor.editing,
49 | resizingBar: !this.state.sunEditor.resizingBar,
50 | enable: !this.state.sunEditor.enable,
51 | showToolbar: !this.state.sunEditor.showToolbar,
52 | disable: !this.state.sunEditor.disable,
53 | }
54 | })
55 | }
56 |
57 | editorOnChange(content){
58 | this.setState({contentState: content});
59 | }
60 |
61 | editorSave(){
62 | const curriId = this.props.match.params.id;
63 | const courseId = this.props.match.url.replace(/\/.*?\//g, '').replace(curriId, '');
64 | this.props.updateCurriculum('-'+courseId, '-'+curriId, this.state.contentState);
65 | }
66 |
67 | render(){
68 | return(
69 |
104 |
107 |
110 |
111 | :
112 |
113 |
116 |
117 | )
118 | :
119 | (
120 | ''
121 | )
122 |
123 | }
124 |
125 |
11 |
15 | )
16 |
17 | const BreadCrumb = (props) => (
18 |
12 |
14 |
27 |
30 |
31 | )
32 | }
33 |
34 |
35 |
36 | const WrappedComponents = mainTemplate(Header, BreadCrumb, body);
37 |
38 | export default withCourse(WrappedComponents);
39 |
--------------------------------------------------------------------------------
/src/Components/Courses/CourseShowcase.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Panel } from 'rsuite';
3 | import { NavLink } from 'react-router-dom';
4 |
5 | export default class CourseShowcase extends Component{
6 |
7 | render(){
8 | const course = this.props.course;
9 | return(
10 |
28 |
29 |
11 |
12 |
13 | 
18 |
19 |
26 |
27 |
28 |
29 | )
30 | }
31 | }
--------------------------------------------------------------------------------
/src/Components/Courses/EditCourses/Body.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Container,
4 | FormGroup,
5 | Form,
6 | FormControl,
7 | ControlLabel,
8 | SelectPicker,
9 | Button,
10 | ButtonToolbar,
11 | Alert,
12 | Uploader,
13 | InputNumber,
14 | } from "rsuite";
15 |
16 | const qualificationData = [
17 | { label: "Primary School", value: "primary-school" },
18 | { label: "High School", value: "high-school" },
19 | { label: "College", value: "college" },
20 | { label: "Degree", value: "degree" },
21 | { label: "Masters", value: "master" },
22 | { label: "Other", value: "other" }
23 | ];
24 |
25 | const difficultyLevel = [
26 | { label: "Fundamental", value: "fundamental" },
27 | { label: "Intermediate", value: "intermediate" },
28 | { label: "Advanced", value: "advanced" },
29 | { label: "Fundamental-Intermediate", value: "fundamental-intermediate" },
30 | { label: "Fundamental-Advanced", value: "fundamental-advanced" },
31 | { label: "Other", value: "other" }
32 | ];
33 |
34 | class Body extends React.Component {
35 | constructor(props) {
36 | super(props);
37 | this.state = {
38 | course: null,
39 | showError: false,
40 | errorPlacement: "bottomStart",
41 | formValue: {
42 | title: "",
43 | qualification: "",
44 | levelOfStudy: "",
45 | description: "",
46 | prerequisite: ""
47 | },
48 | featureImage: null,
49 | uploading: false,
50 | setFileInfo: null,
51 | };
52 | this.formSubmit = this.formSubmit.bind(this);
53 | this.retrievePageCourse = this.retrievePageCourse.bind(this);
54 | }
55 |
56 | retrievePageCourse(id) {
57 | const coursesList = this.props.coursesList? this.props.coursesList : [];
58 | if(coursesList){
59 | let foundCourse = null;
60 | for (let i = 0; i < coursesList.length; i++) {
61 | if (coursesList[i].uid === `-${id}`) {
62 | foundCourse = coursesList[i];
63 | break;
64 | }
65 | }
66 | this.setState({ course: foundCourse });
67 | }
68 | }
69 |
70 | formSubmit() {
71 | const formValue = this.state.formValue;
72 | const course = this.state.course;
73 |
74 | const formValueKeys = Object.keys(formValue);
75 |
76 | formValueKeys.forEach(key=> {
77 | if(formValue[key]){
78 | course[key] = formValue[key]
79 | }
80 | })
81 |
82 | this.props.firebase
83 | .course(`-${this.props.match.params.id}`)
84 | .update(
85 | {
86 | title: course.title,
87 | qualification: course.qualification,
88 | levelOfStudy: course.levelOfStudy,
89 | description: course.description,
90 | prerequisite: course.prerequisite,
91 | image: this.state.setFileInfo? this.state.setFileInfo : course.image
92 | },
93 | err => {
94 | if (err) {
95 | Alert.error(
96 | "An error occurred while creating course. Please try again.",
97 | 5000
98 | );
99 | }
100 | }
101 | )
102 | .then(rsp => {
103 | this.props.history.push(`/courses/${this.props.match.params.id}`);
104 | });
105 |
106 | }
107 |
108 | previewFile(file, callback) {
109 | const reader = new FileReader();
110 | reader.onloadend = () => {
111 | callback(reader.result);
112 | };
113 | reader.readAsDataURL(file);
114 | }
115 |
116 | componentDidMount(){
117 | this.retrievePageCourse(this.props.match.params.id);
118 | }
119 |
120 | render() {
121 | const course = this.state.course? this.state.course: null;
122 |
123 | return (
124 |
20 |
22 | {course.title}
21 |23 | {course.description} 24 |
25 |
125 | {course?
126 |
127 |
128 | {
134 | this.setState({ uploading: true });
135 | this.previewFile(file.blobFile, value => {
136 | this.setState({ setFileInfo: value});
137 | });
138 | }}
139 | >
140 |
152 |
153 |
154 |
155 |
156 |
220 |
221 |
222 | :
225 | );
226 | }
227 | }
228 |
229 | export default Body;
--------------------------------------------------------------------------------
/src/Components/Courses/EditCourses/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {compose} from 'recompose';
3 | import mainTemplate from '../../Templates/MainTemplate'
4 | import {withFirebase} from '../../Firebase';
5 | import {withAuthorization} from '../../Session'
6 | import {NavLink} from 'react-router-dom';
7 | import AnnouncementsPanel from '../../Announcements/AnnouncementsPanel';
8 | import { Breadcrumb } from 'rsuite';
9 | import Body from './Body';
10 | import withCourse from '../Context/withCourse';
11 |
12 | const Header = (props) => (
13 | Loading...
223 | } 224 |
14 |
18 | )
19 |
20 | const BreadCrumb = () => (
21 |
15 |
17 |
49 |
121 | )
122 | }
123 | }
124 |
125 | const styleCenter = {
126 | display: 'flex',
127 | justifyContent: 'center',
128 | alignItems: 'center',
129 | height: '60px'
130 | };
131 |
132 | const slimText = {
133 | fontSize: '0.666em',
134 | color: '#97969B',
135 | fontWeight: 'lighter',
136 | paddingBottom: 5
137 | };
138 |
139 | const titleStyle = {
140 | padding: 5,
141 | whiteSpace: 'nowrap',
142 | fontWeight: 500,
143 | fontSize: '14px'
144 | };
145 |
146 | const dataStyle = {
147 | fontSize: '1.2em',
148 | fontWeight: 500
149 | };
150 | export default withFirebase(AdminCoursePalette);
--------------------------------------------------------------------------------
/src/Components/Dashboard/MainPalette/CoursePanel.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AdminCoursePalette from './AdminCoursePalette';
3 | import StudentCoursePalette from './StudentCoursePalette';
4 |
5 | class CoursePanel extends React.Component{
6 | render(){
7 | const authUser = this.props.authUser;
8 | return(
9 | authUser.roles.userRole === 'admin'?
10 |
50 |
52 | My Created Courses
51 |
53 | {
54 | courses?
55 |
120 | -
56 | {
57 | courses.map((course, i)=> {
58 | let curriculum = course.course.curriculum || {};
59 | curriculum = curriculum? Object.keys(curriculum).length: 0;
60 | let students = course.course.students? Object.keys(course.course.students).length : 0;
61 | return(
62 | <>
63 |
77 | {course.course.title}
78 |
79 |
83 |
86 | Students
84 | {students}
85 |
90 |
93 | Curriculums
91 | {curriculum}
92 | No courses created...
118 | } 119 |
113 |
300 | );
301 | }
302 | }
303 |
304 | export default compose(withFirebase, withCourse)(StudentCoursePalette);
305 |
--------------------------------------------------------------------------------
/src/Components/Dashboard/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withAuthorization } from '../Session';
3 |
4 | import AnnouncementsPanel from '../Announcements/AnnouncementsPanel';
5 | import mainTemplate from '../Templates/MainTemplate';
6 | import { Breadcrumb } from 'rsuite';
7 | import CoursePanel from './MainPalette/CoursePanel';
8 |
9 | const Header = (props) => (
10 |
114 |
116 | My Submissions
115 |
117 | {submissions
118 | ? submissions.map(submission => {
119 | return (
120 |
123 |
126 |
294 |
295 | );
296 | })
297 | : null}
298 |
299 |
11 |
15 | )
16 |
17 | const BreadCrumb = () => (
18 |
12 |
14 |
25 |
29 | )
30 |
31 | const condition = authUser => !!authUser;
32 |
33 | const WrappedComponents = mainTemplate(Header, BreadCrumb, Body);
34 |
35 | export default withAuthorization(condition)(WrappedComponents);
--------------------------------------------------------------------------------
/src/Components/Firebase/context.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const FirebaseContext = React.createContext(null);
4 |
5 | export const withFirebase = Component => props => (
6 |
26 |
28 |
14 |
16 |
17 | The Most Trusted
18 |
21 |
22 | 
23 |
24 |
25 |
26 |
27 |
28 |
30 |
31 |
32 | {
33 | coursesList && coursesList.length?
34 | Array.from(coursesList).reverse().map((course, i) => {
35 | if(i < 4){
36 | return (
37 |
38 | )
39 | }else{
40 | return null;
41 | }
42 | })
43 | :null
44 | }
45 |
46 |
47 |
48 | )
49 | }
50 | }
51 |
52 | export default withCourse(HomePage);
53 |
54 |
--------------------------------------------------------------------------------
/src/Components/Login/LoginForm.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {
3 | Form,
4 | FormGroup,
5 | FormControl,
6 | ControlLabel,
7 | Button,
8 | ButtonToolbar,
9 | Alert,
10 | Message
11 | } from 'rsuite';
12 |
13 | const INITIAL_STATE = {
14 | email: '',
15 | password: '',
16 | error: '',
17 | };
18 |
19 | export default class LoginForm extends Component{
20 | constructor(props){
21 | super(props);
22 |
23 | this.state = {
24 | errorPlacement: 'bottomStart',
25 | showEmailError: false,
26 | showPasswordError: false,
27 | isFormSubmit: false,
28 |
29 | ...INITIAL_STATE,
30 | }
31 | this.formSubmit = this.formSubmit.bind(this);
32 | }
33 |
34 | formSubmit(e) {
35 | const { email, password } = this.state;
36 |
37 | this.props.firebase.doSignInWithEmailAndPassword(email, password).then(() => {
38 | this.setState({ ...INITIAL_STATE });
39 | Alert.success('Successfully logged in. Redirecting...', 5000)
40 | this.props.history.push('/dashboard');
41 | }).catch(error => {
42 | let message = error.message;
43 | this.setState({ error: message });
44 | });
45 |
46 | e.preventDefault();
47 | };
48 |
49 | render(){
50 | const { showEmailError, showPasswordError, errorPlacement } = this.state;
51 | const emailErrorMessage = showEmailError ? 'This field is required' : null;
52 | const passwordErrorMessage = showPasswordError ? 'This field is required' : null;
53 |
54 | const isInvalid =
55 | !this.state.email ||
56 | !this.state.password
57 |
58 | return(
59 | The Most Trusted
Simplified LMS
18 | The #1 featured product on ProductHunt and a featured LMS on People's Choice Magazine.
19 | 20 |Recently Added
29 |
60 |
104 |
105 | )
106 | }
107 | }
--------------------------------------------------------------------------------
/src/Components/Login/index.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import { withFirebase } from '../Firebase';
3 | import { withRouter } from 'react-router-dom';
4 | import LoginForm from './LoginForm';
5 | import TopNavBar from '../Navbar/TopNavBar';
6 | import {Container, Content, FlexboxGrid, Panel, Header, Footer} from 'rsuite';
7 | import { compose } from 'recompose';
8 | import { AuthUserContext } from '../Session';
9 |
10 | class LoginPage extends Component {
11 | componentDidMount(){
12 | this.listener = this.props.firebase.auth.onAuthStateChanged(authUser => {
13 | if(authUser){
14 | this.props.history.push('/dashboard');
15 | }
16 | })
17 | }
18 |
19 | componentWillUnmount(){
20 | this.listener();
21 | }
22 |
23 | render(){
24 | return(
25 |
28 |
29 |
30 |
32 |
33 |
34 |
35 | Login} bordered>
36 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | ): ''
45 |
46 | return View;
47 | }}
48 |
21 |
33 |
34 |
55 |
56 |
57 |
68 |
148 |
149 |
150 | );
151 | }
152 | }
153 |
154 | const NavLinkStyle = {
155 | textDecoration: 'none',
156 | color: '#8e8e93'
157 | };
158 |
--------------------------------------------------------------------------------
/src/Components/Navbar/TopNavBar.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Icon, Navbar, Nav} from 'rsuite';
3 | import {NavLink} from 'react-router-dom';
4 | import AuthUserContext from '../Session/context';
5 | import { withFirebase } from '../Firebase';
6 |
7 | class TopNavBar extends Component {
8 | render(){
9 | return(
10 |
41 |
47 |
53 |
54 | 77 | {role} 78 |
79 | 80 | 108 | 109 | {role === 'Admin' ? ( 110 | 137 | ) : null} 138 | 139 | 147 |
15 |
16 |
17 |
22 |
23 |
46 |
47 |
48 | )
49 | }
50 | }
51 |
18 | Webcademy
20 |
21 | Sign out
8 | 9 | ); 10 | 11 | export default withFirebase(SignOutButton); -------------------------------------------------------------------------------- /src/Components/Signup/SignupForm.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | Form, 4 | FormGroup, 5 | FormControl, 6 | ControlLabel, 7 | Button, 8 | ButtonToolbar, 9 | Message, 10 | Alert, 11 | } from 'rsuite'; 12 | 13 | const INITIAL_STATE = { 14 | name: '', 15 | email: '', 16 | password: '', 17 | isAdmin: false, 18 | error: '', 19 | }; 20 | 21 | export default class SignupForm extends Component{ 22 | constructor(props){ 23 | super(props); 24 | 25 | this.state = { 26 | errorPlacement: 'bottomStart', 27 | showEmailError: false, 28 | isFormSubmit: false, 29 | referrer: '', 30 | ...INITIAL_STATE 31 | } 32 | 33 | this.formSubmit = this.formSubmit.bind(this); 34 | } 35 | 36 | formSubmit(e) { 37 | let { name, email, password, isAdmin, referrer } = this.state; 38 | const roles = {}; 39 | 40 | isAdmin = referrer === 'INSTR' ? true : false; 41 | 42 | if(isAdmin){ 43 | roles['userRole'] = 'admin'; 44 | } 45 | else{ 46 | roles['userRole'] = 'student'; 47 | } 48 | 49 | this.props.firebase.doCreateUserWithEmailAndPassword(email, password).then(authUser => { 50 | return this.props.firebase.user(authUser.user.uid).set({name, email, roles}) 51 | }).then(() => { 52 | this.setState({ ...INITIAL_STATE }); 53 | Alert.success('Successfully registered. Redirecting...', 5000) 54 | this.props.history.push('/dashboard'); 55 | 56 | }).catch(error => { 57 | let message = error.message; 58 | this.setState({error: message}); 59 | }); 60 | 61 | e.preventDefault(); 62 | }; 63 | 64 | render(){ 65 | const { showEmailError, errorPlacement } = this.state; 66 | const emailErrorMessage = showEmailError ? 'This field is required' : null; 67 | const password = this.state.password; 68 | const passwordErrorMessage = (password && password.length > 2 && password.length < 10) ? 'Password must contain at least 10 characters' : ''; 69 | 70 | const isInvalid = 71 | !this.state.name || 72 | !this.state.email || 73 | !(this.state.password && this.state.password.length >= 10); 74 | 75 | return( 76 |
77 |
137 |
138 | )
139 | }
140 | }
--------------------------------------------------------------------------------
/src/Components/Signup/index.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import { withFirebase } from '../Firebase';
3 | import SignupForm from './SignupForm';
4 | import TopNavBar from '../Navbar/TopNavBar';
5 | import { withRouter } from 'react-router-dom';
6 |
7 | import {Container, Content, FlexboxGrid, Panel, Header, Footer} from 'rsuite';
8 | import { compose } from 'recompose';
9 | import { AuthUserContext } from '../Session';
10 |
11 | class SignUpPage extends Component {
12 | componentDidMount(){
13 | this.listener = this.props.firebase.auth.onAuthStateChanged(authUser => {
14 | if(authUser){
15 | this.props.history.push('/dashboard');
16 | }
17 | })
18 | }
19 |
20 | componentWillUnmount(){
21 | this.listener();
22 | }
23 |
24 | render(){
25 | return(
26 |
29 |
30 |
31 |
33 |
34 |
35 |
36 | Signup} bordered>
37 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | ):
46 | ''
47 | return View
48 | }
49 | }
50 |