🖼️ Updated screenshot links in README

.eslintrc.js

@@ -1,14 +1,14 @@
 module.exports = {
-  extends: ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "plugin:css-modules/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended"],
+  extends: ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "plugin:css-modules/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     sourceType: "module",
     ecmaVersion: 2020,
     ecmaFeatures: {
       jsx: true // Allows for the parsing of JSX
+
     }
   },
-
   plugins: ["@typescript-eslint", "css-modules"],
   settings: {
     "import/resolver": {
@@ -18,9 +18,9 @@ module.exports = {
     },
     react: {
       version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
+
     }
   },
-
   // Fine tune rules
   rules: {
     "@typescript-eslint/no-var-requires": 0

.storybook/main.js

@@ -0,0 +1,19 @@
+module.exports = {
+  stories: [
+    "../src/client/stories/*.stories.mdx",
+    "../src/client/stories/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  staticDirs: [
+    "../src/client/stories/assets"
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/preset-scss",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "webpack5",
+  },
+};

.storybook/main.ts

@@ -1,17 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
-};
-export default config;

.storybook/preview-head.html

@@ -1,3 +0,0 @@
-<script>
-  window.global = window;
-</script>

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

.storybook/preview.ts

@@ -1,18 +0,0 @@
-import type { Preview } from "@storybook/react";
-
-const preview: Preview = {
-  parameters: {
-    backgrounds: {
-      default: "light",
-    },
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
-};
-
-export default preview;

package.json

@@ -8,9 +8,7 @@
     "build": "vite build",
     "dev": "rimraf dist && npm run build && vite",
     "prod": "npm run build && vite",
-    "docs": "jsdoc -c jsdoc.json",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "docs": "jsdoc -c jsdoc.json"
   },
   "author": "Rishi Ghan",
   "license": "MIT",
@@ -20,31 +18,32 @@
     "@dnd-kit/core": "^4.0.0",
     "@dnd-kit/sortable": "^5.0.0",
     "@dnd-kit/utilities": "^3.2.0",
-    "@fortawesome/fontawesome-free": "^6.3.0",
+    "@fortawesome/fontawesome-free": "^6.1.1",
     "@redux-devtools/extension": "^3.2.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@tanstack/react-table": "^8.8.0",
-    "@types/axios": "^0.14.0",
+    "@tanstack/react-table": "^8.5.11",
     "@types/mime-types": "^2.1.0",
-    "@types/react-router-dom": "^5.3.3",
+    "@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/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": "^1.3.4",
-    "axios-cache-interceptor": "^1.0.1",
+    "axios": "^0.27.2",
     "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.5.1",
+    "ellipsize": "^0.1.0",
     "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",
@@ -63,9 +62,9 @@
     "react-loader-spinner": "^4.0.0",
     "react-masonry-css": "^1.0.16",
     "react-modal": "^3.15.1",
-    "react-redux": "^8.0.5",
-    "react-router": "^6.9.0",
-    "react-router-dom": "^6.9.0",
+    "react-redux": "^7.2.6",
+    "react-router": "^6.2.2",
+    "react-router-dom": "^6.2.2",
     "react-select": "^5.3.2",
     "react-select-async-paginate": "^0.7.2",
     "react-slick": "^0.29.0",
@@ -78,10 +77,12 @@
     "redux-thunk": "^2.4.2",
     "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.3.2",
-    "styled-components": "^5.3.9",
+    "styled-components": "^5.3.5",
     "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": {
@@ -92,27 +93,21 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.13.0",
-    "@storybook/addon-essentials": "^7.0.0-rc.3",
-    "@storybook/addon-interactions": "^7.0.0-rc.3",
-    "@storybook/addon-links": "^7.0.0-rc.3",
-    "@storybook/blocks": "^7.0.0-rc.3",
-    "@storybook/react": "^7.0.0-rc.3",
-    "@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": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@types/react-redux": "^7.1.25",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.2",
+    "@types/react-redux": "^7.1.16",
     "@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",
@@ -122,7 +117,6 @@
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-storybook": "^0.6.11",
     "express": "^4.17.1",
     "install": "^0.13.0",
     "jest": "^26.6.3",
@@ -132,9 +126,8 @@
     "react-refresh": "^0.14.0",
     "rimraf": "^4.1.3",
     "sass": "^1.58.1",
-    "storybook": "^7.0.0-rc.3",
     "tslint": "^6.1.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.2.0"
+    "typescript": "^4.2.3",
+    "vite": "^4.1.1"
   }
 }

src/client/actions/comicinfo.actions.tsx

@@ -1,6 +1,9 @@
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";
-import { setupCache } from "axios-cache-interceptor";
+import {
+  AxiosCacheRequestConfig,
+  createCacheAdapter,
+} from "axios-simple-cache-adapter";
 import qs from "qs";
 import {
   CV_SEARCH_SUCCESS,
@@ -23,22 +26,25 @@ 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 cachedAxios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
+    await axios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
       method: "get",
       params: options,
-    }).then((response) => {
+      axiosCacheAdapter,
+      cache: 1000, // value in MS
+    } as AxiosCacheRequestConfig).then((response) => {
       dispatch({
         type: CV_WEEKLY_PULLLIST_FETCHED,
         data: response.data.result,
@@ -55,7 +61,6 @@ export const comicinfoAPICall = (options) => async (dispatch) => {
       type: CV_API_CALL_IN_PROGRESS,
       inProgress: true,
     });
-    console.log(options);
     const serviceURI = `${COMICVINE_SERVICE_URI}/${options.callURIAction}`;
     const response = await http(serviceURI, {
       method: options.callMethod,
@@ -65,11 +70,9 @@ export const comicinfoAPICall = (options) => async (dispatch) => {
         "Content-Type": "application/json",
         "Access-Control-Allow-Origin": "*",
       },
-      paramsSerializer: {
-        indexes: null,
+      paramsSerializer: (params) => {
+        return qs.stringify(params, { arrayFormat: "repeat" });
       },
-      // (params) =>
-      // qs.stringify(params, { arrayFormat: "repeat" }),
     });
 
     switch (options.callURIAction) {
@@ -84,7 +87,7 @@ export const comicinfoAPICall = (options) => async (dispatch) => {
         console.log("Could not complete request.");
     }
   } catch (error) {
-    console.error(error);
+    console.log(error);
     dispatch({
       type: CV_API_GENERIC_FAILURE,
       error,

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -1,5 +1,7 @@
 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 { isEmpty } from "lodash";
+import { isUndefined } from "lodash";
 
 export const RawFileDetails = (props): ReactElement => {
   const { rawFileDetails, inferredMetadata } = props.data;
@@ -34,14 +34,6 @@ 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>
@@ -61,7 +53,7 @@ export const RawFileDetails = (props): ReactElement => {
                   </span>
                 </div>
               </div>
-              {!isEmpty(inferredMetadata.issue.number) ? (
+              {!isUndefined(inferredMetadata.issue.number) ? (
                 <div className="control">
                   <div className="tags has-addons">
                     <span className="tag">Number</span>
@@ -89,7 +81,6 @@ RawFileDetails.propTypes = {
       fileSize: PropTypes.number,
       path: PropTypes.string,
       extension: PropTypes.string,
-      mimeType: PropTypes.string,
       cover: PropTypes.shape({
         filePath: PropTypes.string,
       }),

src/client/components/Dashboard/PullList.tsx

@@ -20,7 +20,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2023-3-25",
+        startDate: "2023-1-25",
         pageSize: "15",
         currentPage: "1",
       }),

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 mt-3 pt-4 pr-2 pl-2 is-right airdcpp-status is-boxed">
+                <div className="navbar-dropdown pt-4 pr-2 pl-2 is-right airdcpp-status">
                   {/* 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 is-boxed">
+                <div className="navbar-dropdown pr-2 pl-2 is-right">
                   <pre>
                     {JSON.stringify(socketDisconnectionReason, null, 2)}
                   </pre>

src/client/components/shared/MetadataPanel.tsx

@@ -57,12 +57,6 @@ 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}

src/client/stories/MetadataPanel.stories.tsx

@@ -30,20 +30,20 @@ RawFileDetails.args = {
         },
         "inferredMetadata": {
           "issue": {
-            "name": "Batman Annual 02",
+            "name": "Fantastic Four 143",
             "number": 197402,
             "year": "1974",
             "subtitle": ""
           }
         },
         "rawFileDetails": {
-          "name": "Batman Annual 02",
+          "name": "197402 Fantastic Four 143",
           "filePath": "/Users/rishi/work/threetwo-core-service/comics/197402 Fantastic Four 143.cbz",
           "fileSize": 10341074,
           "extension": ".cbz",
           "containedIn": "./userdata/covers/197402 Fantastic Four 143",
           "cover": {
-            "filePath": "userdata/covers/Batman Annual 02/Batman 002_00a.jpg"
+            "filePath": "userdata/covers/197402 Fantastic Four 143/FF143_01.jpg"
           }
         },
         "sourcedMetadata": { "comicInfo": null, "comicvine": { "aliases": [] } },