Merge pull request #2 from Spencer17x/main

feat: 修复vite demo导入umd方式

demo.md

@@ -5,8 +5,4 @@
 $ yarn 
 # 运行
 $ yarn dev
-```
-
-# 注意
-
-需要将 demo 中 import * as QNIM from 'qnweb-im' 改为 import * as QNIM from 'path/qnweb-im.umd.js' 才可以运行
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qnweb-im-demo",
-  "version": "0.0.0",
+  "version": "1.0.0-beta",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -25,4 +25,4 @@
     "typescript": "^4.3.2",
     "vite": "^2.4.2"
   }
-}
+}

src/hooks/useInitIM.ts

@@ -1,4 +1,3 @@
-import * as QNIM from 'qnweb-im';
 import { useContext, useEffect, useRef, useState } from 'react';
 import { storeContext } from '../store';
 
@@ -14,7 +13,7 @@ const useInitIM = () => {
     if (!state.im) {
       console.log('init');
       const initIM = QNIM.init({
-        appid: 'dxdjbunzmxiu',
+        appid: 'dxdjbunzmxiu'
       });
       setIsWatchIM(true);
       IM.current = initIM;
@@ -27,7 +26,7 @@ const useInitIM = () => {
         const im = IM.current;
         if (im && im.isReady && im.isReady()) {
           dispatch({
-            type: 'updateIM',
+            type: 'setIM',
             payload: im
           });
         }

src/hooks/useMonitorLogin.ts

@@ -2,43 +2,58 @@ import { Modal } from 'antd';
 import { useContext, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { storeContext } from '../store';
+import { LoginStatus } from '../types/store';
 
 /**
  * 监听登录状态
  */
 const useMonitorLogin = () => {
   const history = useHistory();
-  const { state } = useContext(storeContext);
+  const { state, dispatch } = useContext(storeContext);
 
   useEffect(() => {
-    if (!state.im) return;
-    state.im.on({
-      /**
-       * 登录成功
-       * @param response
-       */
-      loginSuccess(response: any) {
-        console.log('loginSuccess response', response);
-        history.push('/home');
-      },
-      /**
-       * 登录失败
-       * @param error
-       */
-      loginFail(error: any) {
-        Modal.error({
-          title: 'loginFail',
-          content: JSON.stringify(error)
+    /**
+     * 登录成功
+     * @param response
+     */
+    function loginSuccess(response: any) {
+      dispatch({
+        type: 'setLogin',
+        payload: LoginStatus.Logged
+      });
+      console.log('loginSuccess', response);
+      history.push('/home');
+    }
+
+    /**
+     * 登录失败
+     * @param error
+     */
+    function loginFail(error: any) {
+      dispatch({
+        type: 'setLogin',
+        payload: LoginStatus.NotLogged
+      });
+      Modal.error({
+        title: 'loginFail',
+        content: JSON.stringify(error)
+      });
+    }
+
+    if (state.im) {
+      state.im.on({
+        loginSuccess,
+        loginFail
+      });
+    }
+    return () => {
+      if (state.im) {
+        state.im.off({
+          loginSuccess,
+          loginFail
         });
-      },
-      /**
-       * 可监听登录信息或进度：
-       * @param message
-       */
-      loginMessage(message: any) {
-        console.log('loginMessage', message);
       }
-    });
+    };
   }, [state.im]);
 };
 

src/main.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import IRouter from './IRouter';
 import Store from './store';
+import './sdk/qnweb-im.umd';
 import 'antd/dist/antd.css';
 
 ReactDOM.render(

src/pages/login/index.tsx

@@ -1,19 +1,22 @@
-import React, { useContext, useState } from 'react';
 import { Button, Input, message, Modal } from 'antd';
+import React, { useContext, useState } from 'react';
 import useMonitorLogin from '../../hooks/useMonitorLogin';
 import { storeContext } from '../../store';
-import * as QNIM from 'qnweb-im';
 import { LoginInfo } from '../../types';
+import { LoginStatus } from '../../types/store';
 import css from './index.module.scss';
 
 const Login: React.FC<{}> = props => {
 
-  const { state } = useContext(storeContext);
+  const demoVersion = __VERSION__;
+
+  const { state, dispatch } = useContext(storeContext);
   const [loginInfo, setLoginInfo] = useState<LoginInfo>({
     username: '',
     password: ''
   });
   const [status, setStatus] = useState(0); // 0-登录、1-注册
+  const [registerLoading, setRegisterLoading] = useState(false); // 注册 loading
   useMonitorLogin();
 
   /**
@@ -23,24 +26,31 @@ const Login: React.FC<{}> = props => {
     const { im } = state;
     const { username, password } = loginInfo;
     if (status === 0) { // 登录
+      dispatch({
+        type: 'setLogin',
+        payload: LoginStatus.Logging
+      });
       im.login({
         name: username,
         password
       });
     }
     if (status === 1) { // 注册
+      setRegisterLoading(true);
       im.rosterManage.asyncRegester({
         username,
         password
       }).then((response: any) => {
-        if (response.code == 200) {
-          message.success('注册成功');
-        }
+        console.log('rosterManage.asyncRegester', response);
+        message.success('注册成功');
       }).catch((error: any) => {
+        console.log('catch rosterManage.asyncRegester', error);
         Modal.error({
           title: '提示',
           content: JSON.stringify(error)
         });
+      }).finally(() => {
+        setRegisterLoading(false);
       });
     }
   };
@@ -91,11 +101,12 @@ const Login: React.FC<{}> = props => {
         block
         style={{ marginBottom: 10 }}
         onClick={onSubmitBtn}
+        loading={registerLoading || state.loginStatus === LoginStatus.Logging}
       >{status === 0 ? '登录' : '注册'}</Button>
       <div style={{ textAlign: 'center' }}>
         <Button type='link' onClick={onToggleStatus}>{status === 0 ? '点击去注册' : '已有账号，去登录'}</Button>
       </div>
-      <div className={css.version}>Demo version: 1.0.0-beta</div>
+      <div className={css.version}>Demo version: {demoVersion}</div>
       <div className={css.version}>SDK version: {QNIM.version}</div>
     </div>
   </div>;

src/store/index.tsx

@@ -1,36 +1,25 @@
-import React, { useEffect, useReducer } from 'react';
-
-interface StoreProps {
-
-}
-
-interface State {
-  im: any;
-}
-
-interface Action {
-  type: 'updateIM';
-  payload: any;
-}
-
-interface StoreContext {
-  state: State;
-  dispatch: (action: Action) => void;
-}
+import React, { useReducer } from 'react';
+import { Action, LoginStatus, State, StoreContext, StoreProps } from '../types/store';
 
 const defaultState = {
-  im: null
+  im: null,
+  loginStatus: LoginStatus.NotLogged
 };
 
 export const storeContext = React.createContext({} as StoreContext);
 
 function reducer(state: State, action: Action) {
   switch (action.type) {
-    case 'updateIM':
+    case 'setIM':
       return {
         ...state,
         im: action.payload
       };
+    case 'setLogin':
+      return {
+        ...state,
+        loginStatus: action.payload
+      };
   }
   return state;
 }

src/types/qnweb-im.d.ts

@@ -0,0 +1 @@
+declare const QNIM: any;

src/types/store.ts

@@ -0,0 +1,24 @@
+export interface StoreProps {
+
+}
+
+export enum LoginStatus {
+  NotLogged, // 未登录
+  Logging, // 登录中
+  Logged, // 已登录
+}
+
+export interface State {
+  im: any;
+  loginStatus: LoginStatus;
+}
+
+export interface Action {
+  type: 'setIM' | 'setLogin';
+  payload: any;
+}
+
+export interface StoreContext {
+  state: State;
+  dispatch: (action: Action) => void;
+}

src/types/version.d.ts

@@ -0,0 +1 @@
+declare const __VERSION__: string;

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
+    "allowJs": true,
     "skipLibCheck": false,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,

vite.config.ts

@@ -1,6 +1,8 @@
 import { defineConfig } from 'vite';
 import reactRefresh from '@vitejs/plugin-react-refresh';
 
+const packageJson = require('./package.json');
+
 console.log('当前环境', process.env.NODE_ENV);
 
 // https://vitejs.dev/config/
@@ -11,5 +13,8 @@ export default defineConfig({
       '/v1': 'https://im-test.qiniuapi.com'
     }
   },
-  base: './'
+  base: './',
+  define: {
+    __VERSION__: JSON.stringify(packageJson.version)
+  }
 });