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';
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';
14 const Technique = () => {
15 const params = useParams();
16 const { name } = params;
18 const [error, setError] = useState(null);
19 const [loading, setLoading] = useState(true);
20 const [technique, setTechnique] = useState(null);
23 const ctrl = new AbortController();
26 .get(`/api/tech/${name}`, { signal: ctrl.signal })
30 setTechnique(response.data);
44 window.document.title = getTranslation(technique, 'title', i18n.language);
46 }, [technique, i18n.language]);
53 return <ErrorMessage error={error} />;
60 return <ErrorBoundary>
61 <Detail technique={technique} />
65 export default withTranslation()(Technique);