resources/js/components/pages/Techniques.js

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