+function RenderComments({ list, authorlist, courseSlug }) {
+ //to render all comments in discussion container
+ if (!list || list.length === 0) {
+ return (
+
);
}
-
+
console.log(list);
console.log(authorlist);
- if( !authorlist || authorlist.length === 0) {
- return(
-
- { list.map((comment) => {
- return(
-
+ if (!authorlist || authorlist.length === 0) {
+ return
;
+ } else {
+ return (
+
+ {list.map((comment) => {
+ return (
+
);
- })}
+ })}
);
}
-};
+}
class CourseDisplay extends Component {
constructor(props) {
@@ -49,195 +47,241 @@ class CourseDisplay extends Component {
this.handleCommentChange = this.handleCommentChange.bind(this);
this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
this.state = {
- courseDetails: { //structure defined here to prevent initial callback failure
- course: { //promise updates and fills this object
+ courseDetails: {
+ //structure defined here to prevent initial callback failure
+ course: {
+ //promise updates and fills this object
title: null,
- discussion: []
+ discussion: [],
},
- users: []
+ users: [],
},
- courseFound: true, //boolean to store whether courseSlug in url is found or not
- commentField: null, //stores and updates comment typed by the user after every change
- courseDesc: { //stores all course data fetched from timetable api
- lectures: [] //structure defined here to prevent initial callback failure
- }
- }
+ courseFound: true, //boolean to store whether courseSlug in url is found or not
+ commentField: null, //stores and updates comment typed by the user after every change
+ courseDesc: {
+ //stores all course data fetched from timetable api
+ lectures: [], //structure defined here to prevent initial callback failure
+ },
+ };
}
-
- async componentDidMount() {
- const query = this.props.match.params.courseSlug; //extracting courseSlug from url
+
+ async componentDidMount() {
+ const query = this.props.match.params.courseSlug; //extracting courseSlug from url
try {
- const response = await fetch( baseUrl + '/api/course/' + query); //fetching all the course details thru backend
- if(response.ok) {
- const json = await response.json();
+ const response = await fetch(baseUrl + "/api/course/" + query); //fetching all the course details thru backend
+ if (response.ok) {
+ const json = await response.json();
console.log(json);
this.setState({
- courseDetails: json, //updating courseDetails
- courseFound: true
+ courseDetails: json, //updating courseDetails
+ courseFound: true,
});
- }
- else if(response.status === 404) {
+ } else if (response.status === 404) {
this.setState({
- courseFound: false //redirects to not found component on re-render
- })
- }
- else {
- var error = new Error('Error ' + response.status + ': ' + response.statusText);
+ courseFound: false, //redirects to not found component on re-render
+ });
+ } else {
+ var error = new Error(
+ "Error " + response.status + ": " + response.statusText
+ );
error.response = response;
this.setState({
- courseFound: false
+ courseFound: false,
});
throw error;
}
-
+
//course details from timetable api are fetched
- const fresponse = await fetch('https://timetablevisualiser-api.herokuapp.com/CourseData?course_number=' + this.state.courseDetails.course.number);
- if(fresponse.ok) {
+ const fresponse = await fetch(
+ "https://timetablevisualiser-api.herokuapp.com/CourseData?course_number=" +
+ this.state.courseDetails.course.number
+ );
+ if (fresponse.ok) {
const json = await fresponse.json();
console.log(json);
this.setState({
- courseDesc: json //updates courseDesc
+ courseDesc: json, //updates courseDesc
});
- }
- else if(fresponse.status === 404) {
+ } else if (fresponse.status === 404) {
this.setState({
- courseFound: false //redirects to not found component on re-render
+ courseFound: false, //redirects to not found component on re-render
});
- }
- else {
- var error = new Error('Error ' + response.status + ': ' + response.statusText);
+ } else {
+ var error = new Error(
+ "Error " + response.status + ": " + response.statusText
+ );
error.response = response;
this.setState({
- courseFound: false
+ courseFound: false,
});
throw error;
}
- } catch(error) {
- alert("could not fetch course Details.\nError: "+ error.message);
+ } catch (error) {
+ alert("could not fetch course Details.\nError: " + error.message);
}
}
- handleCommentChange = (event) => { //on every change in input ,this is triggered to store the updated comment in state
+ handleCommentChange = (event) => {
+ //on every change in input ,this is triggered to store the updated comment in state
this.setState({
- commentField: event.target.value
+ commentField: event.target.value,
});
};
- handleCommentSubmit = async e => { //triggers every time client hits "post Comment"
+ handleCommentSubmit = async (e) => {
+ //triggers every time client hits "post Comment"
e.preventDefault();
- if(document.cookie.split(';').some((item) => item.trim().startsWith('jwt='))) { //checking whether client has logged in
- const cookies = document.cookie.split('; ');
- const value = cookies.find(item => item.startsWith('jwt')).split('=')[1]; //extracting bearer token from login cookie
+ if (
+ document.cookie.split(";").some((item) => item.trim().startsWith("jwt="))
+ ) {
+ //checking whether client has logged in
+ const cookies = document.cookie.split("; ");
+ const value = cookies
+ .find((item) => item.startsWith("jwt"))
+ .split("=")[1]; //extracting bearer token from login cookie
console.log(value);
- const response = await axios({ //posting the comment request on backend
- method: 'post',
- url: "/api/course/" + this.props.match.params.courseSlug + "/comment" ,
+ const response = await axios({
+ //posting the comment request on backend
+ method: "post",
+ url: "/api/course/" + this.props.match.params.courseSlug + "/comment",
headers: {
- Authorization: `Bearer ${value}`
+ Authorization: `Bearer ${value}`,
},
data: {
- data: this.state.commentField
- }
+ data: this.state.commentField,
+ },
});
- if(response.status === 200) {
- window.location.reload(); //reload tha page to show new updated comment
- }
- else {
- alert('Error ' + response.status + ': ' + response.statusText);
+ if (response.status === 200) {
+ window.location.reload(); //reload tha page to show new updated comment
+ } else {
+ alert("Error " + response.status + ": " + response.statusText);
}
- }
- else { //if client has not logged in
+ } else {
+ //if client has not logged in
alert("you must be logged in to comment on stations.");
}
- }
+ };
render() {
- window.localStorage.setItem("stationNo", "3");
- if(this.state.courseFound === true) { //check if course has been found (true default value so that notfound isnt shown while page reloads)
- let professors = [];
- this.state.courseDesc.lectures.forEach((section) => { //finding all unique profs currently taking the course
+ window.localStorage.setItem("stationNo", "3");
+ if (this.state.courseFound === true) {
+ //check if course has been found (true default value so that notfound isnt shown while page reloads)
+ let professors = [];
+ this.state.courseDesc.lectures.forEach((section) => {
+ //finding all unique profs currently taking the course
let counter = 3;
const substrings = section.split(",");
- while(counter < substrings.length) {
+ while (counter < substrings.length) {
professors.push(substrings[counter]);
counter++;
- }
+ }
});
- let uniprofs = [...new Set(professors)]; //removes repetition of same names from array
- let uniprofstring = "";
+ let uniprofs = [...new Set(professors)]; //removes repetition of same names from array
+ let uniprofstring = "";
let count = 0;
- while( count < uniprofs.length ) //creating string for display from professors array
- {
- if( count !== 0) {
+ while (count < uniprofs.length) {
+ //creating string for display from professors array
+ if (count !== 0) {
uniprofstring = uniprofstring + ", ";
}
uniprofstring = uniprofstring + uniprofs[count];
count++;
}
- return(
-
-
-
-
-
{this.state.courseDetails.course.title}{this.state.courseDetails.course.number}
+ return (
+
+
+
+
+
+ {this.state.courseDetails.course.title}
+
+ {this.state.courseDetails.course.number}
+
+
-
-
-
Instructor in-charge:
-
+
+
+
+ Instructor in-charge:
+
+
{this.state.courseDesc.ic}
-
- Professors:
- {uniprofstring}
- No of credits on completion:
- {this.state.courseDesc.credits}
- Description:
-
+
+
+ Professors:
+ {uniprofstring}
+
+
+ No of credits on completion:
+
+
+ {this.state.courseDesc.credits}
+
+
+ Description:
+
+
-
Resources
+
+
Resources
-