-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix some issue in rating and review slider and fromat code
- Loading branch information
1 parent
b932b5c
commit 27cddfd
Showing
8 changed files
with
212 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { useEffect, useState } from "react" | ||
| import {TiStarFullOutline, TiStarHalfOutline, TiStarOutline,} from "react-icons/ti" | ||
|
|
||
|
|
||
| function RatingStars({ Review_Count, Star_Size }){ | ||
| const [starCount, SetStarCount] = useState({ | ||
| full: 0, | ||
| half: 0, | ||
| empty: 0, | ||
| }) | ||
|
|
||
| useEffect(() => { | ||
| const wholeStars = Math.floor(Review_Count) || 0 | ||
| SetStarCount({ | ||
| full: wholeStars, | ||
| half: Number.isInteger(Review_Count) ? 0 : 1, | ||
| empty: Number.isInteger(Review_Count) ? 5 - wholeStars : 4 - wholeStars, | ||
| }) | ||
| }, [Review_Count]) | ||
|
|
||
|
|
||
| return ( | ||
| <div className="flex gap-1 text-yellow-100"> | ||
| {[...new Array(starCount.full)].map((_, i) => { | ||
| return <TiStarFullOutline key={i} size={Star_Size || 20} /> | ||
| })} | ||
| {[...new Array(starCount.half)].map((_, i) => { | ||
| return <TiStarHalfOutline key={i} size={Star_Size || 20} /> | ||
| })} | ||
| {[...new Array(starCount.empty)].map((_, i) => { | ||
| return <TiStarOutline key={i} size={Star_Size || 20} /> | ||
| })} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
| export default RatingStars |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { useEffect, useState } from "react"; | ||
| import ReactStars from "react-rating-stars-component"; | ||
|
|
||
| import { Swiper, SwiperSlide } from "swiper/react"; // Import Swiper React components | ||
| import "swiper/css"; // Import Swiper styles | ||
| import "swiper/css/free-mode"; | ||
| import "swiper/css/pagination"; | ||
| import "../../App.css"; | ||
| import { FaStar } from "react-icons/fa"; // Icons | ||
|
|
||
| import { apiConnector } from "../../services/apiconnector"; // Get apiFunction and the endpoint | ||
| import { ratingsEndpoints } from "../../services/apis"; | ||
|
|
||
| function ReviewSlider() { | ||
| const [reviews, setReviews] = useState([]); | ||
| const truncateWords = 15; | ||
|
|
||
| useEffect(() => { | ||
| (async () => { | ||
| const { data } = await apiConnector( | ||
| "GET", | ||
| ratingsEndpoints.REVIEWS_DETAILS_API | ||
| ); | ||
| if (data?.success) { | ||
| setReviews(data?.data); | ||
| } | ||
| })(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="text-white"> | ||
| <div className="my-[50px] h-[184px] w-[650px] lg:w-[1260px] "> | ||
| <Swiper | ||
| className="w-full" | ||
| slidesPerView={3} | ||
| spaceBetween={25} | ||
| loop={true} | ||
| freeMode={true} | ||
| autoplay={{ delay: 2500, disableOnInteraction: false }} | ||
| > | ||
| {reviews.map((review, i) => { | ||
| return ( | ||
| <SwiperSlide key={i}> | ||
| <div className="flex flex-col gap-3 bg-richblack-800 p-3 text-[14px] text-richblack-25"> | ||
| <div className="flex items-center gap-4"> | ||
| <img | ||
| src={ | ||
| review?.user?.image | ||
| ? review?.user?.image | ||
| : `https://api.dicebear.com/5.x/initials/svg?seed=${review?.user?.firstName}+${review?.user?.lastName}` | ||
| } | ||
| alt="" | ||
| className="h-9 w-9 rounded-full object-cover" | ||
| /> | ||
|
|
||
| <div className="flex flex-col"> | ||
| <h1 className="font-semibold text-richblack-5">{`${review?.user?.firstName} ${review?.user?.lastName}`}</h1> | ||
| <h2 className="text-[12px] font-medium text-richblack-500"> | ||
| {" "} | ||
| {review?.course?.courseName}{" "} | ||
| </h2> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p className="font-medium text-richblack-25"> | ||
| {review?.review.split(" ").length > truncateWords | ||
| ? `${review?.review | ||
| .split(" ") | ||
| .slice(0, truncateWords) | ||
| .join(" ")} ...` | ||
| : `${review?.review}`} | ||
| </p> | ||
|
|
||
| <div className="flex items-center gap-2 "> | ||
| <h3 className="font-semibold text-yellow-100"> | ||
| {" "} | ||
| {review.rating.toFixed(1)}{" "} | ||
| </h3> | ||
| <ReactStars | ||
| count={5} | ||
| value={review.rating} | ||
| size={20} | ||
| edit={false} | ||
| activeColor="#ffd700" | ||
| emptyIcon={<FaStar />} | ||
| fullIcon={<FaStar />} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </SwiperSlide> | ||
| ); | ||
| })} | ||
| </Swiper> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default ReviewSlider; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { useLocation, matchPath } from "react-router-dom"; | ||
|
|
||
| export default function useRouteMatch(path) { | ||
| const location = useLocation(); | ||
| return matchPath(location.pathname, { path }); | ||
| } | ||
|
|
||
| // this custom hook check if current location is same as path or not; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { useEffect, useState } from "react"; | ||
| import { useDispatch, useSelector } from "react-redux"; | ||
| import { Outlet, useParams } from "react-router-dom"; | ||
|
|
||
| import CourseReviewModal from "../components/core/ViewCourse/CourseReviewModal"; | ||
| import VideoDetailsSidebar from "../components/core/ViewCourse/VideoDetailsSidebar"; | ||
| import { getFullDetailsOfCourse } from "../services/operations/courseDetailsAPI"; | ||
| import { | ||
| setCompletedLectures, | ||
| setCourseSectionData, | ||
| setEntireCourseData, | ||
| setTotalNoOfLectures, | ||
| } from "../slices/viewCourseSlice"; | ||
|
|
||
| export default function ViewCourse() { | ||
| const { courseId } = useParams(); | ||
| const { token } = useSelector((state) => state.auth); | ||
| const dispatch = useDispatch(); | ||
| const [reviewModal, setReviewModal] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| (async () => { | ||
| const courseData = await getFullDetailsOfCourse(courseId, token); | ||
| dispatch(setCourseSectionData(courseData.courseDetails.courseContent)); | ||
| dispatch(setEntireCourseData(courseData.courseDetails)); | ||
| dispatch(setCompletedLectures(courseData.completedVideos)); | ||
| let lectures = 0; | ||
| courseData?.courseDetails?.courseContent?.forEach((sec) => { | ||
| lectures += sec.subSections.length; | ||
| }); | ||
| dispatch(setTotalNoOfLectures(lectures)); | ||
| })(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="relative flex min-h-[calc(100vh-3.5rem)]"> | ||
| <VideoDetailsSidebar setReviewModal={setReviewModal} /> | ||
|
|
||
| <div className="h-[calc(100vh-3.5rem)] flex-1 overflow-auto"> | ||
| <div className="mx-6"> | ||
| <Outlet /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {reviewModal && <CourseReviewModal setReviewModal={setReviewModal} />}{" "} | ||
| {/* when we open reviewModal or click on review then CourseReviewModal will be active */} | ||
| </> | ||
| ); | ||
| } |