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';
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';
16 const Technique = () => {
17 const params = useParams();
18 const { name } = params;
20 const [error, setError] = useState(null);
21 const [loading, setLoading] = useState(true);
22 const [technique, setTechnique] = useState(null);
25 const ctrl = new AbortController();
28 .get(`/api/tech/${name}`, { signal: ctrl.signal })
32 setTechnique(response.data);
49 return <ErrorMessage error={error} />;
56 return <ErrorBoundary>
58 <title>{getTranslation(technique, 'title', i18n.language)}</title>
59 <meta name="description" content={getTranslation(technique, 'short', i18n.language)} />
62 base={`/tech/${technique.name}`}
63 lang={getMatchedLocale(technique, i18n.language)}
64 langs={getLanguages(technique)}
66 <Detail technique={technique} />
70 export default withTranslation()(Technique);