offload some page chunks

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

diff --git a/resources/js/pages/Event.js b/resources/js/pages/Event.js
index 6e1dc46badf1e4eb55e5897baea36c7d84623672..fa5dc2163c30c3432356857dbfa330fa153c28ff 100644 (file)
--- a/resources/js/pages/Event.js
+++ b/resources/js/pages/Event.js
@@ -3,7 +3,7 @@ import moment from 'moment';
 import React from 'react';
 import { Container } from 'react-bootstrap';
 import { Helmet } from 'react-helmet';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import toastr from 'toastr';
 
@@ -15,16 +15,19 @@ import Loading from '../components/common/Loading';
 import EpisodeList from '../components/episodes/List';
 import Detail from '../components/events/Detail';
 import Dialog from '../components/techniques/Dialog';
+import { hasConcluded } from '../helpers/Event';
 import {
        mayEditContent,
 } from '../helpers/permissions';
-import { useUser } from '../helpers/UserContext';
+import { getTranslation } from '../helpers/Technique';
+import { useUser } from '../hooks/user';
 import i18n from '../i18n';
 
-const Event = () => {
+export const Component = () => {
        const params = useParams();
        const { name } = params;
-       const user = useUser();
+       const { user } = useUser();
+       const { t } = useTranslation();
 
        const [error, setError] = React.useState(null);
        const [loading, setLoading] = React.useState(true);
@@ -46,13 +49,19 @@ const Event = () => {
                        setEpisodes([]);
                        return;
                }
+               const params = {
+                       event: [event.id],
+               };
+               if (hasConcluded(event)) {
+                       params.limit = 25;
+                       params.reverse = '1';
+               } else {
+                       params.after = moment().subtract(3, 'hours').toISOString();
+                       params.before = moment().add(14, 'days').toISOString();
+               }
                axios.get(`/api/episodes`, {
                        signal: controller.signal,
-                       params: {
-                               after: moment().subtract(3, 'hours').toISOString(),
-                               before: moment().add(14, 'days').toISOString(),
-                               event: [event.id],
-                       },
+                       params,
                }).then(response => {
                        setEpisodes(response.data || []);
                }).catch(e => {
@@ -68,14 +77,14 @@ const Event = () => {
                                parent_id: event.description_id,
                                ...values,
                        });
-                       toastr.success(i18n.t('content.saveSuccess'));
+                       toastr.success(t('content.saveSuccess'));
                        setEvent(event => ({
                                ...event,
                                description: response.data,
                        }));
                        setShowContentDialog(false);
                } catch (e) {
-                       toastr.error(i18n.t('content.saveError'));
+                       toastr.error(t('content.saveError'));
                }
        }, [event && event.description_id]);
 
@@ -125,13 +134,27 @@ const Event = () => {
 
        return <ErrorBoundary>
                <Helmet>
-                       <title>{event.title}</title>
+                       <title>
+                               {(event.description && getTranslation(event.description, 'title', i18n.language))
+                                       || event.title}
+                       </title>
                </Helmet>
+               {event.description ? <Helmet>
+                       <meta
+                               name="description"
+                               content={getTranslation(event.description, 'short', i18n.language)}
+                       />
+               </Helmet> : null}
                <CanonicalLinks base={`/events/${event.name}`} />
                <Container>
                        <Detail actions={actions} event={event} />
                        {episodes.length ? <>
-                               <h2>{i18n.t('events.upcomingEpisodes')}</h2>
+                               <h2 className="mt-4">
+                                       {t(hasConcluded(event)
+                                               ? 'events.pastEpisodes'
+                                               : 'events.upcomingEpisodes'
+                                       )}
+                               </h2>
                                <EpisodeList episodes={episodes} />
                        </> : null}
                </Container>
@@ -144,5 +167,3 @@ const Event = () => {
                />
        </ErrorBoundary>;
 };
-
-export default withTranslation()(Event);