Order markets and debounce expensive operation

Author: Stephen Algeo

app/src/Scenes/Event.js

@@ -1,21 +1,34 @@
 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;
 
 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 <div>Loading...</div>;
   }
 
-  const { markets, startTime } = event;
+  const { startTime } = event;
 
   return (
     <div className="c-full-event">
@@ -47,7 +60,7 @@ const Event = () => {
           <div className="c-full-event__meta-item">Request a Bet</div>
         )}
       </div>
-      {markets.slice(0, INITIAL_MARKETS).map(id => (
+      {orderedMarkets.slice(0, INITIAL_MARKETS).map(id => (
         <Market key={id} id={id} />
       ))}
     </div>

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);

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 }) => {

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
+};

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;

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);

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);

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;
 };

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;

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);