❌ Removed the param serialization from axios calls

.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 }}

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

@@ -30,7 +30,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.2",
+    "airdcpp-apisocket": "2.4.5-beta.1",
     "axios": "^1.3.4",
     "axios-cache-interceptor": "^1.0.1",
     "axios-rate-limit": "^1.3.0",
@@ -56,7 +56,7 @@
     "react-collapsible": "^2.9.0",
     "react-comic-viewer": "^0.4.0",
     "react-day-picker": "^8.6.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.1.0",
     "react-fast-compare": "^3.2.0",
     "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.4",

src/client/actions/fileops.actions.tsx

@@ -34,27 +34,11 @@ import {
   WANTED_COMICS_FETCHED,
   VOLUMES_FETCHED,
   CV_WEEKLY_PULLLIST_FETCHED,
-  LIBRARY_SERVICE_HEALTH,
 } from "../constants/action-types";
 import { success } from "react-notification-system-redux";
 
 import { isNil, map } from "lodash";
 
-export const getServiceStatus = (serviceName?: string) => async dispatch => {
-  axios
-    .request({
-      url: `${LIBRARY_SERVICE_BASE_URI}/getHealthInformation`,
-      method: "GET",
-      transformResponse: (r: string) => JSON.parse(r),
-    })
-    .then((response) => {
-      const { data } = response;
-      dispatch({
-        type: LIBRARY_SERVICE_HEALTH,
-        status: data,
-      });
-    });
-};
 export async function walkFolder(path: string): Promise<Array<IFolderData>> {
   return axios
     .request<Array<IFolderData>>({
@@ -143,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 {
@@ -271,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
@@ -365,4 +349,4 @@ export const analyzeImage =
       type: IMG_ANALYSIS_DATA_FETCH_SUCCESS,
       result: foo.data,
     });
-  };
+  };

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -15,15 +15,14 @@ export const AirDCPPSettingsForm = (): ReactElement => {
     try {
       if (!isUndefined(hostname)) {
         const matches = hostname.match(hostnameRegex);
-        return isNil(matches) && matches.length !== 0
-          ? hostname
-          : "Invalid hostname; it should not contain special characters";
+        return (isNil(matches) && matches.length !== 0) ? hostname : "Invalid hostname; it should not contain special characters";
       }
-    } catch {
+    }
+    catch {
       return null;
     }
-  };
-
+  }
+  
   const onSubmit = useCallback(async (values) => {
     try {
       airDCPPSettings.setSettings(values);
@@ -40,7 +39,7 @@ export const AirDCPPSettingsForm = (): ReactElement => {
     airDCPPSettings.setSettings({});
     dispatch(deleteSettings());
   }, []);
-  const validate = async () => {};
+  const validate = async () => { };
   const initFormData = !isUndefined(
     airDCPPSettings.airDCPPState.settings.directConnect,
   )
@@ -68,20 +67,13 @@ export const AirDCPPSettingsForm = (): ReactElement => {
                 </span>
               </p>
               <div className="control is-expanded">
-                <Field name="hostname" validate={hostValidator}>
+                <Field
+                  name="hostname"
+                  validate={hostValidator}>
                   {({ input, meta }) => (
                     <div>
-                      <input
-                        {...input}
-                        type="text"
-                        placeholder="AirDC++ hostname"
-                        className="input"
-                      />
-                      {meta.error && meta.touched && (
-                        <span className="is-size-7 has-text-danger">
-                          {meta.error}
-                        </span>
-                      )}
+                      <input {...input} type="text" placeholder="AirDC++ hostname" className="input" />
+                      {meta.error && meta.touched && <span className="is-size-7 has-text-danger">{meta.error}</span>}
                     </div>
                   )}
                 </Field>

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-1-25",
         pageSize: "15",
         currentPage: "1",
       }),
@@ -127,7 +127,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
       <Slider {...settings} ref={(c) => (sliderRef = c)}>
         {!isNil(pullList) &&
           pullList &&
-          map(pullList, ({ issue }, idx) => {
+          map(pullList, ({issue}, idx) => {
             return (
               <Card
                 key={idx}
@@ -161,4 +161,4 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   );
 };
 
-export default PullList;
+export default PullList;

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/ServiceStatuses/ServiceStatuses.tsx

@@ -1,25 +0,0 @@
-import React, { ReactElement } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { useEffect } from "react";
-import { getServiceStatus } from "../../actions/fileops.actions";
-
-export const ServiceStatuses = (): ReactElement => {
-  const serviceStatus = useSelector(
-    (state: RootState) => state.fileOps.libraryServiceStatus,
-  );
-  const dispatch = useDispatch();
-  useEffect(() => {
-    dispatch(getServiceStatus());
-  }, []);
-  return (
-    <div className="is-clearfix">
-      <div className="mt-4">
-        <h3 className="title">Core Services</h3>
-        <h6 className="subtitle has-text-grey-light">
-          Statuses for core services
-        </h6>
-      </div>
-      <pre>{JSON.stringify(serviceStatus, null, 2)}</pre>
-    </div>
-  );
-};

src/client/components/Settings.tsx

@@ -2,7 +2,6 @@ import React, { useState, ReactElement } from "react";
 import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
 import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
 import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
-import { ServiceStatuses } from "./ServiceStatuses/ServiceStatuses";
 import settingsObject from "../constants/settings/settingsMenu.json";
 import { isUndefined, map } from "lodash";
 
@@ -23,10 +22,6 @@ export const Settings = (props: ISettingsProps): ReactElement => {
         </div>
       ),
     },
-    {
-      id: "core-service",
-      content: <ServiceStatuses />,
-    },
     {
       id: "flushdb",
       content: (

src/client/constants/action-types.ts

@@ -139,7 +139,4 @@ export const SETTINGS_DB_FLUSH_SUCCESS = "SETTINGS_DB_FLUSH_SUCCESS";
 // Metron Metadata
 export const METRON_DATA_FETCH_SUCCESS = "METRON_DATA_FETCH_SUCCESS";
 export const METRON_DATA_FETCH_IN_PROGRESS = "METRON_DATA_FETCH_IN_PROGRESS";
-export const METRON_DATA_FETCH_ERROR = "METRON_DATA_FETCH_ERROR";
-
-// service health statuses
-export const LIBRARY_SERVICE_HEALTH = "LIBRARY_SERVICE_HEALTH";
+export const METRON_DATA_FETCH_ERROR = "METRON_DATA_FETCH_ERROR";

src/client/constants/endpoints.ts

@@ -8,7 +8,6 @@ export const hostURIBuilder = (options: Record<string, string>): string => {
     options.apiPath
   );
 };
-console.log(import.meta);
 
 export const CORS_PROXY_SERVER_URI = hostURIBuilder({
   protocol: "http",

src/client/constants/settings/settingsMenu.json

@@ -57,21 +57,6 @@
   },
   {
     "id": 4,
-    "category": "statuses",
-    "displayName": "Service Status",
-    "children": [
-      {
-        "id": "core-service",
-        "displayName": "Core Services"
-      },
-      {
-        "id": "metadata-service",
-        "displayName": "Metadata Services"
-      }
-    ]
-  },
-  {
-    "id": 5,
     "category": "system",
     "displayName": "System",
     "children": [
@@ -82,7 +67,7 @@
     ]
   },
   {
-    "id": 6,
+    "id": 5,
     "category": "acknowledgments",
     "displayName": "Acknowledgments",
     "children": [

src/client/reducers/fileops.reducer.ts

@@ -30,8 +30,6 @@ import {
   SS_SEARCH_RESULTS_FETCHED_SPECIAL,
   VOLUMES_FETCHED,
   COMICBOOK_EXTRACTION_SUCCESS,
-  LIBRARY_SERVICE_HEALTH,
-  HEALTH_STATUS_TICK,
 } from "../constants/action-types";
 import { removeLeadingPeriod } from "../shared/utils/formatting.utils";
 import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
@@ -60,7 +58,6 @@ const initialState = {
   librarySearchResultCount: 0,
   libraryQueueResults: [],
   librarySearchError: {},
-  libraryServiceStatus: {},
 };
 
 function fileOpsReducer(state = initialState, action) {
@@ -156,13 +153,13 @@ function fileOpsReducer(state = initialState, action) {
     }
     case LS_COVER_EXTRACTED: {
       console.log("BASH", action);
-      if (state.recentComics.length === 5) {
+      if(state.recentComics.length === 5) {
         state.recentComics.pop();
       }
       return {
         ...state,
         librarySearchResultCount: state.librarySearchResultCount + 1,
-        recentComics: [...state.recentComics, action.result.data.importResult],
+        recentComics: [...state.recentComics, action.result.data.importResult]
       };
     }
 
@@ -274,12 +271,7 @@ function fileOpsReducer(state = initialState, action) {
         SSCallInProgress: false,
       };
     }
-    case LIBRARY_SERVICE_HEALTH: {
-      return {
-        ...state,
-        libraryServiceStatus: action.status,
-      };
-    }
+
     case FILEOPS_STATE_RESET: {
       return {
         ...state,
@@ -291,4 +283,4 @@ function fileOpsReducer(state = initialState, action) {
   }
 }
 
-export default fileOpsReducer;
+export default fileOpsReducer;

vite.config.js

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

yarn.lock

@@ -4083,12 +4083,12 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
-airdcpp-apisocket@~2.4.5-beta.2:
-  version "2.5.0-beta.2"
-  resolved "https://registry.yarnpkg.com/airdcpp-apisocket/-/airdcpp-apisocket-2.5.0-beta.2.tgz#062541095de75775bfa92b5cb4e785674beb8986"
-  integrity sha512-N/+39wYrZc/2N5CaZPG8kUSMu9shGGmLqR/0WQbJ1NiHF5VHcifN27ioldijN10KGfssFvTZBjV93m+D8ADDkQ==
+airdcpp-apisocket@2.4.5-beta.1:
+  version "2.4.5-beta.1"
+  resolved "https://registry.yarnpkg.com/airdcpp-apisocket/-/airdcpp-apisocket-2.4.5-beta.1.tgz#f85674e98b7b733d91ee1e9b751ea9e757239964"
+  integrity sha512-Esa+p72zA9gMWDdlOkEWinvOhu01WvV9CCOvmQUrwLZXCNtT+70QBQqAY+vh0FMYrpkiH8Ync7ues4ERHPnxyw==
   dependencies:
-    chalk "^4.1.2"
+    chalk "^5.1.2"
     events "^3.3.0"
     invariant "^2.2.4"
     is-in-browser "^2.0.0"
@@ -5292,6 +5292,11 @@ chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^5.1.2:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.2.0.tgz#249623b7d66869c673699fb66d65723e54dfcfb3"
+  integrity sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==
+
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
@@ -11492,7 +11497,7 @@ react-docgen@^5.4.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^18.2.0:
+react-dom@^18.1.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==