refactor linked devices page via react.js (#2515)

2025-09-06 09:21:54 +00:00 · 2018-11-10 17:14:07 +08:00
parent 2b67d49170
commit 1a88ba8787
6 changed files with 224 additions and 4 deletions
--- a/frontend/src/pages/linked-devices/linked-devices.js
+++ b/frontend/src/pages/linked-devices/linked-devices.js
@@ -0,0 +1,213 @@
+import moment from 'moment';
+import React, { Component } from 'react';
+import Toast from '../../components/toast';
+
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import { gettext, siteRoot, loginUrl } from '../../utils/constants';
+
+class Content extends Component {
+
+  render() {
+    const {loading, errorMsg, items} = this.props.data;
+
+    if (loading) {
+      return <span className="loading-icon loading-tip"></span>;
+    } else if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    } else {
+      const desktopThead = (
+        <thead>
+          <tr>
+            <th width="13%">{gettext("Platform")}</th>
+            <th width="30%">{gettext("Device Name")}</th>
+            <th width="30%">{gettext("IP")}</th>
+            <th width="17%">{gettext("Last Access")}</th>
+            <th width="10%"></th>
+          </tr>
+        </thead>
+      );
+      const mobileThead = (
+        <thead>
+          <tr>
+            <th width="25%">{gettext("Platform")}</th>
+            <th width="70%">{gettext('Device Name')}</th>
+            <th width="5%"></th>
+          </tr>
+        </thead>
+      );
+
+      return (
+        <table className="table table-hover table-vcenter">
+          {window.innerWidth >= 768 ? desktopThead : mobileThead}
+          <TableBody items={items} />
+        </table>
+      );
+    }
+  }
+}
+
+class TableBody extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: this.props.items
+    };
+  }
+
+  render() {
+
+    let listLinkedDevices = this.state.items.map(function(item, index) {
+      return <Item key={index} data={item} />;
+    }, this);
+
+    return (
+      <tbody>{listLinkedDevices}</tbody>
+    );
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showOpIcon: false,
+      unlinked: false
+    };
+
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleMouseOver() {
+    this.setState({
+      showOpIcon: true
+    });
+  }
+
+  handleMouseOut() {
+    this.setState({
+      showOpIcon: false
+    });
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+
+    const data = this.props.data;
+
+    seafileAPI.unLinkDevice(data.platform, data.device_id).then((res) => {
+      this.setState({
+        unlinked: true
+      });
+      let msg_s = gettext("Successfully unlink %(name)s.");
+      msg_s = msg_s.replace('%(name)s', data.device_name);
+      Toast.success(msg_s);
+    }).catch((error) => {
+      let message = gettext("Failed to unlink %(name)s");
+      message = message.replace('%(name)s', data.device_name);
+      Toast.error(message);
+    });
+  }
+
+  render() {
+    if (this.state.unlinked) {
+      return null;
+    }
+
+    const data = this.props.data;
+
+    let opClasses = 'sf2-icon-delete unlink-device op-icon';
+    opClasses += this.state.showOpIcon ? '' : ' invisible';
+
+    const desktopItem = (
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td>{data.platform}</td>
+        <td>{data.device_name}</td>
+        <td>{data.last_login_ip}</td>
+        <td>{moment(data.last_accessed).fromNow()}</td>
+        <td>
+          <a href="#" className={opClasses} title={gettext('Unlink')} aria-label={gettext('Unlink')} onClick={this.handleClick}></a>
+        </td>
+      </tr>
+    );
+
+    const mobileItem = (
+      <tr>
+        <td>{data.platform}</td>
+        <td>{data.device_name}</td>
+        <td>
+          <a href="#" className={opClasses} title={gettext('Unlink')} aria-label={gettext('Unlink')} onClick={this.handleClick}></a>
+        </td>
+      </tr>
+    );
+
+    if (window.innerWidth >= 768) {
+      return desktopItem;
+    } else {
+      return mobileItem;
+    }
+  }
+}
+
+class LinkedDevices extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      items: []
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.listLinkedDevices().then((res) => {
+      //res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
+      this.setState({
+        loading: false,
+        items: res.data
+      });
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          });
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          });
+        }
+
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
+    });
+  }
+
+  render() {
+    return (
+      <div className="cur-view-container" id="linked-devices">
+        <div className="cur-view-path">
+          <h3 className="sf-heading">{gettext('Linked Devices')}</h3>
+        </div>
+        <div className="cur-view-content">
+          <div className="table-container">
+            <Content data={this.state} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default LinkedDevices;