resources/js/components/pages/Technique.js

   1 import axios from 'axios';
   2 import PropTypes from 'prop-types';
   3 import React, { useEffect, useState } from 'react';
   4 import { Helmet } from 'react-helmet';
   5 import { withTranslation } from 'react-i18next';
   6 import { useParams } from 'react-router-dom';
   7
   8 import CanonicalLinks from '../common/CanonicalLinks';
   9 import ErrorBoundary from '../common/ErrorBoundary';
  10 import ErrorMessage from '../common/ErrorMessage';
  11 import Loading from '../common/Loading';
  12 import NotFound from '../pages/NotFound';
  13 import Detail from '../techniques/Detail';
  14 import { getLanguages, getMatchedLocale, getTranslation } from '../../helpers/Technique';
  15 import i18n from '../../i18n';
  16
  17 const Technique = ({ type }) => {
  18         const params = useParams();
  19         const { name } = params;
  20
  21         const [error, setError] = useState(null);
  22         const [loading, setLoading] = useState(true);
  23         const [technique, setTechnique] = useState(null);
  24
  25         useEffect(() => {
  26                 const ctrl = new AbortController();
  27                 setLoading(true);
  28                 axios
  29                         .get(`/api/pages/${type}/${name}`, { signal: ctrl.signal })
  30                         .then(response => {
  31                                 setError(null);
  32                                 setLoading(false);
  33                                 setTechnique(response.data);
  34                         })
  35                         .catch(error => {
  36                                 setError(error);
  37                                 setLoading(false);
  38                                 setTechnique(null);
  39                         });
  40                 return () => {
  41                         ctrl.abort();
  42                 };
  43         }, [name, type]);
  44
  45         if (loading) {
  46                 return <Loading />;
  47         }
  48
  49         if (error) {
  50                 return <ErrorMessage error={error} />;
  51         }
  52
  53         if (!technique) {
  54                 return <NotFound />;
  55         }
  56
  57         return <ErrorBoundary>
  58                 <Helmet>
  59                         <title>{getTranslation(technique, 'title', i18n.language)}</title>
  60                         <meta name="description" content={getTranslation(technique, 'short', i18n.language)} />
  61                 </Helmet>
  62                 <CanonicalLinks
  63                         base={`/tech/${technique.name}`}
  64                         lang={getMatchedLocale(technique, i18n.language)}
  65                         langs={getLanguages(technique)}
  66                 />
  67                 <Detail technique={technique} />
  68         </ErrorBoundary>;
  69 };
  70
  71 Technique.propTypes = {
  72         type: PropTypes.string,
  73 };
  74
  75 export default withTranslation()(Technique);