taihu/app/containers/DataGovernance/Sidebar.tsx

/*
 * <<
 * Davinci
 * ==
 * Copyright (C) 2016 - 2017 EDP
 * ==
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * >>
 */

import React, { useEffect, useMemo, PropsWithChildren } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useLocation, matchPath, useHistory } from 'react-router-dom'

import { showNavigator } from 'containers/App/actions'
import { makeSelectCurrentProject } from 'containers/Projects/selectors'

import { Icon } from 'antd'
import SidebarOption from 'components/SidebarOption'
import Sidebar from 'components/Sidebar'

import { SidebarPermissions } from '../Main/constants'
import { IRouteParams } from 'utils/types'
import useProjectPermission from '../Projects/hooks/projectPermission'

import styles from '../Main/Main.less'
import { IProjectPermission } from 'containers/Projects/types'

const sidebarSource: Array<{
  icon: React.ReactNode
  name: string
  routes: string[]
  permissionName: typeof SidebarPermissions[number]
}> = [
  {
    icon: <img src={require('assets/images/gzzd.svg')} />,
    name: '规则制定',
    routes: ['makeRules'],
    permissionName: 'makeRulePermission'
  },
  {
    icon: <img src={require('assets/images/zljh.svg')} />,
    name: '质量稽核',
    routes: ['qualityAudits'],
    permissionName: 'qualityAuditPermission'
  },
  {
    icon: <img src={require('assets/images/jhfx.svg')} />,
    name: '稽核分析',
    routes: ['auditAnalysiss'],
    permissionName: 'auditAnalysisPermission'
  }
]

const MainSidebar: React.FC<PropsWithChildren<{}>> = (props) => {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(showNavigator())
  }, [])

  const location = useLocation()
  const { pathname } = location
  const history = useHistory()

  const currentProject = useSelector(makeSelectCurrentProject())

  // @ts-ignore
  const nextPermission = useMemo<IProjectPermission>(() => ({
      ...(currentProject?.permission ?? {}),
      ...{
        makeRulePermission: 3,
        qualityAuditPermission: 3,
        auditAnalysisPermission: 3
      }
    })
    , [currentProject?.permission])

  useEffect(() => {
    if (!currentProject) {
      return
    }
    const { id: projectId } = currentProject
    const match = matchPath<IRouteParams>(pathname, {
      path: `/project/:projectId/dataGovernance`,
      exact: true,
      strict: false
    })
    if (match) {
      const hasPermission = SidebarPermissions.some((sidebarPermission) => {
        if (nextPermission[sidebarPermission] > 0) {
          const path = sidebarPermission.slice(0, -10)
          history.replace(`/project/${projectId}/dataGovernance/${path}s`)
          return true
        }
      })
      !hasPermission && history.replace('/noAuthorization')
    }
  }, [pathname, currentProject?.id, nextPermission])

  const AuthorizedSidebarOptions = useProjectPermission(
    SidebarOption,
    sidebarSource.map(({ permissionName }) => permissionName)
  )

  const sidebar = useMemo(() => {
    if (!currentProject) {
      return null
    }
    const { id: projectId } = currentProject
    const vizOnly = SidebarPermissions.every((permissionName) =>
      permissionName === 'vizPermission'
        ? nextPermission[permissionName]
        : !nextPermission[permissionName]
    )
    if (vizOnly) {
      return null
    }
    const sidebarOptions = sidebarSource.map(
      ({ permissionName, routes, icon, name }, idx) => {
        if (!nextPermission[permissionName]) {
          return null
        }

        const active = routes.some((route) => pathname.includes(route))
        const AuthorizedSidebarOption = AuthorizedSidebarOptions[idx]
        return (
          <AuthorizedSidebarOption
            key={permissionName}
            active={active}
            indexRoute={routes[0]}
            projectId={projectId}
            icon={icon}
            name={name}
            link={`/project/${projectId}/dataGovernance/${routes[0]}`}
          />
        )
      }
    )
    return <Sidebar>{sidebarOptions}</Sidebar>
  }, [currentProject?.id, nextPermission, pathname])

  return (
    <div className={styles.sidebar}>
      {sidebar}
      <div className={styles.content}>{props.children}</div>
    </div>
  )
}

export default MainSidebar