feat(global-stats): get median TTFB from header (#165)

Co-authored-by: Amean Asad <[email protected]>

src/contexts/NodesContext.tsx

@@ -8,14 +8,20 @@ import {
 import { Node } from "../hooks/useNodes";
 import { EntityType } from "./AppContext";
 
+type GlobalStats = {
+  medianTTFB: number;
+}
+
 type NodesContextType = {
   nodes: Node[] | [];
   setNodes: (nodes: Node[] | []) => void;
+  globalStats: GlobalStats;
 };
 
-const initialValues = {
+const initialValues: NodesContextType = {
   nodes: [],
   setNodes: () => {},
+  globalStats: { medianTTFB: 70 },
 };
 
 const NodesContext = createContext<NodesContextType>(initialValues);
@@ -28,6 +34,7 @@ export const NodesContextProvider = ({
   const [nodes, setNodes] = useState<Node[] | []>([]);
   const [tempNodes, setTempNodes] = useState<Node[] | []>([]);
   const [isLoading, setIsLoading] = useState<boolean>();
+  const [globalStats, setGlobalStats] = useState<GlobalStats>(initialValues.globalStats);
 
   useEffect(() => {
     let animationFrameId: number;
@@ -39,6 +46,11 @@ export const NodesContextProvider = ({
       const decoder = new TextDecoder();
       const reader = response.body?.getReader();
       const nodesMap = new Map<string, Node>();
+      const medianTTFB = Number(response.headers.get("x-saturn-median-ttfb"));
+
+      if (medianTTFB) {
+        setGlobalStats({ medianTTFB });
+      }
 
       const onChunk = ({
         done,
@@ -99,6 +111,7 @@ export const NodesContextProvider = ({
   }, [isLoading]);
 
   const value = {
+    globalStats,
     nodes,
     setNodes,
   };

src/hooks/useNodes.tsx

@@ -52,7 +52,7 @@ export type Node = {
 export type Nodes = Node[];
 
 export const useNodes = () => {
-  const { nodes } = useContext(NodesContext);
+  const { nodes, globalStats } = useContext(NodesContext);
 
   const getNodeByID = (queryNodeId: string) => {
     return nodes.find((node) => node.id === queryNodeId);
@@ -78,6 +78,7 @@ export const useNodes = () => {
 
   return {
     nodes,
+    globalStats,
     getNodeByID,
     getNodesByLocationId,
     getNodesByCountryId,

src/hooks/useStats.tsx

@@ -98,6 +98,7 @@ const computeStats = (
 export const useStats = () => {
   const {
     nodes: nodesMap,
+    globalStats,
     getNodesByContinentId,
     getNodesByCountryId,
     getNodesByLocationId,
@@ -111,8 +112,8 @@ export const useStats = () => {
 
   const getGlobalStats = () => {
     if (!nodes) return;
-    const globalStats = computeStats(nodes, undefined);
-    return globalStats;
+    const computedGlobalStats = computeStats(nodes, undefined);
+    return { ...computedGlobalStats, ...globalStats };
   };
 
   const getStatsByContinentId = (continentId: string) => {