Fixed: Entire row Link on Calendar Agenda Page

frontend/src/Calendar/Agenda/AgendaEvent.css

@@ -10,6 +10,10 @@
   }
 }
 
+.link {
+  composes: link from '~Calendar/Events/CalendarEvent.css';
+}
+
 .eventWrapper {
   display: flex;
   flex: 1 0 1px;
@@ -30,7 +34,8 @@
   border: none !important;
 }
 
-.movieTitle {
+.movieTitle,
+.genres {
   @add-mixin truncate;
 
   flex: 0 1 300px;

frontend/src/Calendar/Agenda/AgendaEvent.js

@@ -7,7 +7,6 @@ import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons, kinds } from 'Helpers/Props';
-import MovieTitleLink from 'Movie/MovieTitleLink';
 import styles from './AgendaEvent.css';
 
 class AgendaEvent extends Component {
@@ -41,6 +40,7 @@ class AgendaEvent extends Component {
       movieFile,
       title,
       titleSlug,
+      genres,
       isAvailable,
       inCinemas,
       monitored,
@@ -48,6 +48,7 @@ class AgendaEvent extends Component {
       grabbed,
       queueItem,
       showDate,
+      showMovieInformation,
       showCutoffUnmetIcon,
       longDateFormat,
       colorImpairedMode
@@ -57,13 +58,17 @@ class AgendaEvent extends Component {
     const downloading = !!(queueItem || grabbed);
     const isMonitored = monitored;
     const statusStyle = getStatusStyle(hasFile, downloading, isAvailable, isMonitored);
+    const joinedGenres = genres.slice(0, 2).join(', ');
+    const link = `/movie/${titleSlug}`;
 
     return (
       <div>
         <Link
-          className={styles.event}
-          component="div"
-          onPress={this.onPress}
+          className={classNames(
+            styles.event,
+            styles.link
+          )}
+          to={link}
         >
           <div className={styles.date}>
             {
@@ -80,12 +85,16 @@ class AgendaEvent extends Component {
             )}
           >
             <div className={styles.movieTitle}>
-              <MovieTitleLink
-                titleSlug={titleSlug}
-                title={title}
-              />
+              {title}
             </div>
 
+            {
+              showMovieInformation &&
+                <div className={styles.genres}>
+                  {joinedGenres}
+                </div>
+            }
+
             {
               !!queueItem &&
                 <span className={styles.statusIcon}>
@@ -127,6 +136,7 @@ AgendaEvent.propTypes = {
   movieFile: PropTypes.object,
   title: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
+  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
   isAvailable: PropTypes.bool.isRequired,
   inCinemas: PropTypes.string,
   monitored: PropTypes.bool.isRequired,
@@ -134,10 +144,15 @@ AgendaEvent.propTypes = {
   grabbed: PropTypes.bool,
   queueItem: PropTypes.object,
   showDate: PropTypes.bool.isRequired,
+  showMovieInformation: PropTypes.bool.isRequired,
   showCutoffUnmetIcon: PropTypes.bool.isRequired,
   timeFormat: PropTypes.string.isRequired,
   longDateFormat: PropTypes.string.isRequired,
   colorImpairedMode: PropTypes.bool.isRequired
 };
 
+AgendaEvent.defaultProps = {
+  genres: []
+};
+
 export default AgendaEvent;