chore: update client packages (#20)

README.md

@@ -1,6 +1,6 @@
 <div align="center" text-align="center">
 
-# JRE MISSING  <img height="23px" width="23px" padding="5px" src="./client/public/favicon.png" alt="JRE MISSING LOGO" />
+# JRE MISSING <img height="23px" width="23px" padding="5px" src="./client/public/favicon.png" alt="JRE MISSING LOGO" />
 
 <p>
   <img alt="Repository size" src="https://img.shields.io/github/repo-size/HenB13/jre-missing?color=#ee7d2c">
@@ -9,8 +9,7 @@
 
 </p>
 
-Automatically detects and lists episodes of [The Joe Rogan Experience](https://open.spotify.com/show/4rOoJ6Egrf8K2IrywzwOMk) podcast that are currently not available on the Spotify platform. Will also catch episodes removed or re-added in the future.
-
+Automatically detects and lists episodes of [The Joe Rogan Experience](https://open.spotify.com/show/4rOoJ6Egrf8K2IrywzwOMk) podcast that are currently not available on the Spotify platform. Also detects if episodes have been shortened in duration.
 
 ## As Mentioned In 🗞️
 
@@ -32,7 +31,6 @@ Automatically detects and lists episodes of [The Joe Rogan Experience](https://o
  &#8226;  <a href="https://www.independent.co.uk/arts-entertainment/music/news/joe-rogan-podcast-episodes-removed-b2009035.html">The Independent</a>
  &#8226;  <a href="https://www.aftenposten.no/kultur/i/RrnjjW/joe-rogan-ber-om-unnskyldning-for-aa-ha-brukt-n-ordet-i-sin-podkast">Aftenposten</a>
 
-
 ## Sponsors 💜
 
 <a href="https://github.com/cotterjd">Jordan Cotter</a> &#8226;

client/package.json

@@ -7,18 +7,18 @@
     "@types/react": "^18.2.33",
     "@vitejs/plugin-react-swc": "^3.4.0",
     "classnames": "^2.3.2",
-    "date-fns": "^2.29.3",
-    "date-fns-tz": "^1.3.7",
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0",
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-text-transition": "^1.3.0",
-    "react-tooltip": "^4.4.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-text-transition": "^3.1.0",
+    "react-tooltip": "^5.21.6",
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
     "vite-plugin-svgr": "^4.1.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^3.5.0"
   },
   "scripts": {
     "start": "vite",
@@ -29,9 +29,9 @@
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^0.34.6",
-    "eslint": "^8.24.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jsdom": "^22.1.0",
     "vitest": "^0.34.6"

client/src/components/ScrollButton.jsx

@@ -26,11 +26,11 @@ const ScrollButton = ({ dataPending, minLoadingTimeElapsed, scrollTarget, scroll
       <div className={styles.ScrollText}>
         To{" "}
         <TextTransition
-          text={scrollTarget}
           springConfig={presets.gentle}
           inline={true}
-          direction={scrollTarget === "top" ? "up" : "down"}
-        />
+          direction={scrollTarget === "top" ? "up" : "down"}>
+          {scrollTarget}
+        </TextTransition>
       </div>
       <ArrowDown
         className={classnames(styles.arrow, {

client/src/components/Tag.jsx

@@ -1,5 +1,5 @@
 import classnames from "classnames";
-import ReactTooltip from "react-tooltip";
+import { Tooltip } from "react-tooltip";
 import styles from "./Tag.module.css";
 
 const variantClasses = {
@@ -12,10 +12,13 @@ const Tag = ({ className, variant, children, toolTip }) => (
     <span className={styles.tagName}>{children}</span>
     {toolTip && (
       <>
-        <span data-tip={toolTip} className={styles.toolTip}>
+        <span
+          data-tooltip-id="my-tooltip"
+          data-tooltip-content={toolTip}
+          className={styles.toolTip}>
           &#63;
         </span>
-        <ReactTooltip effect="solid" clickable className={styles.toolTipElement} />
+        <Tooltip id="my-tooltip" clickable className={styles.toolTipElement} />
       </>
     )}
   </span>

client/src/index.jsx

@@ -1,11 +1,11 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./components/App";
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );

server/api/dev-api.js

@@ -0,0 +1,18 @@
+const express = require("express");
+const router = express.Router();
+const { mockResponse } = require("./__mocks__/mockResponse");
+
+router.use(express.json());
+require("dotenv").config();
+
+router.get("/api/episodes", async (_, res) => {
+  res.header({
+    "Access-Control-Allow-Origin": "http://localhost:3000",
+  });
+
+  return res.json(mockResponse);
+
+  //TODO: Implement dev database
+});
+
+module.exports = router;

server/app.js

@@ -1,13 +1,16 @@
 const express = require("express");
 const app = express();
 const api = require("./api/index.js");
+const devApi = require("./api/dev-api.js");
 const rateLimit = require("express-rate-limit");
 const slowDown = require("express-slow-down");
 const helmet = require("helmet");
 require("dotenv").config();
 
 // eslint-disable-next-line no-undef
 const port = process.env.PORT || 3001;
+const useDevApi =
+  process.env.NODE_ENV === "development" && process.env.USE_MOCK_DATA === "true";
 
 app.set("trust proxy", 1);
 
@@ -26,7 +29,7 @@ app.use(express.json());
 app.use(helmet());
 app.use(rateLimiter);
 app.use(speedLimiter);
-app.use(api);
+app.use(useDevApi ? devApi : api);
 
 app.listen(port, () => {
   console.log(`Server listening on port ${port}!`);

server/package.json

@@ -5,7 +5,8 @@
   "main": "app.js",
   "scripts": {
     "start": "node app.js",
-    "dev": "cross-env NODE_ENV=development run-p dev-server worker",
+    "dev": "cross-env NODE_ENV=development npm run dev-server",
+    "dev:all": "cross-env NODE_ENV=development run-p dev-server worker",
     "dev-server": "nodemon app.js",
     "worker": "node worker/worker.js",
     "refresh-db": "node worker/tasks/refreshDb.js",