resources/js/components/events/Item.js

   1 import moment from 'moment';
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4 import { useTranslation } from 'react-i18next';
   5 import { Link } from 'react-router-dom';
   6
   7 import RawHTML from '../common/RawHTML';
   8 import {
   9         getLink,
  10 } from '../../helpers/Event';
  11 import {
  12         getTranslation,
  13 } from '../../helpers/Technique';
  14 import i18n from '../../i18n';
  15
  16 const Item = ({ event }) => {
  17         const { t } = useTranslation();
  18
  19         const style = React.useMemo(() => {
  20                 if (event && event.corner) {
  21                         return {
  22                                 backgroundImage: `url(${event.corner})`,
  23                         };
  24                 }
  25                 return null;
  26         }, [event && event.corner]);
  27
  28         return <li className="events-item my-3 p-2 pb-5 border rounded" style={style}>
  29                 <h3>
  30                         <Link to={getLink(event)}>
  31                                 {(event.description && getTranslation(event.description, 'title', i18n.language))
  32                                         || event.title}
  33                         </Link>
  34                 </h3>
  35                 <div className="d-flex align-items-start justify-content-start">
  36                         {event.start || event.end ?
  37                                 <div className="event-pane">
  38                                         {event.start ? <>
  39                                                 <div><small>{t('events.start')}</small></div>
  40                                                 <div className="mb-2">{moment(event.start).format('LL')}</div>
  41                                         </> : null}
  42                                         {event.end ? <>
  43                                                 <div><small>{t('events.end')}</small></div>
  44                                                 <div className="mb-2">{moment(event.end).format('LL')}</div>
  45                                         </> : null}
  46                                 </div>
  47                         : null}
  48                         {event.description?
  49                                 <div>
  50                                         <RawHTML
  51                                                 html={getTranslation(event.description, 'description', i18n.language)}
  52                                         />
  53                                 </div>
  54                         : null}
  55                 </div>
  56         </li>;
  57 };
  58
  59 Item.propTypes = {
  60         event: PropTypes.shape({
  61                 corner: PropTypes.string,
  62                 description: PropTypes.shape({
  63                 }),
  64                 end: PropTypes.string,
  65                 id: PropTypes.number,
  66                 name: PropTypes.string,
  67                 start: PropTypes.string,
  68                 title: PropTypes.string,
  69         }),
  70 };
  71
  72 export default Item;