cleanup: remove unused imports, better prop names, unused props

common/navigation-data.js

@@ -42,12 +42,15 @@ export const generate = (library) => [
     decorator: "SLATES",
     children: [],
   },
+  // TODO(colin):
+  // re-enable this when we do local offline.
   {
     id: 4,
     name: "Local",
     pageTitle: "Your local data",
     decorator: "LOCAL_DATA",
     children: [],
+    ignore: true,
   },
   {
     id: 5,
@@ -88,4 +91,12 @@ export const generate = (library) => [
     children: null,
     ignore: true,
   },
+  {
+    id: 17,
+    name: null,
+    pageTitle: "slate",
+    decorator: "SLATE",
+    children: null,
+    ignore: true,
+  },
 ];

components/sidebars/SidebarCreateSlate.js

@@ -27,7 +27,7 @@ export default class SidebarCreateSlate extends React.Component {
       name: this.state.name,
     });
 
-    if (response) {
+    if (response && response.error) {
       // TODO(jim): Error task.
       alert(response.decorator);
     }
@@ -73,7 +73,7 @@ export default class SidebarCreateSlate extends React.Component {
 
         <System.ButtonSecondaryFull
           style={{ marginTop: 16 }}
-          onClick={this._handleSubmit}
+          onClick={this._handleCancel}
         >
           Cancel
         </System.ButtonSecondaryFull>

components/sidebars/SidebarCreateWalletAddress.js

@@ -28,9 +28,12 @@ export default class SidebarCreateWalletAddress extends React.Component {
     name: "",
     type: "1",
     default: false,
+    loading: false,
   };
 
-  _handleSubmit = () => {
+  _handleSubmit = async () => {
+    this.setState({ loading: true });
+
     const data = {
       name: this.state.name,
       wallet_type: SELECT_MENU_SAVE_STRINGS[this.state.type],
@@ -38,7 +41,9 @@ export default class SidebarCreateWalletAddress extends React.Component {
       type: "CREATE_WALLET_ADDRESS",
     };
 
-    this.props.onSubmit(data);
+    await this.props.onSubmit(data);
+
+    this.setState({ loading: false });
   };
 
   _handleCancel = () => {
@@ -87,9 +92,17 @@ export default class SidebarCreateWalletAddress extends React.Component {
         <System.ButtonPrimaryFull
           style={{ marginTop: 48 }}
           onClick={this._handleSubmit}
+          loading={this.state.loading}
         >
           Create {this.state.name}
         </System.ButtonPrimaryFull>
+
+        <System.ButtonSecondaryFull
+          style={{ marginTop: 16 }}
+          onClick={this._handleCancel}
+        >
+          Cancel
+        </System.ButtonSecondaryFull>
       </div>
     );
   }

components/sidebars/SidebarWalletSendFunds.js

@@ -32,7 +32,8 @@ export default class SidebarWalletSendFunds extends React.Component {
     amount: "",
   };
 
-  _handleSubmit = () => {
+  _handleSubmit = async () => {
+    this.setState({ loading: true });
     let addresses = {};
 
     this.props.viewer.addresses.forEach((a) => {
@@ -45,15 +46,19 @@ export default class SidebarWalletSendFunds extends React.Component {
       alert(
         "TODO: Proper message for not allowing poeple to send funds to the same address."
       );
+
+      this.setState({ loading: false });
       return;
     }
 
-    this.props.onSubmit({
+    await this.props.onSubmit({
       type: "SEND_WALLET_ADDRESS_FILECOIN",
       source: currentAddress.address,
       target: this.state.address,
       amount: this.state.amount,
     });
+
+    this.setState({ loading: false });
   };
 
   _handleCancel = () => {
@@ -114,9 +119,17 @@ export default class SidebarWalletSendFunds extends React.Component {
         <System.ButtonPrimaryFull
           style={{ marginTop: 48 }}
           onClick={this._handleSubmit}
+          loading={this.state.loading}
         >
           Send
         </System.ButtonPrimaryFull>
+
+        <System.ButtonSecondaryFull
+          style={{ marginTop: 16 }}
+          onClick={this._handleCancel}
+        >
+          Cancel
+        </System.ButtonSecondaryFull>
       </React.Fragment>
     );
   }

components/system/components/fragments/TableComponents.js

@@ -179,6 +179,9 @@ export const TableColumn = (props) => {
   );
 };
 
+// TODO(jim): We probably won't use this Table component for long.
+// Once we have components for all the necessary flows. We will probably
+// make bespoke components for each experience.
 export const TableContent = ({
   type,
   text,
@@ -313,6 +316,21 @@ export const TableContent = ({
       return Strings.toDate(text);
     case "FILE_SIZE":
       return Strings.bytesToSize(text, 2);
+    case "SLATE_LINK":
+      // NOTE(jim): Special case to prevent navigation.
+      if (!data) {
+        return text;
+      }
+
+      // NOTE(jim): Navigates to file.
+      return (
+        <span
+          css={STYLES_TABLE_CONTENT_LINK}
+          onClick={() => onNavigateTo({ id: 17 }, data)}
+        >
+          {text}
+        </span>
+      );
     case "FILE_LINK":
       // NOTE(jim): Special case to prevent navigation.
       if (!data) {

pages/application.js

@@ -4,37 +4,38 @@ import * as Actions from "~/common/actions";
 import * as State from "~/common/state";
 import * as Credentials from "~/common/credentials";
 
-import SceneDataTransfer from "~/scenes/SceneDataTransfer";
+// import SceneDataTransfer from "~/scenes/SceneDataTransfer";
+// import SceneLogs from "~/scenes/SceneLogs";
+// import ScenePaymentChannels from "~/scenes/ScenePaymentChannels";
+// import ScenePeers from "~/scenes/ScenePeers";
+// import SceneStats from "~/scenes/SceneStats";
+// import SceneStatus from "~/scenes/SceneStatus";
+// import SceneStorageMarket from "~/scenes/SceneStorageMarket";
 import SceneDeals from "~/scenes/SceneDeals";
 import SceneEditAccount from "~/scenes/SceneEditAccount";
 import SceneFile from "~/scenes/SceneFile";
 import SceneFilesFolder from "~/scenes/SceneFilesFolder";
 import SceneHome from "~/scenes/SceneHome";
-import SceneLogs from "~/scenes/SceneLogs";
 import SceneMiners from "~/scenes/SceneMiners";
-import ScenePaymentChannels from "~/scenes/ScenePaymentChannels";
-import ScenePeers from "~/scenes/ScenePeers";
 import SceneSettings from "~/scenes/SceneSettings";
-import SceneStats from "~/scenes/SceneStats";
-import SceneStatus from "~/scenes/SceneStatus";
-import SceneStorageMarket from "~/scenes/SceneStorageMarket";
 import SceneWallet from "~/scenes/SceneWallet";
 import SceneSlates from "~/scenes/SceneSlates";
 import SceneLocalData from "~/scenes/SceneLocalData";
 import SceneSettingsDeveloper from "~/scenes/SceneSettingsDeveloper";
 import SceneSignIn from "~/scenes/SceneSignIn";
+import SceneSlate from "~/scenes/SceneSlate";
 
+// import SidebarAddMiner from "~/components/sidebars/SidebarAddMiner";
+// import SidebarAddPeer from "~/components/sidebars/SidebarAddPeer";
+// import SidebarNotifications from "~/components/sidebars/SidebarNotifications";
+// import SidebarRedeemPaymentChannel from "~/components/sidebars/SidebarRedeemPaymentChannel";
+// import SidebarDeleteWalletAddress from "~/components/sidebars/SidebarDeleteWalletAddress";
+// import SidebarFileRetrievalDeal from "~/components/sidebars/SidebarFileRetrievalDeal";
 import SidebarCreateSlate from "~/components/sidebars/SidebarCreateSlate";
 import SidebarCreateWalletAddress from "~/components/sidebars/SidebarCreateWalletAddress";
-import SidebarDeleteWalletAddress from "~/components/sidebars/SidebarDeleteWalletAddress";
 import SidebarWalletSendFunds from "~/components/sidebars/SidebarWalletSendFunds";
 import SidebarFileStorageDeal from "~/components/sidebars/SidebarFileStorageDeal";
-import SidebarFileRetrievalDeal from "~/components/sidebars/SidebarFileRetrievalDeal";
 import SidebarCreatePaymentChannel from "~/components/sidebars/SidebarCreatePaymentChannel";
-import SidebarAddMiner from "~/components/sidebars/SidebarAddMiner";
-import SidebarAddPeer from "~/components/sidebars/SidebarAddPeer";
-import SidebarNotifications from "~/components/sidebars/SidebarNotifications";
-import SidebarRedeemPaymentChannel from "~/components/sidebars/SidebarRedeemPaymentChannel";
 import SidebarAddFileToBucket from "~/components/sidebars/SidebarAddFileToBucket";
 
 import ApplicationNavigation from "~/components/core/ApplicationNavigation";
@@ -308,6 +309,7 @@ export default class ApplicationPage extends React.Component {
   };
 
   _handleAction = (options) => {
+    console.log(options);
     if (options.type === "NAVIGATE") {
       return this._handleNavigateTo({ id: options.value }, options.data);
     }
@@ -400,16 +402,9 @@ export default class ApplicationPage extends React.Component {
   };
 
   sidebars = {
-    SIDEBAR_NOTIFICATIONS: <SidebarNotifications />,
-    SIDEBAR_ADD_PEER: <SidebarAddPeer />,
-    SIDEBAR_ADD_MINER: <SidebarAddMiner />,
-    SIDEBAR_CREATE_PAYMENT_CHANNEL: <SidebarCreatePaymentChannel />,
     SIDEBAR_FILE_STORAGE_DEAL: <SidebarFileStorageDeal />,
-    SIDEBAR_FILE_RETRIEVAL_DEAL: <SidebarFileRetrievalDeal />,
     SIDEBAR_WALLET_SEND_FUNDS: <SidebarWalletSendFunds />,
     SIDEBAR_CREATE_WALLET_ADDRESS: <SidebarCreateWalletAddress />,
-    SIDEBAR_DELETE_WALLET_ADDRESS: <SidebarDeleteWalletAddress />,
-    SIDEBAR_REDEEM_PAYMENT_CHANNEL: <SidebarRedeemPaymentChannel />,
     SIDEBAR_ADD_FILE_TO_BUCKET: <SidebarAddFileToBucket />,
     SIDEBAR_CREATE_SLATE: <SidebarCreateSlate />,
   };
@@ -417,17 +412,10 @@ export default class ApplicationPage extends React.Component {
   scenes = {
     HOME: <SceneHome />,
     WALLET: <SceneWallet />,
-    CHANNELS: <ScenePaymentChannels />,
     FOLDER: <SceneFilesFolder />,
     FILE: <SceneFile />,
+    SLATE: <SceneSlate />,
     DEALS: <SceneDeals />,
-    DATA_TRANSFER: <SceneDataTransfer />,
-    STATS: <SceneStats />,
-    STORAGE_MARKET: <SceneStorageMarket />,
-    MINERS: <SceneMiners />,
-    STATUS: <SceneStatus />,
-    PEERS: <ScenePeers />,
-    LOGS: <SceneLogs />,
     SETTINGS: <SceneSettings />,
     SETTINGS_DEVELOPER: <SceneSettingsDeveloper />,
     EDIT_ACCOUNT: <SceneEditAccount />,
@@ -481,10 +469,10 @@ export default class ApplicationPage extends React.Component {
     );
 
     const scene = React.cloneElement(this.scenes[current.target.decorator], {
+      current: current.target,
+      data: this.state.data,
       viewer: this.state.viewer,
       selected: this.state.selected,
-      data: current.target,
-      file: this.state.data,
       onNavigateTo: this._handleNavigateTo,
       onSelectedChange: this._handleSelectedChange,
       onViewerChange: this._handleViewerChange,
@@ -498,11 +486,11 @@ export default class ApplicationPage extends React.Component {
     let sidebarElement;
     if (this.state.sidebar) {
       sidebarElement = React.cloneElement(this.state.sidebar, {
+        selected: this.state.selected,
         viewer: this.state.viewer,
         data: this.state.data,
         fileLoading: this.state.fileLoading,
         sidebarLoading: this.state.sidebarLoading,
-        selected: this.state.selected,
         onSelectedChange: this._handleSelectedChange,
         onSubmit: this._handleSubmit,
         onCancel: this._handleCancel,

scenes/SceneFile.js

@@ -116,7 +116,7 @@ export default class SceneFile extends React.Component {
   };
 
   render() {
-    const { file } = this.props;
+    const file = this.props.data;
 
     const fileName = `${file.name}`;
     const fileURL = `https://hub.textile.io${file.ipfs}`;

scenes/SceneFilesFolder.js

@@ -48,8 +48,6 @@ export default class SceneFilesFolder extends React.Component {
   }
 
   render() {
-    console.log(this.props.viewer.library[0].children);
-
     let rows = this.props.viewer.library[0].children.map((each) => {
       return {
         ...each,
@@ -103,8 +101,7 @@ export default class SceneFilesFolder extends React.Component {
       <ScenePage>
         <Section
           onAction={this.props.onAction}
-          onNavigateTo={this.props.onNavigateTo}
-          title={this.props.data.name}
+          title={this.props.current.name}
           buttons={[
             {
               name: "Upload to IPFS",
@@ -114,7 +111,7 @@ export default class SceneFilesFolder extends React.Component {
           ]}
         >
           <System.Table
-            key={this.props.data.folderId}
+            key={this.props.current.folderId}
             data={data}
             onAction={this.props.onAction}
             onNavigateTo={this.props.onNavigateTo}

scenes/SceneHome.js

@@ -51,11 +51,10 @@ export default class SceneHome extends React.Component {
   };
 
   render() {
-    console.log(this.props.viewer.slates);
     // TODO(jim): Refactor later.
     const slates = {
       columns: [
-        { key: "id", id: "id", name: "ID" },
+        { key: "id", id: "id", name: "ID", type: "SLATE_LINK" },
         { key: "slatename", name: "Slate Name", width: "228px" },
         { key: "url", name: "URL", width: "268px" },
         {
@@ -68,9 +67,11 @@ export default class SceneHome extends React.Component {
       rows: this.props.viewer.slates.map((each) => {
         return {
           ...each,
-          url: `https://slate.host/@${this.props.viewer.username}/${
-            each.slatename
-          }`,
+          url: each.data.public
+            ? `https://slate.host/@${this.props.viewer.username}/${
+                each.slatename
+              }`
+            : null,
           public: false,
         };
       }),
@@ -119,7 +120,7 @@ export default class SceneHome extends React.Component {
       {
         name: "View files",
         type: "NAVIGATE",
-        value: this.props.viewer.library[0].folderId,
+        value: this.props.viewer.library[0].id,
       },
       {
         name: "Upload to IPFS",
@@ -155,37 +156,40 @@ export default class SceneHome extends React.Component {
           buttons={slateButtons}
           onAction={this.props.onAction}
         >
-          <System.Table data={slates} name="slate" />
+          <System.Table
+            data={slates}
+            name="slate"
+            onAction={this.props.onAction}
+            onNavigateTo={this.props.onNavigateTo}
+          />
         </Section>
 
         {this.props.viewer.library[0] ? (
           <Section
-            onAction={this.props.onAction}
-            onNavigateTo={this.props.onNavigateTo}
             title="Recent data"
             buttons={dataButtons}
+            onAction={this.props.onAction}
           >
             <System.Table
               data={data}
+              name="data"
               onAction={this.props.onAction}
               onNavigateTo={this.props.onNavigateTo}
-              name="data"
             />
           </Section>
         ) : null}
 
         {this.props.viewer.addresses[0] ? (
           <Section
-            onAction={this.props.onAction}
-            onNavigateTo={this.props.onNavigateTo}
             title="Wallet addresses"
             buttons={walletButtons}
+            onAction={this.props.onAction}
           >
             <System.Table
               data={wallet}
+              name="transaction"
               onAction={this.props.onAction}
               onNavigateTo={this.props.onNavigateTo}
-              name="transaction"
             />
           </Section>
         ) : null}

scenes/SceneSlate.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as System from "~/components/system";
+
+import { css } from "@emotion/react";
+
+import ScenePage from "~/components/core/ScenePage";
+
+// TODO(jim): Figure out the local data story.
+export default class SceneSlate extends React.Component {
+  render() {
+    console.log(this.props);
+    return <ScenePage>Scene Slate</ScenePage>;
+  }
+}

scenes/SceneSlates.js

@@ -5,7 +5,7 @@ import { css } from "@emotion/react";
 
 import ScenePage from "~/components/core/ScenePage";
 
-// TODO(jim): Slates
+// TODO(jim): Slates design.
 export default class SceneSlates extends React.Component {
   render() {
     return <ScenePage>Slates Prototype</ScenePage>;