Performance fixes and bug fixes, Tip modal now defaults to 10 sats

Author: Emad-salah

.env

@@ -0,0 +1 @@
+EXTEND_ESLINT=true

.env.example

@@ -1 +1,2 @@
+EXTEND_ESLINT=true
 PEERS=['http://gun.shock.network:8765/gun']

.eslintrc

@@ -33,7 +33,12 @@
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": "react-app",
+    "rules": {
+      "react-hooks/exhaustive-deps": "warn",
+      "array-callback-return": "off",
+      "no-throw-literal": "off"
+    }
   },
   "browserslist": {
     "production": [

package.json

@@ -7,12 +7,11 @@ const Counter = ({ value = 0 }) => {
   const [counterAnimation, setCounterAnimation] = useState("initial");
 
   useEffect(() => {
-    console.log("Value changed!", value, currentValue);
     setTimeout(() => setCounterAnimation("goUp"), 0);
     setTimeout(() => setCurrentValue(value), 200);
     setTimeout(() => setCounterAnimation("waitDown"), 200);
     setTimeout(() => setCounterAnimation("initial"), 400);
-  }, [value]);
+  }, [currentValue, value]);
 
   return (
     <div className="counter-container">

src/components/Counter.js

@@ -55,6 +55,7 @@ const Post = ({
         <div className="media-container" key={`${key}-${index}`}>
           <img
             className={`torrent-img-${id}-${key}`}
+            alt="Post Media"
             data-torrent={item.magnetURI}
             data-file-key={index}
             key={key}
@@ -176,7 +177,7 @@ const Post = ({
         );
       }
     });
-  }, [dispatch]);
+  }, [dispatch, id, page, publicKey]);
 
   useEffect(() => {
     if (!carouselAPI) return;
@@ -189,7 +190,7 @@ const Post = ({
       window.removeEventListener("keydown", handleUserKeyDown);
       carouselAPI.off("scroll", updateActiveSlide);
     };
-  }, [carouselAPI, sliderLength]);
+  }, [carouselAPI, sliderLength, handleUserKeyDown, updateActiveSlide]);
 
   const tipPost = useCallback(() => {
     if (!isOnlineNode) {
@@ -200,7 +201,7 @@ const Post = ({
       targetType: "post",
       postID: id
     });
-  }, [id]);
+  }, [id, isOnlineNode, openTipModal]);
 
   useEffect(() => {
     Tooltip.rebuild();

src/components/Post.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useState, useCallback, Suspense } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
-import InfiniteScroll from "react-infinite-scroller";
 import QRCode from "react-qr-code";
 import Moment from "moment";
 
@@ -40,12 +39,13 @@ const UserPage = () => {
   const paymentRequest = useSelector(
     ({ transaction }) => transaction.paymentRequest
   );
-  // Reserved for future use @eslint-disable-next-line no-undef
+  // Reserved for future use
+  // eslint-disable-next-line no-unused-vars
   const [userLoading, setUserLoading] = useState(true);
   const [wallLoading, setWallLoading] = useState(true);
   const [tipModalOpen, setTipModalOpen] = useState(false);
   const [tipLoading, setTipLoading] = useState(false);
-  const [tipAmount, setTipAmount] = useState(0);
+  const [tipAmount, setTipAmount] = useState(10);
   const [isOnlineApp, setIsOnlineApp] = useState(false);
   const [isOnlineNode, setIsOnlineNode] = useState(false);
 
@@ -85,22 +85,6 @@ const UserPage = () => {
     }
   }, [dispatch, publicKey]);
 
-  const loadMorePosts = useCallback(
-    async page => {
-      try {
-        console.log("Setting Loading status to (loadMorePosts):", true);
-        setWallLoading(true);
-        const posts = await dispatch(getUserWall(publicKey, page));
-        console.log("Setting Loading status to (loadMorePosts):", false, posts);
-        setWallLoading(false);
-      } catch (error) {
-        console.log("Setting Loading status to (loadMorePosts):", false);
-        setWallLoading(false);
-      }
-    },
-    [dispatch, publicKey]
-  );
-
   const sendTip = useCallback(async () => {
     try {
       setTipLoading(true);
@@ -176,7 +160,7 @@ const UserPage = () => {
       displayNameListener.off();
       bioListener.off();
     };
-  }, [fetchUserData]);
+  }, [dispatch, fetchUserData, fetchUserWall, publicKey]);
 
   useEffect(() => {
     const userWallInitializer = initializeUserWall();
@@ -186,7 +170,7 @@ const UserPage = () => {
 
   useEffect(() => {
     attachMedia(wall.posts, false);
-  }, [wall.posts.length]);
+  }, [wall.posts]);
 
   useEffect(() => {
     if (onlineCheckTimer) {
@@ -209,6 +193,7 @@ const UserPage = () => {
     setOnlineCheckTimer(timer);
 
     return () => clearTimeout(onlineCheckTimer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [profile]);
 
   useEffect(() => {

src/pages/User/index.js

@@ -64,7 +64,7 @@ export const attachMedia = (posts = [], torrentMode = true) => {
                   options.formats.includes(extension)
                 )[0];
                 if (supportedFileType) {
-                  const [_, fileType] = supportedFileType;
+                  const [, fileType] = supportedFileType;
                   const matched = fileType.formats.includes(extension);
                   return matched;
                 }