Fix use effect warning (#1181)

* Fix useeffect warnings for peer address page

* Fix more useeffect warnings

* Fix more warnings

* Fix more warnings

* Run frontend lint

* Fix useeffect warning on timeline page

* Fix useless concat

* Add re-download offers button to buy dialog

* Rename components in buy dialog

* Fix useeffect warnings in squeak page

* Remove unused components in squeak page

* Fix duplicate prop warning in create contact dialog

* Run frontend lint

frontend/src/components/BuySqueakDialog/BuySqueakDialog.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   MenuItem,
   Typography,
@@ -52,12 +52,14 @@ export default function BuySqueakDialog({
   //   pay(offer.getOfferId());
   // };
 
-  const loadOffers = () => {
+  const loadOffers = useCallback(() => {
     getBuyOffersRequest(hash, setOffers);
-  };
-  const subscribeOffers = () => subscribeBuyOffersRequest(hash, (offer) => {
+  },
+  [hash, setOffers]);
+  const subscribeOffers = useCallback(() => subscribeBuyOffersRequest(hash, (offer) => {
     setOffers((prevOffers) => prevOffers.concat([offer]));
-  });
+  }),
+  [hash, setOffers]);
   const downloadOffers = () => {
     console.log(`downloadOffersRequest with hash: ${hash}`);
     downloadOffersRequest(hash, (response) => {
@@ -92,7 +94,7 @@ export default function BuySqueakDialog({
   const getSelectedOffer = () => {
     let offer;
     for (offer of offers) {
-      if (offer.getOfferId() == selectedOfferId) {
+      if (offer.getOfferId() === selectedOfferId) {
         return offer;
       }
     }
@@ -101,22 +103,21 @@ export default function BuySqueakDialog({
 
   const getPeerAddressText = (offer) => {
     const peerAddress = offer.getPeerAddress();
-    const host = peerAddress.getHost();
     return `${peerAddress.getHost()}:${peerAddress.getPort()}`;
   };
 
   useEffect(() => {
     loadOffers();
-  }, []);
+  }, [loadOffers]);
   useEffect(() => {
     const stream = subscribeOffers();
     return () => stream.cancel();
-  }, [hash]);
+  }, [subscribeOffers, hash]);
 
   function handleSubmit(event) {
     event.preventDefault();
     console.log('selectedOfferId:', selectedOfferId);
-    if (selectedOfferId == '') {
+    if (selectedOfferId === '') {
       alert('Offer must be selected.');
       return;
     }
@@ -139,7 +140,7 @@ export default function BuySqueakDialog({
     event.stopPropagation();
   }
 
-  function MakeSelectSigningProfile() {
+  function SelectOfferContent() {
     return (
       <FormControl className={classes.formControl} required style={{ minWidth: 120 }}>
         <InputLabel id="offer-select-label">Offer</InputLabel>
@@ -175,7 +176,7 @@ export default function BuySqueakDialog({
     );
   }
 
-  function MakeSqueakContentInput() {
+  function SelectedOfferContentInput() {
     const selectedOffer = getSelectedOffer();
     if (selectedOffer == null) {
       return <></>;
@@ -191,7 +192,7 @@ export default function BuySqueakDialog({
     );
   }
 
-  function MakeCancelButton() {
+  function CancelBuyButton() {
     return (
       <Button
         onClick={handleClose}
@@ -203,13 +204,7 @@ export default function BuySqueakDialog({
     );
   }
 
-  function WaitingForBuyContent() {
-    return (
-      <CircularProgress />
-    );
-  }
-
-  function MakeSqueakButton() {
+  function BuySqueakButton() {
     return (
       <div className={classes.wrapper}>
         <Button
@@ -233,6 +228,9 @@ export default function BuySqueakDialog({
       </DialogTitle>
       <form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
         <DialogContent>
+          <Box>
+            {LoadOffersButton()}
+          </Box>
           <Box>
             <Typography variant="body1" color="textSecondary" component="p">
               {offers.length}
@@ -241,13 +239,13 @@ export default function BuySqueakDialog({
             </Typography>
           </Box>
           <Box>
-            {MakeSelectSigningProfile()}
+            {SelectOfferContent()}
           </Box>
-          {MakeSqueakContentInput()}
+          {SelectedOfferContentInput()}
         </DialogContent>
         <DialogActions>
-          {MakeCancelButton()}
-          {MakeSqueakButton()}
+          {CancelBuyButton()}
+          {BuySqueakButton()}
         </DialogActions>
       </form>
     </Dialog>

frontend/src/components/CloseChannelDialog/CloseChannelDialog.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   Dialog,
   DialogTitle,
@@ -24,14 +24,8 @@ export default function CloseChannelDialog({
 }) {
   const classes = useStyles();
 
-  const [amount, setAmount] = useState(0);
-
   const resetFields = () => {
-    setAmount(0);
-  };
-
-  const handleChangeAmount = (event) => {
-    setAmount(event.target.value);
+    // TODO
   };
 
   const handleResponse = (response) => {
@@ -87,21 +81,6 @@ export default function CloseChannelDialog({
     );
   }
 
-  function LocalFundingAmountInput() {
-    return (
-      <TextField
-        id="amount-textarea"
-        label="Local Funding Amount"
-        required
-        autoFocus
-        value={amount}
-        onChange={handleChangeAmount}
-        fullWidth
-        inputProps={{ maxLength: 64 }}
-      />
-    );
-  }
-
   function CancelButton() {
     return (
       <Button

frontend/src/components/CreateContactProfileDialog/CreateContactProfileDialog.js

@@ -93,7 +93,6 @@ export default function CreateContactProfileDialog({
         required
         id="standard-textarea"
         label="Address"
-        required
         value={address}
         onChange={handleChangeAddress}
         inputProps={{ maxLength: 35 }}

frontend/src/components/ReceivedPayment/ReceivedPayment.js

@@ -19,7 +19,6 @@ export default function ReceivedPayment({
   receivedPayment,
   ...props
 }) {
-
   const history = useHistory();
 
   const onSqueakClick = (event) => {

frontend/src/components/SqueakProfileFollowingIndicator/SqueakProfileFollowingIndicator.js

@@ -10,7 +10,6 @@ export default function SqueakProfileFollowingIndicator({
   squeakProfile,
   ...props
 }) {
-
   function FollowingIndicator() {
     return (
       <>

frontend/src/pages/channel/Channel.js

@@ -119,9 +119,9 @@ export default function LightningNodePage() {
                 channel status
               </Typography>
               <Typography size="md">
-              {isChannelOpen()
-                ? 'open'
-                : 'closed'}
+                {isChannelOpen()
+                  ? 'open'
+                  : 'closed'}
               </Typography>
               {isChannelOpen()
                 ? CloseChannelButton()

frontend/src/pages/lightningnode/LightningNode.js

@@ -89,7 +89,7 @@ export default function LightningNodePage() {
     }
     let i;
     for (i = 0; i < channels.length; i++) {
-      if (pubkey == channels[i].getRemotePubkey()) {
+      if (pubkey === channels[i].getRemotePubkey()) {
         return true;
       }
     }
@@ -276,8 +276,8 @@ export default function LightningNodePage() {
   }
 
   function ChannelsGridItem() {
-    const nodeChannels = channels.filter((channel) => channel.getRemotePubkey() == pubkey);
-    const nodePendingOpenChannels = pendingChannels.getPendingOpenChannelsList().filter((pendingOpenChannel) => pendingOpenChannel.getChannel().getRemoteNodePub() == pubkey);
+    const nodeChannels = channels.filter((channel) => channel.getRemotePubkey() === pubkey);
+    const nodePendingOpenChannels = pendingChannels.getPendingOpenChannelsList().filter((pendingOpenChannel) => pendingOpenChannel.getChannel().getRemoteNodePub() === pubkey);
     return (
       <Grid item xs={12}>
         <Widget disableWidgetMenu>

frontend/src/pages/liked/Liked.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   Grid,
   Button,
@@ -28,10 +28,11 @@ export default function LikedPage() {
   const [network, setNetwork] = useState('');
   const [waitingForLikedSqueaks, setWaitingForLikedSqueaks] = useState(false);
 
-  const getSqueaks = (limit, lastEntry) => {
+  const getSqueaks = useCallback((limit, lastEntry) => {
     setWaitingForLikedSqueaks(true);
     getLikedSqueakDisplaysRequest(limit, lastEntry, handleLoadedTimeline);
-  };
+  },
+  []);
   const getNetwork = () => {
     getNetworkRequest(setNetwork);
   };
@@ -48,7 +49,7 @@ export default function LikedPage() {
 
   useEffect(() => {
     getSqueaks(SQUEAKS_PER_PAGE, null);
-  }, []);
+  }, [getSqueaks]);
   useEffect(() => {
     getNetwork();
   }, []);

frontend/src/pages/peeraddress/PeerAddress.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   Grid,
@@ -31,22 +31,26 @@ export default function PeerAddressPage() {
   const { host, port } = useParams();
   const [connectedPeer, setConnectedPeer] = useState(null);
 
-  const getConnectedPeer = () => {
+  const getConnectedPeer = useCallback(() => {
     getConnectedPeerRequest(host, port, setConnectedPeer);
-  };
+  },
+  [host, port]);
 
-  const subscribeConnectedPeer = () => subscribeConnectedPeerRequest(host, port, (connectedPeer) => {
-    console.log(connectedPeer);
-    setConnectedPeer(connectedPeer);
-  });
+  const subscribeConnectedPeer = useCallback(() => {
+    subscribeConnectedPeerRequest(host, port, (connectedPeer) => {
+      console.log(connectedPeer);
+      setConnectedPeer(connectedPeer);
+    });
+  },
+  [host, port]);
 
   useEffect(() => {
     getConnectedPeer();
-  }, []);
+  }, [getConnectedPeer]);
   useEffect(() => {
     const stream = subscribeConnectedPeer();
     return () => stream.cancel();
-  }, []);
+  }, [subscribeConnectedPeer]);
 
   function DisconnectPeerButton() {
     return (

frontend/src/pages/profile/Profile.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 
 // components
@@ -16,13 +16,14 @@ export default function ProfilePage() {
     setSqueakProfile(null);
   };
 
-  const getSqueakProfile = (id) => {
+  const getSqueakProfile = useCallback(() => {
     getSqueakProfileRequest(id, setSqueakProfile, handleGetSqueakProfileErr);
-  };
+  },
+  [id]);
 
   useEffect(() => {
     getSqueakProfile(id);
-  }, [id]);
+  }, [getSqueakProfile, id]);
 
   const handleReloadProfile = () => {
     getSqueakProfile(id);

frontend/src/pages/profiles/Profiles.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   Grid,
   Button,
@@ -47,10 +47,11 @@ export default function Profiles() {
     setValue(newValue);
   };
 
-  const loadProfiles = () => {
+  const loadProfiles = useCallback(() => {
     setWaitingForProfiles(true);
     getProfilesRequest(handleLoadedProfiles);
-  };
+  },
+  []);
 
   const handleClickOpenCreateSigningProfileDialog = () => {
     setCreateSigningProfileDialogOpen(true);
@@ -83,7 +84,7 @@ export default function Profiles() {
 
   useEffect(() => {
     loadProfiles();
-  }, []);
+  }, [loadProfiles]);
 
   function TabPanel(props) {
     const {

frontend/src/pages/squeak/Squeak.js

@@ -1,5 +1,7 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { useParams, useHistory } from 'react-router-dom';
+import React, {
+  useState, useEffect, useMemo, useCallback,
+} from 'react';
+import { useParams } from 'react-router-dom';
 import {
   Grid,
   Button,
@@ -8,10 +10,8 @@ import {
 } from '@material-ui/core';
 
 import Timeline from '@material-ui/lab/Timeline';
-import TimelineDot from '@material-ui/lab/TimelineDot';
 import Paper from '@material-ui/core/Paper';
 
-import FaceIcon from '@material-ui/icons/Face';
 import GetAppIcon from '@material-ui/icons/GetApp';
 import ReplayIcon from '@material-ui/icons/Replay';
 
@@ -31,15 +31,11 @@ import {
   subscribeReplySqueakDisplaysRequest,
   subscribeAncestorSqueakDisplaysRequest,
 } from '../../squeakclient/requests';
-import {
-  goToSqueakAddressPage,
-} from '../../navigation/navigation';
 
 const SQUEAKS_PER_PAGE = 10;
 
 export default function SqueakPage() {
   const classes = useStyles();
-  const history = useHistory();
   const { hash } = useParams();
   const [ancestorSqueaks, setAncestorSqueaks] = useState(null);
   const [replySqueaks, setReplySqueaks] = useState([]);
@@ -47,15 +43,17 @@ export default function SqueakPage() {
   const [waitingForSqueak, setWaitingForSqueak] = useState(false);
   const [waitingForReplySqueaks, setWaitingForReplySqueaks] = useState(false);
 
-  const getAncestorSqueaks = (hash) => {
+  const getAncestorSqueaks = useCallback((hash) => {
     setWaitingForSqueak(true);
     getAncestorSqueakDisplaysRequest(hash, handleLoadedAncestorSqueaks);
-  };
+  },
+  []);
   const subscribeAncestorSqueaks = (hash) => subscribeAncestorSqueakDisplaysRequest(hash, setAncestorSqueaks);
-  const getReplySqueaks = (hash, limit, lastEntry) => {
+  const getReplySqueaks = useCallback((hash, limit, lastEntry) => {
     setWaitingForReplySqueaks(true);
     getReplySqueakDisplaysRequest(hash, limit, lastEntry, handleLoadedReplySqueaks);
-  };
+  },
+  []);
   const subscribeReplySqueaks = (hash) => subscribeReplySqueakDisplaysRequest(hash, (resp) => {
     setReplySqueaks((prevReplySqueaks) => prevReplySqueaks.concat(resp));
   });
@@ -93,7 +91,7 @@ export default function SqueakPage() {
   const calculateCurrentSqueak = (ancestorSqueaks) => {
     if (ancestorSqueaks == null) {
       return null;
-    } if (ancestorSqueaks.length == 0) {
+    } if (ancestorSqueaks.length === 0) {
       return null;
     }
     return ancestorSqueaks.slice(-1)[0];
@@ -101,14 +99,14 @@ export default function SqueakPage() {
 
   useEffect(() => {
     getAncestorSqueaks(hash);
-  }, [hash]);
+  }, [getAncestorSqueaks, hash]);
   useEffect(() => {
     const stream = subscribeAncestorSqueaks(hash);
     return () => stream.cancel();
   }, [hash]);
   useEffect(() => {
     getReplySqueaks(hash, SQUEAKS_PER_PAGE, null);
-  }, [hash]);
+  }, [getReplySqueaks, hash]);
   useEffect(() => {
     const stream = subscribeReplySqueaks(hash);
     return () => stream.cancel();
@@ -119,31 +117,6 @@ export default function SqueakPage() {
 
   const currentSqueak = useMemo(() => calculateCurrentSqueak(ancestorSqueaks), [ancestorSqueaks]);
 
-  function NoSqueakContent() {
-    return (
-      <div>
-        Unable to load squeak.
-      </div>
-    );
-  }
-
-  function TimelineUserAvatar(squeak) {
-    const handleAvatarClick = () => {
-      console.log('Avatar clicked...');
-      if (squeak) {
-        goToSqueakAddressPage(history, squeak.getAuthorAddress());
-      }
-    };
-    return (
-      <TimelineDot
-        onClick={handleAvatarClick}
-        style={{ cursor: 'pointer' }}
-      >
-        <FaceIcon />
-      </TimelineDot>
-    );
-  }
-
   function AncestorsContent() {
     return (
       <SqueakThread

frontend/src/pages/squeakaddress/SqueakAddress.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import {
   Grid,
@@ -11,10 +11,8 @@ import {
 
 // components
 
-import TimelineDot from '@material-ui/lab/TimelineDot';
 import Paper from '@material-ui/core/Paper';
 
-import FaceIcon from '@material-ui/icons/Face';
 import GetAppIcon from '@material-ui/icons/GetApp';
 import ReplayIcon from '@material-ui/icons/Replay';
 
@@ -30,7 +28,6 @@ import {
   downloadAddressSqueaksRequest,
 } from '../../squeakclient/requests';
 import {
-  goToSqueakAddressPage,
   goToProfilePage,
 } from '../../navigation/navigation';
 
@@ -49,10 +46,11 @@ export default function SqueakAddressPage() {
   const getSqueakProfile = (address) => {
     getSqueakProfileByAddressRequest(address, setSqueakProfile);
   };
-  const getSqueaks = (address, limit, lastEntry) => {
+  const getSqueaks = useCallback((address, limit, lastEntry) => {
     setWaitingForSqueaks(true);
     getAddressSqueakDisplaysRequest(address, limit, lastEntry, handleLoadedAddressSqueaks);
-  };
+  },
+  []);
   const subscribeSqueaks = (address) => subscribeAddressSqueakDisplaysRequest(address, (resp) => {
     setSqueaks((prevSqueaks) => [resp].concat(prevSqueaks));
   });
@@ -91,7 +89,7 @@ export default function SqueakAddressPage() {
   }, [address]);
   useEffect(() => {
     getSqueaks(address, SQUEAKS_PER_PAGE, null);
-  }, [address]);
+  }, [getSqueaks, address]);
   useEffect(() => {
     const stream = subscribeSqueaks(address);
     return () => stream.cancel();
@@ -140,21 +138,6 @@ export default function SqueakAddressPage() {
     );
   }
 
-  function TimelineUserAvatar(squeak) {
-    const handleAvatarClick = () => {
-      console.log('Avatar clicked...');
-      goToSqueakAddressPage(history, squeak.getAuthorAddress());
-    };
-    return (
-      <TimelineDot
-        onClick={handleAvatarClick}
-        style={{ cursor: 'pointer' }}
-      >
-        <FaceIcon />
-      </TimelineDot>
-    );
-  }
-
   function SqueaksContent() {
     return (
       <SqueakList

frontend/src/pages/timeline/Timeline.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   Grid,
   Button,
@@ -38,11 +38,14 @@ export default function TimelinePage() {
   const [network, setNetwork] = useState('');
   const [waitingForTimeline, setWaitingForTimeline] = React.useState(false);
 
-  const getSqueaks = (limit, lastEntry) => {
+  const getSqueaks = useCallback((limit, lastEntry) => {
     setWaitingForTimeline(true);
     getTimelineSqueakDisplaysRequest(limit, lastEntry, handleLoadedTimeline, alertFailedRequest);
-  };
-  const subscribeNewSqueaks = () => subscribeTimelineSqueakDisplaysRequest(handleLoadedNewSqueak);
+  },
+  []);
+  const subscribeNewSqueaks = useCallback(() => subscribeTimelineSqueakDisplaysRequest(handleLoadedNewSqueak),
+    []);
+
   const getNetwork = () => {
     getNetworkRequest(setNetwork);
   };
@@ -86,11 +89,11 @@ export default function TimelinePage() {
 
   useEffect(() => {
     getSqueaks(SQUEAKS_PER_PAGE, null);
-  }, []);
+  }, [getSqueaks]);
   useEffect(() => {
     const stream = subscribeNewSqueaks();
     return () => stream.cancel();
-  }, []);
+  }, [subscribeNewSqueaks]);
   useEffect(() => {
     getNetwork();
   }, []);

frontend/src/squeakclient/requests.js

@@ -92,7 +92,7 @@ const SERVER_PORT = process.env.REACT_APP_SERVER_PORT || window.location.port;
 export const web_host_port = `${window.location.protocol}//${window.location.hostname}:${SERVER_PORT}`;
 
 export function logoutRequest(handleResponse) {
-  fetch(`${web_host_port}/` + 'logout', {
+  fetch(`${web_host_port}/logout`, {
     method: 'get',
   }).then((response) => response.arrayBuffer()).then((data) => {
     handleResponse(data);
@@ -104,7 +104,7 @@ export function getUserRequest(handleResponse) {
     handleResponse('DEV_MODE');
     return;
   }
-  fetch(`${web_host_port}/` + 'user', {
+  fetch(`${web_host_port}/user`, {
     method: 'get',
   }).then((response) => response.text()).then((data) => {
     handleResponse(data);