added automatic reload/near real-time data

rrrkren · Nov 29, 2020 · 76a7a4f · 76a7a4f
1 parent 395e24e
commit 76a7a4f
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 16 deletions.
diff --git a/src/pages/account.comp.js b/src/pages/account.comp.js
@@ -181,15 +181,12 @@ export function Account() {
   const [momentIDs, setMomentIDs] = useState([])
   const [saleMomentIDs, setSaleMomentIDs] = useState([])
 
+  // used to chek the reload, so another reload is not triggered while the previous is still running
+  const [done, setDone] = useState(false)
+
   useEffect(() => {
-    getTopshotAccount(address)
-      .then((d) => {
-        console.log(d)
-        setTopShotAccount(d)
-        setMomentIDs(d.momentIDs.slice(0, 20))
-        setSaleMomentIDs(d.saleMomentIDs.slice(0, 20))
-      })
-      .catch(setError)
+    load()
+    .catch(setError)
   }, [address])
 
   useEffect(() => {
@@ -214,6 +211,32 @@ export function Account() {
       .catch(setListingError)
   }, [address, saleMomentIDs])
 
+  // for reloading
+  useEffect(() => {
+    if(done){
+      // set some delay
+      setTimeout(()=>{
+        load()
+        .catch((e)=>{
+          console.log(e);
+        })
+        console.log("reloaded!!!");
+      }, 5000)
+    }
+  }, [done]);
+
+  const load = ()=>{
+    setDone(false)
+    return getTopshotAccount(address)
+      .then((d) => {
+        console.log(d)
+        setTopShotAccount(d)
+        setMomentIDs(d.momentIDs.slice(0, 20))
+        setSaleMomentIDs(d.saleMomentIDs.slice(0, 20))
+        setDone(true)
+      })
+  }
+
   const handlePageClick = function (data) {
     let mIDs = topshotAccount.momentIDs.slice(data.selected * 20, data.selected * 20 + 20)
     setMomentIDs(mIDs)

diff --git a/src/pages/plays.comp.js b/src/pages/plays.comp.js
@@ -61,21 +61,49 @@ const config = {
   page_size: 10,
   length_menu: [ 10, 20, 50 ],
   no_data_text: 'No data available!',
-  sort: { column: "playID", order: "desc" }
+  sort: { column: "playID", order: "desc" },
+  key_column: "playID",
 }
 
 export function TopshotPlays() {
   const [error, setError] = useState(null)
 
+  // used to chek the reload, so another reload is not triggered while the previous is still running
+  const [done, setDone] = useState(false)
+
   const [topshotPlays, setTopshotPlays] = useState(null)
   useEffect(() => {
-    getTopshotPlays()
+    load()
+      .catch(() => setError(true))
+  }, [])
+
+  // for reloading
+  useEffect(() => {
+    if(done){
+      // set some delay
+      setTimeout(()=>{
+        load()
+        .catch((e)=>{
+          console.log(e);
+        })
+        console.log("reloaded!!!");
+      }, 5000)
+    }
+  }, [done]);
+
+  const load = () => {
+    setDone(false)
+    return getTopshotPlays()
       .then((d) => {
         console.log(d)
         setTopshotPlays(d)
+        setDone(true)
       })
-      .catch(() => setError(true))
-  }, [])
+  }
+
+  const manualReload = () => {
+
+  }
 
   if (error != null)
     return (

diff --git a/src/pages/set.comp.js b/src/pages/set.comp.js
@@ -119,20 +119,47 @@ const config = {
   page_size: 10,
   length_menu: [ 10, 20, 50 ],
   no_data_text: 'No data available!',
-  sort: { column: "playOrder", order: "desc" }
+  sort: { column: "playOrder", order: "desc" },
+  key_column: "playOrder",
 }
 
 export function TopshotSet() {
   const [error, setError] = useState(null)
   const {setID} = useParams()
   const [TopshotSet, setTopshotSet] = useState(null)
+
+  // used to chek the reload, so another reload is not triggered while the previous is still running
+  const [done, setDone] = useState(false)
+
+  useEffect(() => {
+    load()
+      .catch(setError)
+  }, [setID])
+
+  // for reloading
   useEffect(() => {
-    getTopshotSet(setID).then(
+    if(done){
+      // set some delay
+      setTimeout(()=>{
+        load()
+        .catch((e)=>{
+          console.log(e);
+        })
+        console.log("reloaded!!!");
+      }, 5000)
+    }
+  }, [done]);
+
+  const load = () => {
+    setDone(false)
+    return getTopshotSet(setID).then(
       (topshotSet) => {
         console.log(topshotSet)
         setTopshotSet(topshotSet)
-      }).catch(setError)
-  }, [setID])
+        setDone(true)
+      })
+  }
+
   const getPlay = (playID) => {
     return (
       TopshotSet &&