Skip to content

Commit

Permalink
refactor: router@v6 & fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
xjh22222228 committed Jan 20, 2022
1 parent f535a96 commit 8717c94
Show file tree
Hide file tree
Showing 40 changed files with 1,189 additions and 1,392 deletions.
52 changes: 26 additions & 26 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "tomato-work",
"version": "2.5.0",
"version": "3.0.0",
"homepage": "https://github.com/xjh22222228/tomato-work",
"bugs": {
"url": "https://github.com/xjh22222228/tomato-work/issues"
Expand All @@ -18,43 +18,43 @@
"lint": "eslint --cache --ext .js,.jsx,.tsx,.ts ./src"
},
"dependencies": {
"@ant-design/icons": "^4.6.4",
"@toast-ui/editor": "^3.0.3",
"antd": "^4.16.13",
"axios": "^0.21.1",
"blueimp-md5": "^2.18.0",
"bytes": "^3.1.0",
"@ant-design/icons": "^4.7.0",
"@toast-ui/editor": "^3.1.2",
"antd": "^4.18.4",
"axios": "^0.25.0",
"blueimp-md5": "^2.19.0",
"bytes": "^3.1.1",
"classnames": "^2.3.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"query-string": "^7.0.1",
"query-string": "^7.1.0",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.1",
"recharts": "^2.1.2",
"redux": "^4.1.1",
"redux-thunk": "^2.3.0",
"sass": "^1.39.0",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"recharts": "^2.1.8",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"sass": "^1.49.0",
"use-keep-state": "^1.3.0"
},
"devDependencies": {
"@types/blueimp-md5": "^2.18.0",
"@types/bytes": "^3.1.1",
"@types/lodash": "^4.14.172",
"@types/node": "^16.7.10",
"@types/react": "^17.0.19",
"@types/lodash": "^4.14.178",
"@types/node": "^17.0.10",
"@types/react": "^17.0.38",
"@types/react-beautiful-dnd": "^13.1.2",
"@types/react-dom": "^17.0.9",
"@types/react-redux": "^7.1.18",
"@types/react-router-dom": "^5.1.8",
"@typescript-eslint/eslint-plugin": "^4.30.0",
"@typescript-eslint/parser": "^4.30.0",
"@types/react-dom": "^17.0.11",
"@types/react-redux": "^7.1.22",
"@types/react-router-dom": "^5.3.3",
"@typescript-eslint/eslint-plugin": "^5.10.0",
"@typescript-eslint/parser": "^5.10.0",
"@vitejs/plugin-react-refresh": "^1.3.6",
"eslint": "^7.32.0",
"eslint-plugin-react": "7.25.1",
"typescript": "^4.4.2",
"vite": "^2.5.3"
"eslint": "^8.7.0",
"eslint-plugin-react": "7.28.0",
"typescript": "^4.5.4",
"vite": "^2.7.13"
}
}
10 changes: 7 additions & 3 deletions src/components/exception/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import './style.scss'
import { Result, Button } from 'antd'
import { useHistory } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
import { ExceptionStatusType } from 'antd/lib/result'

interface Props {
Expand All @@ -26,12 +26,16 @@ const statusMap = {
const NoMatch: React.FC<Props> = function ({
status = '404'
}) {
const history = useHistory()
const navigate = useNavigate()

function goBack() {
navigate(-1)
}

return (
<Result
status={status}
extra={<Button type="primary" onClick={history.goBack}>Back</Button>}
extra={<Button type="primary" onClick={goBack}>Back</Button>}
{...statusMap[status]}
/>
)
Expand Down
4 changes: 1 addition & 3 deletions src/components/footer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import CONFIG from '@/config'

const currentYear = new Date().getFullYear()

const Footer = () => {
export default () => {
return (
<footer className="global-footer">
<div>
Expand All @@ -14,5 +14,3 @@ const Footer = () => {
</footer>
)
}

export default Footer
1 change: 0 additions & 1 deletion src/components/footer/style.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.global-footer {
align-self: center;
padding: 15px 5px;
font-size: 12px;
}
23 changes: 9 additions & 14 deletions src/components/header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,9 @@ import config from '@/config'
import { Layout, Badge, Popover, Empty } from 'antd'
import { Link } from 'react-router-dom'
import { HomeMainState } from '@/views/main/index'
import { connect } from 'react-redux'
import { useSelector } from 'react-redux'
import { StoreState } from '@/store'
import { logout } from '@/store/actions/user'
import { SETTING } from '@/router/constants'
import { serviceGetInnerMessage } from '@/services'
import { fullscreen, exitFullscreen } from '@/utils'
import {
Expand All @@ -25,12 +24,12 @@ import {

const { Header } = Layout
const popoverList = [
{ name: SETTING.BASE.name, path: SETTING.BASE.path },
{ name: SETTING.NOTIFICATION.name, path: SETTING.NOTIFICATION.path },
{ name: SETTING.ACCOUNT.name, path: SETTING.ACCOUNT.path }
{ name: '个人中心', path: '/home/setting/base' },
{ name: '消息通知', path: '/home/setting/notification' },
{ name: '账号设置', path: '/home/setting/account' }
]

type Props = ReturnType<typeof mapStateToProps> & HomeMainState
type Props = HomeMainState

const PopoverContent = (
<div className="popover-content">
Expand All @@ -47,11 +46,11 @@ const PopoverContent = (
const HomeHeader: React.FC<Props> = function ({
collapsed,
setCollapsed,
userInfo
}) {
const [messageList, setMessageList] = useState([])
const [unReadCount, setUnReadCount] = useState(0)
const [isFullscreen, setIsFullscreen] = useState(false)
const { userInfo } = useSelector((state: StoreState) => state.user)

useEffect(() => {
serviceGetInnerMessage({ pageSize: 5 })
Expand All @@ -73,7 +72,7 @@ const HomeHeader: React.FC<Props> = function ({
<div className="message-popover">
<div className="msg-header item-block">
<span className="left">站内消息通知</span>
<Link className="right" to={SETTING.NOTIFICATION.path}>消息接收管理</Link>
<Link className="right" to="/home/setting/notification">消息接收管理</Link>
</div>
{messageList.length > 0 ? (
<>
Expand All @@ -83,7 +82,7 @@ const HomeHeader: React.FC<Props> = function ({
<div className="date">{item.createdAt}</div>
</div>
))}
<Link className="item-block ls" to={SETTING.INNER_MESSAGE.path}>查看更多</Link>
<Link className="item-block ls" to="/home/setting/innerMessage">查看更多</Link>
</>
) : (
<Empty style={{ padding: '20px 0' }} />
Expand Down Expand Up @@ -148,8 +147,4 @@ const HomeHeader: React.FC<Props> = function ({
)
}

const mapStateToProps = ({ user }: StoreState) => {
return { userInfo: user.userInfo }
}

export default connect(mapStateToProps)(HomeHeader)
export default HomeHeader
84 changes: 28 additions & 56 deletions src/components/private-route/index.tsx
Original file line number Diff line number Diff line change
@@ -1,79 +1,51 @@
import React from 'react'
import CONFIG from '@/config'
import qs from 'query-string'
import { Switch, Route, Redirect, useLocation } from 'react-router-dom'
import { IRouteProps } from '@/router/types'
import { connect } from 'react-redux'
import { useLocation, Navigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { StoreState } from '@/store/index'
import { HOME } from '@/router/constants'

type Props = IRouteProps & ReturnType<typeof mapStateToProps>
type Props = {
element: React.FC
meta?: Record<string, any>
}

const o = Object.create(null)

const PrivateRoute: React.FC<Props> = function ({
component: Component,
childrenRoutes,
isLogin,
element: Component,
meta = o,
...rest
}) {
const { meta } = rest
const location = useLocation()
const querySearch = location.search
const { pathname, search } = useLocation()
const { isLogin } = useSelector((state: StoreState) => state.user)
const isLoginPage = pathname === '/' || pathname === '/login'

if (meta) {
React.useEffect(() => {
if (meta.title) {
document.title = `${meta.title} - ${CONFIG.title}`
} else {
document.title = CONFIG.title
}
}, [meta])

if (isLoginPage && isLogin) {
const redirectUrl = qs.parse(search).redirectUrl as string
const url = redirectUrl || ('/home/index' + search)
return <Navigate to={url} replace />
}

// 验证权限
const auth = function () {
if (meta?.requiresAuth) {
if (isLogin) {
return true
if (meta.requiresAuth) {
if (isLogin) {
return <Component {...rest} />
} else {
if (!isLoginPage) {
return <Navigate to={`/?redirectUrl=${pathname}${search}`} replace />
}
return false
}
return true
}()

if (meta?.isLoginToHome && isLogin) {
const redirectUrl = qs.parse(location.search).redirectUrl as string
const url = redirectUrl || (HOME.HOME_INDEX.path + location.search)
return <Redirect to={url} />
}

return (
<Route render={props => {
return (
auth ? (
<Component {...props} {...rest}>
{Array.isArray(childrenRoutes) ? (
<Switch>
{childrenRoutes.map((route, idx: number) => (
<PrivateRouteComponent {...route} key={idx} />
))}
</Switch>
) : null}
</Component>
) : (
<Redirect to={{
pathname: '/',
search: `?redirectUrl=${props.location.pathname}${querySearch}`
}} />
)
)
}} />
)
return <Component {...rest} />
}

const mapStateToProps = (state: StoreState) => {
return {
isLogin: state.user.isLogin
}
}

export const PrivateRouteComponent = connect(mapStateToProps)(PrivateRoute)

export default PrivateRouteComponent
export default PrivateRoute
9 changes: 5 additions & 4 deletions src/components/sidebar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,18 @@ import React, { useEffect, useState, useMemo } from 'react'
import './style.scss'
import config from '@/config'
import { Layout, Menu } from 'antd'
import { withRouter, RouteComponentProps, Link } from 'react-router-dom'
import { useLocation, Link } from 'react-router-dom'
import { HomeMainState } from '@/views/main/index'
import { HOME_SIDER_MENU_LIST } from '@/constants'
import logoImage from '@/assets/img/common/logo.png'

const { Sider } = Layout
const { SubMenu } = Menu

type Props = HomeMainState & RouteComponentProps
type Props = HomeMainState

const Sidebar: React.FC<Props> = function ({ location, collapsed }) {
const Sidebar: React.FC<Props> = function ({ collapsed }) {
const location = useLocation()
const [selectedKeys, setSelectedKeys] = useState('')
const [openKeys, setOpenKeys] = useState<string[]>([])

Expand Down Expand Up @@ -103,4 +104,4 @@ const Sidebar: React.FC<Props> = function ({ location, collapsed }) {
)
}

export default withRouter(Sidebar)
export default Sidebar
2 changes: 1 addition & 1 deletion src/components/sidebar/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ $bg-color: #304156;
font-size: 20px;
font-weight: 600;
text-align: center;

img {
width: 30px;
height: 30px;
pointer-events: none;
}
}
}
Loading

1 comment on commit 8717c94

@vercel
Copy link

@vercel vercel bot commented on 8717c94 Jan 20, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.