resources/js/components/pages/Technique.js

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