refactor: improve code reuse rate (#1515)

2025-05-23 02:35:49 +08:00 · 2023-02-02 16:43:51 +08:00 · 2023-02-02 16:43:51 +08:00 · 19e7d0b0bd
commit 19e7d0b0bd
parent f6a502f7ff
9 changed files with 58 additions and 140 deletions
--- a/web/src/AdapterEditPage.js
+++ b/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>)
              }
--- a/web/src/App.js
+++ b/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()
          }
-          &nbsp;
-          &nbsp;
+            &nbsp;
+            &nbsp;
          {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 === "/";
+        window.location.pathname.startsWith("/signup") ||
+        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("/forget") ||
-      window.location.pathname.startsWith("/prompt") ||
-      window.location.pathname.startsWith("/cas") ||
-      window.location.pathname.startsWith("/auto-signup");
+        window.location.pathname.startsWith("/login") ||
+        window.location.pathname.startsWith("/forget") ||
+        window.location.pathname.startsWith("/prompt") ||
+        window.location.pathname.startsWith("/cas") ||
+        window.location.pathname.startsWith("/auto-signup");
  }

  renderPage() {
@ -643,12 +644,7 @@ class App extends Component {
                  onUpdateAccount={(account) => {
                    this.onUpdateAccount(account);
                  }}
-                  updataThemeData={(nextThemeData) => {
-                    this.setState({
-                      themeData: nextThemeData,
-                    });
-                    localStorage.setItem("themeAlgorithm", Setting.getAlgorithmNames(nextThemeData).toString());
-                  }}
+                  updataThemeData={this.setTheme}
                /> :
                <Switch>
                  <Route exact path="/callback" component={AuthCallback} />
--- a/web/src/ApplicationListPage.js
+++ b/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,
-      data: [],
-      pagination: {
-        current: 1,
-        pageSize: 10,
-      },
-      loading: false,
-      searchText: "",
-      searchedColumn: "",
-      isAuthorized: true,
-    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      organizationName: this.props.account.owner,
+    });
  }

  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}
--- a/web/src/ManagedAccountTable.js
+++ b/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({
--- a/web/src/OrganizationListPage.js
+++ b/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}
--- a/web/src/ProviderListPage.js
+++ b/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}
--- a/web/src/ResourceListPage.js
+++ b/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: [],
-      pagination: {
-        current: 1,
-        pageSize: 10,
-      },
-      loading: false,
-      searchText: "",
-      searchedColumn: "",
+  }
+
+  componentDidMount() {
+    this.setState({
      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}
--- a/web/src/UserEditPage.js
+++ b/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>)
              }
--- a/web/src/UserListPage.js
+++ b/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}