From 6390c7630d09905dc9ba1a8edc28719b4c0132fe Mon Sep 17 00:00:00 2001
From: "haitao(lj)" <haitao@sifou.com>
Date: Fri, 9 Dec 2022 16:12:09 +0800
Subject: [PATCH] fix(install,maintenance): et the page title correctly

---
 ui/src/pages/Install/index.tsx     | 157 ++++++++++++++++-------------
 ui/src/pages/Maintenance/index.tsx |  35 +++----
 2 files changed, 103 insertions(+), 89 deletions(-)

diff --git a/ui/src/pages/Install/index.tsx b/ui/src/pages/Install/index.tsx
index a06b3892..70674def 100644
--- a/ui/src/pages/Install/index.tsx
+++ b/ui/src/pages/Install/index.tsx
@@ -1,9 +1,8 @@
-/* eslint-disable prettier/prettier */
 import { FC, useState, useEffect } from 'react';
 import { Container, Row, Col, Card, Alert } from 'react-bootstrap';
 import { useTranslation, Trans } from 'react-i18next';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
 
-import { usePageTags } from '@/hooks';
 import type { FormDataType } from '@/common/interface';
 import {
   dbCheck,
@@ -224,7 +223,7 @@ const Index: FC = () => {
         });
         if (res && res.config_file_exist) {
           if (res.db_connection_success) {
-            setStep(6)
+            setStep(6);
           } else {
             setStep(7);
           }
@@ -239,87 +238,101 @@ const Index: FC = () => {
     configYmlCheck();
   }, []);
 
-  usePageTags({
-    title: t('install', { keyPrefix: 'page_title' })
-  });
   if (loading) {
     return <div />;
   }
 
   return (
-    <div className="bg-f5 py-5 flex-grow-1">
-      <Container className='py-3'>
-        <Row className="justify-content-center">
-          <Col lg={6}>
-            <h2 className="mb-4 text-center">{t('title')}</h2>
-            <Card>
-              <Card.Body>
-                {errorData?.msg && (
-                  <Alert variant="danger">{errorData?.msg}</Alert>
-                )}
+    <HelmetProvider>
+      <Helmet>
+        <title>{t('install', { keyPrefix: 'page_title' })}</title>
+      </Helmet>
+      <div className="bg-f5 py-5 flex-grow-1">
+        <Container className="py-3">
+          <Row className="justify-content-center">
+            <Col lg={6}>
+              <h2 className="mb-4 text-center">{t('title')}</h2>
+              <Card>
+                <Card.Body>
+                  {errorData?.msg && (
+                    <Alert variant="danger">{errorData?.msg}</Alert>
+                  )}
 
-                <FirstStep
-                  visible={step === 1}
-                  data={formData.lang}
-                  changeCallback={handleChange}
-                  nextCallback={handleStep}
-                />
+                  <FirstStep
+                    visible={step === 1}
+                    data={formData.lang}
+                    changeCallback={handleChange}
+                    nextCallback={handleStep}
+                  />
 
-                <SecondStep
-                  visible={step === 2}
-                  data={formData}
-                  changeCallback={handleChange}
-                  nextCallback={handleStep}
-                />
+                  <SecondStep
+                    visible={step === 2}
+                    data={formData}
+                    changeCallback={handleChange}
+                    nextCallback={handleStep}
+                  />
 
-                <ThirdStep
-                  visible={step === 3}
-                  nextCallback={handleStep}
-                  errorMsg={errorData}
-                />
+                  <ThirdStep
+                    visible={step === 3}
+                    nextCallback={handleStep}
+                    errorMsg={errorData}
+                  />
 
-                <FourthStep
-                  visible={step === 4}
-                  data={formData}
-                  changeCallback={handleChange}
-                  nextCallback={handleStep}
-                />
+                  <FourthStep
+                    visible={step === 4}
+                    data={formData}
+                    changeCallback={handleChange}
+                    nextCallback={handleStep}
+                  />
 
-                <Fifth visible={step === 5} siteUrl={formData.site_url.value} />
-                {step === 6 && (
-                  <div>
-                    <h5>{t('warn_title')}</h5>
-                    <p>
-                      <Trans i18nKey="install.warn_description" components={{ 1: <code />}} />
-                      {' '}
-                      <Trans i18nKey="install.install_now">
-                        You may try <a href="###" onClick={e => handleInstallNow(e)}>installing now</a>.
-                      </Trans>
-                    </p>
-                  </div>
-                )}
+                  <Fifth
+                    visible={step === 5}
+                    siteUrl={formData.site_url.value}
+                  />
+                  {step === 6 && (
+                    <div>
+                      <h5>{t('warn_title')}</h5>
+                      <p>
+                        <Trans
+                          i18nKey="install.warn_description"
+                          components={{ 1: <code /> }}
+                        />{' '}
+                        <Trans i18nKey="install.install_now">
+                          You may try{' '}
+                          <a href="###" onClick={(e) => handleInstallNow(e)}>
+                            installing now
+                          </a>
+                          .
+                        </Trans>
+                      </p>
+                    </div>
+                  )}
 
-                {step === 7 && (
-                  <div>
-                    <h5>{t('db_failed')}</h5>
-                    <p>
-                      <Trans i18nKey="install.db_failed_description" components={{ 1: <code />}} />
-                    </p>
-                  </div>
-                )}
+                  {step === 7 && (
+                    <div>
+                      <h5>{t('db_failed')}</h5>
+                      <p>
+                        <Trans
+                          i18nKey="install.db_failed_description"
+                          components={{ 1: <code /> }}
+                        />
+                      </p>
+                    </div>
+                  )}
 
-                {step === 8  && (
-                  <div>
-                    <h5>{t('installed')}</h5>
-                    <p>{t('installed_description')}</p>
-                  </div>
-                )}
-              </Card.Body>
-            </Card>
-          </Col>
-        </Row>
-      </Container>
-    </div>
+                  {step === 8 && (
+                    <div>
+                      <h5>{t('installed')}</h5>
+                      <p>{t('installed_description')}</p>
+                    </div>
+                  )}
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    </HelmetProvider>
   );
 };
 
diff --git a/ui/src/pages/Maintenance/index.tsx b/ui/src/pages/Maintenance/index.tsx
index 25a208a0..905f5ad7 100644
--- a/ui/src/pages/Maintenance/index.tsx
+++ b/ui/src/pages/Maintenance/index.tsx
@@ -1,28 +1,29 @@
 import { Container } from 'react-bootstrap';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 
-import { usePageTags } from '@/hooks';
-
 const Index = () => {
   const { t } = useTranslation('translation', {
     keyPrefix: 'page_maintenance',
   });
-  usePageTags({
-    title: t('maintenance', { keyPrefix: 'page_title' }),
-  });
   return (
-    <div className="bg-f5">
-      <Container
-        className="d-flex flex-column justify-content-center align-items-center"
-        style={{ minHeight: '100vh' }}>
-        <div
-          className="mb-4 text-secondary"
-          style={{ fontSize: '120px', lineHeight: 1.2 }}>
-          (=‘_‘=)
-        </div>
-        <div className="text-center mb-4">{t('desc')}</div>
-      </Container>
-    </div>
+    <HelmetProvider>
+      <Helmet>
+        <title>{t('maintenance', { keyPrefix: 'page_title' })}</title>
+      </Helmet>
+      <div className="bg-f5">
+        <Container
+          className="d-flex flex-column justify-content-center align-items-center"
+          style={{ minHeight: '100vh' }}>
+          <div
+            className="mb-4 text-secondary"
+            style={{ fontSize: '120px', lineHeight: 1.2 }}>
+            (=‘_‘=)
+          </div>
+          <div className="text-center mb-4">{t('desc')}</div>
+        </Container>
+      </div>
+    </HelmetProvider>
   );
 };