SHARE
TWEET

Untitled

a guest Sep 17th, 2019 280 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { FC, useEffect, useState, useCallback } from "react";
  2. import { DataSource, UserDataStore, UserRanking } from "./lib";
  3.  
  4. export const UserLeagueTable: FC = () => {
  5.  
  6.   const [users, setUsers] = useState()
  7.   const [moreUsers, setMoreUsers] = useState()
  8.  
  9.   useEffect(() => {
  10.     async function getUsers() {
  11.       await DataSource.fetch().then(users => {
  12.         const usersArray = Object.keys(users).map(user => users[user])
  13.         setUsers(usersArray)
  14.       });  
  15.     }
  16.     getUsers()
  17.   },[]);
  18.  
  19.   useEffect(() => {
  20.     if(users && moreUsers) {
  21.       const newUsers = [...users, moreUsers];
  22.       setUsers(newUsers)
  23.     }
  24.   },[moreUsers]);
  25.  
  26.   const updateUsers = useCallback(async () => {
  27.     await DataSource.subscribe((moreUsers:UserRanking ) => {
  28.       setMoreUsers(moreUsers)
  29.     })      
  30.   },[]);
  31.  
  32.   useEffect(() => {
  33.     updateUsers()
  34.     return () => {
  35.       DataSource.unsubscribe(() => {})
  36.     }
  37.   },[updateUsers]);
  38.  
  39.   const handleStopLoadingUsers = () => {
  40.     DataSource.unsubscribe(() => {})
  41.   }
  42.  
  43.   const handleContinueLoadingUsers = () => {
  44.     updateUsers()
  45.   }
  46.  
  47.   return (
  48.     <>
  49.       <button onClick={handleStopLoadingUsers}>Stop Loading Users</button>
  50.       <button onClick={handleContinueLoadingUsers}>Start Loading Users</button>
  51.       <table>
  52.         <thead>
  53.           <tr>
  54.             <th>Position</th>
  55.             <th>ID</th>
  56.             <th>Name</th>
  57.             <th>Points</th>
  58.           </tr>
  59.         </thead>
  60.         <tbody>
  61.           {users ?
  62.             users.map((user:UserDataStore, index: string)=>{
  63.               return (
  64.                 <tr>
  65.                   <td>{index}</td>
  66.                   <td>{user.id}</td>
  67.                   <td>{user.name}</td>
  68.                   <td>{user.points}</td>
  69.                 </tr>
  70.               )
  71.           }): null}
  72.         </tbody>
  73.       </table>
  74.     </>
  75.   );
  76. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top