Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { useContext, useState } from "react";
- import { useLocation, Link } from "react-router-dom";
- import { CourseContext } from "../../../contexts/Courses/CourseContext";
- import { AuthContext } from "../../../contexts/Users/AuthContext";
- import Paths from "../../../utils/Paths";
- import * as courseService from '../../../services/courseService'
- import toastrNotificationsService from "../../../services/toastrNotificationsService";
- import * as iconHelper from "../../../utils/getCourseIconByKey";
- import "../../../assets/styles/services.css";
- export const CourseDetails = ({ handleLinkClick, ...course }) => {
- const location = useLocation();
- const { updateCourseFunc } = useContext(CourseContext);
- const { auth } = useContext(AuthContext);
- const isAuthenticated = !!auth.username;
- const [canLike, setCanLike] = useState(true);
- const [canDisLike, setCanDisLike] = useState(true);
- const likesHandler = () => {
- if (!course.likes){
- course.likes = [];
- }
- if (!course.dislikes) {
- course.dislikes = [];
- }
- let courseWithUpdatedLikes;
- if (course.likes.includes(auth._id) || course.dislikes.includes(auth._id)) {
- courseWithUpdatedLikes = {
- ...course
- }
- // setCanLike(false);
- toastrNotificationsService.showError('You have already voted for this course')
- }
- else {
- courseWithUpdatedLikes = {
- ...course,
- likes: [...course.likes, auth._id]
- }
- setCanLike(false);
- setCanDisLike(false);
- toastrNotificationsService.showSuccess('You have successfully voted for this course!')
- }
- if (isAuthenticated) {
- const editedCourse = courseService.edit(course._id, courseWithUpdatedLikes);
- updateCourseFunc(editedCourse);
- }
- else {
- toastrNotificationsService.showError('Only registered users can vote. Please log in your account')
- }
- }
- const dislikesHandler = () => {
- if (!course.likes){
- course.likes = [];
- }
- if (!course.dislikes) {
- course.dislikes = [];
- }
- let courseWithUpdatedDislikes;
- if (course.likes.includes(auth._id) || course.dislikes.includes(auth._id)) {
- courseWithUpdatedDislikes = {
- ...course
- }
- toastrNotificationsService.showError('You have already voted for this course')
- }
- else {
- courseWithUpdatedDislikes = {
- ...course,
- dislikes: [...course.dislikes, auth._id]
- }
- setCanLike(false);
- setCanDisLike(false);
- toastrNotificationsService.showSuccess('You have successfully voted for this course!')
- }
- if (isAuthenticated) {
- const editedCourse = courseService.edit(course._id, courseWithUpdatedDislikes);
- updateCourseFunc(editedCourse);
- } else {
- toastrNotificationsService.showError('Only registered users can vote. Please log in your account')
- }
- }
- return (
- <div className="col-xl-4 col-md-6 service_col">
- <div className="service">
- <div className="service_title_container d-flex flex-row align-items-center justify-content-start">
- <div>
- <div className="service_icon">
- <img
- src={
- iconHelper.getIcon(course.name) !== undefined
- ? iconHelper.getIcon(course.name)
- : course.imageUrl
- }
- alt={course.name}
- />
- </div>
- </div>
- <div className="service_title">{course.name} Class</div>
- </div>
- {location.pathname === "/" ? (
- <div className="service_text_part">
- <p>{course.description}</p>
- </div>
- ) : (
- <>
- <div className="service_text">
- <p>{course.description}</p>
- </div>
- <div className="container">
- <div className="row justify-content-center">
- <button
- onClick={() => likesHandler()}
- className="like_dislike_btn"><i className="fa fa-3x fa-thumbs-up" aria-hidden="true"></i></button>
- <span className="likes_dislikes">{course.likes?.length}</span>
- <button
- onClick={() => dislikesHandler()}
- className="like_dislike_btn"><i className="fa fa-3x fa-thumbs-down" aria-hidden="true"></i></button>
- <span className="likes_dislikes">{course.dislikes?.length}</span>
- </div>
- </div>
- </>
- )}
- {location.pathname === "/" && (
- <div className="course_link">
- <Link to={Paths.Courses} onClick={handleLinkClick}>Read More</Link>
- </div>
- )}
- </div>
- </div>
- );
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement