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';
7 import NotFound from './NotFound';
8 import CanonicalLinks from '../common/CanonicalLinks';
9 import ErrorBoundary from '../common/ErrorBoundary';
10 import ErrorMessage from '../common/ErrorMessage';
11 import Loading from '../common/Loading';
12 import Overview from '../techniques/Overview';
13 import { compareTranslation } from '../../helpers/Technique';
14 import i18n from '../../i18n';
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([]);
22 React.useEffect(() => {
23 const savedFilter = localStorage.getItem(`content.filter.${type}`);
25 setFilter(JSON.parse(savedFilter));
27 setFilter(filter => filter ? {} : filter);
31 const updateFilter = React.useCallback(newFilter => {
32 localStorage.setItem(`content.filter.${type}`, JSON.stringify(newFilter));
36 React.useEffect(() => {
37 const ctrl = new AbortController();
38 if (!techniques.length) {
42 .get(`/api/content`, {
52 setTechniques(response.data.sort(compareTranslation('title', i18n.language)));
55 if (!axios.isCancel(error)) {
64 }, [filter, namespace, type]);
66 React.useEffect(() => {
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>
84 <title>{i18n.t(`${namespace}.heading`)}</title>
85 <meta name="description" content={i18n.t(`${namespace}.description`)} />
87 <CanonicalLinks base="/tech" />
91 setFilter={updateFilter}
92 techniques={techniques}
98 Techniques.propTypes = {
99 namespace: PropTypes.string,
100 type: PropTypes.string,
103 export default withTranslation()(Techniques);