🔧 Refactor for axios upgrade

.github/workflows/docker-image.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
     - uses: actions/checkout@master
     - name: Publish to Registry
-      uses: elgohr/Publish-Docker-Github-Action@v5
+      uses: elgohr/Publish-Docker-Github-Action@master
       with:
         name: frishi/threetwo
         username: ${{ secrets.DOCKER_USERNAME }}

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.15.0-alpine
+FROM node:17.3-alpine
 LABEL maintainer="Rishi Ghan <rishi.ghan@gmail.com>"
 
 WORKDIR /threetwo
@@ -9,11 +9,11 @@ COPY nodemon.json ./
 COPY jsdoc.json ./
 
 # RUN apt-get update && apt-get install -y git python3 build-essential autoconf automake g++ libpng-dev make
-RUN apk --no-cache add g++ make libpng-dev git python3 libc6-compat autoconf automake libjpeg-turbo-dev libpng-dev mesa-dev mesa libxi build-base gcc libtool nasm
+RUN apk --no-cache add g++ make libpng-dev python3 git libc6-compat autoconf automake  bash libjpeg-turbo-dev libpng-dev mesa-dev mesa libxi build-base gcc libtool nasm
 RUN yarn --ignore-engines
 
 
 COPY . .
-EXPOSE 5173
+EXPOSE 3050
 
 ENTRYPOINT [ "npm", "start" ]

README.md

@@ -40,8 +40,9 @@ For debugging and troubleshooting, you can run this app locally using these step
 
 1. Clone this repo using `git clone https://github.com/rishighan/threetwo.git`
 2. `yarn run dev` (you can ignore the warnings)
-3. This will open `http://localhost:5173` in your default browser
-4. Note that this is simply the UI layer and won't offer anything beyond a scaffold. You have to spin up the microservices locally to get it to work.
+3. This will open `http://localhost:3050` in your default browser
+4. For testing `OPDS` functionality, create a folder called `comics` under `/src/server` and put some comics in there. The `OPDS` feed is accessed to `http://localhost:8050/api/opds`
+5. Note that this is simply the UI layer and won't offer anything beyond a scaffold. You have to spin up the microservices locally to get it to work.
 
 
 ## Troubleshooting

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build": "vite build",
     "dev": "rimraf dist && npm run build && vite",
-    "start": "npm run build && vite",
+    "prod": "npm run build && vite",
     "docs": "jsdoc -c jsdoc.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -23,7 +23,7 @@
     "@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",
+    "@tanstack/react-table": "^8.8.0",
     "@types/axios": "^0.14.0",
     "@types/mime-types": "^2.1.0",
     "@types/react-router-dom": "^5.3.3",

src/client/actions/comicinfo.actions.tsx

@@ -1,6 +1,7 @@
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";
 import { setupCache } from "axios-cache-interceptor";
+import qs from "qs";
 import {
   CV_SEARCH_SUCCESS,
   CV_API_CALL_IN_PROGRESS,
@@ -54,6 +55,7 @@ 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,
@@ -63,6 +65,11 @@ export const comicinfoAPICall = (options) => async (dispatch) => {
         "Content-Type": "application/json",
         "Access-Control-Allow-Origin": "*",
       },
+      paramsSerializer: {
+        indexes: null,
+      },
+      // (params) =>
+      // qs.stringify(params, { arrayFormat: "repeat" }),
     });
 
     switch (options.callURIAction) {
@@ -77,7 +84,7 @@ export const comicinfoAPICall = (options) => async (dispatch) => {
         console.log("Could not complete request.");
     }
   } catch (error) {
-    console.log(error);
+    console.error(error);
     dispatch({
       type: CV_API_GENERIC_FAILURE,
       error,

src/client/actions/fileops.actions.tsx

@@ -127,50 +127,49 @@ export const getComicBooks = (options) => async (dispatch) => {
  * @returns Nothing.
  * @param payload
  */
-export const importToDB =
-  (sourceName: string, metadata?: any) => (dispatch) => {
-    try {
-      const comicBookMetadata = {
-        importType: "new",
-        payload: {
-          rawFileDetails: {
-            name: "",
-          },
-          importStatus: {
-            isImported: true,
-            tagged: false,
-            matchedResult: {
-              score: "0",
-            },
-          },
-          sourcedMetadata: metadata || null,
-          acquisition: { source: { wanted: true, name: sourceName } },
+export const importToDB = (sourceName: string, metadata?: any) => (dispatch) => {
+  try {
+    const comicBookMetadata = {
+      importType: "new",
+      payload: {
+        rawFileDetails: {
+          name: "",
         },
-      };
-      dispatch({
-        type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
-      });
-      return axios
-        .request({
-          url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`,
-          method: "POST",
-          data: comicBookMetadata,
-          // transformResponse: (r: string) => JSON.parse(r),
-        })
-        .then((response) => {
-          const { data } = response;
-          dispatch({
-            type: IMS_CV_METADATA_IMPORT_SUCCESSFUL,
-            importResult: data,
-          });
+        importStatus: {
+          isImported: true,
+          tagged: false,
+          matchedResult: {
+            score: "0",
+          },
+        },
+        sourcedMetadata: metadata || null,
+        acquisition: { source: { wanted: true, name: sourceName } },
+      }
+    };
+    dispatch({
+      type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
+    });
+    return axios
+      .request({
+        url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`,
+        method: "POST",
+        data: comicBookMetadata,
+        // transformResponse: (r: string) => JSON.parse(r),
+      })
+      .then((response) => {
+        const { data } = response;
+        dispatch({
+          type: IMS_CV_METADATA_IMPORT_SUCCESSFUL,
+          importResult: data,
         });
-    } catch (error) {
-      dispatch({
-        type: IMS_CV_METADATA_IMPORT_FAILED,
-        importError: error,
       });
-    }
-  };
+  } catch (error) {
+    dispatch({
+      type: IMS_CV_METADATA_IMPORT_FAILED,
+      importError: error,
+    });
+  }
+};
 
 export const fetchVolumeGroups = () => async (dispatch) => {
   try {
@@ -255,23 +254,24 @@ export const fetchComicVineMatches =
  * @returns {any}
  */
 export const extractComicArchive =
+
   (path: string, options: any): any =>
-  async (dispatch) => {
-    dispatch({
-      type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
-    });
-    await axios({
-      method: "POST",
-      url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
-      headers: {
-        "Content-Type": "application/json; charset=utf-8",
-      },
-      data: {
-        filePath: path,
-        options,
-      },
-    });
-  };
+    async (dispatch) => {
+      dispatch({
+        type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
+      });
+      await axios({
+        method: "POST",
+        url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        data: {
+          filePath: path,
+          options,
+        },
+      });
+    };
 
 /**
  * Description
@@ -349,4 +349,4 @@ export const analyzeImage =
       type: IMG_ANALYSIS_DATA_FETCH_SUCCESS,
       result: foo.data,
     });
-  };
+  };

src/client/components/Dashboard/PullList.tsx

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

src/client/components/Dashboard/RecentlyImported.tsx

@@ -125,7 +125,7 @@ export const RecentlyImported = ({
                     <dd className="is-size-9">
                       <dl>
                         <span className="icon custom-icon">
-                          <img src={`/src/client/assets/img/${icon}`} />
+                          <img src={`/img/${icon}`} />
                         </span>
                       </dl>
                       <dl>

src/client/components/Library/LibraryGrid.tsx

@@ -73,7 +73,7 @@ export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => {
                 <div className="content is-flex is-flex-direction-row">
                   {!isEmpty(sourcedMetadata.comicvine) && (
                     <span className="icon cv-icon is-small">
-                      <img src="/src/client/assets/img/cvlogo.svg" />
+                      <img src="/dist/img/cvlogo.svg" />
                     </span>
                   )}
                   {isNil(rawFileDetails) && (

src/client/components/Navbar.tsx

@@ -85,7 +85,7 @@ const Navbar: React.FunctionComponent = (props) => {
               {downloadProgressTick && <div className="pulsating-circle"></div>}
             </a>
             {!isUndefined(downloadProgressTick) ? (
-              <div className="navbar-dropdown is-right is-boxed">
+              <div className="navbar-dropdown is-right">
                 <a className="navbar-item">
                   <DownloadProgressTick data={downloadProgressTick} />
                 </a>              </div>
@@ -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 pr-2 pl-2 is-right airdcpp-status is-boxed">
+                <div className="navbar-dropdown mt-3 pt-4 pr-2 pl-2 is-right airdcpp-status is-boxed">
                   {/* AirDC++ Session Information */}
 
                   <p>

src/client/components/Search.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, ReactElement } from "react";
+import React, { useMemo, useCallback, ReactElement } from "react";
 import { isNil, isEmpty } from "lodash";
 import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
 import { importToDB } from "../actions/fileops.actions";

src/client/constants/endpoints.ts

@@ -8,72 +8,71 @@ export const hostURIBuilder = (options: Record<string, string>): string => {
     options.apiPath
   );
 };
-console.log(import.meta);
 
 export const CORS_PROXY_SERVER_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.VITE_UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
   port: "8050",
   apiPath: "/",
 });
 
 export const COMICVINE_SERVICE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.VITE_UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3080",
   apiPath: "/api/comicvine",
 });
 
 export const METRON_SERVICE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.VITE_UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3080",
   apiPath: "/api/metron",
 });
 
 export const API_BASE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.VITE_UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
   port: "8050",
   apiPath: "/api",
 });
 
 export const LIBRARY_SERVICE_HOST = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.VITE_UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3000",
   apiPath: ``,
 });
 export const LIBRARY_SERVICE_BASE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.VITE_UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3000",
   apiPath: "/api/library",
 });
 export const SEARCH_SERVICE_BASE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.VITE_UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3000",
   apiPath: "/api/search",
 });
 
 export const SETTINGS_SERVICE_BASE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.VITE_UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3000",
   apiPath: "/api/settings",
 });
 
 export const IMAGETRANSFORMATION_SERVICE_BASE_URI = hostURIBuilder({
   protocol: "http",
-  host: import.meta.env.VITE_UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3000",
   apiPath: "/api/imagetransformation",
 });
 
 export const SOCKET_BASE_URI = hostURIBuilder({
   protocol: "ws",
-  host: import.meta.env.VITE_UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3001",
   apiPath: `/`,
 });

vite.config.js

@@ -6,7 +6,6 @@ export default defineConfig({
   publicDir: "public",
   base: "",
   build: "esnext",
-  server: { host: true },
   plugins: [
     nodeResolve({
       // browser: true

yarn.lock

@@ -3294,17 +3294,17 @@
     "@types/express" "^4.7.0"
     file-system-cache "^2.0.0"
 
-"@tanstack/react-table@^8.5.11":
-  version "8.5.11"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.5.11.tgz#544f551f15412087edfc2df01bed9697aab4651f"
-  integrity sha512-bIegBJ3VPUX3Z7rMnFEnTRCRgPccTsciilQA1ib/pA6M7Qq1boTNPjNjSbEHmBKytaxPrPfcUfzkZLogYtvu3g==
+"@tanstack/react-table@^8.8.0":
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.8.0.tgz#f20e1d5b2615bf785adfb727b89dcf55e72cdab8"
+  integrity sha512-K55peZ4VNRA+Jk/rSI8+0Tj/T9q8SyysmnK08wO/5kgIX3MhGL7wl0858eEcvd/2eq+CPPmhQx9wYoWOWtFEhg==
   dependencies:
-    "@tanstack/table-core" "8.5.11"
+    "@tanstack/table-core" "8.8.0"
 
-"@tanstack/table-core@8.5.11":
-  version "8.5.11"
-  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.5.11.tgz#a23178a097df4b0b64bdfa6f79e6d8933e97c7f7"
-  integrity sha512-ZN61ockLaIAiiPbZfMKT2S03nbWx28OHg/nAiDnNfmN4QmAMcdwVajPn2QQwnNVGAr4jS4nbhbYzCcjq8livXQ==
+"@tanstack/table-core@8.8.0":
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.8.0.tgz#7b6db72ea82175495528313513d825e312cbe58b"
+  integrity sha512-P8Vk9yngfai1GLEfyqtT0b+Dty8subPR8yl5r1z/z4Z8NtaCIL1n+OmMV1QBU8WojeSSsWgr+o1CTxnaaOBoyQ==
 
 "@testing-library/dom@^8.3.0":
   version "8.20.0"