X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fpages%2FTechniques.js;h=a89c3a252e01f560449110a2739217b2487e6d70;hb=18cd02860ba7889360ce3547b44faa0daa807a5e;hp=9334155a92ae284310726e8baa650d7f6e4592e7;hpb=6c51a1601e74bc822ccafe984d525d0e9a35ca28;p=alttp.git

diff --git a/resources/js/components/pages/Techniques.js b/resources/js/components/pages/Techniques.js
index 9334155..a89c3a2 100644
--- a/resources/js/components/pages/Techniques.js
+++ b/resources/js/components/pages/Techniques.js
@@ -1,5 +1,7 @@
 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';
@@ -10,36 +12,59 @@ import Overview from '../techniques/Overview';
 import { compareTranslation } from '../../helpers/Technique';
 import i18n from '../../i18n';
 
-const Techniques = () => {
+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();
-		setLoading(true);
-		window.document.title = i18n.t('techniques.heading');
+		if (!techniques.length) {
+			setLoading(true);
+		}
 		axios
-			.get(`/api/tech`, { signal: ctrl.signal })
+			.get(`/api/content`, {
+				params: {
+					type,
+					...filter,
+				},
+				signal: ctrl.signal
+			})
 			.then(response => {
 				setError(null);
 				setLoading(false);
 				setTechniques(response.data.sort(compareTranslation('title', i18n.language)));
 			})
 			.catch(error => {
-				setError(error);
-				setLoading(false);
-				setTechniques([]);
+				if (!axios.isCancel(error)) {
+					setError(error);
+					setLoading(false);
+					setTechniques([]);
+				}
 			});
 		return () => {
 			ctrl.abort();
 		};
-	}, []);
+	}, [filter, namespace, type]);
 
 	React.useEffect(() => {
-		window.document.title = i18n.t('techniques.heading');
 		setTechniques(t => [...t].sort(compareTranslation('title', i18n.language)));
-	}, [i18n.language]);
+	}, [namespace, i18n.language]);
 
 	if (loading) {
 		return <Loading />;
@@ -54,8 +79,23 @@ const Techniques = () => {
 	}
 
 	return <ErrorBoundary>
-		<Overview techniques={techniques} />
+		<Helmet>
+			<title>{i18n.t(`${namespace}.heading`)}</title>
+			<meta name="description" content={i18n.t(`${namespace}.description`)} />
+		</Helmet>
+		<Overview
+			filter={filter}
+			namespace={namespace}
+			setFilter={updateFilter}
+			techniques={techniques}
+			type={type}
+		/>
 	</ErrorBoundary>;
 };
 
+Techniques.propTypes = {
+	namespace: PropTypes.string,
+	type: PropTypes.string,
+};
+
 export default withTranslation()(Techniques);