nhl-schedule - npm Package Compare versions

Comparing version 1.0.20 to 1.0.21

dist/Game.js

@@ -40,2 +40,23 @@ "use strict";
   }, [ref, shouldScroll, game]);
+  var isLive = game.status.detailedState.toLowerCase() === "in progress";
+  var renderDate = function renderDate() {
+    if (isLive) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "liveStatus",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: game.linescore.currentPeriodOrdinal
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: "".concat(game.linescore.currentPeriodTimeRemaining)
+        })]
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "gameDate",
+      children: new Date(game.gameDate).toLocaleDateString("en-us", {
+        weekday: "short",
+        hour: "2-digit",
+        minute: "2-digit"
+      })
+    });
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
@@ -45,3 +66,3 @@ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: ref,
-      className: game.status.detailedState.toLowerCase() === "final" ? "gameContainerFinished" : "gameContainer",
+      className: game.status.detailedState.toLowerCase() === "final" ? "gameContainerFinished" : isLive ? "liveContainer" : "gameContainer",
       children: [summary(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -60,3 +81,3 @@ className: "gameWrapper",
               children: awayTeam.abbreviation
-            }), game.status.detailedState.toLowerCase() === "final" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            }), game.status.detailedState.toLowerCase() === "final" || isLive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               children: game.teams.away.score
@@ -73,3 +94,3 @@ }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {})]
               children: homeTeam.abbreviation
-            }), game.status.detailedState.toLowerCase() === "final" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            }), game.status.detailedState.toLowerCase() === "final" || isLive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               children: game.teams.home.score
@@ -81,10 +102,3 @@ }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {})]
         className: "gameBox",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "gameDate",
-          children: new Date(game.gameDate).toLocaleDateString("en-us", {
-            weekday: "short",
-            hour: "2-digit",
-            minute: "2-digit"
-          })
-        })
+        children: renderDate()
       })]
@@ -91,0 +105,0 @@ })

dist/NHLSchedule.js

@@ -27,2 +27,3 @@ "use strict";
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var interval;
 var Schedule = function Schedule(props) {
@@ -37,34 +38,42 @@ var daysAgo = props.daysAgo,
     setData = _useState2[1];
+  var fetchSchedule = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var startDate, endDate, response, data;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            startDate = new Date();
+            endDate = new Date();
+            startDate.setHours(startDate.getHours() - (daysAgo !== undefined ? daysAgo : 3) * 24);
+            endDate.setHours(endDate.getHours() + (daysAhead !== undefined ? daysAhead : 7) * 24);
+            _context.next = 6;
+            return fetch("https://statsapi.web.nhl.com/api/v1/schedule?startDate=".concat(startDate.toISOString().split("T")[0], "&endDate=").concat(endDate.toISOString().split("T")[0], "&hydrate=team,linescore,game(content(media(epg)),seriesSummary),metadata,seriesSummary(series)&site=en_nhlNORDIC"));
+          case 6:
+            response = _context.sent;
+            _context.next = 9;
+            return response.json();
+          case 9:
+            data = _context.sent;
+            setData(data.dates);
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function fetchSchedule() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   (0, _react.useEffect)(function () {
-    var startDate = new Date();
-    var endDate = new Date();
-    startDate.setHours(startDate.getHours() - (daysAgo !== undefined ? daysAgo : 3) * 24);
-    endDate.setHours(endDate.getHours() + (daysAhead !== undefined ? daysAhead : 7) * 24);
-    var fetchSchedule = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var response, data;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return fetch("https://statsapi.web.nhl.com/api/v1/schedule?startDate=".concat(startDate.toISOString().split("T")[0], "&endDate=").concat(endDate.toISOString().split("T")[0], "&hydrate=team,linescore,game(content(media(epg)),seriesSummary),metadata,seriesSummary(series)&site=en_nhlNORDIC"));
-            case 2:
-              response = _context.sent;
-              _context.next = 5;
-              return response.json();
-            case 5:
-              data = _context.sent;
-              setData(data.dates);
-            case 7:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function fetchSchedule() {
-        return _ref.apply(this, arguments);
-      };
-    }();
     fetchSchedule();
-  }, [daysAgo, daysAhead]);
+  }, []);
+  var subscribe = function subscribe() {
+    if (interval) {
+      clearInterval(interval);
+    }
+    interval = setInterval(function () {
+      fetchSchedule();
+    }, 30000);
+  };
   if (!data) {
@@ -85,2 +94,14 @@ return null;
   })[0];
+  var anyLive = filteredData.map(function (event) {
+    return event.games.find(function (game) {
+      return game.status.detailedState.toLowerCase() === "in progress";
+    });
+  }).filter(function (foundGames) {
+    return !!foundGames;
+  })[0];
+  if (anyLive) {
+    subscribe();
+  } else if (interval) {
+    clearInterval(interval);
+  }
   if (!filteredData.length) {
@@ -87,0 +108,0 @@ return null;

package.json

 {
   "name": "nhl-schedule",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "A widget that will show past and upcoming games in the NHL.",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -11,2 +11,7 @@ # NHL Schedule widget
 
+## Now support for live updates
+With real time updates, the widget will automatically update the goals, time and status.
+
+![loive](https://storage.googleapis.com/algobook/nhl-schedule-widget/Screenshot%202023-04-23%20at%2020.13.35.png)
+
 ## Some notes
@@ -13,0 +18,0 @@

src/Game.js

@@ -31,2 +31,24 @@ import { useEffect, useRef } from "react";
 
+  const isLive = game.status.detailedState.toLowerCase() === "in progress";
+
+  const renderDate = () => {
+    if (isLive) {
+      return (
+        <div className="liveStatus">
+          <span>{game.linescore.currentPeriodOrdinal}</span>
+          <span>{`${game.linescore.currentPeriodTimeRemaining}`}</span>
+        </div>
+      );
+    }
+    return (
+      <div className="gameDate">
+        {new Date(game.gameDate).toLocaleDateString("en-us", {
+          weekday: "short",
+          hour: "2-digit",
+          minute: "2-digit",
+        })}
+      </div>
+    );
+  };
+
   return (
@@ -40,2 +62,4 @@ <>
             ? "gameContainerFinished"
+            : isLive
+            ? "liveContainer"
             : "gameContainer"
@@ -54,3 +78,3 @@ }
               <div className="teamName">{awayTeam.abbreviation}</div>
-              {game.status.detailedState.toLowerCase() === "final" ? (
+              {game.status.detailedState.toLowerCase() === "final" || isLive ? (
                 <div>{game.teams.away.score}</div>
@@ -68,3 +92,3 @@ ) : (
               <div className="teamName">{homeTeam.abbreviation}</div>
-              {game.status.detailedState.toLowerCase() === "final" ? (
+              {game.status.detailedState.toLowerCase() === "final" || isLive ? (
                 <div>{game.teams.home.score}</div>
@@ -77,11 +101,3 @@ ) : (
         </div>
-        <div className="gameBox">
-          <div className="gameDate">
-            {new Date(game.gameDate).toLocaleDateString("en-us", {
-              weekday: "short",
-              hour: "2-digit",
-              minute: "2-digit",
-            })}
-          </div>
-        </div>
+        <div className="gameBox">{renderDate()}</div>
       </div>
@@ -88,0 +104,0 @@ </>

src/NHLSchedule.js

@@ -5,6 +5,9 @@ import { useEffect, useState } from "react";
 
+let interval;
+
 const Schedule = (props) => {
   const { daysAgo, daysAhead, doScroll = true } = props;
   const [data, setData] = useState(null);
-  useEffect(() => {
+
+  const fetchSchedule = async () => {
     const startDate = new Date();
@@ -18,17 +21,28 @@ const endDate = new Date();
     );
-    const fetchSchedule = async () => {
-      const response = await fetch(
-        `https://statsapi.web.nhl.com/api/v1/schedule?startDate=${
-          startDate.toISOString().split("T")[0]
-        }&endDate=${
-          endDate.toISOString().split("T")[0]
-        }&hydrate=team,linescore,game(content(media(epg)),seriesSummary),metadata,seriesSummary(series)&site=en_nhlNORDIC`
-      );
-      const data = await response.json();
-      setData(data.dates);
-    };
 
+    const response = await fetch(
+      `https://statsapi.web.nhl.com/api/v1/schedule?startDate=${
+        startDate.toISOString().split("T")[0]
+      }&endDate=${
+        endDate.toISOString().split("T")[0]
+      }&hydrate=team,linescore,game(content(media(epg)),seriesSummary),metadata,seriesSummary(series)&site=en_nhlNORDIC`
+    );
+    const data = await response.json();
+    setData(data.dates);
+  };
+
+  useEffect(() => {
     fetchSchedule();
-  }, [daysAgo, daysAhead]);
+  }, []);
 
+  const subscribe = () => {
+    if (interval) {
+      clearInterval(interval);
+    }
+
+    interval = setInterval(() => {
+      fetchSchedule();
+    }, 30000);
+  };
+
   if (!data) {
@@ -51,2 +65,16 @@ return null;
 
+  const anyLive = filteredData
+    .map((event) =>
+      event.games.find(
+        (game) => game.status.detailedState.toLowerCase() === "in progress"
+      )
+    )
+    .filter((foundGames) => !!foundGames)[0];
+
+  if (anyLive) {
+    subscribe();
+  } else if (interval) {
+    clearInterval(interval);
+  }
+
   if (!filteredData.length) {
@@ -53,0 +81,0 @@ return null;

No alert changes

Improved metrics

Total package byte prevSize

1151182

increased by0.26%

Lines of code

801

increased by17.11%

Number of lines in readme file

22

increased by29.41%

No dependency changes