refactor: 根据登录状态修改加入按钮的变更

shared/cache/utils.ts

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { FetchQueryOptions } from 'react-query';
+import { queryClient } from './';
+
+/**
+ * 构建缓存请求
+ * TODO: 这里的类型真的不好写, 先用any来过滤内部的, 只保证外部使用ok
+ *
+ * @example
+ * const queryData = buildCachedRequest('key')((arg1, arg2) => {
+ *    return request.post(...)
+ * })
+ */
+export function buildCachedRequest<
+  R extends any,
+  F extends (...args: any) => Promise<R>
+>(prefix: string, fn: F, options?: FetchQueryOptions): F {
+  return ((...args: any) => {
+    return queryClient.fetchQuery(
+      [prefix, JSON.stringify(args)],
+      () => fn(...args),
+      options
+    );
+  }) as any;
+}

shared/index.tsx

@@ -69,6 +69,7 @@ export {
   loginWithToken,
   registerWithEmail,
   searchUserWithUniqueName,
+  checkTokenValid,
 } from './model/user';
 
 // redux

shared/model/user.ts

@@ -1,4 +1,5 @@
 import { request } from '../api/request';
+import { buildCachedRequest } from '../cache/utils';
 
 export interface UserBaseInfo {
   _id: string;
@@ -117,7 +118,9 @@ export async function getUserOnlineStatus(
  * 将会话添加到用户私信列表
  * 如果已添加则后端忽略
  */
-export async function appendUserDMConverse(converseId: string) {
+export async function appendUserDMConverse(
+  converseId: string
+): Promise<UserDMList> {
   const { data } = await request.post<UserDMList>(
     '/api/user/dmlist/addConverse',
     {
@@ -127,3 +130,17 @@ export async function appendUserDMConverse(converseId: string) {
 
   return data;
 }
+
+/**
+ * 检查Token是否可用
+ */
+export const checkTokenValid = buildCachedRequest(
+  'tokenValid',
+  async (token: string): Promise<boolean> => {
+    const { data } = await request.post<boolean>('/api/user/checkTokenValid', {
+      token,
+    });
+
+    return data;
+  }
+);

shared/utils/string-helper.ts

@@ -57,7 +57,7 @@ export function getTextColorHex(text: unknown): string {
 }
 
 /**
- * 是一个可用的字符串
+ * 是否一个可用的字符串
  * 定义为有长度的字符串
  */
 export function isValidStr(str: unknown): str is string {

web/src/routes/Invite/JoinBtn.tsx

@@ -0,0 +1,43 @@
+import { getUserJWT } from '@/utils/jwt-helper';
+import { Button } from 'antd';
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router';
+import { checkTokenValid, t, useAsync } from 'tailchat-shared';
+
+interface Props {
+  onJoinGroup: () => void;
+}
+export const JoinBtn: React.FC<Props> = React.memo((props) => {
+  const history = useHistory();
+  const { loading, value: isTokenValid } = useAsync(async () => {
+    const token = await getUserJWT();
+    const isTokenValid = await checkTokenValid(token);
+    return isTokenValid;
+  });
+
+  const handleRegister = useCallback(() => {
+    history.push(
+      `/entry/register?redirect=${encodeURIComponent(location.pathname)}`
+    );
+  }, []);
+
+  if (loading) {
+    return null;
+  }
+
+  return isTokenValid ? (
+    <Button
+      block={true}
+      type="primary"
+      size="large"
+      onClick={props.onJoinGroup}
+    >
+      {t('加入群组')}
+    </Button>
+  ) : (
+    <Button block={true} type="primary" size="large" onClick={handleRegister}>
+      {t('立即注册')}
+    </Button>
+  );
+});
+JoinBtn.displayName = 'JoinBtn';

web/src/routes/Invite/index.tsx

@@ -1,23 +1,15 @@
-import { Button, Divider } from 'antd';
+import { Divider } from 'antd';
 import React, { useCallback } from 'react';
-import { useHistory, useParams } from 'react-router';
+import { useParams } from 'react-router';
 import { InviteInfo } from './InviteInfo';
 import bgImage from '@assets/images/bg.jpg';
-import { t } from 'tailchat-shared';
+import { JoinBtn } from './JoinBtn';
 
 /**
  * 邀请界面路由
  */
 export const InviteRoute: React.FC = React.memo(() => {
-  const history = useHistory();
   const { inviteCode } = useParams<{ inviteCode: string }>();
-  const isLogin = true;
-
-  const handleRegister = useCallback(() => {
-    history.push(
-      `/entry/register?redirect=${encodeURIComponent(location.pathname)}`
-    );
-  }, []);
 
   const handleJoinGroup = useCallback(() => {
     // TODO
@@ -34,25 +26,7 @@ export const InviteRoute: React.FC = React.memo(() => {
 
         <Divider />
 
-        {isLogin ? (
-          <Button
-            block={true}
-            type="primary"
-            size="large"
-            onClick={handleJoinGroup}
-          >
-            {t('加入群组')}
-          </Button>
-        ) : (
-          <Button
-            block={true}
-            type="primary"
-            size="large"
-            onClick={handleRegister}
-          >
-            {t('立即注册')}
-          </Button>
-        )}
+        <JoinBtn onJoinGroup={handleJoinGroup} />
       </div>
     </div>
   );