#430 - Refactor react code and use react hooks (remove all DidMount m…

…ethods)
eventoL · Oct 17, 2019 · 3a5aa2d · 3a5aa2d
1 parent 27b4fe5
commit 3a5aa2d
Show file tree

Hide file tree

Showing 9 changed files with 212 additions and 166 deletions.
diff --git a/eventol/front/src/components/Item/index.jsx b/eventol/front/src/components/Item/index.jsx
@@ -25,7 +25,8 @@ export default class Item extends React.PureComponent {
       title: PropTypes.string.isRequired,
       url: PropTypes.string,
     }),
-    sliderId: PropTypes.string.isRequired,
+    sliderId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+      .isRequired,
   };
 
   static defaultProps = {
@@ -37,31 +38,37 @@ export default class Item extends React.PureComponent {
     },
   };
 
-  getTagLink = ({name, slug}) => (
-    <a key={name.toLocaleLowerCase()} href={`${getTagUrl(slug)}`}>
-      {name}
-    </a>
-  );
-
-  handleOnClick = event => {
+  getHandleOnClick = url => event => {
     event.preventDefault();
     event.stopPropagation();
-    const {
-      data: {url},
-    } = this.props;
     if (url) {
       goToUrl(url);
     }
   };
 
+  getTagLink = ({name, slug}) => {
+    const url = getTagUrl(slug);
+    return (
+      <div
+        key={name.toLocaleLowerCase()}
+        onClick={this.getHandleOnClick(url)}
+        onKeyPress={this.getHandleOnClick(url)}
+        role="button"
+        tabIndex="0"
+      >
+        {name}
+      </div>
+    );
+  };
+
   getItem = () => {
     const {
-      data: {title, attendees, overview, tags, empty},
+      data: {title, attendees, overview, tags, empty, url},
     } = this.props;
     return (
       <div
-        onClick={this.handleOnClick}
-        onKeyPress={this.handleOnClick}
+        onClick={this.getHandleOnClick(url)}
+        onKeyPress={this.getHandleOnClick(url)}
         role="button"
         tabIndex="0"
       >

diff --git a/eventol/front/src/components/Item/index.scss b/eventol/front/src/components/Item/index.scss
@@ -53,8 +53,9 @@
       transition: opacity .25s ease .125s;
 
       &.tags {
-        a {
+        div {
           border-radius: 5px;
+          display: inline;
           padding: 2px;
 
           &:hover {

diff --git a/eventol/front/src/components/Map/index.jsx b/eventol/front/src/components/Map/index.jsx
@@ -1,53 +1,36 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 
 import Logger from '../../utils/logger';
-import {MAP_SETTINGS, MAP_LAYER} from '../../utils/constants';
+import {getMapId, loadMap} from '../../utils/map';
 
 import './index.scss';
 
-export default class Map extends React.PureComponent {
-  static propTypes = {
-    children: PropTypes.element.isRequired,
-    eventSlug: PropTypes.string.isRequired,
-    place: PropTypes.string.isRequired,
-    sliderId: PropTypes.string.isRequired,
-  };
+const Map = props => {
+  const {children, place, eventSlug, sliderId} = props;
+  const mapId = getMapId(eventSlug, sliderId);
 
-  componentDidMount() {
-    const eventSlug = this.getMapId();
+  useEffect(() => {
     try {
-      this.loadMap();
+      loadMap(place, mapId);
     } catch (e) {
       Logger.error(e);
     }
-    document.getElementById(eventSlug).classList.remove('max-size');
-  }
+    document.getElementById(mapId).classList.remove('max-size');
+  }, [mapId, place]);
 
-  getMapId() {
-    const {eventSlug, sliderId} = this.props;
-    return `${sliderId}${eventSlug}`;
-  }
+  return (
+    <div className="item max-size" id={mapId}>
+      {children}
+    </div>
+  );
+};
 
-  loadMap() {
-    const {place} = this.props;
-    const {geometry} = JSON.parse(place);
-    const eventLat = geometry.location.lat;
-    const eventLon = geometry.location.lng;
-    const mapId = this.getMapId();
-    const map = L.map(mapId, MAP_SETTINGS).setView([eventLat, eventLon], 5);
-    L.tileLayer(MAP_LAYER, {attribution: ''}).addTo(map);
-    map.attributionControl.setPrefix('');
-    L.marker([eventLat, eventLon]).addTo(map);
-  }
+Map.propTypes = {
+  children: PropTypes.node.isRequired,
+  eventSlug: PropTypes.string.isRequired,
+  place: PropTypes.string.isRequired,
+  sliderId: PropTypes.string.isRequired,
+};
 
-  render() {
-    const {children} = this.props;
-    const mapId = this.getMapId();
-    return (
-      <div className="item max-size" id={mapId}>
-        {children}
-      </div>
-    );
-  }
-}
+export default Map;
diff --git a/eventol/front/src/components/ReportTable/index.jsx b/eventol/front/src/components/ReportTable/index.jsx
@@ -21,7 +21,7 @@ const ReportTable = props => {
     totals,
   } = props;
   const columns = getColumns(table, eventsPrivateData, count, totals);
-  exportButton.updateCsv(columns);
+  if (exportButton) exportButton.updateCsv(columns);
   return (
     <ReactTable
       className="-striped -highlight"
@@ -46,7 +46,7 @@ ReportTable.propTypes = {
   data: PropTypes.arrayOf(PropTypes.shape()),
   defaultRows: PropTypes.number,
   eventsPrivateData: PropTypes.arrayOf(PropTypes.shape()),
-  exportButton: PropTypes.instanceOf(ExportButton).isRequired,
+  exportButton: PropTypes.instanceOf(ExportButton),
   fetchData: PropTypes.func.isRequired,
   isLoading: PropTypes.bool,
   pages: PropTypes.number,
@@ -59,6 +59,7 @@ ReportTable.defaultProps = {
   data: [],
   defaultRows: 0,
   eventsPrivateData: [],
+  exportButton: null,
   isLoading: true,
   pages: 0,
   table: '',

diff --git a/eventol/front/src/components/SliderItems/index.jsx b/eventol/front/src/components/SliderItems/index.jsx
@@ -34,7 +34,7 @@ export default class SliderItems extends React.PureComponent {
   getItem = itemData => {
     const {sliderId} = this.props;
     return (
-      <div key={itemData.key}>
+      <div key={itemData.key || itemData.id}>
         <Item data={itemData} sliderId={sliderId} />
       </div>
     );