Merge pull request #255 from answerdev/feat/1.0.7/ui

fix: handle https code 50X error content

i18n/en_US.yaml

@@ -299,6 +299,8 @@ ui:
     upgrade: Answer Upgrade
     maintenance: Website Maintenance
     users: Users
+    404: HTTP Error 404
+    50X: HTTP Error 500
   notifications:
     title: Notifications
     inbox: Inbox

ui/src/pages/404/index.jsx

@@ -3,6 +3,9 @@ import { Container, Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
+// eslint-disable-next-line import/no-unresolved
+import { usePageTags } from '@/hooks';
+
 const Index = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'page_404' });
   useEffect(() => {
@@ -14,6 +17,10 @@ const Index = () => {
       pageWrap.style.display = 'block';
     };
   }, []);
+
+  usePageTags({
+    title: t('404', { keyPrefix: 'page_title' }),
+  });
   return (
     <Container
       className="d-flex flex-column justify-content-center align-items-center"

ui/src/pages/50X/index.jsx

@@ -3,6 +3,9 @@ import { Container, Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
+// eslint-disable-next-line import/no-unresolved
+import { usePageTags } from '@/hooks';
+
 const Index = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'page_50X' });
   useEffect(() => {
@@ -14,8 +17,14 @@ const Index = () => {
       pageWrap.style.display = 'block';
     };
   }, []);
+
+  usePageTags({
+    title: t('50X', { keyPrefix: 'page_title' }),
+  });
   return (
-    <Container className="d-flex flex-column justify-content-center align-items-center page-wrap">
+    <Container
+      className="d-flex flex-column justify-content-center align-items-center"
+      style={{ flex: 1 }}>
       <div
         className="mb-4 text-secondary"
         style={{ fontSize: '120px', lineHeight: 1.2 }}>

ui/src/pages/Layout/index.tsx

@@ -4,7 +4,7 @@ import { HelmetProvider } from 'react-helmet-async';
 
 import { SWRConfig } from 'swr';
 
-import { toastStore, loginToContinueStore, notFoundStore } from '@/stores';
+import { toastStore, loginToContinueStore, errorCode } from '@/stores';
 import {
   Header,
   Footer,
@@ -16,6 +16,7 @@ import {
 import { LoginToContinueModal } from '@/components/Modal';
 import { useImgViewer } from '@/hooks';
 import Component404 from '@/pages/404';
+import Component50X from '@/pages/50X';
 
 const Layout: FC = () => {
   const location = useLocation();
@@ -23,13 +24,13 @@ const Layout: FC = () => {
   const closeToast = () => {
     toastClear();
   };
-  const { visible: show404, hide: notFoundHide } = notFoundStore();
+  const { code: httpStatusCode, reset: httpStatusReset } = errorCode();
 
   const imgViewer = useImgViewer();
   const { show: showLoginToContinueModal } = loginToContinueStore();
 
   useEffect(() => {
-    notFoundHide();
+    httpStatusReset();
   }, [location]);
   return (
     <HelmetProvider>
@@ -44,7 +45,13 @@ const Layout: FC = () => {
         <div
           className="position-relative page-wrap"
           onClick={imgViewer.checkClickForImgView}>
-          {show404 ? <Component404 /> : <Outlet />}
+          {httpStatusCode === '404' ? (
+            <Component404 />
+          ) : httpStatusCode === '50X' ? (
+            <Component50X />
+          ) : (
+            <Outlet />
+          )}
         </div>
         <Toast msg={toastMsg} variant={variant} onClose={closeToast} />
         <Footer />

ui/src/stores/errorCode.ts

@@ -0,0 +1,25 @@
+import create from 'zustand';
+
+type codeType = '404' | '50X' | '';
+
+interface NotFoundType {
+  code: codeType;
+  update: (code: codeType) => void;
+  reset: () => void;
+}
+
+const notFound = create<NotFoundType>((set) => ({
+  code: '',
+  update: (code: codeType) => {
+    set(() => {
+      return { code };
+    });
+  },
+  reset: () => {
+    set(() => {
+      return { code: '' };
+    });
+  },
+}));
+
+export default notFound;

ui/src/stores/index.ts

@@ -10,7 +10,7 @@ import pageTagStore from './pageTags';
 import customizeStore from './customize';
 import themeSettingStore from './themeSetting';
 import loginToContinueStore from './loginToContinue';
-import notFoundStore from './notFound';
+import errorCode from './errorCode';
 
 export {
   toastStore,
@@ -24,5 +24,5 @@ export {
   themeSettingStore,
   seoSettingStore,
   loginToContinueStore,
-  notFoundStore,
+  errorCode,
 };

ui/src/stores/notFound.ts

@@ -1,23 +0,0 @@
-import create from 'zustand';
-
-interface NotFoundType {
-  visible: boolean;
-  show: () => void;
-  hide: () => void;
-}
-
-const notFound = create<NotFoundType>((set) => ({
-  visible: false,
-  show: () => {
-    set(() => {
-      return { visible: true };
-    });
-  },
-  hide: () => {
-    set(() => {
-      return { visible: false };
-    });
-  },
-}));
-
-export default notFound;

ui/src/utils/request.ts

@@ -2,7 +2,7 @@ import axios, { AxiosResponse } from 'axios';
 import type { AxiosInstance, AxiosRequestConfig, AxiosError } from 'axios';
 
 import { Modal } from '@/components';
-import { loggedUserInfoStore, toastStore, notFoundStore } from '@/stores';
+import { loggedUserInfoStore, toastStore, errorCode } from '@/stores';
 import { LOGGED_TOKEN_STORAGE_KEY, IGNORE_PATH_LIST } from '@/common/constants';
 import { RouteAlias } from '@/router/alias';
 import { getCurrentLang } from '@/utils/localize';
@@ -107,14 +107,14 @@ class Request {
         // 401: Re-login required
         if (status === 401) {
           // clear userinfo
-          notFoundStore.getState().hide();
+          errorCode.getState().reset();
           loggedUserInfoStore.getState().clear();
           floppyNavigation.navigateToLogin();
           return Promise.reject(false);
         }
         if (status === 403) {
           // Permission interception
-          notFoundStore.getState().hide();
+          errorCode.getState().reset();
           if (data?.type === 'url_expired') {
             // url expired
             floppyNavigation.navigate(RouteAlias.activationFailed, () => {
@@ -150,10 +150,14 @@ class Request {
           if (isIgnoredPath(IGNORE_PATH_LIST)) {
             return Promise.reject(false);
           }
-          notFoundStore.getState().show();
+          errorCode.getState().update('404');
           return Promise.reject(false);
         }
         if (status >= 500) {
+          if (isIgnoredPath(IGNORE_PATH_LIST)) {
+            return Promise.reject(false);
+          }
+          errorCode.getState().update('50X');
           console.error(
             `Request failed with status code ${status}, ${msg || ''}`,
           );