Revert "refactor(inbox): 重构inbox部分的代码"

NJUPT-SAST · Jul 22, 2022 · dc37291 · dc37291
1 parent bdc2ff4
commit dc37291
Show file tree

Hide file tree

Showing 24 changed files with 1,020 additions and 356 deletions.
diff --git a/package.json b/package.json
@@ -13,9 +13,9 @@
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
     "antd": "^4.21.3",
-    "axios": "^0.27.2",
     "craco": "^0.0.3",
     "craco-less": "^2.0.0",
+    "form-render": "^1.13.11",
     "inquirer": "^8.2.4",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx
@@ -7,8 +7,8 @@ import './index.scss'
 /**
  * 顶部面包屑与返回上一页的小栏
  */
-function TopBar(props?: { breadcrumb?: string }) {
-  let processedExtraBreadcrumbItems = [<Fragment key="emptyElement"></Fragment>]
+function TopBar(props?: { activity?: string }) {
+  // let processedExtraBreadcrumbItems = [<Fragment key="emptyElement"></Fragment>]
   const handleGoBack = () => {
     window.history.back()
   }
@@ -21,45 +21,51 @@ function TopBar(props?: { breadcrumb?: string }) {
     '/review/detail': '挑战杯',
     '/register': '活动报名',
     '/notice': '发布公告',
-
   }
   const location = useLocation()
   const pathSnippets = location.pathname.split('/').filter((i) => i)
-  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
+  const extraBreadcrumbItems = pathSnippets.map((item, index) => {
     const url = `/${pathSnippets.slice(0, index + 1).join('/')}`
-    // console.log(pathSnippets.slice(0, index + 1))
-    return (
-      <Breadcrumb.Item key={url} className="breadCrumbItem">
-        <Link to={url}>{breadcrumbNameMap[url]}</Link>
-      </Breadcrumb.Item>
-    )
-  })
-  if (props?.breadcrumb !== undefined || props?.breadcrumb !== null) {
-    processedExtraBreadcrumbItems = extraBreadcrumbItems.slice(0, 1)
-    // console.log(extraBreadcrumbItems.slice(0,1))
-  }
-  const moreExtraBreadcrumbItems = () => {
-    if (props?.breadcrumb !== undefined) {
-      return [
+    console.log(url)
+    if (!isNaN(Number(pathSnippets[index])) && props?.activity !== undefined) {
+      return (
         <Breadcrumb.Item key="current-activity" className="breadCrumbItem">
-          <Link to="#title">{props.breadcrumb.toString()}</Link>
-        </Breadcrumb.Item>,
-      ]
+          <Link to={url}>{props.activity.toString()}</Link>
+        </Breadcrumb.Item>
+      )
     } else {
-      return [
-        <Breadcrumb.Item key="current-activity" className="breadCrumbItem">
-          <Link to="#title">{null}</Link>
-        </Breadcrumb.Item>,
-      ]
+      return (
+        <Breadcrumb.Item key={url} className="breadCrumbItem">
+          <Link to={url}>{breadcrumbNameMap['/' + item]}</Link>
+        </Breadcrumb.Item>
+      )
     }
-  }
+  })
+  // if (props?.activity !== null) {
+  //   processedExtraBreadcrumbItems = extraBreadcrumbItems.slice(0, 1)
+  //   // console.log(extraBreadcrumbItems.slice(0,1))
+  // }
+  // const moreExtraBreadcrumbItems = () => {
+  //   if (props?.activity !== undefined) {
+  //     return [
+  //       <Breadcrumb.Item key="current-activity" className="breadCrumbItem">
+  //         <Link to="#title">{props.activity.toString()}</Link>
+  //       </Breadcrumb.Item>,
+  //     ]
+  //   } else {
+  //     return [
+  //       <Breadcrumb.Item key="current-activity" className="breadCrumbItem">
+  //         <Link to="#title">{null}</Link>
+  //       </Breadcrumb.Item>,
+  //     ]
+  //   }
+  // }
   const breadcrumbItems = [
     <Breadcrumb.Item key="home" className="breadCrumbItem">
       <Link to="/">主页</Link>
     </Breadcrumb.Item>,
-  ]
-    .concat(processedExtraBreadcrumbItems)
-    .concat(moreExtraBreadcrumbItems())
+  ].concat(extraBreadcrumbItems)
+  // .concat(moreExtraBreadcrumbItems())
   return (
     <div className="topBar">
       <Breadcrumb style={{ marginTop: '5px' }}>{breadcrumbItems}</Breadcrumb>

diff --git a/src/pages/activityDetail/index.tsx b/src/pages/activityDetail/index.tsx
@@ -1,6 +1,7 @@
 import { Anchor, Button, List, Timeline } from 'antd'
 import Item from 'antd/lib/list/Item'
 import React, { useEffect, useState } from 'react'
+import { Navigate, useNavigate } from 'react-router-dom'
 import TopBar from '../../components/TopBar'
 import './index.scss'
 
@@ -9,6 +10,7 @@ const { Link } = Anchor
 function ActivityDetail() {
   const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined)
   const userState = localStorage.getItem('userState')
+  const navigate = useNavigate()
 
   /**
    * 调用函数根据不同的角色信息获取不同的按钮显示文字
@@ -38,6 +40,7 @@ function ActivityDetail() {
       navigate('/activity/10001/manage')
     }
   }
+
   //notice数据
   const noticeData = [
     { date: '2022-05-20', content: '活动结束啦，请大家在...' },
@@ -54,7 +57,7 @@ function ActivityDetail() {
 
   return (
     <div>
-      <TopBar breadcrumb="“挑战杯”创新创业大赛" />
+      <TopBar activity="“挑战杯”创新创业大赛" />
       <div className="activity-detail-body">
         <div className="activity-detail-box">
           <img src="https://img.js.design/assets/smartFill/img432164da758808.jpg" className="cover" alt="cover" />
@@ -71,7 +74,9 @@ function ActivityDetail() {
               <div className="title-section" id="title">
                 <div className="title">“挑战杯”创新创业大赛</div>
                 <div className="action-button">
-                  <Button type="primary">{buttonContent()}</Button>
+                  <Button type="primary" onClick={handleButtonAction}>
+                    {buttonContent()}
+                  </Button>
                 </div>
               </div>
               <div className="description" id="description">

diff --git a/src/pages/home/components/menu/AdminMenu.tsx b/src/pages/home/components/menu/AdminMenu.tsx
@@ -1,24 +1,8 @@
 import { DashboardOutlined } from '@ant-design/icons'
 import { Menu } from 'antd'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
 function AdminMenu(props: any) {
-  // const Storage = localStorage
-  // const readState_str =
-  //   Storage.getItem('allReadState') ?? JSON.stringify({ allRead: false, haveReadNumber: 0, maxNumber: 8 })
-  // const readState = JSON.parse(readState_str)
-  // const [allRead, setAllRead] = useState(false)
-  // useEffect(() => {
-  //   if (Storage.getItem('allReadState') === null) {
-  //     Storage.setItem('allReadState', JSON.stringify({ allRead: false, haveReadNumber: 0, maxNumber: 8 }))
-  //   } else {
-  //     const a_str =
-  //       Storage.getItem('allReadState') ?? JSON.stringify({ allRead: false, haveReadNumber: 0, maxNumber: 8 })
-  //     const a = JSON.parse(a_str)
-  //     setAllRead(a.allRead)
-  //   }
-  // })
-  const allRead = true
   return (
     <Menu
       mode="inline"
@@ -30,7 +14,7 @@ function AdminMenu(props: any) {
         我的账号
       </Menu.Item>
       <Menu.Item key="/inbox" icon={<DashboardOutlined />}>
-        收件箱{allRead ? <></> : <span className="message-read-or-not"></span>}
+        收件箱<span className="message-read-or-not"></span>
       </Menu.Item>
       <Menu.Item key="/activity" icon={<DashboardOutlined />}>
         活动广场

diff --git a/src/pages/home/components/menu/ApproveMenu.tsx b/src/pages/home/components/menu/ApproveMenu.tsx
@@ -3,7 +3,6 @@ import { Menu } from 'antd'
 import React from 'react'
 
 function ApproveMenu(props: any) {
-  const allRead = true
   return (
     <Menu
       mode="inline"
@@ -15,7 +14,7 @@ function ApproveMenu(props: any) {
         我的账号
       </Menu.Item>
       <Menu.Item key="/inbox" icon={<DashboardOutlined />}>
-        收件箱{allRead ? <></> : <span className="message-read-or-not"></span>}
+        收件箱<span className="message-read-or-not"></span>
       </Menu.Item>
       <Menu.Item key="/review" icon={<DashboardOutlined />}>
         活动评审

diff --git a/src/pages/home/components/menu/JudgeMenu.tsx b/src/pages/home/components/menu/JudgeMenu.tsx
@@ -1,24 +1,8 @@
 import { DashboardOutlined } from '@ant-design/icons'
 import { Menu } from 'antd'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
 function JudgeMenu(props: any) {
-  // const Storage = localStorage
-  // const readState_str =
-  //   Storage.getItem('allReadState') ?? JSON.stringify({ allRead: false, haveReadNumber: 0, maxNumber: 8 })
-  // const readState = JSON.parse(readState_str)
-  // const [allRead, setAllRead] = useState(false)
-  // useEffect(() => {
-  //   if (Storage.getItem('allReadState') === null) {
-  //     Storage.setItem('allReadState', JSON.stringify({ allRead: false, haveReadNumber: 0, maxNumber: 8 }))
-  //   } else {
-  //     const a_str =
-  //       Storage.getItem('allReadState') ?? JSON.stringify({ allRead: false, haveReadNumber: 0, maxNumber: 8 })
-  //     const a = JSON.parse(a_str)
-  //     setAllRead(a.allRead)
-  //   }
-  // },[])
-  const allRead = true
   return (
     <Menu
       mode="inline"
@@ -30,12 +14,13 @@ function JudgeMenu(props: any) {
         首页
       </Menu.Item>
       <Menu.Item key="/inbox" icon={<DashboardOutlined />}>
-        收件箱{allRead ? <></> : <span className="message-read-or-not"></span>}
+        收件箱<span className="message-read-or-not"></span>
       </Menu.Item>
       <Menu.Item key="/review" icon={<DashboardOutlined />}>
         活动评审
       </Menu.Item>
     </Menu>
   )
 }
+
 export default JudgeMenu
diff --git a/src/pages/home/components/menu/UserMenu.tsx b/src/pages/home/components/menu/UserMenu.tsx
@@ -1,24 +1,8 @@
 import { DashboardOutlined } from '@ant-design/icons'
 import { Menu } from 'antd'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
 function UserMenu(props: any) {
-  // const Storage = localStorage
-  // const readState_str =
-  //   Storage.getItem('allReadState') ?? JSON.stringify({ allRead: false, haveReadNumber: 0, maxNumber: 8 })
-  // const readState = JSON.parse(readState_str)
-  // const [allRead, setAllRead] = useState(false)
-  // useEffect(() => {
-  //   if (Storage.getItem('allReadState') === null) {
-  //     Storage.setItem('allReadState', JSON.stringify({ allRead: false, haveReadNumber: 0, maxNumber: 8 }))
-  //   } else {
-  //     const a_str =
-  //       Storage.getItem('allReadState') ?? JSON.stringify({ allRead: false, haveReadNumber: 0, maxNumber: 8 })
-  //     const a = JSON.parse(a_str)
-  //     setAllRead(a.allRead)
-  //   }
-  // })
-  const allRead = true
   return (
     <Menu
       mode="inline"
@@ -30,7 +14,7 @@ function UserMenu(props: any) {
         我的账号
       </Menu.Item>
       <Menu.Item key="/inbox" icon={<DashboardOutlined />}>
-        收件箱{allRead ? <></> : <span className="message-read-or-not"></span>}
+        收件箱<span className="message-read-or-not"></span>
       </Menu.Item>
       <Menu.Item key="/activity" icon={<DashboardOutlined />}>
         活动广场

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -40,7 +40,7 @@ const Home = () => {
         break
       case 'user':
         setUserState('user')
-        localStorage.setItem('userState', 'admin')
+        localStorage.setItem('userState', 'user')
         break
       case 'judge':
         setUserState('judge')

diff --git a/src/pages/inbox/components/inboxReadStateControlButton.tsx b/src/pages/inbox/components/inboxReadStateControlButton.tsx
@@ -1,10 +1,11 @@
 import { Button } from 'antd'
-import React, { useState } from 'react'
+import React, { useState, useContext, useEffect } from 'react'
 
 type propsType = {
   index: number
   readState: boolean
-  controlReadState: () => void
+  controlReadState: (newState: boolean) => void
+  controlAllHaveReadState: (newAllReadState: boolean) => void
 }
 
 const InboxReadStateControlButton: React.FC<propsType> = (props) => {
@@ -19,9 +20,10 @@ const InboxReadStateControlButton: React.FC<propsType> = (props) => {
         const newState = false
         return newState
       })
-    }, 500)
-    props.controlReadState()
+    }, 1000)
+    props.controlReadState(!props.readState)
   }
+
   return (
     <Button type={props.readState ? 'ghost' : 'primary'} loading={loadingState} onClick={changeState}>
       {props.readState ? '取消已读' : '已读'}