suggested changes

2024-11-23 22:12:19 +03:00 · 2020-08-02 11:53:26 -07:00 · 2020-08-02 11:53:26 -07:00 · 1ae78fcdc6
commit 1ae78fcdc6
parent 72efbb2e98
10 changed files with 64 additions and 89 deletions
--- a/components/system/components/fragments/TableComponents.js
+++ b/components/system/components/fragments/TableComponents.js
@ -100,6 +100,7 @@ const STYLES_COLUMN = css`
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
+  min-width: 10%;
 `;

 const STYLES_TOP_COLUMN = css`
@ -109,6 +110,7 @@ const STYLES_TOP_COLUMN = css`
  justify-content: space-between;
  align-self: stretch;
  transition: 200ms ease all;
+  min-width: 10%;
 `;

 const STYLES_CONTENT = css`
@ -120,6 +122,7 @@ const STYLES_CONTENT = css`
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 12px;
+  min-width: 10%;
 `;

 const STYLES_CONTENT_BUTTON = css`
--- a/components/system/modules/FriendsList.js
+++ b/components/system/modules/FriendsList.js
@ -35,19 +35,60 @@ const STYLES_REJECT_BUTTON = css`
  color: ${Constants.system.black};
 `;

-const centerLeftStyle = {
+const STYLES_CENTER_LEFT = {
  display: "flex",
  height: "100%",
  alignItems: "center",
 };

-const centerRightStyle = {
+const STYLES_CENTER_RIGHT = {
  display: "flex",
  height: "100%",
  alignItems: "center",
  justifyContent: "flex-end",
 };

+const ExpandSection = ({ friend }) => {
+  return (
+    <div>
+      <div
+        style={{
+          display: "grid",
+          alignItems: "center",
+          gridTemplateColumns: "1fr 1fr",
+        }}
+      >
+        {friend.location ? (
+          <div>
+            <SVG.LocationPin
+              height="20px"
+              style={{
+                position: "relative",
+                top: "5px",
+                marginRight: "8px",
+              }}
+            />
+            {friend.location}
+          </div>
+        ) : null}
+        <div style={{ justifySelf: "end" }}>
+          <br />
+          <StatUpload size={friend.upload} style={{ marginRight: "16px" }} />
+          <StatDownload size={friend.download} />
+        </div>
+      </div>
+      <br />
+      <div>
+        <strong>Height</strong>: {friend.height}
+      </div>
+      <br />
+      <div style={{ wordBreak: "break-word" }}>
+        <strong>Chain Head</strong>: {friend.chainHead}
+      </div>
+    </div>
+  );
+};
+
 export class FriendsList extends React.Component {
  state = {
    selectedRowId: null,
@ -60,11 +101,7 @@ export class FriendsList extends React.Component {
  render() {
    return (
      <React.Fragment>
-        <div
-          style={{ fontSize: Constants.typescale.lvl2, marginBottom: "8px" }}
-        >
-          Requests
-        </div>
+        <div css={STYLES_HEADER}>Requests</div>
        <Table
          noColor
          noLabel
@ -73,23 +110,23 @@ export class FriendsList extends React.Component {
              {
                key: "image",
                width: "64px",
-                style: centerLeftStyle,
+                style: STYLES_CENTER_LEFT,
              },
              {
                key: "user",
                width: "100%",
-                style: centerLeftStyle,
+                style: STYLES_CENTER_LEFT,
              },
              {
                key: "accept",
                width: "92px",
-                style: centerRightStyle,
+                style: STYLES_CENTER_RIGHT,
                contentStyle: { padding: "0px" },
              },
              {
                key: "reject",
                width: "92px",
-                style: centerRightStyle,
+                style: STYLES_CENTER_RIGHT,
                contentStyle: { padding: "0px" },
              },
            ],
@ -98,7 +135,7 @@ export class FriendsList extends React.Component {
                id: each.user,
                user: (
                  <a
-                    href={"/" + each.user}
+                    href={`/${each.user}`}
                    target="_blank"
                    style={{
                      color: Constants.system.black,
@ -140,11 +177,7 @@ export class FriendsList extends React.Component {
        />
        <br />
        <br />
-        <div
-          style={{ fontSize: Constants.typescale.lvl2, marginBottom: "8px" }}
-        >
-          Peers
-        </div>
+        <div css={STYLES_HEADER}>Peers</div>
        <Table
          noColor
          noLabel
@ -155,12 +188,12 @@ export class FriendsList extends React.Component {
              {
                key: "image",
                width: "64px",
-                style: centerLeftStyle,
+                style: STYLES_CENTER_LEFT,
              },
              {
                key: "user",
                width: "100%",
-                style: centerLeftStyle,
+                style: STYLES_CENTER_LEFT,
              },
            ],
            rows: this.props.data.friends.map((each) => {
@ -194,47 +227,7 @@ export class FriendsList extends React.Component {
                    />
                  </div>
                ),
-                children: (
-                  <div>
-                    <div
-                      style={{
-                        display: "grid",
-                        alignItems: "center",
-                        gridTemplateColumns: "1fr 1fr",
-                      }}
-                    >
-                      {each.info.location ? (
-                        <div>
-                          <SVG.LocationPin
-                            height="20px"
-                            style={{
-                              position: "relative",
-                              top: "5px",
-                              marginRight: "8px",
-                            }}
-                          />
-                          {each.info.location}
-                        </div>
-                      ) : null}
-                      <div style={{ justifySelf: "end" }}>
-                        <br />
-                        <StatUpload
-                          size={each.info.upload}
-                          style={{ marginRight: "16px" }}
-                        />
-                        <StatDownload size={each.info.download} />
-                      </div>
-                    </div>
-                    <br />
-                    <div>
-                      <strong>Height</strong>: {each.info.height}
-                    </div>
-                    <br />
-                    <div style={{ wordBreak: "break-word" }}>
-                      <strong>Chain Head</strong>: {each.info.chainHead}
-                    </div>
-                  </div>
-                ),
+                children: <ExpandSection friend={each.info} />,
              };
            }),
          }}
--- a/pages/experiences/create-address.js
+++ b/pages/experiences/create-address.js
@ -5,13 +5,11 @@ import SystemPage from "~/components/system/SystemPage";
 import ViewSourceLink from "~/components/system/ViewSourceLink";
 import CodeBlock from "~/components/system/CodeBlock";

-import { POWERGATE_HOST } from "~/node_common/constants";
-
 const EXAMPLE_CODE = `import * as React from "react";
 import { CreateFilecoinAddress } from "slate-react-system";
 import { createPow } from "@textile/powergate-client";

-const PowerGate = createPow({ host: "${POWERGATE_HOST}" });
+const PowerGate = createPow({ host: "https://grpcweb.slate.textile.io" });

 class Example extends React.Component {
  componentDidMount = async () => {
--- a/pages/experiences/filecoin-settings.js
+++ b/pages/experiences/filecoin-settings.js
@ -5,8 +5,6 @@ import SystemPage from "~/components/system/SystemPage";
 import ViewSourceLink from "~/components/system/ViewSourceLink";
 import CodeBlock from "~/components/system/CodeBlock";

-import { POWERGATE_HOST } from "~/node_common/constants";
-
 const addrsList = [
  {
    addr:
@ -54,7 +52,7 @@ const EXAMPLE_CODE = `import * as React from "react";
 import { FilecoinSettings } from "slate-react-system";
 import { createPow } from "@textile/powergate-client";

-const PowerGate = createPow({ host: "${POWERGATE_HOST}" });
+const PowerGate = createPow({ host: "https://grpcweb.slate.textile.io" });

 class Example extends React.Component {
  componentDidMount = async () => {
@ -73,7 +71,6 @@ class Example extends React.Component {
  render() {
    return (
      <FilecoinSettings
-        autoApprove={this.state.autoApprove}
        defaultStorageConfig={this.state.defaultStorageConfig}
        addrsList={this.state.addrsList}
        onSave={this._handleSave}
@ -84,10 +81,6 @@ class Example extends React.Component {
 `;

 export default class SystemPageFilecoinSettings extends React.Component {
-  state = {
-    autoApprove: true,
-  };
-
  render() {
    return (
      <SystemPage
@ -112,7 +105,6 @@ export default class SystemPageFilecoinSettings extends React.Component {
        <br />
        <br />
        <System.FilecoinSettings
-          autoApprove={this.state.autoApprove}
          addrsList={addrsList}
          defaultStorageConfig={defaultStorageConfig}
          onSave={this._handleSave}
--- a/pages/experiences/filecoin-wallet-balances.js
+++ b/pages/experiences/filecoin-wallet-balances.js
@ -5,13 +5,11 @@ import SystemPage from "~/components/system/SystemPage";
 import ViewSourceLink from "~/components/system/ViewSourceLink";
 import CodeBlock from "~/components/system/CodeBlock";

-import { POWERGATE_HOST } from "~/node_common/constants";
-
 const EXAMPLE_CODE = `import * as React from "react";
 import { FilecoinBalancesList } from "slate-react-system";
 import { createPow } from "@textile/powergate-client";

-const PowerGate = createPow({ host: "${POWERGATE_HOST}" });
+const PowerGate = createPow({ host: "https://grpcweb.slate.textile.io" });

 class Example extends React.Component {
  componentDidMount = async () => {
--- a/pages/experiences/generate-powergate-token.js
+++ b/pages/experiences/generate-powergate-token.js
@ -5,14 +5,13 @@ import SystemPage from "~/components/system/SystemPage";
 import ViewSourceLink from "~/components/system/ViewSourceLink";
 import CodeBlock from "~/components/system/CodeBlock";

-import { POWERGATE_HOST } from "~/node_common/constants";
 // import { createPow } from "@textile/powergate-client";

 const EXAMPLE_CODE = `import * as React from "react";
 import { CreateToken } from "slate-react-system";
 import { createPow } from "@textile/powergate-client";

-const PowerGate = createPow({ host: "${POWERGATE_HOST}" });
+const PowerGate = createPow({ host: "https://grpcweb.slate.textile.io" });

 class Example extends React.Component {
  state = {
--- a/pages/experiences/list-filecoin-deals.js
+++ b/pages/experiences/list-filecoin-deals.js
@ -7,8 +7,6 @@ import SystemPage from "~/components/system/SystemPage";
 import ViewSourceLink from "~/components/system/ViewSourceLink";
 import CodeBlock from "~/components/system/CodeBlock";

-import { POWERGATE_HOST } from "~/node_common/constants";
-
 const EXAMPLE_CODE = `import * as React from "react";
 import {
  FilecoinStorageDealsList,
@ -16,7 +14,7 @@ import {
 } from "slate-react-system";
 import { createPow, ffsOptions } from "@textile/powergate-client";

-const PowerGate = createPow({ host: "${POWERGATE_HOST}" });
+const PowerGate = createPow({ host: "https://grpcweb.slate.textile.io" });

 const includeFinal = ffsOptions.withIncludeFinal(true);

--- a/pages/experiences/make-storage-deal.js
+++ b/pages/experiences/make-storage-deal.js
@ -5,13 +5,11 @@ import SystemPage from "~/components/system/SystemPage";
 import ViewSourceLink from "~/components/system/ViewSourceLink";
 import CodeBlock from "~/components/system/CodeBlock";

-import { POWERGATE_HOST } from "~/node_common/constants";
-
 const EXAMPLE_CODE = `import * as React from "react";
 import { CreateFilecoinStorageDeal } from "slate-react-system";
 import { createPow } from "@textile/powergate-client";

-const PowerGate = createPow({ host: "${POWERGATE_HOST}" });
+const PowerGate = createPow({ host: "https://grpcweb.slate.textile.io" });

 class Example extends React.Component {
  componentDidMount = async () => {
--- a/pages/experiences/peers-list.js
+++ b/pages/experiences/peers-list.js
@ -5,13 +5,11 @@ import SystemPage from "~/components/system/SystemPage";
 import ViewSourceLink from "~/components/system/ViewSourceLink";
 import CodeBlock from "~/components/system/CodeBlock";

-import { POWERGATE_HOST } from "~/node_common/constants";
-
 const EXAMPLE_CODE = `import * as React from "react";
 import { PeersList } from "slate-react-system";
 import { createPow } from "@textile/powergate-client";

-const PowerGate = createPow({ host: "${POWERGATE_HOST}" });
+const PowerGate = createPow({ host: "https://grpcweb.slate.textile.io" });

 class Example extends React.Component {
  componentDidMount = async () => {
--- a/pages/experiences/send-address-filecoin.js
+++ b/pages/experiences/send-address-filecoin.js
@ -5,13 +5,11 @@ import SystemPage from "~/components/system/SystemPage";
 import ViewSourceLink from "~/components/system/ViewSourceLink";
 import CodeBlock from "~/components/system/CodeBlock";

-import { POWERGATE_HOST } from "~/node_common/constants";
-
 const EXAMPLE_CODE = `import * as React from "react";
 import { SendAddressFilecoin } from "slate-react-system";
 import { createPow } from "@textile/powergate-client";

-const PowerGate = createPow({ host: "${POWERGATE_HOST}" });
+const PowerGate = createPow({ host: "https://grpcweb.slate.textile.io" });

 class Example extends React.Component {
  componentDidMount = async () => {