From 32cf22c1c1125ba6c5c3a57dcabe551725bba6fe Mon Sep 17 00:00:00 2001
From: Jacob Goodwin <jacob.goodwin@gmail.com>
Date: Sat, 2 May 2020 19:01:59 -0700
Subject: [PATCH] Add click listener to course program

---
 src/components/landing/CourseProgramCard.tsx | 2 +-
 src/components/landing/Landing.scss          | 4 ++++
 src/components/landing/Landing.tsx           | 4 ++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/landing/CourseProgramCard.tsx b/src/components/landing/CourseProgramCard.tsx
index 2a84f53c..4ac33512 100644
--- a/src/components/landing/CourseProgramCard.tsx
+++ b/src/components/landing/CourseProgramCard.tsx
@@ -9,7 +9,7 @@ export interface CourseProgramProps {
   classTimeString: string;
 }
 
-const CourseProgramCard: React.FC<CourseProgramProps> = (props) => (
+const CourseProgramCard: React.FC<CourseProgramProps & React.HTMLAttributes<HTMLDivElement>> = (props) => (
   <div className="uk-card uk-card-default uk-card-body">
     <div className="uk-grid-divider uk-grid-match" data-uk-grid>
       <div className="uk-align-center uk-margin-remove uk-width-1-3@m">
diff --git a/src/components/landing/Landing.scss b/src/components/landing/Landing.scss
index 121016d9..19b5722d 100644
--- a/src/components/landing/Landing.scss
+++ b/src/components/landing/Landing.scss
@@ -83,6 +83,10 @@ $l-breakpoint: 1200px;
   }
 
   .course-program-card {
+    li {
+      cursor: pointer;
+    }
+
     .uk-slider {
       @media screen and (max-width: $m-breakpoint - 1px) {
         margin-left: 16px;
diff --git a/src/components/landing/Landing.tsx b/src/components/landing/Landing.tsx
index f0ccd724..482121c6 100644
--- a/src/components/landing/Landing.tsx
+++ b/src/components/landing/Landing.tsx
@@ -80,8 +80,8 @@ const Landing: React.FC<LandingProps> = (props) => {
               <div className="uk-position-relative uk-visible-toggle uk-dark" data-tabindex="-1">
                 <ul className="uk-slider-items uk-child-width-1-1 uk-grid">
                   {props.courses.map((course) => (
-                    <li key={course.id} >
-                      <CourseProgramCard onClick={props.onCourseSelected(course.id)} {...course} />
+                    <li key={course.id} onClick={() => props.onCourseSelected(course.id)}>
+                      <CourseProgramCard {...props} {...course} />
                     </li>) )}
                 </ul>
                 <a className="uk-position-center-left uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-previous data-uk-slider-item="previous"></a>