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