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 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 { getLanguages, getTranslation } from '../../helpers/Technique';
13 import i18n from '../../i18n';
15 const Technique = () => {
16 const params = useParams();
17 const { name } = params;
19 const [error, setError] = useState(null);
20 const [loading, setLoading] = useState(true);
21 const [technique, setTechnique] = useState(null);
24 const ctrl = new AbortController();
27 .get(`/api/tech/${name}`, { signal: ctrl.signal })
31 setTechnique(response.data);
48 return <ErrorMessage error={error} />;
55 return <ErrorBoundary>
57 <title>{getTranslation(technique, 'title', i18n.language)}</title>
58 <meta name="description" content={getTranslation(technique, 'short', i18n.language)} />
60 href={`https://alttp.localhorst.tv/tech/${technique.name}`}
64 {getLanguages(technique).map(l =>
67 href={`https://alttp.localhorst.tv/tech/${technique.name}?lng=${l}`}
73 <Detail technique={technique} />
77 export default withTranslation()(Technique);