resources/js/pages/Techniques.js

   1 import axios from 'axios';
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4 import { Helmet } from 'react-helmet';
   5 import { withTranslation } from 'react-i18next';
   6
   7 import NotFound from './NotFound';
   8 import CanonicalLinks from '../components/common/CanonicalLinks';
   9 import ErrorBoundary from '../components/common/ErrorBoundary';
  10 import ErrorMessage from '../components/common/ErrorMessage';
  11 import Loading from '../components/common/Loading';
  12 import Overview from '../components/techniques/Overview';
  13 import { compareTranslation } from '../helpers/Technique';
  14 import i18n from '../i18n';
  15
  16 const Techniques = ({ namespace, type }) => {
  17         const [error, setError] = React.useState(null);
  18         const [filter, setFilter] = React.useState({});
  19         const [loading, setLoading] = React.useState(true);
  20         const [techniques, setTechniques] = React.useState([]);
  21
  22         React.useEffect(() => {
  23                 const savedFilter = localStorage.getItem(`content.filter.${type}`);
  24                 if (savedFilter) {
  25                         setFilter(JSON.parse(savedFilter));
  26                 } else {
  27                         setFilter(filter => filter ? {} : filter);
  28                 }
  29         }, [type]);
  30
  31         const updateFilter = React.useCallback(newFilter => {
  32                 localStorage.setItem(`content.filter.${type}`, JSON.stringify(newFilter));
  33                 setFilter(newFilter);
  34         }, [type]);
  35
  36         React.useEffect(() => {
  37                 const ctrl = new AbortController();
  38                 if (!techniques.length) {
  39                         setLoading(true);
  40                 }
  41                 axios
  42                         .get(`/api/pages/${type}`, {
  43                                 params: filter,
  44                                 signal: ctrl.signal
  45                         })
  46                         .then(response => {
  47                                 setError(null);
  48                                 setLoading(false);
  49                                 setTechniques(response.data.sort(compareTranslation('title', i18n.language)));
  50                         })
  51                         .catch(error => {
  52                                 if (!axios.isCancel(error)) {
  53                                         setError(error);
  54                                         setLoading(false);
  55                                         setTechniques([]);
  56                                 }
  57                         });
  58                 return () => {
  59                         ctrl.abort();
  60                 };
  61         }, [filter, namespace, type]);
  62
  63         React.useEffect(() => {
  64                 setTechniques(t => [...t].sort(compareTranslation('title', i18n.language)));
  65         }, [namespace, i18n.language]);
  66
  67         if (loading) {
  68                 return <Loading />;
  69         }
  70
  71         if (error) {
  72                 return <ErrorMessage error={error} />;
  73         }
  74
  75         if (!techniques || !techniques.length) {
  76                 return <NotFound />;
  77         }
  78
  79         return <ErrorBoundary>
  80                 <Helmet>
  81                         <title>{i18n.t(`${namespace}.heading`)}</title>
  82                         <meta name="description" content={i18n.t(`${namespace}.description`)} />
  83                 </Helmet>
  84                 <CanonicalLinks base="/tech" />
  85                 <Overview
  86                         filter={filter}
  87                         namespace={namespace}
  88                         setFilter={updateFilter}
  89                         techniques={techniques}
  90                         type={type}
  91                 />
  92         </ErrorBoundary>;
  93 };
  94
  95 Techniques.propTypes = {
  96         namespace: PropTypes.string,
  97         type: PropTypes.string,
  98 };
  99
 100 export default withTranslation()(Techniques);