From 5401390c44b2bbd6412943f80630b03c87029cf3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 17 Jan 2022 13:06:24 +0000
Subject: [PATCH] simplify and refactor pool charts

---
 .../Asset/AssetActions/Pool/Graph.tsx         | 128 ++++++------------
 1 file changed, 45 insertions(+), 83 deletions(-)

diff --git a/src/components/Asset/AssetActions/Pool/Graph.tsx b/src/components/Asset/AssetActions/Pool/Graph.tsx
index 8719b8f90..2abdd2da5 100644
--- a/src/components/Asset/AssetActions/Pool/Graph.tsx
+++ b/src/components/Asset/AssetActions/Pool/Graph.tsx
@@ -1,5 +1,11 @@
 /* eslint-disable camelcase */
-import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
+import React, {
+  ChangeEvent,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useState
+} from 'react'
 import { Line, defaults } from 'react-chartjs-2'
 import {
   ChartData,
@@ -103,15 +109,9 @@ function getOptions(locale: string, isDarkMode: boolean): ChartOptions {
 
 const graphTypes = ['Liquidity', 'Price']
 
-const poolHistory = gql`
-  query PoolHistory($id: String!, $block: Int) {
-    poolSnapshots(
-      first: 1000
-      where: { pool: $id }
-      block: { number_gte: $block }
-      orderBy: date
-      subgraphError: deny
-    ) {
+const poolHistoryQuery = gql`
+  query PoolHistory($id: String!) {
+    poolSnapshots(first: 1000, where: { pool: $id }, orderBy: date) {
       date
       spotPrice
       baseTokenLiquidity
@@ -122,57 +122,36 @@ const poolHistory = gql`
 
 export default function Graph(): ReactElement {
   const { locale } = useUserPreferences()
+  const { price, ddo } = useAsset()
   const darkMode = useDarkMode(false, darkModeConfig)
   const [options, setOptions] = useState<ChartOptions>()
   const [graphType, setGraphType] = useState<GraphType>('liquidity')
-
-  const { price, ddo } = useAsset()
-
-  const [lastBlock, setLastBlock] = useState<number>(0)
-  const [priceHistory, setPriceHistory] = useState([])
   const [error, setError] = useState<Error>()
-  const [liquidityHistory, setLiquidityHistory] = useState([])
-  const [timestamps, setTimestamps] = useState([])
   const [isLoading, setIsLoading] = useState(true)
   const [dataHistory, setDataHistory] = useState<PoolHistory>()
   const [graphData, setGraphData] = useState<ChartData>()
   const [graphFetchInterval, setGraphFetchInterval] = useState<NodeJS.Timeout>()
 
-  async function getPoolHistory() {
+  const getPoolHistory = useCallback(async () => {
     try {
-      const queryContext = getQueryContext(ddo.chainId)
-      const queryVariables = {
-        id: price.address.toLowerCase(),
-        block: lastBlock
-      }
-
       const queryResult: OperationResult<PoolHistory> = await fetchData(
-        poolHistory,
-        queryVariables,
-        queryContext
+        poolHistoryQuery,
+        { id: price.address.toLowerCase() },
+        getQueryContext(ddo.chainId)
       )
       setDataHistory(queryResult?.data)
     } catch (error) {
       console.error('Error fetchData: ', error.message)
       setError(error)
     }
-  }
+  }, [ddo?.chainId, price?.address])
 
-  function refetchGraph() {
-    if (!graphFetchInterval) {
-      setGraphFetchInterval(
-        setInterval(function () {
-          getPoolHistory()
-        }, REFETCH_INTERVAL)
-      )
-    }
-  }
+  const refetchGraph = useCallback(async () => {
+    if (graphFetchInterval) return
 
-  useEffect(() => {
-    return () => {
-      clearInterval(graphFetchInterval)
-    }
-  }, [graphFetchInterval])
+    const newInterval = setInterval(() => getPoolHistory(), REFETCH_INTERVAL)
+    setGraphFetchInterval(newInterval)
+  }, [getPoolHistory, graphFetchInterval])
 
   useEffect(() => {
     LoggerInstance.log('Fired GraphOptions!')
@@ -180,68 +159,51 @@ export default function Graph(): ReactElement {
     setOptions(options)
   }, [locale, darkMode.value])
 
-  useEffect(() => {
-    getPoolHistory()
-  }, [lastBlock])
-
   useEffect(() => {
     async function init() {
-      const data: PoolHistory = dataHistory
-      if (!data) {
+      if (!dataHistory) {
         await getPoolHistory()
         return
       }
       LoggerInstance.log('Fired GraphData!')
 
       const latestTimestamps = [
-        ...timestamps,
-        ...data.poolSnapshots.map((item) => {
+        ...dataHistory.poolSnapshots.map((item) => {
           const date = new Date(item.date * 1000)
           return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
         })
       ]
-      setTimestamps(latestTimestamps)
 
       const latestLiquidityHistory = [
-        ...liquidityHistory,
-        ...data.poolSnapshots.map((item) => item.baseTokenLiquidity)
+        ...dataHistory.poolSnapshots.map((item) => item.baseTokenLiquidity)
       ]
 
-      setLiquidityHistory(latestLiquidityHistory)
-
       const latestPriceHistory = [
-        ...priceHistory,
-        ...data.poolSnapshots.map((item) => item.datatokenLiquidity)
+        ...dataHistory.poolSnapshots.map((item) => item.datatokenLiquidity)
       ]
 
-      setPriceHistory(latestPriceHistory)
-
-      if (data.poolSnapshots.length > 0) {
-        const newBlock = data.poolSnapshots[data.poolSnapshots.length - 1].block
-        if (newBlock === lastBlock) return
-        setLastBlock(data.poolSnapshots[data.poolSnapshots.length - 1].block)
-      } else {
-        setGraphData({
-          labels: latestTimestamps.slice(0),
-          datasets: [
-            {
-              ...lineStyle,
-              label: 'Liquidity (OCEAN)',
-              data:
-                graphType === 'liquidity'
-                  ? latestLiquidityHistory.slice(0)
-                  : latestPriceHistory.slice(0),
-              borderColor: `#8b98a9`,
-              pointBackgroundColor: `#8b98a9`
-            }
-          ]
-        })
-        setIsLoading(false)
-        refetchGraph()
-      }
+      setGraphData({
+        labels: latestTimestamps.slice(0),
+        datasets: [
+          {
+            ...lineStyle,
+            label: 'Liquidity (OCEAN)',
+            data:
+              graphType === 'liquidity'
+                ? latestLiquidityHistory.slice(0)
+                : latestPriceHistory.slice(0),
+            borderColor: `#8b98a9`,
+            pointBackgroundColor: `#8b98a9`
+          }
+        ]
+      })
+      setIsLoading(false)
+      refetchGraph()
     }
     init()
-  }, [dataHistory, graphType])
+
+    return () => clearInterval(graphFetchInterval)
+  }, [dataHistory, graphType, graphFetchInterval, getPoolHistory, refetchGraph])
 
   function handleGraphTypeSwitch(e: ChangeEvent<HTMLButtonElement>) {
     e.preventDefault()