⬆️ Bumped deps, removed useless ones

package.json

@@ -20,32 +20,31 @@
     "@dnd-kit/core": "^4.0.0",
     "@dnd-kit/sortable": "^5.0.0",
     "@dnd-kit/utilities": "^3.2.0",
-    "@fortawesome/fontawesome-free": "^6.1.1",
+    "@fortawesome/fontawesome-free": "^6.3.0",
     "@redux-devtools/extension": "^3.2.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@tanstack/react-table": "^8.5.11",
+    "@types/axios": "^0.14.0",
     "@types/mime-types": "^2.1.0",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-redux": "^7.1.16",
-    "@types/react-router-dom": "^5.1.7",
+    "@types/react-router-dom": "^5.3.3",
     "@types/socket.io": "^3.0.2",
     "@types/socket.io-client": "^3.0.0",
     "@vitejs/plugin-react": "^3.1.0",
     "airdcpp-apisocket": "2.4.5-beta.1",
-    "axios": "^0.27.2",
+    "axios": "^1.3.4",
+    "axios-cache-interceptor": "^1.0.1",
     "axios-rate-limit": "^1.3.0",
-    "axios-simple-cache-adapter": "^1.1.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-minify": "^0.5.2",
     "better-docs": "^2.7.2",
     "date-fns": "^2.28.0",
     "dayjs": "^1.10.6",
-    "ellipsize": "^0.1.0",
+    "ellipsize": "^0.5.1",
     "express": "^4.17.1",
     "filename-parser": "^1.0.2",
     "final-form": "^4.20.2",
     "final-form-arrays": "^3.0.2",
+    "history": "^5.3.0",
     "html-to-text": "^8.1.0",
     "jsdoc": "^3.6.10",
     "lodash": "^4.17.21",
@@ -64,9 +63,9 @@
     "react-loader-spinner": "^4.0.0",
     "react-masonry-css": "^1.0.16",
     "react-modal": "^3.15.1",
-    "react-redux": "^7.2.6",
-    "react-router": "^6.2.2",
-    "react-router-dom": "^6.2.2",
+    "react-redux": "^8.0.5",
+    "react-router": "^6.9.0",
+    "react-router-dom": "^6.9.0",
     "react-select": "^5.3.2",
     "react-select-async-paginate": "^0.7.2",
     "react-slick": "^0.29.0",
@@ -79,12 +78,10 @@
     "redux-thunk": "^2.4.2",
     "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.3.2",
-    "styled-components": "^5.3.5",
+    "styled-components": "^5.3.9",
     "threetwo-ui-typings": "^1.0.14",
     "vite-plugin-html": "^3.2.0",
     "websocket": "^1.0.34",
-    "ws": "^7.5.3",
-    "xml2js": "^0.4.23",
     "xregexp": "^5.0.2"
   },
   "devDependencies": {
@@ -103,20 +100,19 @@
     "@storybook/react-vite": "^7.0.0-rc.3",
     "@storybook/testing-library": "^0.0.14-next.1",
     "@tsconfig/node14": "^1.0.0",
+    "@types/ellipsize": "^0.1.1",
     "@types/express": "^4.17.8",
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.168",
     "@types/node": "^14.14.34",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-redux": "^7.1.16",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-redux": "^7.1.25",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "babel-eslint": "^10.0.0",
     "body-parser": "^1.19.0",
     "bulma": "^0.9.4",
-    "comlink": "^4.3.0",
-    "concurrently": "^4.0.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-airbnb-base": "^14.2.1",
@@ -138,7 +134,7 @@
     "sass": "^1.58.1",
     "storybook": "^7.0.0-rc.3",
     "tslint": "^6.1.3",
-    "typescript": "^4.9",
-    "vite": "^4.1.1"
+    "typescript": "^5.0.2",
+    "vite": "^4.2.0"
   }
 }

src/client/actions/comicinfo.actions.tsx

@@ -1,9 +1,6 @@
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";
-import {
-  AxiosCacheRequestConfig,
-  createCacheAdapter,
-} from "axios-simple-cache-adapter";
+import { setupCache } from "axios-cache-interceptor";
 import qs from "qs";
 import {
   CV_SEARCH_SUCCESS,
@@ -26,25 +23,22 @@ import {
   LIBRARY_SERVICE_BASE_URI,
 } from "../constants/endpoints";
 
-const axiosCacheAdapter = createCacheAdapter();
 const http = rateLimiter(axios.create(), {
   maxRequests: 1,
   perMilliseconds: 1000,
   maxRPS: 1,
 });
-
+const cachedAxios = setupCache(axios);
 export const getWeeklyPullList = (options) => async (dispatch) => {
   try {
     dispatch({
       type: CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS,
     });
 
-    await axios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
+    await cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
       method: "get",
       params: options,
-      axiosCacheAdapter,
-      cache: 1000, // value in MS
-    } as AxiosCacheRequestConfig).then((response) => {
+    }).then((response) => {
       dispatch({
         type: CV_WEEKLY_PULLLIST_FETCHED,
         data: response.data.result,

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -1,7 +1,5 @@
 import React, { useEffect, useContext, ReactElement } from "react";
-import {
-  getBundlesForComic,
-} from "../../actions/airdcpp.actions";
+import { getBundlesForComic } from "../../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "threetwo-ui-typings";
 import { isEmpty, isNil, map } from "lodash";

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import prettyBytes from "pretty-bytes";
-import { isUndefined } from "lodash";
+import { isEmpty } from "lodash";
 
 export const RawFileDetails = (props): ReactElement => {
   const { rawFileDetails, inferredMetadata } = props.data;
@@ -34,6 +34,14 @@ export const RawFileDetails = (props): ReactElement => {
                   </span>
                 </div>
               </div>
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag">MIME type</span>
+                  <span className="tag is-primary is-light">
+                    {rawFileDetails.mimeType}
+                  </span>
+                </div>
+              </div>
             </div>
           </dd>
         </dl>
@@ -53,7 +61,7 @@ export const RawFileDetails = (props): ReactElement => {
                   </span>
                 </div>
               </div>
-              {!isUndefined(inferredMetadata.issue.number) ? (
+              {!isEmpty(inferredMetadata.issue.number) ? (
                 <div className="control">
                   <div className="tags has-addons">
                     <span className="tag">Number</span>
@@ -81,6 +89,7 @@ RawFileDetails.propTypes = {
       fileSize: PropTypes.number,
       path: PropTypes.string,
       extension: PropTypes.string,
+      mimeType: PropTypes.string,
       cover: PropTypes.shape({
         filePath: PropTypes.string,
       }),

src/client/components/Navbar.tsx

@@ -98,7 +98,7 @@ const Navbar: React.FunctionComponent = (props) => {
                 <a className="navbar-link is-arrowless has-text-success">
                   <i className="fa-solid fa-bolt"></i>
                 </a>
-                <div className="navbar-dropdown pt-4 pr-2 pl-2 is-right airdcpp-status">
+                <div className="navbar-dropdown mt-3 pt-4 pr-2 pl-2 is-right airdcpp-status is-boxed">
                   {/* AirDC++ Session Information */}
 
                   <p>
@@ -133,7 +133,7 @@ const Navbar: React.FunctionComponent = (props) => {
                 <a className="navbar-link is-arrowless has-text-danger">
                   <i className="fa-solid fa-bolt"></i>
                 </a>
-                <div className="navbar-dropdown pr-2 pl-2 is-right">
+                <div className="navbar-dropdown pr-2 pl-2 is-right is-boxed">
                   <pre>
                     {JSON.stringify(socketDisconnectionReason, null, 2)}
                   </pre>

src/client/components/shared/MetadataPanel.tsx

@@ -57,6 +57,12 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                   >
                     {rawFileDetails.extension}
                   </span>
+                  <span
+                    className="tag is-success is-light has-text-weight-semibold"
+                    style={props.tagsStyle}
+                  >
+                    {rawFileDetails.mimeType}
+                  </span>
                   <span
                     className="tag is-success is-light"
                     style={props.tagsStyle}