feat: count vpn used time in frontend

Author: nicolastmaia

src/App.tsx

@@ -22,7 +22,7 @@ import { getServerIpAddress } from "./api";
 global.Buffer = require('buffer').Buffer;
 
 function App() {
-  const { setProfile, setMiningData, allRegions, setClosestRegion, setaAllNodes, setServerIpAddress, setServerPort } = useDaemonContext();
+  const { setProfile, setMiningData, allRegions, setClosestRegion, setaAllNodes, setServerIpAddress, setServerPort, _vpnTimeUsedInMin } = useDaemonContext();
 
   useEffect(() => {
     const handlePassport = async () => {
@@ -64,6 +64,9 @@ function App() {
     };
 
     const init = async () => {
+      const vpnTimeUsedInMin = parseInt(localStorage.getItem("vpnTimeUsedInMin") || "0");
+      _vpnTimeUsedInMin.current = vpnTimeUsedInMin;
+
       await createOrGetWallet();
       listenProfileVer(setProfile);
 

src/pages/Home/index.tsx

@@ -1,6 +1,6 @@
 import "./index.css";
 import { mappedCountryCodes } from "../../utils/regions";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useDaemonContext } from "../../providers/DaemonProvider";
 import { getAllRegions } from "../../services/regions";
 import BlobWrapper from '../../components/BlobWrapper';
@@ -14,16 +14,18 @@ import { useNavigate } from 'react-router-dom';
 import { formatMinutesToHHMM } from "../../utils/utils";
 import { startSilentPass, stopSilentPass } from "../../api";
 import PassportInfo from "../../components/PassportInfo";
+import { conetProvider } from "../../utils/constants";
 
 interface RenderButtonProps {
   errorStartingSilentPass: boolean;
   isConnectionLoading: boolean;
   power: boolean;
   profile: any;
+  _vpnTimeUsedInMin: number;
   handleTogglePower: () => void;
 }
 
-const RenderButton = ({ errorStartingSilentPass, handleTogglePower, isConnectionLoading, power, profile }: RenderButtonProps) => {
+const RenderButton = ({ errorStartingSilentPass, handleTogglePower, isConnectionLoading, power, profile, _vpnTimeUsedInMin }: RenderButtonProps) => {
   if (isConnectionLoading)
     return (
       <div className="button-wrapper">
@@ -53,7 +55,8 @@ const RenderButton = ({ errorStartingSilentPass, handleTogglePower, isConnection
 
         <div className="current-mined">
           <strong>Total time used</strong>
-          <p>{formatMinutesToHHMM(parseInt(profile?.vpnTimeUsedInMin) || 0)}</p>
+          {/* <p>{formatMinutesToHHMM(parseInt(profile?.vpnTimeUsedInMin) || 0)}</p> */}
+          <p>{formatMinutesToHHMM(_vpnTimeUsedInMin)}</p>
         </div>
       </div>
     )
@@ -72,7 +75,8 @@ const RenderButton = ({ errorStartingSilentPass, handleTogglePower, isConnection
 
         <div className="current-mined">
           <strong>Total time used</strong>
-          <p>{formatMinutesToHHMM(parseInt(profile?.vpnTimeUsedInMin) || 0)}</p>
+          {/* <p>{formatMinutesToHHMM(parseInt(profile?.vpnTimeUsedInMin) || 0)}</p> */}
+          <p>{formatMinutesToHHMM(_vpnTimeUsedInMin)}</p>
         </div>
       </div>
 
@@ -81,16 +85,37 @@ const RenderButton = ({ errorStartingSilentPass, handleTogglePower, isConnection
   )
 }
 
+
 const Home = () => {
-  const { profile, sRegion, setSRegion, setAllRegions, allRegions, setIsRandom, getAllNodes, closestRegion } = useDaemonContext();
+  const { profile, sRegion, setSRegion, setAllRegions, allRegions, setIsRandom, getAllNodes, closestRegion, _vpnTimeUsedInMin } = useDaemonContext();
   const [power, setPower] = useState<boolean>(false);
   const [isInitialLoading, setIsInitialLoading] = useState<boolean>(true);
   const [isConnectionLoading, setIsConnectionLoading] = useState<boolean>(false)
   const [initPercentage, setInitPercentage] = useState<number>(0);
   const [errorStartingSilentPass, setErrorStartingSilentPass] = useState<boolean>(false);
+  const vpnTimeTimeout = useRef<NodeJS.Timeout>();
 
   const navigate = useNavigate();
 
+
+  useEffect(() => {
+    const countMinutes = () => {
+      const timeout = setTimeout(() => {
+        _vpnTimeUsedInMin.current = (_vpnTimeUsedInMin.current) + 1;
+        localStorage.setItem("vpnTimeUsedInMin", (_vpnTimeUsedInMin.current).toString());
+        countMinutes();
+      }, 60000)
+
+      vpnTimeTimeout.current = timeout;
+    }
+
+    clearInterval(vpnTimeTimeout.current);
+
+    if (power) {
+      countMinutes()
+    }
+  }, [power]);
+
   useEffect(() => {
     const listenGetAllNodes = () => {
       const initpercentage = maxNodes ? currentScanNodeNumber * 100 / maxNodes : 0
@@ -250,7 +275,7 @@ const Home = () => {
               <img src="/assets/header-title.svg"></img>
             </div>
 
-            <RenderButton profile={profile} errorStartingSilentPass={errorStartingSilentPass} isConnectionLoading={isConnectionLoading} power={power} handleTogglePower={handleTogglePower} />
+            <RenderButton profile={profile} errorStartingSilentPass={errorStartingSilentPass} isConnectionLoading={isConnectionLoading} power={power} handleTogglePower={handleTogglePower} _vpnTimeUsedInMin={_vpnTimeUsedInMin.current} />
 
             <CopyProxyInfo />
 

src/providers/DaemonProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, ReactNode, useState, useEffect } from "react";
+import React, { createContext, useContext, ReactNode, useState, useEffect, useRef } from "react";
 
 type DaemonContext = {
   sRegion: number;
@@ -23,6 +23,7 @@ type DaemonContext = {
   setServerPort: (port: string) => void
   serverPac: string
   setServerPac: (pac: string) => void
+  _vpnTimeUsedInMin: React.MutableRefObject<number>
 };
 
 type DaemonProps = {
@@ -51,7 +52,8 @@ const defaultContextValue: DaemonContext = {
   serverPort: "8888",
   setServerPort: () => { },
   serverPac: "",
-  setServerPac: () => { }
+  setServerPac: () => { },
+  _vpnTimeUsedInMin: { current: 0 }
 };
 
 const Daemon = createContext<DaemonContext>(defaultContextValue);
@@ -73,6 +75,7 @@ export function DaemonProvider({ children }: DaemonProps) {
   const [serverIpAddress, setServerIpAddress] = useState<string>(defaultContextValue.serverIpAddress);
   const [serverPort, setServerPort] = useState<string>(defaultContextValue.serverPort);
   const [serverPac, setServerPac] = useState<string>("");
+  const _vpnTimeUsedInMin = useRef<number>(0);
 
   useEffect(() => {
     {
@@ -83,7 +86,7 @@ export function DaemonProvider({ children }: DaemonProps) {
 
 
   return (
-    <Daemon.Provider value={{ sRegion, setSRegion, allRegions, setAllRegions, closestRegion, setClosestRegion, isRandom, setIsRandom, miningData, setMiningData, profile, setProfile, isMiningUp, setIsMiningUp, getAllNodes, setaAllNodes, serverIpAddress, setServerIpAddress, serverPort, setServerPort, serverPac, setServerPac }}>
+    <Daemon.Provider value={{ sRegion, setSRegion, allRegions, setAllRegions, closestRegion, setClosestRegion, isRandom, setIsRandom, miningData, setMiningData, profile, setProfile, isMiningUp, setIsMiningUp, getAllNodes, setaAllNodes, serverIpAddress, setServerIpAddress, serverPort, setServerPort, serverPac, setServerPac, _vpnTimeUsedInMin }}>
       {children}
     </Daemon.Provider>
   );