Remove UNSAFE_* lifecycle methods from TitleList component

eventol/front/src/components/TitleList/__snapshots__/index.test.jsx.snap

@@ -145,7 +145,7 @@ exports[`TitleList Default without event data in request should be null when sho
 exports[`TitleList Default without event data in request should be show empty event when showEmpty is true 1`] = `
 <div
   className="title-list"
-  data-loaded={true}
+  data-loaded={false}
   id="id"
 >
   <div

eventol/front/src/components/TitleList/index.jsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React from 'react';
+import React, {useState, useEffect, useCallback} from 'react';
 import PropTypes from 'prop-types';
 
 import SliderItems from '../SliderItems';
@@ -9,79 +9,58 @@ import {parseEventToItem, emptyEventItem} from '../../utils/events';
 
 import './index.scss';
 
-export default class TitleList extends React.PureComponent {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    showEmpty: PropTypes.bool,
-    title: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-  };
+const TitleList = props => {
+  const [data, setData] = useState({results: []});
+  const [mounted, setMounted] = useState(false);
+  const {title, id, showEmpty, url} = props;
 
-  static defaultProps = {
-    showEmpty: false,
-  };
-
-  state = {
-    data: [],
-    mounted: false,
-  };
+  const loadContent = useCallback(() => {
+    const fullUrl = getApiFullUrl(url);
+    getUrl(fullUrl).then(setData);
+  }, [url, setData]);
 
-  componentDidMount() {
-    const {url} = this.props;
+  useEffect(() => {
     if (!_.isEmpty(url)) {
-      this.loadContent();
-
-      // eslint-disable-next-line react/no-did-mount-set-state
-      this.setState({mounted: true});
-    }
-  }
-
-  componentWillReceiveProps({url}) {
-    const {url: prevUrl} = this.props;
-    if (!_.isEqual(url, prevUrl) && !_.isEmpty(url)) {
-      this.setState({mounted: true}, () => {
-        this.loadContent();
-      });
+      setMounted(true);
+      loadContent();
     }
-  }
+  }, [loadContent, setMounted, url]);
 
-  loadContent() {
-    const {url} = this.props;
-    const fullUrl = getApiFullUrl(url);
-    getUrl(fullUrl).then(data => this.setState({data}));
+  const {results} = data;
+  let itemsData = '';
+  if (results) {
+    itemsData = results.map(parseEventToItem);
   }
-
-  render() {
-    const {title, id, showEmpty} = this.props;
-    const {
-      mounted,
-      data: {results},
-    } = this.state;
-    let itemsData = '';
-    if (results) {
-      itemsData = results.map(parseEventToItem);
-    }
-    if (_.isEmpty(itemsData)) {
-      if (!showEmpty) return null;
-      return (
-        <div className="title-list" data-loaded={mounted} id={id}>
-          <div className="category-title">
-            <h1>{title}</h1>
-            <SliderItems
-              itemsData={[emptyEventItem]}
-              sliderId={`${id}_empty`}
-            />
-          </div>
-        </div>
-      );
-    }
+  if (_.isEmpty(itemsData)) {
+    if (!showEmpty) return null;
     return (
       <div className="title-list" data-loaded={mounted} id={id}>
         <div className="category-title">
           <h1>{title}</h1>
-          <SliderItems itemsData={itemsData} sliderId={id} />
+          <SliderItems itemsData={[emptyEventItem]} sliderId={`${id}_empty`} />
         </div>
       </div>
     );
   }
-}
+  return (
+    <div className="title-list" data-loaded={mounted} id={id}>
+      <div className="category-title">
+        <h1>{title}</h1>
+        <SliderItems itemsData={itemsData} sliderId={id} />
+      </div>
+    </div>
+  );
+};
+
+TitleList.propTypes = {
+  id: PropTypes.string.isRequired,
+  showEmpty: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+};
+
+TitleList.defaultProps = {
+  showEmpty: false,
+};
+
+export default TitleList;