resources/js/components/pages/Technique.js

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