X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fpages%2FTechniques.js;fp=resources%2Fjs%2Fpages%2FTechniques.js;h=0c5d5b07343ef300433515b9f7bc2822c318f44c;hb=16662be0b3432d67307ae8c2bb798362d77bab99;hp=0000000000000000000000000000000000000000;hpb=d8ca13d8ccb5efe181198d0e5243a26c9f807aa1;p=alttp.git

diff --git a/resources/js/pages/Techniques.js b/resources/js/pages/Techniques.js
new file mode 100644
index 0000000..0c5d5b0
--- /dev/null
+++ b/resources/js/pages/Techniques.js
@@ -0,0 +1,100 @@
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
+
+import NotFound from './NotFound';
+import CanonicalLinks from '../components/common/CanonicalLinks';
+import ErrorBoundary from '../components/common/ErrorBoundary';
+import ErrorMessage from '../components/common/ErrorMessage';
+import Loading from '../components/common/Loading';
+import Overview from '../components/techniques/Overview';
+import { compareTranslation } from '../helpers/Technique';
+import i18n from '../i18n';
+
+const Techniques = ({ namespace, type }) => {
+	const [error, setError] = React.useState(null);
+	const [filter, setFilter] = React.useState({});
+	const [loading, setLoading] = React.useState(true);
+	const [techniques, setTechniques] = React.useState([]);
+
+	React.useEffect(() => {
+		const savedFilter = localStorage.getItem(`content.filter.${type}`);
+		if (savedFilter) {
+			setFilter(JSON.parse(savedFilter));
+		} else {
+			setFilter(filter => filter ? {} : filter);
+		}
+	}, [type]);
+
+	const updateFilter = React.useCallback(newFilter => {
+		localStorage.setItem(`content.filter.${type}`, JSON.stringify(newFilter));
+		setFilter(newFilter);
+	}, [type]);
+
+	React.useEffect(() => {
+		const ctrl = new AbortController();
+		if (!techniques.length) {
+			setLoading(true);
+		}
+		axios
+			.get(`/api/pages/${type}`, {
+				params: filter,
+				signal: ctrl.signal
+			})
+			.then(response => {
+				setError(null);
+				setLoading(false);
+				setTechniques(response.data.sort(compareTranslation('title', i18n.language)));
+			})
+			.catch(error => {
+				if (!axios.isCancel(error)) {
+					setError(error);
+					setLoading(false);
+					setTechniques([]);
+				}
+			});
+		return () => {
+			ctrl.abort();
+		};
+	}, [filter, namespace, type]);
+
+	React.useEffect(() => {
+		setTechniques(t => [...t].sort(compareTranslation('title', i18n.language)));
+	}, [namespace, i18n.language]);
+
+	if (loading) {
+		return <Loading />;
+	}
+
+	if (error) {
+		return <ErrorMessage error={error} />;
+	}
+
+	if (!techniques || !techniques.length) {
+		return <NotFound />;
+	}
+
+	return <ErrorBoundary>
+		<Helmet>
+			<title>{i18n.t(`${namespace}.heading`)}</title>
+			<meta name="description" content={i18n.t(`${namespace}.description`)} />
+		</Helmet>
+		<CanonicalLinks base="/tech" />
+		<Overview
+			filter={filter}
+			namespace={namespace}
+			setFilter={updateFilter}
+			techniques={techniques}
+			type={type}
+		/>
+	</ErrorBoundary>;
+};
+
+Techniques.propTypes = {
+	namespace: PropTypes.string,
+	type: PropTypes.string,
+};
+
+export default withTranslation()(Techniques);