1 import axios from 'axios';
2 import React, { useEffect, useState } from 'react';
3 import { useParams } from 'react-router-dom';
5 import ErrorBoundary from '../common/ErrorBoundary';
6 import ErrorMessage from '../common/ErrorMessage';
7 import Loading from '../common/Loading';
8 import NotFound from '../pages/NotFound';
9 import Detail from '../techniques/Detail';
11 const Technique = () => {
12 const params = useParams();
13 const { name } = params;
15 const [error, setError] = useState(null);
16 const [loading, setLoading] = useState(true);
17 const [technique, setTechnique] = useState(null);
20 const ctrl = new AbortController();
23 .get(`/api/tech/${name}`, { signal: ctrl.signal })
27 setTechnique(response.data);
28 window.document.title = response.data.title;
45 return <ErrorMessage error={error} />;
52 return <ErrorBoundary>
53 <Detail technique={technique} />
57 export default Technique;