#463 - Fix validateDOMNesting

eventoL · Nov 12, 2018 · b88f129 · b88f129
1 parent edf6590
commit b88f129
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 38 deletions.
diff --git a/eventol/front/src/components/Item/index.jsx b/eventol/front/src/components/Item/index.jsx
@@ -2,47 +2,62 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ItemMap from '../ItemMap';
 
-import {getTagUrl} from '../../utils/urls';
+import {getTagUrl, goToUrl} from '../../utils/urls';
 
 import './index.scss';
 
 
-const Item = props => {
-  const {
-    title, url, attendees, overview, backdrop, tags,
-  } = props;
-  if (!backdrop) return <ItemMap {...props} />;
-  return (
-    <div className='item' style={{backgroundImage: `url(${backdrop})`}}>
-      <a href={url}>
-        <div className='overlay'>
-          <div className='title'>
-            {title}
-          </div>
-          { attendees !== undefined && (
-            <div className='rating'>
-              {`${gettext('Attendees')}: ${attendees}`}
-            </div>
-          )}
-          { tags !== undefined && (
-            <div className='rating tags'>
-              {gettext('Tags')}: {tags.map(({name, slug}, index) => <a href={`${getTagUrl(slug)}`} key={index}>{name}</a>)}
-              {/*TODO: move map to function*/}
+export default class Item extends React.PureComponent {
+  static propTypes = {
+    attendees: PropTypes.number.isRequired,
+    overview: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    backdrop: PropTypes.string,
+  };
+
+  static defaultProps = {
+    backdrop: null,
+  };
+
+  getTagLink = ({name, slug}) => (
+    <a href={`${getTagUrl(slug)}`} key={name.toLocaleLowerCase()}>
+      {name}
+    </a>
+  )
+
+  goTo = () => {
+    const {url} = this.props;
+    goToUrl(url);
+  }
+
+  render(){
+    const {
+      title, attendees, overview, backdrop, tags,
+    } = this.props;
+    if (!backdrop) return <ItemMap {...this.props} />;
+    return (
+      <div className='item' style={{backgroundImage: `url(${backdrop})`}}>
+        <div onClick={this.goTo} onKeyPress={this.goTo} role='button' tabIndex='0'>
+          <div className='overlay'>
+            <div className='title'>
+              {title}
             </div>
-          )}
-          <div className='plot'>{overview}</div>
+            { attendees !== undefined && (
+              <div className='rating'>
+                {`${gettext('Attendees')}: ${attendees}`}
+              </div>
+            )}
+            { tags !== undefined && (
+              <div className='rating tags'>
+                {/* eslint-disable-next-line react/jsx-one-expression-per-line */}
+                {gettext('Tags')}: {tags.map(this.getTagLink)}
+              </div>
+            )}
+            <div className='plot'>{overview}</div>
+          </div>
         </div>
-      </a>
-    </div>
-  );
-};
-
-Item.propTypes = {
-  attendees: PropTypes.number,
-  backdrop: PropTypes.string,
-  overview: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string,
-};
-
-export default Item;
+      </div>
+    );
+  }
+}
diff --git a/eventol/front/src/utils/urls.js b/eventol/front/src/utils/urls.js
@@ -5,3 +5,7 @@ export const WS_URL = `ws://${window.location.host}/`;
 export const EVENTS_WS_URL = `${WS_URL}updates/events/`;
 
 export const getTagUrl = slug => `/tags/${slug}`;
+
+export const goToUrl = url => {
+  window.location.href = url;
+};