add helmet

[alttp.git] / resources / js / components / pages / AosFront.js

diff --git a/resources/js/components/pages/AosFront.js b/resources/js/components/pages/AosFront.js
index d308f7d6b2ca3b349a9e1a0c3854cd56cd10c85c..9651110d3c80e134e88cb73e4de8472ea09c0019 100644 (file)
--- a/resources/js/components/pages/AosFront.js
+++ b/resources/js/components/pages/AosFront.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Button, Col, Container, Row } from 'react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
 
 import Icon from '../common/Icon';
-import i18n from '../../i18n';
 
 const authEndpoint = 'https://discord.com/oauth2/authorize';
 const clientId = '951113702839549982';
@@ -11,10 +11,13 @@ const botUrl = `${authEndpoint}?client_id=${clientId}&scope=bot%20applications.c
 const commandUrl = `${authEndpoint}?client_id=${clientId}&scope=applications.commands`;
 
 const AosFront = () => {
-       React.useEffect(() => {
-               window.document.title = 'Aos';
-       }, []);
+       const { t } = useTranslation();
+
        return <Container>
+               <Helmet>
+                       <title>AoS</title>
+                       <meta name="description" content="Castlevania: Aria of Sorrow" />
+               </Helmet>
                <div className="my-5 text-center">
                        <h1>Castlevania: Aria of Sorrow</h1>
                </div>
@@ -28,7 +31,7 @@ const AosFront = () => {
                                >
                                        <Icon.DISCORD />
                                        {' '}
-                                       {i18n.t('aos.randoDiscord')}
+                                       {t('aos.randoDiscord')}
                                </Button>
                        </Col>
                        <Col className="text-center mb-3" sm={6} md={4}>
@@ -38,7 +41,7 @@ const AosFront = () => {
                                        target="_blank"
                                        variant="primary"
                                >
-                                       {i18n.t('aos.randoWeb')}
+                                       {t('aos.randoWeb')}
                                </Button>
                        </Col>
                        <Col className="text-center mb-3" sm={6} md={4}>
@@ -50,7 +53,7 @@ const AosFront = () => {
                                >
                                        <Icon.DISCORD />
                                        {' '}
-                                       {i18n.t('aos.tourneyDiscord')}
+                                       {t('aos.tourneyDiscord')}
                                </Button>
                        </Col>
                        <Col className="text-center mb-3" sm={6} md={4}>
@@ -62,7 +65,7 @@ const AosFront = () => {
                                >
                                        <Icon.DISCORD />
                                        {' '}
-                                       {i18n.t('aos.inviteBot')}
+                                       {t('aos.inviteBot')}
                                </Button>
                        </Col>
                        <Col className="text-center mb-3" sm={6} md={4}>
@@ -74,11 +77,11 @@ const AosFront = () => {
                                >
                                        <Icon.DISCORD />
                                        {' '}
-                                       {i18n.t('aos.inviteCommand')}
+                                       {t('aos.inviteCommand')}
                                </Button>
                        </Col>
                </Row>
        </Container>;
 };
 
-export default withTranslation()(AosFront);
+export default AosFront;