feat(profile): implement page with bought courses

danilych · Feb 11, 2024 · 65c1795 · 65c1795
1 parent 610797a
commit 65c1795
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 11 deletions.
diff --git a/app/entities/course-card.tsx b/app/entities/course-card.tsx
@@ -13,7 +13,7 @@ interface Props {
 export function CourseCard({ id, picturePath, name, price, rating }: Props) {
   return (
     <Link to={`/courses/${id}`}>
-      <div className="w-[484px] h-[570px] bg-[#F6F6F6] pt-6 rounded-[20px] px-5">
+      <div className="w-[484px] relative h-[570px] bg-[#F6F6F6] pt-6 rounded-[20px] px-5">
         <img
           className="h-[250px] w-[444px] mx-auto rounded-[20px]"
           src={

diff --git a/app/redux/slices/courses.ts b/app/redux/slices/courses.ts
@@ -28,6 +28,15 @@ export const fetchCourse = createAsyncThunk(
   }
 )
 
+export const fetchBoughtCourse = createAsyncThunk(
+  'course/fetchBoughtCourse',
+  async (params: any) => {
+    const { data } = await instance.post('/Course/GetUserBoughtCourses', params)
+
+    return data
+  }
+)
+
 const initialState = {
   courses: {
     items: [],
@@ -69,6 +78,22 @@ const coursesSlice = createSlice({
     builder.addCase(fetchCourse.rejected, (state, action) => {
       state.courses.status = 'error'
 
+      // @ts-ignore
+      state.courses.items = null
+    })
+    builder.addCase(fetchBoughtCourse.pending, (state, action) => {
+      state.courses.status = 'loading'
+
+      // @ts-ignore
+      state.courses.items = null
+    })
+    builder.addCase(fetchBoughtCourse.fulfilled, (state, action) => {
+      state.courses.status = 'loaded'
+      state.courses.items = action.payload
+    })
+    builder.addCase(fetchBoughtCourse.rejected, (state, action) => {
+      state.courses.status = 'error'
+
       // @ts-ignore
       state.courses.items = null
     })

diff --git a/app/routes/my-account.archived.tsx b/app/routes/my-account.archived.tsx
@@ -18,7 +18,7 @@ export default function Archived() {
   }, [])
 
   return (
-    <div className="bg-white pb-[92px] mt-[68px]">
+    <div className="bg-white min-h-screen pb-[92px] mt-[68px]">
       <AccountMenu page="archived" />
     </div>
   )

diff --git a/app/routes/my-account.courses.tsx b/app/routes/my-account.courses.tsx
@@ -1,7 +1,11 @@
+import { ThunkDispatch } from '@reduxjs/toolkit'
 import { type V2_MetaFunction } from '@remix-run/node'
-import { useEffect } from 'react'
-import { useSelector } from 'react-redux'
+import { Spinner } from 'flowbite-react'
+import { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { CourseCard } from '~/entities'
 import { selectIsAuth } from '~/redux/slices/auth'
+import { fetchBoughtCourse } from '~/redux/slices/courses'
 import { AccountMenu } from '~/widgets'
 
 export const meta: V2_MetaFunction = () => {
@@ -11,15 +15,54 @@ export const meta: V2_MetaFunction = () => {
 export default function Courses() {
   const isAuth = useSelector(selectIsAuth)
 
+  const [isCoursesLoading, setIsCoursesLoading] = useState(true)
+
+  const dispatch = useDispatch<ThunkDispatch<any, any, any>>()
+
+  // @ts-ignore
+  const { courses } = useSelector(state => state.courses)
+
   useEffect(() => {
     if (!isAuth) {
       // navigate('/')
     }
+
+    const userId = window.localStorage.getItem('userId')
+    let requestData = new FormData()
+    requestData.append('userID', userId as string)
+
+    dispatch(fetchBoughtCourse(requestData))
   }, [])
 
+  useEffect(() => {
+    if (courses.status === 'loaded') setIsCoursesLoading(false)
+
+    if (courses.status === 'loading') setIsCoursesLoading(true)
+  })
+
   return (
-    <div className="bg-white pb-[92px] mt-[68px]">
+    <div className="bg-white min-h-screen pb-[92px] mt-[68px]">
       <AccountMenu page="courses" />
+
+      {isCoursesLoading ? (
+        <div className="w-full h-[570px]">
+          <Spinner
+            className="absolute top-1/2 left-1/2 mt-[-50px] ml-[-50px]"
+            aria-label="Default status example"
+            size="lg"
+          />
+        </div>
+      ) : (
+        <div className="mt-[42px] w-[1500px] mx-auto grid grid-cols-3 gap-2">
+          {/* @ts-ignore */}
+          {courses.items.map((course: any) => (
+            <CourseCard key={course.id} id={course.id} picturePath={course.picturePath} name={course.name} price={course.price} rating={course.rating} />
+          ))}
+          {courses.items.map((course: any) => (
+            <CourseCard key={course.id} id={course.id} picturePath={course.picturePath} name={course.name} price={course.price} rating={course.rating} />
+          ))}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/app/routes/my-account.my-courses.tsx b/app/routes/my-account.my-courses.tsx
@@ -21,7 +21,7 @@ export default function MyCourses() {
   }, [])
 
   return (
-    <div className="bg-white pb-[92px] mt-[68px]">
+    <div className="bg-white min-h-screen pb-[92px] mt-[68px]">
       <AccountMenu page="my-courses" />
     </div>
   )

diff --git a/app/widgets/homepage/famous-courses.tsx b/app/widgets/homepage/famous-courses.tsx
@@ -17,16 +17,16 @@ export function FamousCourses() {
   // @ts-ignore
   const { courses } = useSelector(state => state.courses)
 
-  const [isPostsLoading, setIsPostLoading] = useState(true)
+  const [isCoursesLoading, setIsCoursesLoading] = useState(true)
 
   useEffect(() => {
     dispatch(fetchFamousCourses())
   }, [])
 
   useEffect(() => {
-    if (courses.status === 'loaded') setIsPostLoading(false)
+    if (courses.status === 'loaded') setIsCoursesLoading(false)
 
-    if (courses.status === 'loading') setIsPostLoading(true)
+    if (courses.status === 'loading') setIsCoursesLoading(true)
   })
 
   const settings = {
@@ -47,7 +47,7 @@ export function FamousCourses() {
         </Header3>
       </div>
 
-      {isPostsLoading ? (
+      {isCoursesLoading ? (
         <div className="w-full h-[570px]">
           <Spinner
             className="absolute top-1/2 left-1/2 mt-[-50px] ml-[-50px]"

diff --git a/app/widgets/my-account/account-menu.tsx b/app/widgets/my-account/account-menu.tsx
@@ -10,7 +10,7 @@ export function AccountMenu({page}: Props) {
       <Header3 className="mt-5">Мій кабінет</Header3>
 
       <div className='flex flex-row gap-2'>
-        <MenuButton to={'/my-account/courses'} className={page === 'courses' ? "text-[#1A1A1B] bg-[#C7FF80]" : "bg-[#EFEFEF] text-[#4E4E51]"}>Усі курси</MenuButton>
+        <MenuButton to={'/my-account/courses'} className={page === 'courses' ? "text-[#1A1A1B] bg-[#C7FF80]" : "bg-[#EFEFEF] text-[#4E4E51]"}>Придбане</MenuButton>
         <MenuButton to={'/my-account/archived'} className={page === 'archived' ? "text-[#1A1A1B] bg-[#C7FF80]" : "bg-[#EFEFEF] text-[#4E4E51]"}>Архівоване</MenuButton>
         <MenuButton to={'/my-account' } className={page === 'profile' ? "text-[#1A1A1B] bg-[#C7FF80]" : "bg-[#EFEFEF] text-[#4E4E51]"}>Профіль</MenuButton>
         <MenuButton to={'/my-account/my-courses' } className={page === 'my-courses' ? "text-[#1A1A1B] bg-[#C7FF80]" : "bg-[#EFEFEF] text-[#4E4E51]"}>Мої курси</MenuButton>