fix: account

packages/datasource/src/index.ts

@@ -0,0 +1,6 @@
+import * as form from './form';
+
+export * as api from './api';
+export { useApiErrorListener } from './api/events';
+
+export const getFormData = () => form;

src/components/errorPage/ErrorPage.component.js

@@ -2,43 +2,25 @@
 // https://nextjs.org/docs/advanced-features/custom-error-page
 // https://github.com/vercel/next.js/blob/canary/packages/next/pages/_error.tsx
 
-import * as R from 'ramda';
-import React, { useEffect } from 'react';
+import React, {useEffect, useState} from 'react';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 import { useRouter } from 'next/router';
 
 import * as Styled from './errorPage.styled';
-import Svg403 from './403.svg';
-import Svg404 from './404.svg';
-import Svg500 from './500.svg';
 import { CommunityHead } from '~/components';
 import { CoreLayout } from '~/layouts';
-
-const icons = {
-  403: Svg403,
-  404: Svg404,
-  500: Svg500,
-};
-
-const errorMsgs = {
-  403: '抱歉，您没有权限访问该页面',
-  404: '您访问的页面不存在',
-  500: '服务器异常，请稍后重试',
-};
+import ErrorStatus from "~/components/errorPage/ErrorStatus";
 
 const ErrorPage = ({ statusCode, errorMsg, error = undefined }) => {
   const router = useRouter();
-  const Icon = R.propOr(icons[500], statusCode)(icons);
-
+  const [returnToHomepageLoading, setReturnToHomepageLoading] = useState(false)
   useEffect(() => {
     if (error) {
       console.error(error);
     }
   }, [error]);
 
-  errorMsg = errorMsg || R.propOr('未知错误，请稍后重试', statusCode)(errorMsgs);
-
   const headProps = {
     description: '',
     keyword: '',
@@ -48,8 +30,11 @@ const ErrorPage = ({ statusCode, errorMsg, error = undefined }) => {
   const buttonProps = {
     type: 'primary',
     icon: <ArrowLeftOutlined />,
-    onClick: () => {
-      router.push('/community', '/');
+    loading: returnToHomepageLoading,
+    onClick: async () => {
+      setReturnToHomepageLoading(true)
+      await router.push('/community', '/')
+      setReturnToHomepageLoading(false)
     },
   };
 
@@ -58,10 +43,7 @@ const ErrorPage = ({ statusCode, errorMsg, error = undefined }) => {
       <CommunityHead {...headProps} />
 
       <CoreLayout MainWrapper={Styled.Container}>
-        <Styled.IconWrapper>
-          <Icon />
-        </Styled.IconWrapper>
-        <Styled.Message>{errorMsg}</Styled.Message>
+        <ErrorStatus statusCode={statusCode} errorMsg={errorMsg} />
         <Button {...buttonProps}>返回首页</Button>
       </CoreLayout>
     </>

src/components/errorPage/ErrorStatus.styled.ts

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import { mixins } from '@tidb-community/ui';
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+`;
+
+export const Main = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+`;
+
+export const IconWrapper = styled.div`
+  svg {
+    width: 30vw;
+    max-width: 280px;
+    min-width: 160px;
+  }
+`;
+
+export const Message = styled.div`
+  ${mixins.typography('p1')};
+  margin: 1.5rem 0 1rem;
+`;

src/components/errorPage/ErrorStatus.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+
+import * as Styled from './ErrorStatus.styled'
+import Svg403 from './403.svg';
+import Svg404 from './404.svg';
+import Svg500 from './500.svg';
+
+export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+  statusCode?: number
+  errorMsg?: React.ReactNode
+}
+
+const icons = {
+  403: Svg403,
+  404: Svg404,
+  500: Svg500,
+};
+
+const errorMessages = {
+  403: '抱歉，您没有权限访问该页面',
+  404: '您访问的页面不存在',
+  500: '服务器异常，请稍后重试',
+};
+
+const ErrorStatus: React.FC<IProps> = (props) => {
+  const {statusCode, errorMsg, ...rest} = props
+
+  const statusCodeOutput = props.statusCode ?? 500
+  const errorMsgOutput = props.errorMsg ?? errorMessages[statusCodeOutput]
+  const Icon = icons[statusCodeOutput]
+
+  return (
+    <Styled.Container {...rest}>
+      <Styled.Main>
+        <Styled.IconWrapper>
+          <Icon />
+        </Styled.IconWrapper>
+        <Styled.Message>{errorMsgOutput}</Styled.Message>
+      </Styled.Main>
+    </Styled.Container>
+  )
+}
+
+export default ErrorStatus

src/components/errorPage/errorPage.styled.js

@@ -8,16 +8,3 @@ export const Container = styled.div`
   flex-direction: column;
   flex: 1;
 `;
-
-export const IconWrapper = styled.div`
-  svg {
-    width: 30vw;
-    max-width: 280px;
-    min-width: 160px;
-  }
-`;
-
-export const Message = styled.div`
-  ${mixins.typography('p1')};
-  margin: 1.5rem 0 1rem;
-`;

src/hooks/account.ts

@@ -0,0 +1,63 @@
+import useSWR from "swr";
+import axios, {AxiosResponse} from "axios";
+import {useEffect} from "react";
+
+export type TMe = {
+  "detail": string // "成功",
+  "data": {
+    "id": number // 3699,
+    "openid": string // "",
+    "username": string // "cw1997",
+    "avatar_url": string // "https://asktug.com/letter_avatar_proxy/v4/letter/c/e5b9ba/50.png",
+    "is_staff": boolean // false
+  }
+}
+
+const accountsBaseUrl = process.env.NEXT_PUBLIC_ACCOUNTS_BASE_URL;
+//const homeUrl = process.env.NEXT_PUBLIC_HOME_URL;
+const loginUrl = `${accountsBaseUrl}/login`;
+//const logoutUrl = `${accountsBaseUrl}/logout`;
+
+export const login = (redirectUrl?: string) => {
+  const { location } = window;
+  location.href = `${loginUrl}?redirect_to=${encodeURIComponent(redirectUrl ?? window.location.href)}`;
+}
+
+/*export const logout = (redirectUrl?: string) => {
+  const { location } = window;
+  redirectUrl = redirectUrl ?? this.isAuthRequired ? homeUrl : location.href;
+  location.href = `${logoutUrl}?redirect_to=${encodeURIComponent(redirectUrl)}`;
+};*/
+
+const fetcher = async (): Promise<AxiosResponse<TMe>> => {
+  const axiosInstance = axios.create({
+    baseURL: process.env.NEXT_PUBLIC_API_BASE_URL ?? '',
+    withCredentials: true,
+  })
+  const result = await axiosInstance.get<TMe>('/api/me')
+  return result
+}
+
+export const useAccount = (requireAuth = true) => {
+  const swrResponse = useSWR(['account'], fetcher, {
+    revalidateOnReconnect: true,
+    revalidateOnFocus: true,
+  })
+  useEffect(() => {
+    if (requireAuth && !swrResponse.isValidating) {
+      if (swrResponse.data?.status !== 200 || swrResponse.error) {
+        login()
+      }
+    }
+  }, [requireAuth, swrResponse.isValidating, swrResponse.data?.status, swrResponse.error])
+  return swrResponse
+}
+
+export const useIsLoggedIn = (): null|boolean => {
+  const swrResponse = useSWR(['account'], fetcher, {
+    revalidateOnReconnect: true,
+    revalidateOnFocus: true,
+  })
+  if (swrResponse.isValidating) return null
+  return swrResponse.data?.status === 200
+}

src/layouts/CoreLayout/CoreLayout.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import type { FC } from 'react';
+import Image from 'next/image'
+import { Footer, Header } from '@pingcap-inc/tidb-community-site-components';
+
+import * as Styled from './site.styled';
+import beianIconImage from './beian.png'
+import {ActivityBanner} from "../../../packages/ui";
+import * as bannerData from "~/data/banner";
+
+export interface IProps {
+  MainWrapper?: FC;
+  backgroundColor?: string;
+}
+
+const CoreLayout: FC<IProps> = ({ MainWrapper = Styled.Main, backgroundColor, children }) => {
+  const currentYear = new Date().getFullYear();
+  return (
+    <Styled.Container style={{ backgroundColor }}>
+      <ActivityBannerComponent />
+      <Header />
+      <MainWrapper>{children}</MainWrapper>
+      <Footer
+        copyright={`©${currentYear} TiDB Community`}
+        icp="京ICP备16046278号-7"
+        icpUrl="https://beian.miit.gov.cn"
+        number={
+          (
+            <span>
+              <Image {...beianIconImage} alt="beian" />
+              京公网安备 11010802039111号
+            </span>
+          ) as any
+        }
+        numberUrl="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802039111"
+      />
+    </Styled.Container>
+  );
+};
+
+const ActivityBannerComponent = () => {
+  return (
+    <ActivityBanner
+      // backgroundColor={'#2c2c2c'}
+      style={{backgroundImage: 'linear-gradient(to right, #6E545B, #2C2C2C, #6E545B)'}}
+      text={(
+        <>
+          <svg
+            style={{fill: '#FFF'}}
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="8486"
+            width="20"
+            height="20"
+          >
+            <path
+              d="M848 359.3H627.7L825.8 109c4.1-5.3 0.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3 0.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"
+              p-id="8487"
+            ></path>
+          </svg>
+          {bannerData.text}
+        </>
+      )}
+      // backgroundImage={'https://tidb.net/images/activity/banner.svg'}
+      // buttonImage={'https://tidb.net/images/activity/button.svg'}
+      link={bannerData.link}
+      onClick={undefined}
+      // onClick={() => onNavClick({ link: 'https://tidb.net/blog', target: '_blank' })}
+    />
+  );
+};
+
+export default CoreLayout;

src/layouts/CoreLayout/index.ts

@@ -0,0 +1 @@
+export { default } from './CoreLayout';