1 import axios from 'axios';
2 import PropTypes from 'prop-types';
3 import React from 'react';
4 import { withTranslation } from 'react-i18next';
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';
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([]);
20 React.useEffect(() => {
21 const savedFilter = localStorage.getItem(`content.filter.${type}`);
23 setFilter(JSON.parse(savedFilter));
25 setFilter(filter => filter ? {} : filter);
29 const updateFilter = React.useCallback(newFilter => {
30 localStorage.setItem(`content.filter.${type}`, JSON.stringify(newFilter));
34 React.useEffect(() => {
35 const ctrl = new AbortController();
36 if (!techniques.length) {
39 window.document.title = i18n.t(`${namespace}.heading`);
41 .get(`/api/content`, {
51 setTechniques(response.data.sort(compareTranslation('title', i18n.language)));
54 if (!axios.isCancel(error)) {
63 }, [filter, namespace, type]);
65 React.useEffect(() => {
66 window.document.title = i18n.t(`${namespace}.heading`);
67 setTechniques(t => [...t].sort(compareTranslation('title', i18n.language)));
68 }, [namespace, i18n.language]);
75 return <ErrorMessage error={error} />;
78 if (!techniques || !techniques.length) {
82 return <ErrorBoundary>
86 setFilter={updateFilter}
87 techniques={techniques}
93 Techniques.propTypes = {
94 namespace: PropTypes.string,
95 type: PropTypes.string,
98 export default withTranslation()(Techniques);