resources/js/components/map/List.js

   1 import React from 'react';
   2 import { Container } from 'react-bootstrap';
   3 import { useTranslation } from 'react-i18next';
   4
   5 import Item from './Item';
   6 import { useOpenSeadragon } from './OpenSeadragon';
   7 import { compareTranslation } from '../../helpers/Technique';
   8 import i18n from '../../i18n';
   9
  10 const List = () => {
  11         const { pins } = useOpenSeadragon();
  12         const { t } = useTranslation();
  13
  14         const sortedPins = React.useMemo(() => {
  15                 const compare = compareTranslation('title', i18n.language);
  16                 return pins.sort((a, b) => compare(a.technique, b.technique));
  17         }, [pins, i18n.language]);
  18
  19         if (!pins || !pins.length) return null;
  20
  21         return <Container className="mt-3">
  22                 <h2>{t('map.onThisMap')}</h2>
  23                 <ul className="pin-list">
  24                         {sortedPins.map(pin =>
  25                                 <Item key={pin.id} pin={pin} />
  26                         )}
  27                 </ul>
  28         </Container>;
  29 };
  30
  31 export default List;