From 69dfeaeab7f75869753c11f4b7aa1e6d14268074 Mon Sep 17 00:00:00 2001
From: Jimmy Liow <lyj@hainatravel.com>
Date: Thu, 18 Jan 2024 10:48:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=20useContext=20=E4=BC=A0?=
 =?UTF-8?q?=E9=80=92=E6=95=B0=E6=8D=AE=EF=BC=8C=E4=B8=8D=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=20Mobx=20=E5=85=B1=E4=BA=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.jsx                  | 14 ++++++-------
 src/stores/Auth.js            | 16 ++------------
 src/stores/AuthContext.js     |  7 +++++++
 src/views/AccountProfile.jsx  | 20 +++++++++---------
 src/views/App.jsx             |  5 +----
 src/views/DingdingCallbak.jsx | 39 +++++++++++++++++++++--------------
 src/views/Standlone.jsx       | 14 -------------
 7 files changed, 51 insertions(+), 64 deletions(-)
 create mode 100644 src/stores/AuthContext.js

diff --git a/src/main.jsx b/src/main.jsx
index 91cab50..9ef7740 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -5,8 +5,8 @@ import {
   createBrowserRouter,
   RouterProvider,
 } from 'react-router-dom'
-import RootStore from '@/stores/Root'
-import { StoreContext } from '@/stores/StoreContext'
+import { AuthContext } from '@/stores/AuthContext'
+import Auth from '@/stores/Auth'
 import App from '@/views/App'
 import Standlone from '@/views/Standlone'
 import OrderFollow from '@/views/OrderFollow'
@@ -49,21 +49,21 @@ const router = createBrowserRouter([
   {
     element: <Standlone />,
     children: [
-      { path: "/dingding/qrcode", element: <DingdingQRCode /> },
-      { path: "/dingding/callback", element: <DingdingCallbak /> },
+      { path: '/dingding/qrcode', element: <DingdingQRCode /> },
+      { path: '/dingding/callback', element: <DingdingCallbak /> },
     ]
   }
 ])
 
-const rootStore = new RootStore();
+const auth = new Auth();
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   // <React.StrictMode>
-    <StoreContext.Provider value={rootStore}>
+    <AuthContext.Provider value={auth}>
       <RouterProvider
         router={router}
         fallbackElement={() => <div>Loading...</div>}
       />
-    </StoreContext.Provider>
+    </AuthContext.Provider>
   // </React.StrictMode>
 )
diff --git a/src/stores/Auth.js b/src/stores/Auth.js
index 76b02a1..7cefdfd 100644
--- a/src/stores/Auth.js
+++ b/src/stores/Auth.js
@@ -1,24 +1,12 @@
-import { makeAutoObservable, runInAction } from 'mobx'
-
 const KEY_USER_ID = 'KEY_USER_ID'
 
 class Auth {
 
-  constructor(root) {
-    makeAutoObservable(this, { rootStore: false })
-    this.root = root
-    this.userId = root.getSession(KEY_USER_ID)
-  }
-
-  setup(userId) {
-    runInAction(() => {
-      this.userId = userId
-    })
-    this.root.putSession(KEY_USER_ID, userId)
+  constructor() {
   }
 
   // HT 账号 OP_SN
-  userId = null
+  userId = 1
 }
 
 export default Auth
diff --git a/src/stores/AuthContext.js b/src/stores/AuthContext.js
new file mode 100644
index 0000000..2fd39c8
--- /dev/null
+++ b/src/stores/AuthContext.js
@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react'
+
+export const AuthContext = createContext(null)
+
+export function useAuth() {
+  return useContext(AuthContext)
+}
\ No newline at end of file
diff --git a/src/views/AccountProfile.jsx b/src/views/AccountProfile.jsx
index 40dafd3..f4add0a 100644
--- a/src/views/AccountProfile.jsx
+++ b/src/views/AccountProfile.jsx
@@ -1,25 +1,25 @@
-import { useNavigate } from 'react-router-dom'
-import { useRef, useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { observer } from 'mobx-react'
 import {
-  Row, Col, Divider, Table, Card, Button, Input,
-  Space, Segmented, Radio, Select, Descriptions, Spin, Typography, Flex, DatePicker, List, Avatar
+  Row, Col, Space, Descriptions, Avatar
 } from 'antd'
-import {
-  StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined, AppstoreOutlined, SearchOutlined
-} from '@ant-design/icons'
-import { Conditional } from '@/components/Conditional'
 
-function AccountProfile() {
+import { useAuth } from '@/stores/AuthContext.js'
+
+function AccountProfile() {  
+  const auth = useAuth()
+  console.info('useAuth: ' + auth.userId)
 
   useEffect(() => {
+    // 测试错误捕获：
+    // throw new Error('💥 CABOOM 💥')  
   }, [])
 
   return (    
     <Row> 
       <Col span={12} offset={6}>
         <Descriptions title='个人信息' layout='vertical' column={2}>
-          <Descriptions.Item label='名字'>​骆梅玉​</Descriptions.Item>
+          <Descriptions.Item label='名字'><Space size='middle'><Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${new Date().toString()}`} />​骆梅玉​</Space></Descriptions.Item>
           <Descriptions.Item label='手机'>+86-15878301602</Descriptions.Item>
           <Descriptions.Item label='邮件'>christyluo@hainatravel.com</Descriptions.Item>
           <Descriptions.Item label='部门'>海纳业务组-GH事业部群-GH销售</Descriptions.Item>
diff --git a/src/views/App.jsx b/src/views/App.jsx
index c1b8198..3c1702c 100644
--- a/src/views/App.jsx
+++ b/src/views/App.jsx
@@ -9,7 +9,6 @@ import 'dayjs/locale/zh-cn';
 
 import '@/assets/App.css'
 import AppLogo from '@/assets/logo-gh.png'
-import { useStore } from '@/stores/StoreContext.js'
 import { isEmpty } from '@/utils/commons'
 
 const { Header, Footer, Content } = Layout
@@ -18,9 +17,7 @@ const { Title } = Typography
 function App() {
 
   const href = useHref()
-  const { authStore } = useStore()
-  const { userId, website } = authStore
-  const shouldBeLogin = (isEmpty(userId) || isEmpty(website)) && (href.indexOf('/authorise/') == -1)
+  //const shouldBeLogin = (isEmpty(userId) || isEmpty(website)) && (href.indexOf('/authorise/') == -1)
   let defaultPath = 'follow'
 
   if (href !== '/') {
diff --git a/src/views/DingdingCallbak.jsx b/src/views/DingdingCallbak.jsx
index 9a82575..72fa63c 100644
--- a/src/views/DingdingCallbak.jsx
+++ b/src/views/DingdingCallbak.jsx
@@ -1,40 +1,49 @@
 import React, { useEffect } from 'react'
-import { useParams, useNavigate } from "react-router-dom"
+import { useParams, useNavigate } from 'react-router-dom'
 import { Card, Typography, Flex, Result, Button } from 'antd'
 import { useRequest } from 'ahooks'
 
 const { Title } = Typography
 const { Meta } = Card
 
+import { useAuth } from '@/stores/AuthContext.js'
+
 function DingdingCallbak() {
 
+  const navigate = useNavigate()
   const params = new URLSearchParams(window.location.search)
   const code = params.get('code')
   const state = params.get('state')
 
   console.info('code: ' + code)
   console.info('state: ' + state)
-  const { data, error, loading } = useRequest(() => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve('use Request data...');
-      }, 1000);
-    });
-  });
+  
+  const auth = useAuth()
+  console.info('useAuth: ' + auth.userId)
+
+  auth.userId = 3344343
+
+  // const { data, error, loading } = useRequest(() => {
+  //   return new Promise((resolve) => {
+  //     setTimeout(() => {
+  //       resolve('use Request data...');
+  //     }, 1000);
+  //   });
+  // });
+  setTimeout(() => {
+    navigate('/s/account/profile')
+  }, 1000);
 
   useEffect(() => {
   }, [])
 
   return (
-    <Flex justify='center' align='center' gap="middle" vertical>
-      <p>{error}</p>
-      <p>{loading}</p>
-      <p>{data}</p>
+    <Flex justify='center' align='center' gap='middle' vertical>
     <Title level={4}>正在获取你的权限，请稍等</Title>
     <Result
-    status="403"
-    title="403"
-    subTitle="你没有绑定钉钉账号，无法登陆。"
+    status='403'
+    title='403'
+    subTitle='你没有绑定钉钉账号，无法登陆。'
   />
     </Flex>
   )
diff --git a/src/views/Standlone.jsx b/src/views/Standlone.jsx
index 855f44a..1aa470b 100644
--- a/src/views/Standlone.jsx
+++ b/src/views/Standlone.jsx
@@ -28,20 +28,6 @@ const items = [
 	},
 ];
 function Standlone() {
-
-  const href = useHref()
-  const { authStore } = useStore()
-  const { userId, website } = authStore
-  const shouldBeLogin = (isEmpty(userId) || isEmpty(website)) && (href.indexOf('/authorise/') == -1)
-  let defaultPath = 'follow'
-
-  if (href !== '/') {
-    const splitPath = href.split('/')
-
-    if (splitPath.length > 1) {
-      defaultPath = splitPath[2]
-    }
-  }
   const {
     token: { colorBgContainer },
   } = theme.useToken()