fix: review ui

src/App.tsx

@@ -1,13 +1,13 @@
 import './App.css'
 
-import React, { FC, ReactElement, Suspense, useEffect } from 'react'
+import { FC, ReactElement, Suspense, useEffect } from 'react'
 import { Switch, Route, Redirect, BrowserRouter } from 'react-router-dom'
 import './i18n'
 import useRouter from './core/hooks/useRouter'
 import Home from './pages/Home'
 import Header from './pages/Header'
 import Dashboard from './pages/Dashboard'
-import PageLoading from './pages/PageLoading'
+import PageLoading from './shared/components/PageLoading'
 import { ApiProvider } from './core/context/api'
 import { useApi } from './core/hooks/useApi'
 import { useTranslation } from 'react-i18next'

src/core/context/dashboard-context.tsx

@@ -1,49 +1,72 @@
 import React, { useCallback, useEffect, useState } from 'react'
+import { useLocation } from 'react-router-dom'
 import { apiFetchMenuList } from '../data/api'
 import { useApi } from '../hooks/useApi'
-import { Menu } from '../types/classes/chain'
+import { Menu, NetworkType } from '../types/classes/chain'
 
 const DashboardContext: React.Context<{
   chains: Menu
   updateMenu: () => void
-  collapse: string[]
-  setCollapse: React.Dispatch<React.SetStateAction<string[]>>
+  collapse: NetworkType[]
+  toggleCollapse: (type: NetworkType) => void
 }> = React.createContext({} as any)
 interface Props {
   children: React.ReactNode
 }
 
-const DashboardProvider = React.memo(
-  ({ children }): React.ReactElement<Props> => {
-    const [chains, setChains] = useState<Menu>({} as Menu)
-    const [collapse, setCollapse] = useState<string[]>([])
-    const { user } = useApi()
-
-    const updateMenu = useCallback(() => {
-      apiFetchMenuList(user.id).then((_chains) => {
-        setChains(_chains)
-      })
-    }, [user.id])
-
-    useEffect(() => {
-      updateMenu()
-    }, [updateMenu])
-
-
-
-    return (
-      <DashboardContext.Provider
-        value={{
-          chains,
-          updateMenu,
-          collapse,
-          setCollapse,
-        }}
-      >
-        {children}
-      </DashboardContext.Provider>
-    )
+const DashboardProvider = (props: Props): React.ReactElement<Props> => {
+  const [chains, setChains] = useState<Menu>({} as Menu)
+  const [collapse, setCollapse] = useState<NetworkType[]>([])
+  const location = useLocation()
+  const { user } = useApi()
+
+  const updateMenu = useCallback(() => {
+    apiFetchMenuList(user.id).then((_chains) => {
+      setChains(_chains)
+    })
+  }, [user.id])
+
+  const toggleCollapse = (type: NetworkType) => {
+    const idx = collapse.indexOf(type)
+    if (idx > -1) {
+      collapse.splice(idx, 1)
+    } else {
+      collapse.push(type)
+    }
+    setCollapse(collapse.slice())
   }
-)
+
+  useEffect(() => {
+    const chain = location.pathname.split('/')[3] as NetworkType
+
+    for (let type in chains) {
+      const selectedChainInfo = chains[type].find((info) => info.name === chain)
+      if (selectedChainInfo && collapse.indexOf(chain) === -1) {
+        collapse.push(selectedChainInfo.network)
+        setCollapse(collapse.slice())
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname, chains])
+
+  useEffect(() => {
+    console.log('xxx')
+
+    updateMenu()
+  }, [updateMenu])
+
+  return (
+    <DashboardContext.Provider
+      value={{
+        chains,
+        updateMenu,
+        collapse,
+        toggleCollapse,
+      }}
+    >
+      {props.children}
+    </DashboardContext.Provider>
+  )
+}
 
 export { DashboardContext, DashboardProvider }

src/core/data/api.ts

@@ -24,7 +24,7 @@ export const apiLogin = async (): Promise<User> => {
       name: string
       status: string
       level: string
-      limit: { projectNum: number; bwDayLimit: number }
+      limit: { projectNum: number; bwDayLimit: number; reqDayLimit: number }
     }
   }>(`${API_DOMAIN}/auth/login`)
 
@@ -35,6 +35,7 @@ export const apiLogin = async (): Promise<User> => {
     maxProjectNum: res.user.limit.projectNum,
     projectNum: res.projectNum,
     bwDayLimit: res.user.limit.bwDayLimit,
+    reqDayLimit: res.user.limit.reqDayLimit,
   }
 }
 

src/core/types/classes/project.ts

@@ -1,8 +1,10 @@
 import { ProjectStatus, RequestType } from '../../enum'
+import { NetworkType } from './chain'
 // import {StatT} from './stat'
 
 export class Project {
   name: string
+  network: NetworkType
   createdAt: string
   team: string
   chain: string

src/core/types/classes/user.ts

@@ -5,4 +5,5 @@ export class User {
   maxProjectNum: number
   projectNum: number
   bwDayLimit: number
+  reqDayLimit: number
 }

src/pages/Dashboard/index.css

@@ -5,6 +5,7 @@
   display: flex;
 }
 .sider {
+  min-width: 260px;
   width: 260px;
   float: left;
   margin-right: 20px;
@@ -37,8 +38,15 @@
   margin-right: 16px;
 }
 .sider .project-list {
-  /* background-color: white; */
+  display: none;
+  overflow: hidden;
 }
+
+.sider .project-list.active {
+  display: block;
+  transition: height 2s;
+}
+
 .sider .project-item {
   position: relative;
   cursor: pointer;
@@ -64,7 +72,7 @@
   border-radius: 50%;
 }
 
-.sider .project-item.suspend::before {
+.sider .project-item.inactive::before {
   content: '';
   position: absolute;
   top: 18px;
@@ -88,11 +96,15 @@
   border-radius: 22px;
   font-weight: bold;
 }
+
 .sider .project-item:hover {
   transform: scale(1.1);
-  border-radius: 22px;
   transition: all 0.2s;
 }
+.sider .project-item-active:hover {
+  transform: scale(1);
+}
+
 .sider .project-item img {
   height: 25px;
   width: 25px;

src/pages/Dashboard/index.tsx

@@ -1,13 +1,20 @@
 import './index.css'
-import React, {
+import {
   useEffect,
   useMemo,
   useContext,
   FC,
   ReactElement,
   Fragment,
 } from 'react'
-import { Switch, Route, useHistory, useLocation, Link } from 'react-router-dom'
+import {
+  Switch,
+  Route,
+  useHistory,
+  useLocation,
+  Link,
+  Redirect,
+} from 'react-router-dom'
 import Projects from '../Projects'
 import Summary from '../Summary'
 import { ChainName } from '../../core/enum'
@@ -29,7 +36,7 @@ const CollapsedChains: FC<{
   const location = useLocation()
   const history = useHistory()
   const { t } = useTranslation()
-  const { collapse, setCollapse } = useContext(DashboardContext)
+  const { collapse, toggleCollapse } = useContext(DashboardContext)
 
   const choosedChain = useMemo(() => {
     const paths = location.pathname.split('/')
@@ -42,24 +49,14 @@ const CollapsedChains: FC<{
     return chainName
   }, [location.pathname])
 
-  const toggleCollapse = () => {
-    const idx = collapse.indexOf(type)
-    if (idx > -1) {
-      collapse.splice(idx, 1)
-    } else {
-      collapse.push(type)
-    }
-    setCollapse(collapse.slice())
-  }
-
   const renderIcon = () => {
     const Icons = subMenuMap[type].icon
     return <Icons collapse={collapse.indexOf(type) < 0} />
   }
 
   return (
     <Fragment>
-      <div className="chain-type" onClick={toggleCollapse}>
+      <div className="chain-type" onClick={() => toggleCollapse(type)}>
         <div className="chain-type-title">
           {renderIcon()}
           <span
@@ -78,41 +75,35 @@ const CollapsedChains: FC<{
             }}
           />
         </div>
-        {collapse.indexOf(type) > -1 && (
-          <ul className="project-list">
-            {chains.map((chain) => (
-              <li
-                key={chain.name}
-                className={`
+        <ul
+          className={`project-list ${
+            collapse.indexOf(type) > -1 ? 'active' : ''
+          }`}
+        >
+          {chains.map((chain) => (
+            <li
+              key={chain.name}
+              className={`
               project-item
               ${choosedChain === chain.name ? 'project-item-active' : ''}
               ${chain.status}
               `}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  // 请求数据
-                  history.push(`/dashboard/projects/${chain.name}/`)
-                }}
-              >
-                <img src={chainIconMap[chain.name]} alt="" />
-                <div className="project-item-main">
-                  <span>{chain.name}</span>
-                  {!!chain.count && (
-                    <div
-                      className={
-                        choosedChain === chain.name
-                          ? 'project-counts project-counts-active'
-                          : 'project-counts project-counts-default'
-                      }
-                    >
-                      {chain.count}
-                    </div>
-                  )}
-                </div>
-              </li>
-            ))}
-          </ul>
-        )}
+              onClick={(e) => {
+                e.stopPropagation()
+                // 请求数据
+                history.push(`/dashboard/projects/${chain.name}/`)
+              }}
+            >
+              <img src={chainIconMap[chain.name]} alt="" />
+              <div className="project-item-main">
+                <span>{chain.name}</span>
+                {!!chain.count && (
+                  <span className="project-counts">{chain.count}</span>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
       </div>
     </Fragment>
   )
@@ -173,6 +164,7 @@ const Dashboard: FC = (): ReactElement => {
         <Switch>
           <Route path="/dashboard/projects/:chain" component={Projects}></Route>
           <Route path="/dashboard/summary" component={Summary}></Route>
+          <Redirect to="/dashboard/summary" />
         </Switch>
       </div>
     </div>

src/pages/Header/index.tsx

@@ -141,6 +141,11 @@ const Header: React.FC = () => {
           </li>
           <li>
             <NavLink
+              onClick={() => {
+                if (!isLogged) {
+                  setLoginModalVisible(true)
+                }
+              }}
               to="/dashboard/summary"
               activeStyle={{
                 color: '#14B071',

src/pages/Home/index.tsx

@@ -89,7 +89,7 @@ const Home: React.FC = (): ReactElement => {
           },
           formatter: function (data: { value: number }[]) {
             if (chartType === 'request') return data[0].value + ''
-            return data[0].value.toFixed(2) + ' MB'
+            return data[0].value.toFixed(2) + ' GB'
           },
           extraCssText:
             'box-shadow: 0px 4px 32px 0px rgba(0,0,0,0.20); padding: 8px 12px',
@@ -104,7 +104,7 @@ const Home: React.FC = (): ReactElement => {
             data: res.stats
               .map((i) => {
                 if (chartType === 'request') return i[chartType]
-                return i[chartType] / 1000000
+                return i[chartType] / Math.pow(1024, 3)
               })
               .reverse(),
             type: 'bar',
@@ -184,9 +184,9 @@ const Home: React.FC = (): ReactElement => {
             </span>
             <span className="countup">
               <Countup
-                number={Math.floor(total.bandwidth / (1024 * 1024 * 1024))}
+                number={Math.floor(total.bandwidth / Math.pow(1024, 3))}
               />
-              G
+              GB
             </span>
           </div>
           <div
@@ -269,7 +269,7 @@ const Home: React.FC = (): ReactElement => {
                     <p className="product-tip">每天每个账户</p>
                   )}
                   <p className="product-text">
-                    {user.bwDayLimit / 1000000000} G
+                    {Math.floor(user.bwDayLimit / Math.pow(1000, 3))} GB
                   </p>
                   <p className="product-tip">
                     {i18n.language === Language.zh