Merge pull request #35 from abinth11/bug-fix-images

Bug fix images
abinth11 · Jul 24, 2023 · 1addc31 · 1addc31
2 parents 1ccb543 + d9493a0
commit 1addc31
Show file tree

Hide file tree

Showing 34 changed files with 411 additions and 184 deletions.
diff --git a/client/src/api/endpoints/instructor.ts b/client/src/api/endpoints/instructor.ts
@@ -2,6 +2,7 @@ import {
   updateProfileService,
   changePasswordService,
   getMyStudentsService,
+  getInstructorDetailsService,
 } from "../services/instructor";
 import { PasswordInfo } from "../types/student/student";
 import END_POINTS from "../../constants/endpoints";
@@ -23,3 +24,7 @@ export const updateProfile = (profileInfo: FormData) => {
 export const getMyStudents = () => {
   return getMyStudentsService(END_POINTS.GET_MY_STUDENTS);
 };
+
+export const getInstructorDetails = ()=>{
+  return getInstructorDetailsService(END_POINTS.GET_INSTRUCTOR_DETAILS)
+}
diff --git a/client/src/api/services/instructor.ts b/client/src/api/services/instructor.ts
@@ -30,3 +30,10 @@ export const getMyStudentsService = async (endpoint: string) => {
   );
   return response.data;
 };
+
+export const getInstructorDetailsService = async(endpoint:string)=>{
+  const response = await api.get(
+    `${CONSTANTS_COMMON.API_BASE_URL}/${endpoint}`
+  );
+  return response.data;
+}
diff --git a/client/src/api/services/instructorManageService.ts b/client/src/api/services/instructorManageService.ts
@@ -1,5 +1,6 @@
 import CONSTANTS_COMMON from "../../constants/common";
 import api from "../middlewares/protectedInterceptor";
+import axiosInstance from "../middlewares/interceptor";
 export const getInstructors = async (endpoint: string) => {
   const response = await api.get(
     `${CONSTANTS_COMMON.API_BASE_URL}/${endpoint}`
@@ -69,7 +70,7 @@ export const getBlockedInstructor = async (endpoint: string) => {
 };
 
 export const getIndividualInstructor = async (endpoint:string,instructorId:string)=>{
-  const response = await api.get(
+  const response = await axiosInstance.get(
     `${CONSTANTS_COMMON.API_BASE_URL}/${endpoint}/${instructorId}`
   );
   return response;

diff --git a/client/src/api/types/apiResponses/apiResponseHomePageListing.ts b/client/src/api/types/apiResponses/apiResponseHomePageListing.ts
@@ -1,7 +1,11 @@
 export interface ApiResponseRecommended {
   _id: string
   instructor: Instructor
-  course: Course
+  course: Course,
+  media:{
+    profileUrl:string,
+    thumbnailUrl:string,
+  }
 }
 
 export interface Instructor {
@@ -46,7 +50,8 @@ export interface Course {
   export interface ApiResponseTrending {
     _id: string
     title: string
-    thumbnail: string
+    thumbnailUrl: string;
+    profileUrl:string;
     instructorFirstName: string
     instructorLastName: string
   }
diff --git a/client/src/api/types/apiResponses/apiResponseInstructors.ts b/client/src/api/types/apiResponses/apiResponseInstructors.ts
@@ -33,6 +33,7 @@ export interface GetCourseByInstructorInterface {
     title: string
     thumbnail?: string
     introductionVideo?: string
+    thumbnailUrl:string;
     description: string
     category: string
     instructorId: string

diff --git a/client/src/api/types/student/student.ts b/client/src/api/types/student/student.ts
@@ -9,3 +9,21 @@ export interface UpdateProfileInfo {
   mobile?: string;
   profilePic?: File | null;
 }
+
+export interface Students {
+  _id: string;
+  course:string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  mobile: string;
+  dateJoined: string;
+  isGoogleUser:boolean;
+  profilePic:{
+    name:string;
+    url:string;
+    id:string
+  }
+  profileUrl:string;
+  isBlocked: boolean;
+}
diff --git a/client/src/components/pages/InstructorManagement/ViewBlockedInstructors.tsx b/client/src/components/pages/InstructorManagement/ViewBlockedInstructors.tsx
@@ -112,7 +112,7 @@ const ViewBlockedInstructors: React.FC = () => {
               (
                 {
                   _id,
-                  img,
+                  profileUrl,
                   firstName,
                   lastName,
                   email,
@@ -132,7 +132,7 @@ const ViewBlockedInstructors: React.FC = () => {
                     <td className={classes}>
                       <div className='flex items-center gap-3'>
                         <Avatar
-                          src={img}
+                          src={profileUrl}
                           alt='image'
                           size='md'
                           className='border border-blue-gray-50 bg-blue-gray-50/50 object-contain p-1'

diff --git a/client/src/components/pages/InstructorManagement/ViewInstructorRequests.tsx b/client/src/components/pages/InstructorManagement/ViewInstructorRequests.tsx
@@ -6,8 +6,6 @@ import { toast } from "react-toastify";
 import { Link } from "react-router-dom";
 import useTimeAgo from "../../../hooks/useTimeAgo";
 import { InstructorApiResponse } from "../../../api/types/apiResponses/apiResponseInstructors";
-import { Button,CardFooter } from "@material-tailwind/react";
-import {IconButton} from "@material-tailwind/react";
 
 
 

diff --git a/client/src/components/pages/InstructorManagement/ViewInstructors.tsx b/client/src/components/pages/InstructorManagement/ViewInstructors.tsx
@@ -124,13 +124,13 @@ const ViewInstructors: React.FC = () => {
               (
                 {
                   _id,
-                  img,
                   firstName,
                   lastName,
                   email,
                   dateJoined,
                   isBlocked,
                   isVerified,
+                  profileUrl,
                 },
                 index
               ) => {
@@ -144,7 +144,7 @@ const ViewInstructors: React.FC = () => {
                     <td className={classes}>
                       <div className='flex items-center gap-3'>
                         <Avatar
-                          src={img}
+                          src={profileUrl}
                           alt='image'
                           size='md'
                           className='border border-blue-gray-50 bg-blue-gray-50/50 object-contain p-1'

diff --git a/client/src/components/pages/addLessons/ListCourseForIstructors.tsx b/client/src/components/pages/addLessons/ListCourseForIstructors.tsx
@@ -62,7 +62,7 @@ const ListCourseForInstructors: React.FC = () => {
     goToPage,
     goToPreviousPage,
     goToNextPage,
-  } = usePagination(courses, 5);
+  } = usePagination(courses, 4);
   const searchResult = useSearch(courses, searchQuery);
   const fetData = async () => {
     const response = await getCourseByInstructor();
@@ -151,7 +151,7 @@ const ListCourseForInstructors: React.FC = () => {
                   {
                     _id,
                     title,
-                    thumbnail,
+                    thumbnailUrl,
                     description,
                     category,
                     createdAt,
@@ -168,7 +168,7 @@ const ListCourseForInstructors: React.FC = () => {
                       <tr key={_id}>
                         <td className={classes}>
                           <div className='flex items-center gap-3'>
-                            <Avatar src={thumbnail} alt={"image"} size='sm' />
+                            <Avatar src={thumbnailUrl} alt={"image"} size='sm' />
                             <div className='flex flex-col'>
                               <Typography
                                 variant='small'
@@ -177,14 +177,7 @@ const ListCourseForInstructors: React.FC = () => {
                               >
                                 {title}
                               </Typography>
-                              {/* <Typography
-                                variant='small'
-                                color='blue-gray'
-                                className='font-normal opacity-70'
-                              >
-                                {description}
-                              </Typography> */}
-                            </div>
+                            </div>  
                           </div>
                         </td>
                         <td className={classes}>
@@ -196,13 +189,6 @@ const ListCourseForInstructors: React.FC = () => {
                             >
                               {category}
                             </Typography>
-                            {/* <Typography
-                              variant='small'
-                              color='blue-gray'
-                              className='font-normal opacity-70'
-                            >
-                              {category}
-                            </Typography> */}
                           </div>
                         </td>
                         <td className={classes}>

diff --git a/client/src/components/pages/home/RecommendedCard.tsx b/client/src/components/pages/home/RecommendedCard.tsx
@@ -12,8 +12,9 @@ interface Props {
 }
 
 const RecommendedCard: React.FC<Props> = ({ courseInfo }) => {
-  const { course, instructor } = courseInfo;
-  const imageUrl = course?.thumbnail;
+  const { course, instructor, media } = courseInfo;
+  const imageUrl = media.thumbnailUrl;
+  const profileUrl = media.profileUrl;
   return (
     <Card
       shadow={false}
@@ -44,7 +45,7 @@ const RecommendedCard: React.FC<Props> = ({ courseInfo }) => {
           variant='circular'
           alt='tania andrew'
           className='border-2 border-white'
-          src='https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80'
+          src={profileUrl}
         />
       </CardBody>
     </Card>

diff --git a/client/src/components/pages/home/TrendingCard.tsx b/client/src/components/pages/home/TrendingCard.tsx
@@ -12,7 +12,8 @@ interface Props {
 }
 
 const TrendingCard: React.FC<Props> = ({ courseInfo }) => {
-  const imageUrl = courseInfo?.thumbnail;
+  const imageUrl = courseInfo?.thumbnailUrl;
+  const profileUrl = courseInfo.profileUrl
   return (
     <div>
       <Card
@@ -46,7 +47,7 @@ const TrendingCard: React.FC<Props> = ({ courseInfo }) => {
             variant='circular'
             alt='tania andrew'
             className='border-2 border-white'
-            src='https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80'
+            src={profileUrl}
           />
         </CardBody>
       </Card>

diff --git a/client/src/components/pages/instructors/InstructorCard.tsx b/client/src/components/pages/instructors/InstructorCard.tsx
@@ -14,7 +14,7 @@ const InstructorCard: React.FC<InstructorApiResponse> = ({
   subjects,
   qualification,
   skills,
-  profilePic,
+  profileUrl,
   about,
 }) => {
   return (
@@ -33,14 +33,12 @@ const InstructorCard: React.FC<InstructorApiResponse> = ({
           variant='circular'
           alt='tania andrew'  
           className='border-2 border-white'
-          src={profilePic??"https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"}
+          src={profileUrl??"https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"}
         />
         <Typography variant='h5' className='mb-4'>
           {firstName + " " + lastName}
         </Typography>
-        <Typography variant='p' className=''>
-          {about}
-        </Typography>
+        <p className="text-gray pl-2 pr-2  text-md line-clamp-2">{about}</p>
       </CardHeader>
       <CardBody
         className='relative  px-6 md:px-12'
@@ -49,10 +47,10 @@ const InstructorCard: React.FC<InstructorApiResponse> = ({
         <Typography
           variant='h6'
           color='black'
-          className='mb-6 font-medium leading-[1.5]'
+          className='mb-6 text-gray text-md leading-[1.5]'
         >
-          {skills+", "+subjects+", "+qualification},
-        </Typography>
+          {skills+", "+subjects},
+        </Typography>  
       </CardBody>
     </Card>
   );

diff --git a/client/src/components/pages/instructors/MyStudents.tsx b/client/src/components/pages/instructors/MyStudents.tsx
@@ -19,20 +19,11 @@ import { useState, useEffect } from "react";
 import usePagination from "../../../hooks/usePagination";
 import { formatDate } from "../../../utils/helpers";
 import { toast } from "react-toastify";
-export interface Students {
-  _id: string;
-  course:string;
-  firstName: string;
-  lastName: string;
-  email: string;
-  mobile: string;
-  dateJoined: string;
-  isBlocked: boolean;
-}
+import { Students } from "../../../api/types/student/student";
 const TABLE_HEAD = ["Student", "Course", "Status", "Joined"];
 
 const MyStudents: React.FC = () => {
-  const [students, setStudents] = useState([]);
+  const [students, setStudents] = useState<Students[]>([]);
   const ITEMS_PER_PAGE = 5;  
   const {
     currentPage,
@@ -112,7 +103,10 @@ const MyStudents: React.FC = () => {
                     course,
                     mobile,
                     isBlocked,
+                    isGoogleUser,
                     dateJoined,
+                    profileUrl,
+                    profilePic
                   },
                   index
                 ) => {
@@ -126,9 +120,7 @@ const MyStudents: React.FC = () => {
                       <td className={classes}>
                         <div className='flex items-center gap-3'>
                           <Avatar
-                            src={
-                              "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-5.jpg"
-                            }
+                            src={isGoogleUser?profilePic?.url:profileUrl}
                             alt={"image"}  
                             size='sm'
                           />

diff --git a/client/src/components/pages/instructors/ProfileForm.tsx b/client/src/components/pages/instructors/ProfileForm.tsx
@@ -1,10 +1,9 @@
 import { useState, useEffect } from "react";
 import { useFormik } from "formik";
 import { toast } from "react-toastify";
-import { updateProfile } from "../../../api/endpoints/instructor";
+import { getInstructorDetails, updateProfile } from "../../../api/endpoints/instructor";
 import { UpdateProfileInfo } from "../../../api/types/instructor/instructor";
 import { Avatar } from "@material-tailwind/react";
-import { getIndividualInstructors } from "../../../api/endpoints/instructorManagement";
 import { InstructorApiResponse } from "../../../api/types/apiResponses/apiResponseInstructors";
 
 interface Props {
@@ -37,8 +36,8 @@ const ProfileForm: React.FC<Props> = ({ editMode, setEditMode }) => {
   const fetchInstructor = async () => {
     try {
       setProfileLoading(true);
-      const response = await getIndividualInstructors("fromProfile");
-      setInstructor(response?.data?.data);
+      const response = await getInstructorDetails();
+      setInstructor(response?.data);
       setProfileLoading(false);
     } catch (error) {
       setProfileLoading(false);