From 0f91ad117577a151da4cfa6bf1b862e6d32e5bb4 Mon Sep 17 00:00:00 2001 From: Stephen Algeo Date: Wed, 19 Feb 2020 18:18:39 +0000 Subject: [PATCH] Order markets and debounce expensive operation --- app/src/Scenes/Event.js | 19 ++++++++++++++++--- app/src/components/Market.js | 2 +- app/src/components/Outcome.js | 2 +- app/src/hooks/index.js | 17 +++++++++++++++++ app/src/hooks/useDebounce.js | 19 +++++++++++++++++++ app/src/hooks/useEvent.js | 2 +- app/src/hooks/useLiveEvents.js | 2 +- app/src/hooks/useMarket.js | 8 +++++--- app/src/hooks/useMarkets.js | 15 +++++++++++++++ app/src/hooks/useOutcome.js | 2 +- 10 files changed, 77 insertions(+), 11 deletions(-) create mode 100644 app/src/hooks/index.js create mode 100644 app/src/hooks/useDebounce.js create mode 100644 app/src/hooks/useMarkets.js diff --git a/app/src/Scenes/Event.js b/app/src/Scenes/Event.js index b03506f..10d44ea 100644 --- a/app/src/Scenes/Event.js +++ b/app/src/Scenes/Event.js @@ -1,9 +1,9 @@ import React from "react"; import Market from "../components/Market"; import { useParams, Link } from "react-router-dom"; -import useEvent from "../hooks/useEvent"; import formatStartTime from "../helpers/startTime"; import OddsToggle from "../components/OddsToggle"; +import { useDebounce, useEvent, useStore, useMarkets } from "../hooks/"; const INITIAL_MARKETS = 10; @@ -11,11 +11,24 @@ const Event = () => { const { eventId } = useParams(); const event = useEvent(eventId); + useMarkets(event); + + const allMarkets = useDebounce(useStore("markets"), 10); + + const orderedMarkets = React.useMemo( + () => + Object.values(allMarkets) + .sort((a, b) => a.displayOrder > b.displayOrder) + .map(({ marketId }) => marketId) + .slice(0, INITIAL_MARKETS), + [allMarkets] + ); + if (!event) { return
Loading...
; } - const { markets, startTime } = event; + const { startTime } = event; return (
@@ -47,7 +60,7 @@ const Event = () => {
Request a Bet
)}
- {markets.slice(0, INITIAL_MARKETS).map(id => ( + {orderedMarkets.slice(0, INITIAL_MARKETS).map(id => ( ))} diff --git a/app/src/components/Market.js b/app/src/components/Market.js index 8f900b7..3cf5ebf 100644 --- a/app/src/components/Market.js +++ b/app/src/components/Market.js @@ -1,6 +1,6 @@ import React from "react"; import Outcome from "./Outcome"; -import useMarket from "../hooks/useMarket"; +import { useMarket } from "../hooks/"; const Market = ({ id }) => { const market = useMarket(id); diff --git a/app/src/components/Outcome.js b/app/src/components/Outcome.js index 2d453ed..532dd66 100644 --- a/app/src/components/Outcome.js +++ b/app/src/components/Outcome.js @@ -1,5 +1,5 @@ import React, { useContext } from "react"; -import useOutcome from "../hooks/useOutcome"; +import { useOutcome } from "../hooks/"; import { OddsContext } from "../App"; const Outcome = ({ id }) => { diff --git a/app/src/hooks/index.js b/app/src/hooks/index.js new file mode 100644 index 0000000..191eaef --- /dev/null +++ b/app/src/hooks/index.js @@ -0,0 +1,17 @@ +import useDebounce from "./useDebounce"; +import useEvent from "./useEvent"; +import useLiveEvents from "./useLiveEvents"; +import useMarket from "./useMarket"; +import useMarkets from "./useMarkets"; +import useOutcome from "./useOutcome"; +import useStore from "./useStore"; + +export { + useDebounce, + useEvent, + useLiveEvents, + useMarket, + useMarkets, + useOutcome, + useStore +}; diff --git a/app/src/hooks/useDebounce.js b/app/src/hooks/useDebounce.js new file mode 100644 index 0000000..6abca43 --- /dev/null +++ b/app/src/hooks/useDebounce.js @@ -0,0 +1,19 @@ +import { useState, useEffect } from "react"; + +const useDebounce = (value, delay) => { + const [debouncedValue, setDebouncedValue] = useState(value); + + useEffect(() => { + const handler = setTimeout(() => { + setDebouncedValue(value); + }, delay); + + return () => { + clearTimeout(handler); + }; + }, [value]); + + return debouncedValue; +}; + +export default useDebounce; diff --git a/app/src/hooks/useEvent.js b/app/src/hooks/useEvent.js index c51b892..6472988 100644 --- a/app/src/hooks/useEvent.js +++ b/app/src/hooks/useEvent.js @@ -1,6 +1,6 @@ import { useContext, useEffect } from "react"; import { SocketContext } from "../App"; -import useStore from "./useStore"; +import { useStore } from "./"; const useEvent = id => { const [socket] = useContext(SocketContext); diff --git a/app/src/hooks/useLiveEvents.js b/app/src/hooks/useLiveEvents.js index 26a346d..6870ee2 100644 --- a/app/src/hooks/useLiveEvents.js +++ b/app/src/hooks/useLiveEvents.js @@ -1,6 +1,6 @@ import { useContext, useEffect } from "react"; import { SocketContext } from "../App"; -import useStore from "./useStore"; +import { useStore } from "./"; const useLiveEvents = () => { const [socket] = useContext(SocketContext); diff --git a/app/src/hooks/useMarket.js b/app/src/hooks/useMarket.js index 977c399..fbfcc7e 100644 --- a/app/src/hooks/useMarket.js +++ b/app/src/hooks/useMarket.js @@ -1,14 +1,16 @@ import { useContext, useEffect } from "react"; import { SocketContext } from "../App"; -import useStore from "./useStore"; +import { useStore } from "./"; const useMarket = id => { const [socket] = useContext(SocketContext); const market = useStore("markets", id); useEffect(() => { - socket.send(JSON.stringify({ type: "getMarket", id })); - }, [id, socket]); + if (!market) { + socket.send(JSON.stringify({ type: "getMarket", id })); + } + }, [id, socket, market]); return market; }; diff --git a/app/src/hooks/useMarkets.js b/app/src/hooks/useMarkets.js new file mode 100644 index 0000000..a240041 --- /dev/null +++ b/app/src/hooks/useMarkets.js @@ -0,0 +1,15 @@ +import { useContext, useEffect } from "react"; +import { SocketContext } from "../App"; + +const useMarkets = event => { + const [socket] = useContext(SocketContext); + + useEffect(() => { + if (!event) return; + event.markets.forEach(id => + socket.send(JSON.stringify({ type: "getMarket", id })) + ); + }, [event, socket]); +}; + +export default useMarkets; diff --git a/app/src/hooks/useOutcome.js b/app/src/hooks/useOutcome.js index d0281a0..d655c2a 100644 --- a/app/src/hooks/useOutcome.js +++ b/app/src/hooks/useOutcome.js @@ -1,6 +1,6 @@ import { useContext, useEffect } from "react"; import { SocketContext } from "../App"; -import useStore from "./useStore"; +import { useStore } from "./"; const useOutcome = id => { const outcome = useStore("outcomes", id);