Add publish date to courses & lectures

src/components/Courses/CourseCardUpcoming.tsx

@@ -17,8 +17,9 @@ const CourseCardUpcoming: React.FC<Props> = ({ course }) => {
 
   return (
     <div className="max-w-sm flex flex-col rounded overflow-hidden shadow-lg">
-      <div className="h-56 bg-green-400 text-blue-900 font-bold text-xl flex-none flex justify-center items-center">
-        <span>{t('upcomingCourse.courseComingSoon')}</span>
+      <div className="h-56 bg-green-400 text-blue-900 font-bold text-xl flex-none flex flex-col justify-center items-center">
+        <div>{t('upcomingCourse.courseComingSoon')}</div>
+        <div>{course.publish_date}</div>
       </div>
       <div className="flex-grow px-6 py-4">
         <div className="title text-xl mb-2">{title}</div>

src/components/LecturesList/index.tsx

@@ -19,6 +19,7 @@ import {
 } from './styles'
 import { ALLOWED_LECTURES_WHEN_NOT_LOGGED_IN } from '../../common/constants'
 import { Lecture } from '../../types/api.types'
+import Badge from '../General/Badge'
 
 const StyledButton = styled.button<{ isRtl: boolean }>`
   background: none;
@@ -61,7 +62,9 @@ const LectureList: React.FC<LectureListProps> = ({
     return <StyledLockIcon />
   }
   const canWatch = (index: number) =>
-    isLoggedIn || (!isLoggedIn && index < ALLOWED_LECTURES_WHEN_NOT_LOGGED_IN)
+    isLoggedIn ||
+    (!isLoggedIn && index < ALLOWED_LECTURES_WHEN_NOT_LOGGED_IN) ||
+    !sortedLectures[index].upcoming
   return (
     <>
       <StyledLectureList>
@@ -87,12 +90,22 @@ const LectureList: React.FC<LectureListProps> = ({
                 </StyledCount>
 
                 <StyledListBody>
-                  <p className={`${isRtl ? 'rtl' : 'ltr'}`}>
-                    <span className="text-gray-700">{lecture.title}</span>
-                  </p>
-                  <StyledDuration>
-                    {formatDuration(lecture.duration)}
-                  </StyledDuration>
+                  <div className="flex">
+                    <div className="flex flex-1 flex-col">
+                      <p className={`${isRtl ? 'rtl' : 'ltr'}`}>
+                        <span className="text-gray-700">{lecture.title}</span>
+                      </p>
+                      <StyledDuration>
+                        {formatDuration(lecture.duration)}
+                      </StyledDuration>
+                    </div>
+                    {lecture.upcoming && (
+                      <div className="flex">
+                        <Badge text="upcoming" color="green-500" />
+                        <Badge text={lecture.publish_date} color="pink-600" />
+                      </div>
+                    )}
+                  </div>
                 </StyledListBody>
 
                 <div>{lectureIcon(index)}</div>

src/components/LecturesList/styles.tsx

@@ -38,7 +38,7 @@ export const StyledCount = styled.div`
 `
 export const StyledListBody = styled.div`
   position: relative;
-  padding: 16px 130px 16px 105px;
+  padding: 16px 16px 16px 105px;
   :hover {
     background-color: #fff;
   }

src/pages/courses.tsx

@@ -46,6 +46,7 @@ export const pageQuery = graphql`
           slug
           level
           status
+          publish_date
           tags {
             tagName
           }

src/templates/LectureView/index.tsx

@@ -228,6 +228,8 @@ export const pageQuery = graphql`
         duration
         url
         created_at
+        upcoming
+        publish_date
       }
       resources {
         type

src/types/api.types.ts

@@ -124,6 +124,8 @@ export type Lecture = {
   position: number
   slug: string
   created_at: string
+  upcoming: boolean | null
+  publish_date: string
 }
 
 export type Course = {
@@ -142,4 +144,5 @@ export type Course = {
   resources: Resource[]
   price: number
   thumbnail: string | null
+  publish_date: string
 }