refactor: improve code reuse rate (#1515)

web/src/AdapterEditPage.js

@@ -109,7 +109,10 @@ class AdapterEditPage extends React.Component {
             {Setting.getLabel(i18next.t("general:Organization"), i18next.t("general:Organization - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} style={{width: "100%"}} value={this.state.adapter.organization} onChange={(value => {this.updateAdapterField("organization", value);})}>
+            <Select virtual={false} style={{width: "100%"}} value={this.state.adapter.organization} onChange={(value => {
+              this.getModels(value);
+              this.updateAdapterField("organization", value);
+            })}>
               {
                 this.state.organizations.map((organization, index) => <Option key={index} value={organization.name}>{organization.name}</Option>)
               }

web/src/App.js

@@ -85,6 +85,7 @@ class App extends Component {
       menuVisible: false,
       themeAlgorithm: ["default"],
       themeData: Setting.ThemeDefault,
+      logo: this.getLogo(Setting.getAlgorithmNames(Setting.ThemeDefault)),
     };
 
     Setting.initServerUrl();
@@ -330,12 +331,12 @@ class App extends Component {
           {
             this.renderAvatar()
           }
-           
+             
-           
+             
           {Setting.isMobile() ? null : Setting.getShortName(this.state.account.displayName)} &nbsp; <DownOutlined />
-          &nbsp;
+            &nbsp;
-          &nbsp;
+            &nbsp;
-          &nbsp;
+            &nbsp;
         </div>
       </Dropdown>
     );
@@ -484,8 +485,8 @@ class App extends Component {
 
   isStartPages() {
     return window.location.pathname.startsWith("/login") ||
-      window.location.pathname.startsWith("/signup") ||
+        window.location.pathname.startsWith("/signup") ||
-      window.location.pathname === "/";
+        window.location.pathname === "/";
   }
 
   renderRouter() {
@@ -559,7 +560,7 @@ class App extends Component {
         <Header style={{padding: "0", marginBottom: "3px", backgroundColor: this.state.themeAlgorithm.includes("dark") ? "black" : "white"}}>
           {Setting.isMobile() ? null : (
             <Link to={"/"}>
-              <div className="logo" style={{background: `url(${this.getLogo(Setting.getAlgorithmNames(this.state.themeData))})`}} />
+              <div className="logo" style={{background: `url(${this.state.logo})`}} />
             </Link>
           )}
           {Setting.isMobile() ?
@@ -611,7 +612,7 @@ class App extends Component {
             textAlign: "center",
           }
         }>
-          Powered by <a target="_blank" href="https://casdoor.org" rel="noreferrer"><img style={{paddingBottom: "3px"}} height={"20px"} alt={"Casdoor"} src={this.getLogo(Setting.getAlgorithmNames(this.state.themeData))} /></a>
+            Powered by <a target="_blank" href="https://casdoor.org" rel="noreferrer"><img style={{paddingBottom: "3px"}} height={"20px"} alt={"Casdoor"} src={this.state.logo} /></a>
         </Footer>
       </React.Fragment>
     );
@@ -623,11 +624,11 @@ class App extends Component {
 
   isEntryPages() {
     return window.location.pathname.startsWith("/signup") ||
-      window.location.pathname.startsWith("/login") ||
+        window.location.pathname.startsWith("/login") ||
-      window.location.pathname.startsWith("/forget") ||
+        window.location.pathname.startsWith("/forget") ||
-      window.location.pathname.startsWith("/prompt") ||
+        window.location.pathname.startsWith("/prompt") ||
-      window.location.pathname.startsWith("/cas") ||
+        window.location.pathname.startsWith("/cas") ||
-      window.location.pathname.startsWith("/auto-signup");
+        window.location.pathname.startsWith("/auto-signup");
   }
 
   renderPage() {
@@ -643,12 +644,7 @@ class App extends Component {
                   onUpdateAccount={(account) => {
                     this.onUpdateAccount(account);
                   }}
-                  updataThemeData={(nextThemeData) => {
+                  updataThemeData={this.setTheme}
-                    this.setState({
-                      themeData: nextThemeData,
-                    });
-                    localStorage.setItem("themeAlgorithm", Setting.getAlgorithmNames(nextThemeData).toString());
-                  }}
                 /> :
                 <Switch>
                   <Route exact path="/callback" component={AuthCallback} />

web/src/ApplicationListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Col, List, Popconfirm, Result, Row, Table, Tooltip} from "antd";
+import {Button, Col, List, Popconfirm, Row, Table, Tooltip} from "antd";
 import {EditOutlined} from "@ant-design/icons";
 import moment from "moment";
 import * as Setting from "./Setting";
@@ -25,19 +25,12 @@ import BaseListPage from "./BaseListPage";
 class ApplicationListPage extends BaseListPage {
   constructor(props) {
     super(props);
-    this.state = {
+  }
-      classes: props,
+
-      organizationName: props.account.owner,
+  componentDidMount() {
-      data: [],
+    this.setState({
-      pagination: {
+      organizationName: this.props.account.owner,
-        current: 1,
+    });
-        pageSize: 10,
-      },
-      loading: false,
-      searchText: "",
-      searchedColumn: "",
-      isAuthorized: true,
-    };
   }
 
   newApplication() {
@@ -259,17 +252,6 @@ class ApplicationListPage extends BaseListPage {
       showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
     };
 
-    if (!this.state.isAuthorized) {
-      return (
-        <Result
-          status="403"
-          title="403 Unauthorized"
-          subTitle={i18next.t("general:Sorry, you do not have permission to access this page or logged in status invalid.")}
-          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
-        />
-      );
-    }
-
     return (
       <div>
         <Table scroll={{x: "max-content"}} columns={columns} dataSource={applications} rowKey="name" size="middle" bordered pagination={paginationProps}

web/src/ManagedAccountTable.js

@@ -25,16 +25,14 @@ class ManagedAccountTable extends React.Component {
     super(props);
     this.state = {
       classes: props,
-      managedAccounts: [],
+      managedAccounts: this.props.table !== null ? this.props.table.map((item, index) => {
+        item.key = index;
+        return item;
+      }) : [],
     };
-
-    this.state.managedAccounts = this.props.table.map((item, index) => {
-      item.key = index;
-      return item;
-    });
   }
 
-  count = this.props.table.length;
+  count = this.props.table?.length ?? 0;
 
   updateTable(table) {
     this.setState({

web/src/OrganizationListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Popconfirm, Result, Switch, Table} from "antd";
+import {Button, Popconfirm, Switch, Table} from "antd";
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
@@ -246,17 +246,6 @@ class OrganizationListPage extends BaseListPage {
       showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
     };
 
-    if (!this.state.isAuthorized) {
-      return (
-        <Result
-          status="403"
-          title="403 Unauthorized"
-          subTitle={i18next.t("general:Sorry, you do not have permission to access this page or logged in status invalid.")}
-          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
-        />
-      );
-    }
-
     return (
       <div>
         <Table scroll={{x: "max-content"}} columns={columns} dataSource={organizations} rowKey="name" size="middle" bordered pagination={paginationProps}

web/src/ProviderListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Popconfirm, Result, Table} from "antd";
+import {Button, Popconfirm, Table} from "antd";
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as ProviderBackend from "./backend/ProviderBackend";
@@ -25,20 +25,14 @@ import BaseListPage from "./BaseListPage";
 class ProviderListPage extends BaseListPage {
   constructor(props) {
     super(props);
-    this.state = {
-      classes: props,
-      owner: Setting.isAdminUser(props.account) ? "admin" : props.account.owner,
-      data: [],
-      pagination: {
-        current: 1,
-        pageSize: 10,
-      },
-      loading: false,
-      searchText: "",
-      searchedColumn: "",
-      isAuthorized: true,
-    };
   }
+
+  componentDidMount() {
+    this.setState({
+      owner: Setting.isAdminUser(this.props.account) ? "admin" : this.props.account.owner,
+    });
+  }
+
   newProvider() {
     const randomName = Setting.getRandomName();
     return {
@@ -228,17 +222,6 @@ class ProviderListPage extends BaseListPage {
       showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
     };
 
-    if (!this.state.isAuthorized) {
-      return (
-        <Result
-          status="403"
-          title="403 Unauthorized"
-          subTitle={i18next.t("general:Sorry, you do not have permission to access this page or logged in status invalid.")}
-          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
-        />
-      );
-    }
-
     return (
       <div>
         <Table scroll={{x: "max-content"}} columns={columns} dataSource={providers} rowKey="name" size="middle" bordered pagination={paginationProps}

web/src/ResourceListPage.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Popconfirm, Result, Table, Upload} from "antd";
+import {Button, Popconfirm, Table, Upload} from "antd";
 import {UploadOutlined} from "@ant-design/icons";
 import copy from "copy-to-clipboard";
 import * as Setting from "./Setting";
@@ -25,20 +25,13 @@ import BaseListPage from "./BaseListPage";
 class ResourceListPage extends BaseListPage {
   constructor(props) {
     super(props);
-    this.state = {
+  }
-      classes: props,
+
-      data: [],
+  componentDidMount() {
-      pagination: {
+    this.setState({
-        current: 1,
-        pageSize: 10,
-      },
-      loading: false,
-      searchText: "",
-      searchedColumn: "",
       fileList: [],
       uploading: false,
-      isAuthorized: true,
+    });
-    };
   }
 
   deleteResource(i) {
@@ -273,17 +266,6 @@ class ResourceListPage extends BaseListPage {
       showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
     };
 
-    if (!this.state.isAuthorized) {
-      return (
-        <Result
-          status="403"
-          title="403 Unauthorized"
-          subTitle={i18next.t("general:Sorry, you do not have permission to access this page or logged in status invalid.")}
-          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
-        />
-      );
-    }
-
     return (
       <div>
         <Table scroll={{x: "max-content"}} columns={columns} dataSource={resources} rowKey="name" size="middle" bordered pagination={paginationProps}

web/src/UserEditPage.js

@@ -182,7 +182,10 @@ class UserEditPage extends React.Component {
             {Setting.getLabel(i18next.t("general:Organization"), i18next.t("general:Organization - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} style={{width: "100%"}} disabled={disabled} value={this.state.user.owner} onChange={(value => {this.updateUserField("owner", value);})}>
+            <Select virtual={false} style={{width: "100%"}} disabled={disabled} value={this.state.user.owner} onChange={(value => {
+              this.getApplicationsByOrganization(value);
+              this.updateUserField("owner", value);
+            })}>
               {
                 this.state.organizations.map((organization, index) => <Option key={index} value={organization.name}>{organization.name}</Option>)
               }

web/src/UserListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Popconfirm, Result, Switch, Table, Upload} from "antd";
+import {Button, Popconfirm, Switch, Table, Upload} from "antd";
 import {UploadOutlined} from "@ant-design/icons";
 import moment from "moment";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
@@ -26,20 +26,13 @@ import BaseListPage from "./BaseListPage";
 class UserListPage extends BaseListPage {
   constructor(props) {
     super(props);
-    this.state = {
+  }
-      classes: props,
+
-      organizationName: props.match.params.organizationName,
+  componentDidMount() {
+    this.setState({
+      organizationName: this.props.match.params.organizationName,
       organization: null,
-      data: [],
+    });
-      pagination: {
-        current: 1,
-        pageSize: 10,
-      },
-      loading: false,
-      searchText: "",
-      searchedColumn: "",
-      isAuthorized: true,
-    };
   }
 
   newUser() {
@@ -371,17 +364,6 @@ class UserListPage extends BaseListPage {
       showTotal: () => i18next.t("general:{total} in total").replace("{total}", this.state.pagination.total),
     };
 
-    if (!this.state.isAuthorized) {
-      return (
-        <Result
-          status="403"
-          title="403 Unauthorized"
-          subTitle={i18next.t("general:Sorry, you do not have permission to access this page or logged in status invalid.")}
-          extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>}
-        />
-      );
-    }
-
     return (
       <div>
         <Table scroll={{x: "max-content"}} columns={columns} dataSource={users} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}