]> git.localhorst.tv Git - alttp.git/blob - resources/js/pages/Techniques.js
tracker descriptions
[alttp.git] / 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);