improved directory structure

[alttp.git] / resources / js / pages / Technique.js

diff --git a/resources/js/pages/Technique.js b/resources/js/pages/Technique.js
new file mode 100644 (file)
index 0000000..b3c9d2b
--- /dev/null
+++ b/resources/js/pages/Technique.js
@@ -0,0 +1,122 @@
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import toastr from 'toastr';
+
+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 NotFound from '../pages/NotFound';
+import Detail from '../components/techniques/Detail';
+import Dialog from '../components/techniques/Dialog';
+import {
+       mayEditContent,
+} from '../helpers/permissions';
+import { getLanguages, getMatchedLocale, getTranslation } from '../helpers/Technique';
+import { useUser } from '../helpers/UserContext';
+import i18n from '../i18n';
+
+const Technique = ({ basepath, type }) => {
+       const params = useParams();
+       const { name } = params;
+       const user = useUser();
+
+       const [error, setError] = useState(null);
+       const [loading, setLoading] = useState(true);
+       const [technique, setTechnique] = useState(null);
+
+       const [editContent, setEditContent] = useState(null);
+       const [showContentDialog, setShowContentDialog] = useState(false);
+
+       const actions = React.useMemo(() => ({
+               editContent: mayEditContent(user) ? content => {
+                       setEditContent(content);
+                       setShowContentDialog(true);
+               } : null,
+       }), [user]);
+
+       const saveContent = React.useCallback(async values => {
+               try {
+                       const response = await axios.put(`/api/content/${values.id}`, {
+                               parent_id: technique.id,
+                               ...values,
+                       });
+                       toastr.success(i18n.t('content.saveSuccess'));
+                       setTechnique(response.data);
+                       setShowContentDialog(false);
+               } catch (e) {
+                       toastr.error(i18n.t('content.saveError'));
+               }
+       }, [technique && technique.id]);
+
+       useEffect(() => {
+               const ctrl = new AbortController();
+               setLoading(true);
+               axios
+                       .get(`/api/pages/${type}/${name}`, { signal: ctrl.signal })
+                       .then(response => {
+                               setError(null);
+                               setLoading(false);
+                               setTechnique(response.data);
+                       })
+                       .catch(error => {
+                               setError(error);
+                               setLoading(false);
+                               setTechnique(null);
+                       });
+               return () => {
+                       ctrl.abort();
+               };
+       }, [name, type]);
+
+       if (loading) {
+               return <Loading />;
+       }
+
+       if (error) {
+               return <ErrorMessage error={error} />;
+       }
+
+       if (!technique) {
+               return <NotFound />;
+       }
+
+       return <ErrorBoundary>
+               <Helmet>
+                       <title>{getTranslation(technique, 'title', i18n.language)}</title>
+                       <meta name="description" content={getTranslation(technique, 'short', i18n.language)} />
+               </Helmet>
+               {technique.image ? <Helmet>
+                       <meta property="og:image" content={technique.image} />
+                       <meta property="twitter:image" content={technique.image} />
+               </Helmet> : null}
+               {!technique.image && technique.gif ? <Helmet>
+                       <meta property="og:image" content={technique.gif} />
+                       <meta property="twitter:image" content={technique.gif} />
+               </Helmet> : null}
+               <CanonicalLinks
+                       base={`/${basepath}/${technique.name}`}
+                       lang={getMatchedLocale(technique, i18n.language)}
+                       langs={getLanguages(technique)}
+               />
+               <Detail actions={actions} technique={technique} />
+               <Dialog
+                       content={editContent}
+                       language={i18n.language}
+                       onHide={() => { setShowContentDialog(false); }}
+                       onSubmit={saveContent}
+                       show={showContentDialog}
+               />
+       </ErrorBoundary>;
+};
+
+Technique.propTypes = {
+       basepath: PropTypes.string,
+       type: PropTypes.string,
+};
+
+export default withTranslation()(Technique);