resources/js/components/pages/Technique.js

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