From c06df03754e74e2c38adcf1e0c9f4d6c2cdab9d7 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Mon, 3 Jun 2024 16:42:40 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20Notice=20=E7=9A=84Mobx=20store=20?= =?UTF-8?q?=E8=BF=81=E7=A7=BB=E5=88=B0=20zustand;=20=E4=BB=85=E4=BF=9D?= =?UTF-8?q?=E7=95=99=E7=AE=A1=E7=90=86=E6=9C=AA=E8=AF=BB=E6=95=B0=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stores/Notice.js | 109 +++++++++++++++---------------------- src/stores/Notice1.js | 51 ----------------- src/stores/Root.js | 6 +- src/views/App.jsx | 5 +- src/views/Login.jsx | 7 ++- src/views/notice/Index.jsx | 2 +- 6 files changed, 56 insertions(+), 124 deletions(-) delete mode 100644 src/stores/Notice1.js diff --git a/src/stores/Notice.js b/src/stores/Notice.js index f650886..96f7395 100644 --- a/src/stores/Notice.js +++ b/src/stores/Notice.js @@ -1,73 +1,54 @@ import { makeAutoObservable, runInAction } from "mobx"; import * as config from "@/config"; -class Notice { - constructor(root) { - makeAutoObservable(this, { rootStore: false }); - this.root = root; - } +import { create } from 'zustand'; +import { devtools } from 'zustand/middleware'; - noticeList = []; //公告列表 - noticeUnRead = 0; //未读公告数量 - noticeInfo = { CCP_BLID: 0, CCP_BLTitle: "", CCP_BLContent: "", CCP_LastEditTime: "" }; //公告详情 +import { fetchJSON, postForm, } from '@/utils/request'; +const { HT_HOST } = config; - /* 查询公告列表 - LMI_SN 登录用户SN，用户sn用来判断是否已读公告 - */ - getBulletinList(LMI_SN) { - let url = `/service-Cooperate/Cooperate/GetBulletinList`; - url += `?LMI_SN=${LMI_SN}`; - url+=`&token=${this.root.authStore.login.token}`; - fetch(config.HT_HOST + url) - .then(response => response.json()) - .then(json => { - runInAction(() => { - this.noticeList = json.Result; - }); - }) - .catch(error => { - console.log("fetch data failed", error); - }); - } +/** + * Notice 相关的请求 + */ - /* 查询反馈表信息 - LMI_SN 登录用户sn 用户sn用来设置已读公告，请求过一次详情页表示已读 - CCP_BLID 公告sn - */ - getNoticeDetail(LMI_SN, CCP_BLID) { - let url = `/service-Cooperate/Cooperate/GetBulletinDetail`; - url += `?LMI_SN=${LMI_SN}&CCP_BLID=${CCP_BLID}`; - url+=`&token=${this.root.authStore.login.token}`; - fetch(config.HT_HOST + url) - .then(response => response.json()) - .then(json => { - console.log(json); - runInAction(() => { - this.noticeInfo = json.Result; - }); - }) - .catch(error => { - console.log("fetch data failed", error); - }); - } +export const fetchBulletinList = async (LMI_SN) => { + const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-Cooperate/Cooperate/GetBulletinList`, { LMI_SN }); + return errcode !== 0 ? [] : Result; +}; - //检查是否有未读公告 - getBulletinUnReadCount(LMI_SN) { - let url = `/service-Cooperate/Cooperate/GetBulletinUnReadCount`; - url += `?LMI_SN=${LMI_SN}`; - url+=`&token=${this.root.authStore.login.token}`; - fetch(config.HT_HOST + url) - .then(response => response.json()) - .then(json => { - console.log(json); - runInAction(() => { - this.noticeUnRead = json.Result.CCP_BulletinCount; - }); - }) - .catch(error => { - console.log("fetch data failed", error); - }); - } +export const fetchBulletinUnReadCount = async (LMI_SN) => { + const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-Cooperate/Cooperate/GetBulletinUnReadCount`, { LMI_SN }); + return errcode !== 0 ? 0 : Result.CCP_BulletinCount; } -export default Notice; +export const fetchNoticeDetail = async (LMI_SN, CCP_BLID) => { + const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-Cooperate/Cooperate/GetBulletinDetail`, { LMI_SN, CCP_BLID }); + return errcode !== 0 ? {} : Result; +} + +/** + * Notice Store + */ +const initialState = { + noticeUnRead: 0, //未读公告数量 +}; +export const useNoticeStore = create( + devtools((set, get) => ({ + // 初始化状态 + ...initialState, + + // state actions + setNoticeUnRead: (noticeUnRead) => set(() => ({ noticeUnRead })), + + reset: () => set(initialState), + + // side effects + getBulletinUnReadCount: async (LMI_SN) => { + const { setNoticeUnRead } = get(); + const noticeUnRead = await fetchBulletinUnReadCount(LMI_SN); + setNoticeUnRead(noticeUnRead); + }, + + })) +); +export default useNoticeStore; diff --git a/src/stores/Notice1.js b/src/stores/Notice1.js deleted file mode 100644 index c9ea0b3..0000000 --- a/src/stores/Notice1.js +++ /dev/null @@ -1,51 +0,0 @@ -import { create } from 'zustand'; -import { devtools } from 'zustand/middleware'; - -import { fetchJSON, postForm, } from '@/utils/request'; -import { HT_HOST } from '@/config'; - -/** - * Notice 相关的请求 - */ - -export const fetchBulletinList = async (LMI_SN) => { - const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-Cooperate/Cooperate/GetBulletinList`, { LMI_SN }); - return errcode !== 0 ? [] : Result; -}; - -export const fetchBulletinUnReadCount = async (LMI_SN) => { - const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-Cooperate/Cooperate/GetBulletinUnReadCount`, { LMI_SN }); - return errcode !== 0 ? 0 : Result.CCP_BulletinCount; -} - -export const fetchNoticeDetail = async (LMI_SN, CCP_BLID) => { - const { errcode, Result } = await fetchJSON(`${HT_HOST}/service-Cooperate/Cooperate/GetBulletinDetail`, { LMI_SN, CCP_BLID }); - return errcode !== 0 ? {} : Result; -} - -/** - * Notice Store - */ -const initialState = { - noticeUnRead: 0, //未读公告数量 -}; -export const useNoticeStore = create( - devtools((set, get) => ({ - // 初始化状态 - ...initialState, - - // state actions - setNoticeUnRead: (noticeUnRead) => set(() => ({ noticeUnRead })), - - reset: () => set(initialState), - - // side effects - getBulletinUnReadCount: async (LMI_SN) => { - const { setNoticeUnRead } = get(); - const noticeUnRead = await fetchBulletinUnReadCount(LMI_SN); - setNoticeUnRead(noticeUnRead); - }, - - })) -); -export default useNoticeStore; diff --git a/src/stores/Root.js b/src/stores/Root.js index 50d3e12..efc83a7 100644 --- a/src/stores/Root.js +++ b/src/stores/Root.js @@ -1,7 +1,6 @@ import { makeAutoObservable } from "mobx"; import Reservation from "./Reservation"; import Feedback from "./Feedback"; -import Notice from "./Notice"; import Auth from "./Auth"; import Invoice from "./Invoice"; import Report from "./Report"; @@ -10,14 +9,13 @@ class Root { constructor() { this.reservationStore = new Reservation(this); this.feedbackStore = new Feedback(this); - this.noticeStore = new Notice(this); this.authStore = new Auth(this); this.invoiceStore = new Invoice(this); this.reportStore = new Report(this); makeAutoObservable(this); } - clearSession() { + clearSession() { if (window.sessionStorage) { const sessionStorage = window.sessionStorage; sessionStorage.clear(); @@ -46,4 +44,4 @@ class Root { } } -export default Root; \ No newline at end of file +export default Root; diff --git a/src/views/App.jsx b/src/views/App.jsx index 383aac9..e4deb94 100644 --- a/src/views/App.jsx +++ b/src/views/App.jsx @@ -15,6 +15,7 @@ import zhLocale from 'antd/locale/zh_CN'; import enLocale from 'antd/locale/en_US'; import 'dayjs/locale/zh-cn'; import { BUILD_VERSION, } from '@/config'; +import useNoticeStore from '@/stores/Notice'; const { Header, Content, Footer } = Layout; const { Title } = Typography; @@ -23,10 +24,10 @@ function App() { const { t, i18n } = useTranslation(); const [password, setPassword] = useState(''); - const { authStore, noticeStore } = useStore(); + const { authStore } = useStore(); const { notification } = AntApp.useApp(); const login = toJS(authStore.login); - const { noticeUnRead } = noticeStore; + const noticeUnRead = useNoticeStore((state) => state.noticeUnRead); const href = useHref(); const loginToken = login.token; const navigate = useNavigate(); diff --git a/src/views/Login.jsx b/src/views/Login.jsx index 674a779..f9f2dc5 100644 --- a/src/views/Login.jsx +++ b/src/views/Login.jsx @@ -3,16 +3,19 @@ import { useEffect } from 'react'; import { Button, Checkbox, Form, Input, Row, App } from 'antd'; import { useStore } from '@/stores/StoreContext.js'; import { useTranslation } from 'react-i18next'; +import useNoticeStore from '@/stores/Notice'; function Login() { const { t, i18n } = useTranslation(); - const { authStore, noticeStore } = useStore(); + const { authStore } = useStore(); const { notification } = App.useApp(); const navigate = useNavigate(); const location = useLocation(); const [form] = Form.useForm(); + const getBulletinUnReadCount = useNoticeStore((state) => state.getBulletinUnReadCount); + useEffect (() => { if (location.search === '?out') { authStore.logout(); @@ -26,7 +29,7 @@ function Login() { const onFinish = (values) => { authStore.valdateUserPassword(values.username, values.password) .then((userId) => { - noticeStore.getBulletinUnReadCount(userId); + getBulletinUnReadCount(userId); authStore.fetchUserDetail() .then((user) => { // navigate(-1) is equivalent to hitting the back button. diff --git a/src/views/notice/Index.jsx b/src/views/notice/Index.jsx index c3ede70..f50f333 100644 --- a/src/views/notice/Index.jsx +++ b/src/views/notice/Index.jsx @@ -2,7 +2,7 @@ import { NavLink } from "react-router-dom"; import { useEffect, useState } from "react"; import { Row, Col, Space, Typography, Badge, List } from "antd"; import { useStore } from "@/stores/StoreContext.js"; -import useNoticeStore, { fetchBulletinList } from '@/stores/Notice1'; +import useNoticeStore, { fetchBulletinList } from '@/stores/Notice'; function Index() { const { authStore } = useStore();