github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/components/CourseCard.tsx (about)

     1  import React from 'react'
     2  import { useHistory } from 'react-router'
     3  import { EnrollmentStatus, hasEnrolled, hasNone, hasPending } from '../Helpers'
     4  import { useActions } from '../overmind'
     5  import { Course, Enrollment } from '../../proto/qf/types_pb'
     6  import CourseFavoriteButton from './CourseFavoriteButton'
     7  
     8  
     9  interface CardProps {
    10      course: Course,
    11      enrollment: Enrollment
    12  }
    13  
    14  const CardColor = [
    15      "info", // "NONE in enrollment. Shouldn't ever appear."
    16      "secondary",
    17      "primary",
    18      "success"
    19  ]
    20  
    21  const CourseCard = ({ course, enrollment }: CardProps): JSX.Element => {
    22      const actions = useActions()
    23      const history = useHistory()
    24      const status = enrollment.status
    25  
    26      const CourseEnrollmentButton = (): JSX.Element => {
    27          if (hasNone(status)) {
    28              return <div className="btn btn-primary course-button" onClick={() => actions.enroll(course.ID)}>Enroll</div>
    29          } else if (hasPending(status)) {
    30              return <div className="btn btn-secondary course-button disabled">Pending</div>
    31          }
    32          return <div className="btn btn-primary course-button" onClick={() => history.push(`/course/${enrollment.courseID}`)}>Go to Course</div>
    33      }
    34  
    35      const CourseEnrollmentStatus = (): JSX.Element | null => {
    36          if (!hasEnrolled(status)) {
    37              return null
    38          }
    39          return (
    40              <>
    41                  <CourseFavoriteButton enrollment={enrollment} style={{ "float": "right" }} />
    42                  <p className="float-sm-right mr-2">{EnrollmentStatus[status]}</p>
    43              </>
    44          )
    45      }
    46  
    47      return (
    48          <div className="card course-card">
    49              <div className={`card-header bg-${CardColor[status]} text-white`}>
    50                  {course.code}
    51                  <CourseEnrollmentStatus />
    52              </div>
    53  
    54              <div className="card-body position-relative">
    55                  <h5 className="card-title">{course.name} - {course.tag}/{course.year}</h5>
    56                  <CourseEnrollmentButton />
    57              </div>
    58          </div>
    59      )
    60  }
    61  
    62  export default CourseCard