Use tabs for lightning page (#244)

* Use tabs for lightning page

* Use singleton instance of client class

frontend/squeak-node-frontend/src/components/CreateContactProfileDialog/CreateContactProfileDialog.js

@@ -32,9 +32,8 @@ import SqueakThreadItem from "../../components/SqueakThreadItem";
 import {
   CreateContactProfileRequest,
 } from "../../proto/squeak_admin_pb"
-import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function CreateContactProfileDialog({
   open,

frontend/squeak-node-frontend/src/components/CreatePeerDialog/CreatePeerDialog.js

@@ -32,9 +32,8 @@ import SqueakThreadItem from "../../components/SqueakThreadItem";
 import {
   CreatePeerRequest,
 } from "../../proto/squeak_admin_pb"
-import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function CreatePeerDialog({
   open,

frontend/squeak-node-frontend/src/components/CreateSigningProfileDialog/CreateSigningProfileDialog.js

@@ -32,9 +32,8 @@ import SqueakThreadItem from "../../components/SqueakThreadItem";
 import {
   CreateSigningProfileRequest,
 } from "../../proto/squeak_admin_pb"
-import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function CreateSigningProfileDialog({
   open,

frontend/squeak-node-frontend/src/components/DeletePeerDialog/DeletePeerDialog.js

@@ -31,9 +31,8 @@ import Widget from "../../components/Widget";
 import {
   DeletePeerRequest,
 } from "../../proto/squeak_admin_pb"
-import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function DeletePeerDialog({
   open,

frontend/squeak-node-frontend/src/components/DeleteProfileDialog/DeleteProfileDialog.js

@@ -31,9 +31,8 @@ import Widget from "../../components/Widget";
 import {
   DeleteSqueakProfileRequest,
 } from "../../proto/squeak_admin_pb"
-import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function DeleteProfileDialog({
   open,

frontend/squeak-node-frontend/src/components/DeleteSqueakDialog/DeleteSqueakDialog.js

@@ -32,9 +32,8 @@ import SqueakThreadItem from "../../components/SqueakThreadItem";
 import {
   DeleteSqueakRequest,
 } from "../../proto/squeak_admin_pb"
-import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function DeleteSqueakDialog({
   open,

frontend/squeak-node-frontend/src/components/MakeSqueakDialog/MakeSqueakDialog.js

@@ -30,9 +30,8 @@ import Widget from "../../components/Widget";
 import SqueakThreadItem from "../../components/SqueakThreadItem";
 
 import {MakeSqueakRequest, GetSigningProfilesRequest} from "../../proto/squeak_admin_pb"
-import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function MakeSqueakDialog({
   open,

frontend/squeak-node-frontend/src/pages/buy/Buy.js

@@ -25,9 +25,8 @@ import {
   GetAncestorSqueakDisplaysRequest,
   GetBuyOffersRequest,
 } from "../../proto/squeak_admin_pb"
-import { SqueakAdminClient } from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function BuyPage() {
   var classes = useStyles();

frontend/squeak-node-frontend/src/pages/lightning/Lightning.js

@@ -1,7 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import {useHistory} from "react-router-dom";
-import { Grid, Button } from "@material-ui/core";
+import {
+  Grid,
+  Button,
+  AppBar,
+  Tabs,
+  Tab,
+} from "@material-ui/core";
 import { useTheme } from "@material-ui/styles";
 import {
   ResponsiveContainer,
@@ -26,9 +32,7 @@ import Widget from "../../components/Widget";
 import { Typography } from "../../components/Wrappers";
 
 import { GetInfoRequest, WalletBalanceRequest } from "../../proto/lnd_pb"
-import { SqueakAdminClient } from "../../proto/squeak_admin_grpc_web_pb"
-
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
+import { client } from "../../squeakclient/squeakclient"
 
 export default function LightningPage() {
   var classes = useStyles();
@@ -36,6 +40,18 @@ export default function LightningPage() {
 
   const [lndInfo, setLndInfo] = useState(null);
   const [walletBalance, setWalletBalance] = useState(null);
+  const [value, setValue] = useState(0);
+
+  function a11yProps(index) {
+    return {
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`,
+    };
+  }
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
 
   const getLndInfo = () => {
         console.log("called getLndInfo");
@@ -250,13 +266,50 @@ export default function LightningPage() {
     )
   }
 
+  function TabPanel(props) {
+    const { children, value, index, ...other } = props;
+
+    return (
+      <div
+        role="tabpanel"
+        hidden={value !== index}
+        id={`simple-tabpanel-${index}`}
+        aria-labelledby={`simple-tab-${index}`}
+        {...other}
+      >
+        {value === index && (
+          <div>{children}</div>
+        )}
+      </div>
+    );
+  }
+
+  function LightningTabs() {
+    return (
+      <>
+      <AppBar position="static" color="default">
+        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
+          <Tab label="Balance" {...a11yProps(0)} />
+          <Tab label="Node Info" {...a11yProps(1)} />
+        </Tabs>
+      </AppBar>
+      <TabPanel value={value} index={0}>
+        {(lndInfo && walletBalance)
+          ? InfoContent()
+          : NoInfoContent()
+        }
+      </TabPanel>
+      <TabPanel value={value} index={1}>
+        foooo
+      </TabPanel>
+      </>
+    )
+  }
+
   return (
     <>
       <PageTitle title="Lightning" />
-      {(lndInfo && walletBalance)
-        ? InfoContent()
-        : NoInfoContent()
-      }
+      {LightningTabs()}
     </>
   );
 }

frontend/squeak-node-frontend/src/pages/peer/Peer.js

@@ -24,9 +24,8 @@ import {
   SetPeerDownloadingRequest,
   SetPeerUploadingRequest,
 } from "../../proto/squeak_admin_pb"
-import { SqueakAdminClient } from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function PeerPage() {
   var classes = useStyles();

frontend/squeak-node-frontend/src/pages/peers/Peers.js

@@ -27,9 +27,8 @@ import mock from "../dashboard/mock";
 import {
   GetPeersRequest,
 } from "../../proto/squeak_admin_pb"
-import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 const useStyles = makeStyles((theme) => ({
   root: {

frontend/squeak-node-frontend/src/pages/profile/Profile.js

@@ -25,9 +25,8 @@ import {
   SetSqueakProfileSharingRequest,
   SetSqueakProfileWhitelistedRequest,
 } from "../../proto/squeak_admin_pb"
-import { SqueakAdminClient } from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function ProfilePage() {
   var classes = useStyles();

frontend/squeak-node-frontend/src/pages/profiles/Profiles.js

@@ -30,9 +30,8 @@ import {
   GetSigningProfilesRequest,
   GetContactProfilesRequest,
 } from "../../proto/squeak_admin_pb"
-import {SqueakAdminClient} from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 const useStyles = makeStyles((theme) => ({
   root: {

frontend/squeak-node-frontend/src/pages/squeak/Squeak.js

@@ -23,9 +23,8 @@ import {
   GetSqueakDisplayRequest,
   GetAncestorSqueakDisplaysRequest,
 } from "../../proto/squeak_admin_pb"
-import { SqueakAdminClient } from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function SqueakPage() {
   var classes = useStyles();

frontend/squeak-node-frontend/src/pages/squeakaddress/SqueakAddress.js

@@ -19,10 +19,10 @@ import CreateContactProfileDialog from "../../components/CreateContactProfileDia
 import {
    GetAddressSqueakDisplaysRequest,
    GetSqueakProfileByAddressRequest,
-   GetSqueakProfileRequest } from "../../proto/squeak_admin_pb"
-import { SqueakAdminClient } from "../../proto/squeak_admin_grpc_web_pb"
+   GetSqueakProfileRequest,
+} from "../../proto/squeak_admin_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function SqueakAddressPage() {
   var classes = useStyles();

frontend/squeak-node-frontend/src/pages/timeline/Timeline.js

@@ -38,9 +38,8 @@ import {
   GetFollowedSqueakDisplaysRequest,
   GetSigningProfilesRequest,
 } from "../../proto/squeak_admin_pb"
-import { SqueakAdminClient } from "../../proto/squeak_admin_grpc_web_pb"
+import { client } from "../../squeakclient/squeakclient"
 
-var client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')
 
 export default function TimelinePage() {
   var classes = useStyles();

frontend/squeak-node-frontend/src/squeakclient/squeakclient.js

@@ -0,0 +1,3 @@
+import { SqueakAdminClient } from "../proto/squeak_admin_grpc_web_pb"
+
+export let client = new SqueakAdminClient('http://' + window.location.hostname + ':8080')