From ee1e08ae209832bf6c32059c04cc0e6cf01eb0f4 Mon Sep 17 00:00:00 2001
From: Yang Luo <hsluoyz@qq.com>
Date: Fri, 12 Feb 2021 00:31:53 +0800
Subject: [PATCH] Use react links.

---
 web/src/App.js                  | 48 ++++++++++++---------------------
 web/src/ApplicationListPage.js  | 15 ++++++-----
 web/src/OrganizationListPage.js |  7 +++--
 web/src/ProviderListPage.js     |  7 +++--
 web/src/UserListPage.js         |  7 +++--
 5 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/web/src/App.js b/web/src/App.js
index 28ba3d1d..e15e989b 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -17,7 +17,7 @@ import './App.css';
 import * as Setting from "./Setting";
 import {DownOutlined, LogoutOutlined, SettingOutlined} from '@ant-design/icons';
 import {Avatar, BackTop, Dropdown, Layout, Menu} from 'antd';
-import {Switch, Route, withRouter, Redirect} from 'react-router-dom'
+import {Switch, Route, withRouter, Redirect, Link} from 'react-router-dom'
 import * as AccountBackend from "./backend/AccountBackend";
 import OrganizationListPage from "./OrganizationListPage";
 import OrganizationEditPage from "./OrganizationEditPage";
@@ -80,16 +80,9 @@ class App extends Component {
     AccountBackend.getAccount()
       .then((res) => {
         const account = Setting.parseJson(res.data);
-        if (window.location.pathname === '/' && account === null) {
-          Setting.goToLink("/");
-        }
         this.setState({
           account: account,
         });
-
-        if (account !== undefined && account !== null) {
-          window.mouselogUserId = account.username;
-        }
       });
   }
 
@@ -161,24 +154,17 @@ class App extends Component {
       res.push(this.renderRightDropdown());
     } else {
       res.push(
-        <Menu.Item key="1" style={{float: 'right', marginRight: '20px'}}>
-          <a href="/register">
+        <Menu.Item key="100" style={{float: 'right', marginRight: '20px'}}>
+          <Link to="/register">
             Register
-          </a>
+          </Link>
         </Menu.Item>
       );
       res.push(
-        <Menu.Item key="2" style={{float: 'right'}}>
-          <a href="/login">
+        <Menu.Item key="101" style={{float: 'right'}}>
+          <Link to="/login">
             Login
-          </a>
-        </Menu.Item>
-      );
-      res.push(
-        <Menu.Item key="4" style={{float: 'right'}}>
-          <a href="/">
-            Home
-          </a>
+          </Link>
         </Menu.Item>
       );
     }
@@ -195,37 +181,37 @@ class App extends Component {
 
     res.push(
       <Menu.Item key="0">
-        <a href="/">
+        <Link to="/">
           Home
-        </a>
+        </Link>
       </Menu.Item>
     );
     res.push(
       <Menu.Item key="1">
-        <a href="/organizations">
+        <Link to="/organizations">
           Organizations
-        </a>
+        </Link>
       </Menu.Item>
     );
     res.push(
       <Menu.Item key="2">
-        <a href="/users">
+        <Link to="/users">
           Users
-        </a>
+        </Link>
       </Menu.Item>
     );
     res.push(
       <Menu.Item key="3">
-        <a href="/providers">
+        <Link to="/providers">
           Providers
-        </a>
+        </Link>
       </Menu.Item>
     );
     res.push(
       <Menu.Item key="4">
-        <a href="/applications">
+        <Link to="/applications">
           Applications
-        </a>
+        </Link>
       </Menu.Item>
     );
 
diff --git a/web/src/ApplicationListPage.js b/web/src/ApplicationListPage.js
index c1afff0c..1184834b 100644
--- a/web/src/ApplicationListPage.js
+++ b/web/src/ApplicationListPage.js
@@ -1,4 +1,5 @@
 import React from "react";
+import {Link} from "react-router-dom";
 import {Button, Col, Popconfirm, Row, Table} from 'antd';
 import moment from "moment";
 import * as Setting from "./Setting";
@@ -76,7 +77,9 @@ class ApplicationListPage extends React.Component {
         sorter: (a, b) => a.name.localeCompare(b.name),
         render: (text, record, index) => {
           return (
-            <a href={`/applications/${text}`}>{text}</a>
+            <Link to={`/applications/${text}`}>
+              {text}
+            </Link>
           )
         }
       },
@@ -104,11 +107,9 @@ class ApplicationListPage extends React.Component {
         width: '100px',
         render: (text, record, index) => {
           return (
-            <div>
-              <a target="_blank" href={text}>
-                <img src={text} alt={text} width={150} style={{marginBottom: '20px'}}/>
-              </a>
-            </div>
+            <a target="_blank" href={text}>
+              <img src={text} alt={text} width={150} />
+            </a>
           )
         }
       },
@@ -127,7 +128,7 @@ class ApplicationListPage extends React.Component {
         render: (text, record, index) => {
           return (
             <div>
-              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => Setting.goToLink(`/applications/${record.name}`)}>Edit</Button>
+              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => this.props.history.push(`/applications/${record.name}`)}>Edit</Button>
               <Popconfirm
                 title={`Sure to delete application: ${record.name} ?`}
                 onConfirm={() => this.deleteApplication(index)}
diff --git a/web/src/OrganizationListPage.js b/web/src/OrganizationListPage.js
index 85eb8ee4..926f0bd7 100644
--- a/web/src/OrganizationListPage.js
+++ b/web/src/OrganizationListPage.js
@@ -1,4 +1,5 @@
 import React from "react";
+import {Link} from "react-router-dom";
 import {Button, Col, Popconfirm, Row, Table} from 'antd';
 import moment from "moment";
 import * as Setting from "./Setting";
@@ -75,7 +76,9 @@ class OrganizationListPage extends React.Component {
         sorter: (a, b) => a.name.localeCompare(b.name),
         render: (text, record, index) => {
           return (
-            <a href={`/organizations/${text}`}>{text}</a>
+            <Link to={`/organizations/${text}`}>
+              {text}
+            </Link>
           )
         }
       },
@@ -111,7 +114,7 @@ class OrganizationListPage extends React.Component {
         render: (text, record, index) => {
           return (
             <div>
-              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => Setting.goToLink(`/organizations/${record.name}`)}>Edit</Button>
+              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => this.props.history.push(`/organizations/${record.name}`)}>Edit</Button>
               <Popconfirm
                 title={`Sure to delete organization: ${record.name} ?`}
                 onConfirm={() => this.deleteOrganization(index)}
diff --git a/web/src/ProviderListPage.js b/web/src/ProviderListPage.js
index 35a67f7b..ed3a8523 100644
--- a/web/src/ProviderListPage.js
+++ b/web/src/ProviderListPage.js
@@ -1,4 +1,5 @@
 import React from "react";
+import {Link} from "react-router-dom";
 import {Button, Col, Popconfirm, Row, Table} from 'antd';
 import moment from "moment";
 import * as Setting from "./Setting";
@@ -78,7 +79,9 @@ class ProviderListPage extends React.Component {
         sorter: (a, b) => a.name.localeCompare(b.name),
         render: (text, record, index) => {
           return (
-            <a href={`/providers/${text}`}>{text}</a>
+            <Link to={`/providers/${text}`}>
+              {text}
+            </Link>
           )
         }
       },
@@ -135,7 +138,7 @@ class ProviderListPage extends React.Component {
         render: (text, record, index) => {
           return (
             <div>
-              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => Setting.goToLink(`/providers/${record.name}`)}>Edit</Button>
+              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => this.props.history.push(`/providers/${record.name}`)}>Edit</Button>
               <Popconfirm
                 title={`Sure to delete provider: ${record.name} ?`}
                 onConfirm={() => this.deleteProvider(index)}
diff --git a/web/src/UserListPage.js b/web/src/UserListPage.js
index 7649b87a..b77ad15c 100644
--- a/web/src/UserListPage.js
+++ b/web/src/UserListPage.js
@@ -1,4 +1,5 @@
 import React from "react";
+import {Link} from "react-router-dom";
 import {Button, Col, Popconfirm, Row, Table} from 'antd';
 import moment from "moment";
 import * as Setting from "./Setting";
@@ -78,7 +79,9 @@ class UserListPage extends React.Component {
         sorter: (a, b) => a.name.localeCompare(b.name),
         render: (text, record, index) => {
           return (
-            <a href={`/users/${text}`}>{text}</a>
+            <Link to={`/users/${text}`}>
+              {text}
+            </Link>
           )
         }
       },
@@ -135,7 +138,7 @@ class UserListPage extends React.Component {
         render: (text, record, index) => {
           return (
             <div>
-              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => Setting.goToLink(`/users/${record.name}`)}>Edit</Button>
+              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => this.props.history.push(`/users/${record.name}`)}>Edit</Button>
               <Popconfirm
                 title={`Sure to delete user: ${record.name} ?`}
                 onConfirm={() => this.deleteUser(index)}