📗 Upgraded Storybook to v7 rc

Elasticsearch upgrade fix (#67 )
* 🔧 Fixed the response object in reducers and components https://github.com/rishighan/threetwo/issues/64 Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * #️⃣ Added a key prop to MetadataPanel in global search results Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * 🔧 Fixed DOMNesting issues Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * 🔧 Fixed the response in wanted reducer action Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * ➕ Committing the reducer Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * 🔧 Fixes for DOMNesting issues on the Downloads page Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> --------- Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>
2023-03-15 11:38:00 -04:00 · 2023-03-13 11:25:15 -04:00 · 2023-03-02 21:47:16 -05:00 · 2023-03-02 00:32:43 -05:00 · 2023-03-01 23:31:22 -05:00
31 changed files with 3121 additions and 8367 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,17 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
-  "plugins": [
-    "@babel/transform-runtime",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-syntax-top-level-await"
-  ],
-  "env": {
-    "production": {
-      "presets": ["minify"]
-    }
-  }
-}
--- a/.eslintrc.js
+++ b/.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"],
+  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"],
  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
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,19 +0,0 @@
-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",
-  },
-};
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -0,0 +1,17 @@
+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;
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,9 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -0,0 +1,18 @@
+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;
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@

 <body>
    <div id="root"></div>
+    <script type="module" src="/src/client/index.tsx"></script>
 </body>

 </html>
--- a/package.json
+++ b/package.json
@@ -5,15 +5,12 @@
  "main": "server/index.js",
  "typings": "server/index.js",
  "scripts": {
-    "build": "webpack --mode production",
-    "start": "npm run build && npm run server",
-    "client": "webpack serve --mode development --devtool inline-source-map --hot",
-    "server": "tsc -p tsconfig.server.json && node server/",
-    "dev": "concurrently \"nodemon\" \"npm run client\"",
-    "server-dev": "nodemon",
+    "build": "vite build",
+    "dev": "rimraf dist && npm run build && vite",
+    "prod": "npm run build && vite",
    "docs": "jsdoc -c jsdoc.json",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
  },
  "author": "Rishi Ghan",
  "license": "MIT",
@@ -24,49 +21,46 @@
    "@dnd-kit/sortable": "^5.0.0",
    "@dnd-kit/utilities": "^3.2.0",
    "@fortawesome/fontawesome-free": "^6.1.1",
-    "@parcel/config-default": "^2.6.0",
    "@redux-devtools/extension": "^3.2.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
    "@tanstack/react-table": "^8.5.11",
    "@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/sharp": "^0.28.0",
    "@types/socket.io": "^3.0.2",
    "@types/socket.io-client": "^3.0.0",
-    "airdcpp-apisocket": "^2.4.4",
-    "array-sort-by": "^1.2.1",
+    "@vitejs/plugin-react": "^3.1.0",
+    "airdcpp-apisocket": "2.4.5-beta.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",
-    "comlink-loader": "^2.0.0",
    "date-fns": "^2.28.0",
    "dayjs": "^1.10.6",
    "ellipsize": "^0.1.0",
    "express": "^4.17.1",
-    "fastest-validator": "^1.11.0",
    "filename-parser": "^1.0.2",
    "final-form": "^4.20.2",
    "final-form-arrays": "^3.0.2",
    "html-to-text": "^8.1.0",
    "jsdoc": "^3.6.10",
    "lodash": "^4.17.21",
-    "opds-extra": "^3.0.9",
+    "node-sass": "npm:sass",
    "pretty-bytes": "^5.6.0",
    "prop-types": "^15.8.1",
    "qs": "^6.10.5",
    "react": "^18.2.0",
    "react-collapsible": "^2.9.0",
    "react-comic-viewer": "^0.4.0",
-    "react-day-picker": "^8.0.6",
+    "react-day-picker": "^8.6.0",
    "react-dom": "^18.1.0",
    "react-fast-compare": "^3.2.0",
    "react-final-form": "^6.5.9",
-    "react-final-form-arrays": "^3.1.3",
+    "react-final-form-arrays": "^3.1.4",
    "react-loader-spinner": "^4.0.0",
    "react-masonry-css": "^1.0.16",
    "react-modal": "^3.15.1",
@@ -74,21 +68,20 @@
    "react-router": "^6.2.2",
    "react-router-dom": "^6.2.2",
    "react-select": "^5.3.2",
-    "react-select-async-paginate": "^0.6.1",
+    "react-select-async-paginate": "^0.7.2",
    "react-slick": "^0.29.0",
    "react-sliding-pane": "^7.1.0",
-    "react-stickynode": "^4.0.0",
+    "react-stickynode": "^4.1.0",
    "react-textarea-autosize": "^8.3.4",
-    "reapop": "^4.0.5",
-    "redux-first-history": "^5.0.9",
+    "reapop": "^4.2.1",
+    "redux-first-history": "^5.1.1",
    "redux-socket.io-middleware": "^1.0.4",
-    "redux-thunk": "^2.4.1",
-    "sharp": "^0.30.5",
+    "redux-thunk": "^2.4.2",
    "slick-carousel": "^1.8.1",
    "socket.io-client": "^4.3.2",
    "styled-components": "^5.3.5",
    "threetwo-ui-typings": "^1.0.14",
-    "voca": "^1.4.0",
+    "vite-plugin-html": "^3.2.0",
    "websocket": "^1.0.34",
    "ws": "^7.5.3",
    "xml2js": "^0.4.23",
@@ -99,22 +92,16 @@
    "@babel/core": "^7.13.10",
    "@babel/plugin-syntax-top-level-await": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/preset-env": "^7.13.10",
-    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.13.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack4": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack4": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.9",
-    "@storybook/testing-library": "^0.0.13",
-    "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
+    "@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/express": "^4.17.8",
    "@types/jest": "^26.0.20",
@@ -125,18 +112,11 @@
    "@types/react-redux": "^7.1.16",
    "@typescript-eslint/eslint-plugin": "^4.17.0",
    "@typescript-eslint/parser": "^4.17.0",
-    "awesome-typescript-loader": "^5.2.1",
    "babel-eslint": "^10.0.0",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
    "body-parser": "^1.19.0",
-    "buffer": "^6.0.3",
-    "bulma": "^0.9.3",
-    "clean-webpack-plugin": "^1.0.0",
+    "bulma": "^0.9.4",
    "comlink": "^4.3.0",
    "concurrently": "^4.0.0",
-    "copy-webpack-plugin": "^9.0.1",
-    "css-loader": "^5.1.2",
    "eslint": "^7.22.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-base": "^14.2.1",
@@ -146,35 +126,19 @@
    "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",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^9.1.0",
-    "html-webpack-plugin": "^5.3.1",
-    "http-response-stream": "^1.0.9",
-    "image-webpack-loader": "^8.1.0",
    "install": "^0.13.0",
    "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^1.4.1",
-    "node-sass": "^7.0.1",
    "nodemon": "^1.17.3",
    "npm": "^8.11.0",
    "prettier": "^2.2.1",
    "react-refresh": "^0.14.0",
-    "rimraf": "^3.0.2",
-    "sass-loader": "^11.0.1",
-    "source-map-loader": "^0.2.4",
-    "string-similarity": "^4.0.4",
-    "style-loader": "^2.0.0",
+    "rimraf": "^4.1.3",
+    "sass": "^1.58.1",
+    "storybook": "^7.0.0-rc.3",
    "tslint": "^6.1.3",
-    "typescript": "^4.2.3",
-    "url-loader": "^1.0.1",
-    "webpack": "^5.73.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^4.7.4",
-    "webpack-merge": "^5.7.3"
-  },
-  "resolutions": {
-    "@storybook/react/webpack": "^5"
+    "typescript": "^4.9",
+    "vite": "^4.1.1"
  }
 }
--- a/src/client/actions/fileops.actions.tsx
+++ b/src/client/actions/fileops.actions.tsx
@@ -301,26 +301,26 @@ export const searchIssue = (query, options) => async (dispatch) => {
    case "wantedComicsPage":
      dispatch({
        type: WANTED_COMICS_FETCHED,
-        data: response.data.body,
+        data: response.data.hits,
      });
      break;
    case "globalSearchBar":
      dispatch({
        type: SS_SEARCH_RESULTS_FETCHED_SPECIAL,
-        data: response.data.body,
+        data: response.data.hits,
      });
      break;

    case "libraryPage":
      dispatch({
        type: SS_SEARCH_RESULTS_FETCHED,
-        data: response.data.body,
+        data: response.data.hits,
      });
      break;
    case "volumesPage":
      dispatch({
        type: VOLUMES_FETCHED,
-        data: response.data.body,
+        data: response.data.hits,
      });
      break;

--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -1,8 +1,8 @@
-@import "../../../../node_modules/bulma/bulma.sass";
-$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
-@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
-@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
+@import "/node_modules/bulma/bulma.sass";
+$fa-font-path: "/node_modules/@fortawesome/fontawesome-free/webfonts";
+@import "/node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "/node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
+@import "/node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
 $bg-color: yellow;
 $border-color: red;

--- a/src/client/components/ComicDetail/AcquisitionPanel.tsx
+++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx
@@ -167,7 +167,7 @@ export const AcquisitionPanel = (
                        }
                      >
                        <span className="icon is-small">
-                          <img src="/img/airdcpp_logo.svg" />
+                          <img src="/src/client/assets/img/airdcpp_logo.svg" />
                        </span>
                        <span className="airdcpp-text">Search on AirDC++</span>
                      </button>
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/src/client/components/Dashboard/PullList.tsx
@@ -20,7 +20,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
  useEffect(() => {
    dispatch(
      getWeeklyPullList({
-        startDate: "2022-12-25",
+        startDate: "2023-1-25",
        pageSize: "15",
        currentPage: "1",
      }),
--- a/src/client/components/Dashboard/RecentlyImported.tsx
+++ b/src/client/components/Dashboard/RecentlyImported.tsx
@@ -83,14 +83,14 @@ export const RecentlyImported = ({
                    {/* Raw file presence  */}
                    {isNil(rawFileDetails) && (
                      <span className="icon custom-icon is-small has-text-danger mr-2">
-                        <img src="/img/missing-file.svg" />
+                        <img src="/src/client/img/missing-file.svg" />
                      </span>
                    )}
                    {/* ComicInfo.xml presence */}
                    {!isNil(comicInfo) && !isEmpty(comicInfo) && (
                      <span className="icon custom-icon is-small has-text-danger">
                        <img
-                          src="/img/comicinfoxml.svg"
+                          src="/src/client/img/comicinfoxml.svg"
                          alt={"ComicInfo.xml file detected."}
                        />
                      </span>
@@ -99,8 +99,8 @@ export const RecentlyImported = ({
                    {isComicBookMetadataAvailable && (
                      <span className="icon custom-icon">
                        <img
-                          src="/img/cvlogo.svg"
-                          alt={"ComicInfo.xml file detected."}
+                          src="/src/client/assets/img/cvlogo.svg"
+                          alt={"ComicVine metadata detected."}
                        />
                      </span>
                    )}
--- a/src/client/components/Dashboard/WantedComicsList.tsx
+++ b/src/client/components/Dashboard/WantedComicsList.tsx
@@ -82,12 +82,12 @@ export const WantedComicsList = ({
                  {/* comicVine metadata presence */}
                  {isComicBookMetadataAvailable && (
                    <span className="icon custom-icon">
-                      <img src="/img/cvlogo.svg" />
+                      <img src="/src/client/assets/img/cvlogo.svg" />
                    </span>
                  )}
                  {!isEmpty(locg) && (
                    <span className="icon custom-icon">
-                      <img src="/img/locglogo.svg" />
+                      <img src="/src/client/img/locglogo.svg" />
                    </span>
                  )}
                  {/* Issue type */}
--- a/src/client/components/Downloads/Downloads.tsx
+++ b/src/client/components/Downloads/Downloads.tsx
@@ -3,7 +3,6 @@ import { getTransfers } from "../../actions/airdcpp.actions";
 import { useDispatch, useSelector } from "react-redux";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 import { isEmpty, isNil, isUndefined } from "lodash";
-import { searchIssue } from "../../actions/fileops.actions";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import MetadataPanel from "../shared/MetadataPanel";

@@ -47,7 +46,6 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
      })
      setBundles(foo);
    }
-
  }, [issueBundles])

  return !isNil(bundles) ?
@@ -56,9 +54,9 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
        <h1 className="title">Downloads</h1>
        <div className="columns">
          <div className="column is-half">
-            {bundles.map(bundle => {
+            {bundles.map((bundle, idx) => {
              console.log(bundle);
-              return <>
+              return <div key={idx}>
                <MetadataPanel
                  data={bundle}
                  imageStyle={{ maxWidth: 80 }}
@@ -70,30 +68,33 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
                    margin: "0 0 8px 0",
                  }} />

-                  <table className="table is-size-7">
+                <table className="table is-size-7">
+                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Size</th>
                      <th>Type</th>
                      <th>Bundle ID</th>
                    </tr>
-
-                    {bundle.acquisition.directconnect.downloads.map((bundle) => {
-                      return(<tr>
+                  </thead>
+                  <tbody>
+                    {bundle.acquisition.directconnect.downloads.map((bundle, idx) => {
+                      return (<tr key={idx}>
                        <td>{bundle.name}</td>
                        <td>{bundle.size}</td>
                        <td>{bundle.type.str}</td>
                        <td><span className="tag is-warning">{bundle.bundleId}</span></td>
                      </tr>)
                    })}
-                  </table>
+                  </tbody>
+                </table>
                {/* <pre>{JSON.stringify(bundle.acquisition.directconnect.downloads, null, 2)}</pre> */}
-              </>
+              </div>
            })}
          </div>
        </div>
      </section>
-    </div> : <div>asd</div>;
+    </div> : <div>There are no downloads.</div>;
 };

 export default Downloads;
--- a/src/client/components/GlobalSearchBar/SearchBar.tsx
+++ b/src/client/components/GlobalSearchBar/SearchBar.tsx
@@ -31,7 +31,7 @@ export const SearchBar = (data: ISearchBarProps): ReactElement => {
              from: 0,
            },
            type: "volumeName",
-            trigger: "globalSearchBar"
+            trigger: "globalSearchBar",
          },
        ),
      );
@@ -51,7 +51,6 @@ export const SearchBar = (data: ISearchBarProps): ReactElement => {
          <i className="fa-solid fa-magnifying-glass"></i>
        </span>
      </div>
-
      {!isEmpty(searchResults) ? (
        <div
          className="columns box is-multiline"
@@ -62,9 +61,10 @@ export const SearchBar = (data: ISearchBarProps): ReactElement => {
            margin: "60px 0 0 350px",
          }}
        >
-          {map(searchResults, (result) => (
+          {map(searchResults, (result, idx) => (
            <MetadataPanel
              data={result}
+              key={idx}
              imageStyle={{ maxWidth: 70 }}
              titleStyle={{ fontSize: "0.8rem" }}
              tagsStyle={{ fontSize: "0.7rem" }}
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -19,10 +19,7 @@ export const Library = (): ReactElement => {
  const searchResults = useSelector(
    (state: RootState) => state.fileOps.libraryComics,
  );
-  const searchError = useSelector((state: RootState) => {
-    console.log(state);
-    return state.fileOps.librarySearchError;
-  });
+  const searchError = useSelector((state: RootState) => state.fileOps.librarySearchError);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(
@@ -221,9 +218,9 @@ export const Library = (): ReactElement => {
          <div>
            <div className="library">
              <T2Table
-                totalPages={searchResults.hits.total.value}
+                totalPages={searchResults.total.value}
                columns={columns}
-                sourceData={searchResults?.hits?.hits}
+                sourceData={searchResults?.hits}
                rowClickHandler={navigateToComicDetail}
                paginationHandlers={{
                  nextPage,
--- a/src/client/components/Navbar.tsx
+++ b/src/client/components/Navbar.tsx
@@ -25,7 +25,7 @@ const Navbar: React.FunctionComponent = (props) => {
      <div className="navbar-brand">
        <Link to="/" className="navbar-item">
          <img
-            src="/img/threetwo.svg"
+            src="/src/client/assets/img/threetwo.svg"
            alt="ThreeTwo! A comic book curator"
            width="112"
            height="28"
--- a/src/client/components/Volumes/Volumes.tsx
+++ b/src/client/components/Volumes/Volumes.tsx
@@ -166,8 +166,8 @@ export const Volumes = (props): ReactElement => {
          <div>
            <div className="library">
              <T2Table
-                sourceData={volumes?.hits?.hits}
-                totalPages={volumes.hits.hits.length}
+                sourceData={volumes?.hits}
+                totalPages={volumes.hits.length}
                paginationHandlers={{
                  nextPage: () => {},
                  previousPage: () => {},
--- a/src/client/components/WantedComics/WantedComics.tsx
+++ b/src/client/components/WantedComics/WantedComics.tsx
@@ -73,8 +73,8 @@ export const WantedComics = (props): ReactElement => {
          id: "downloadDetails",
          accessorKey: "acquisition",
          cell: data => <ol>
-            {data.getValue().directconnect.downloads.map(download => {
-              return <li className="is-size-7">{download.name}</li>;
+            {data.getValue().directconnect.downloads.map((download, idx) => {
+              return <li className="is-size-7" key={idx}>{download.name}</li>;
            })}
          </ol>
        },
--- a/src/client/components/shared/T2Table.tsx
+++ b/src/client/components/shared/T2Table.tsx
@@ -20,8 +20,6 @@ export const T2Table = (tableOptions): ReactElement => {
      pageIndex: 1,
      pageSize: 15,
    });
-    console.log(sourceData)
-

  const pagination = useMemo(
    () => ({
@@ -81,12 +79,12 @@ export const T2Table = (tableOptions): ReactElement => {
            {/* <p>{totalPages} comics in all</p> */}
          </div>
          <div className="field has-addons">
-            <p className="control">
+            <div className="control">
              <div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
-            </p>
-            <p className="control">
+            </div>
+            <div className="control">
              <div className="button" onClick={() => goToNextPage()}> <i className="fas fa-chevron-right"></i> </div>
-            </p>
+            </div>

            <div className="field has-addons ml-5">
              <p className="control">
--- a/src/client/constants/endpoints.ts
+++ b/src/client/constants/endpoints.ts
@@ -11,68 +11,68 @@ export const hostURIBuilder = (options: Record<string, string>): string => {

 export const CORS_PROXY_SERVER_URI = hostURIBuilder({
  protocol: "http",
-  host: process.env.UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
  port: "8050",
  apiPath: "/",
 });

 export const COMICVINE_SERVICE_URI = hostURIBuilder({
  protocol: "http",
-  host: process.env.UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
  port: "3080",
  apiPath: "/api/comicvine",
 });

 export const METRON_SERVICE_URI = hostURIBuilder({
  protocol: "http",
-  host: process.env.UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
  port: "3080",
  apiPath: "/api/metron",
 });

 export const API_BASE_URI = hostURIBuilder({
  protocol: "http",
-  host: process.env.UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
  port: "8050",
  apiPath: "/api",
 });

 export const LIBRARY_SERVICE_HOST = hostURIBuilder({
  protocol: "http",
-  host: process.env.UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
  port: "3000",
  apiPath: ``,
 });
 export const LIBRARY_SERVICE_BASE_URI = hostURIBuilder({
  protocol: "http",
-  host: process.env.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: process.env.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: process.env.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: process.env.UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
  port: "3000",
  apiPath: "/api/imagetransformation",
 });

 export const SOCKET_BASE_URI = hostURIBuilder({
  protocol: "ws",
-  host: process.env.UNDERLYING_HOSTNAME || "localhost",
+  host: import.meta.env.UNDERLYING_HOSTNAME || "localhost",
  port: "3001",
  apiPath: `/`,
 });
--- a/src/client/reducers/fileops.reducer.ts
+++ b/src/client/reducers/fileops.reducer.ts
@@ -233,7 +233,7 @@ function fileOpsReducer(state = initialState, action) {
    case SS_SEARCH_RESULTS_FETCHED_SPECIAL: {
      const foo = [];
      if (!isUndefined(action.data.hits)) {
-        map(action.data.hits.hits, ({ _source }) => {
+        map(action.data.hits, ({ _source }) => {
          foo.push(_source);
        });
      }
@@ -246,7 +246,7 @@ function fileOpsReducer(state = initialState, action) {
    case WANTED_COMICS_FETCHED: {
      const foo = [];
      if (!isUndefined(action.data.hits)) {
-        map(action.data.hits.hits, ({ _source }) => {
+        map(action.data.hits, ({ _source }) => {
          foo.push(_source);
        });
      }
--- a/src/client/stories/MetadataPanel.stories.tsx
+++ b/src/client/stories/MetadataPanel.stories.tsx
@@ -30,20 +30,20 @@ RawFileDetails.args = {
        },
        "inferredMetadata": {
          "issue": {
-            "name": "Fantastic Four 143",
+            "name": "Batman Annual 02",
            "number": 197402,
            "year": "1974",
            "subtitle": ""
          }
        },
        "rawFileDetails": {
-          "name": "197402 Fantastic Four 143",
+          "name": "Batman Annual 02",
          "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/197402 Fantastic Four 143/FF143_01.jpg"
+            "filePath": "userdata/covers/Batman Annual 02/Batman 002_00a.jpg"
          }
        },
        "sourcedMetadata": { "comicInfo": null, "comicvine": { "aliases": [] } },
--- a/src/funding.yml
+++ b/src/funding.yml
@@ -1 +0,0 @@
-github: [rishighan]
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -30,12 +30,12 @@ app.use(bodyParser.urlencoded({ extended: true }));
 // REGISTER ROUTES
 // all of the routes will be prefixed with /api
 const routes: Router[] = Object.values(router);
-app.use("/api", routes);
+// app.use("/api", routes);

 // Send index.html on root request
-app.use(express.static("dist"));
-app.use(express.static("public"));
+// app.use(express.static("dist"));
+// app.use(express.static("public"));

-app.listen(port);
+// app.listen(port);

-console.log(`Server is listening on ${port}`);
+// console.log(`Server is listening on ${port}`);
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,19 +2,21 @@
  "extends": "@tsconfig/node14/tsconfig.json",
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "noImplicitAny": false,
-    "target": "es2019",
-    "jsx": "react",
-    "module": "commonjs",
-    "sourceMap": true,
-    "outDir": "./dist/",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
    "resolveJsonModule": true,
-    "lib": ["dom", "dom.iterable", "esnext", "webworker"],
-    "baseUrl": ".",
-    "esModuleInterop": true,
-    "strict": true
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
  },
  "settings": {
    "eslint.workingDirectories": [
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,22 @@
+import react from "@vitejs/plugin-react";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  publicDir: "public",
+  base: "",
+  build: "esnext",
+  plugins: [
+    nodeResolve({
+      // browser: true
+      exportConditions: ["node"],
+    }),
+    react({
+      // Use React plugin in all *.jsx and *.tsx files
+      include: "**/*.{jsx,tsx}",
+      babel: {
+        plugins: ["babel-plugin-styled-components"],
+      },
+    }),
+  ],
+});
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,128 +0,0 @@
-const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const webpack = require("webpack");
-const outputDirectory = "dist";
-const BundleAnalyzerPlugin =
-  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
-const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
-const CopyPlugin = require("copy-webpack-plugin");
-
-module.exports = (_, argv) => {
-  const mode = argv.mode;
-  const isDevelopment = mode === "development";
-  return {
-    entry: ["babel-polyfill", "./src/client/index.tsx"],
-    output: {
-      path: path.resolve(__dirname, outputDirectory),
-      filename: "./js/[name].bundle.js",
-    },
-    devtool: "source-map",
-    stats: {
-      children: true,
-    },
-    experiments: {
-      topLevelAwait: true,
-    },
-    module: {
-      rules: [
-        {
-          test: /\.worker\.(js|ts)$/i,
-          use: [
-            {
-              loader: "comlink-loader",
-              options: {
-                singleton: true,
-              },
-            },
-          ],
-        },
-        {
-          test: [/\.js?$/, /\.jsx?$/, /\.tsx?$/],
-          use: [
-            {
-              loader: "babel-loader",
-              options: {
-                plugins: [
-                  isDevelopment && require("react-refresh/babel"),
-                ].filter(Boolean),
-              },
-            },
-          ],
-          exclude: /node_modules/,
-        },
-        {
-          enforce: "pre",
-          test: /\.js$/,
-          loader: "source-map-loader",
-        },
-        {
-          test: /\.css$/i,
-          use: ["style-loader", "css-loader"],
-        },
-        {
-          test: /\.s[ac]ss$/i,
-          use: [
-            // Creates `style` nodes from JS strings
-            "style-loader",
-            // Translates CSS into CommonJS
-            "css-loader",
-            // Compiles Sass to CSS
-            "sass-loader",
-          ],
-        },
-        {
-          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/i,
-          use: [
-            "file-loader?hash=sha512&digest=hex&name=img/[contenthash].[ext]",
-            "image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false",
-          ],
-        },
-      ],
-    },
-    resolve: {
-      extensions: ["*", ".ts", ".tsx", ".js", ".jsx", ".json"],
-      aliasFields: ["browser", "browser.esm"],
-    },
-    mode: process.env.NODE_ENV,
-    devServer: {
-      hot: true,
-      port: 3050,
-      open: true,
-      proxy: {
-        "/api/**": {
-          target: "http://localhost:8050",
-          secure: false,
-          changeOrigin: true,
-        },
-      },
-    },
-    optimization: {
-      usedExports: false,
-    },
-    plugins: [
-      // new BundleAnalyzerPlugin(),
-      new CopyPlugin({
-        patterns: [{ from: "./src/client/assets/img/", to: "img/" }],
-        options: {
-          concurrency: 100,
-        },
-      }),
-      isDevelopment && new ReactRefreshWebpackPlugin(),
-      new HtmlWebpackPlugin({
-        template: "./public/index.html",
-        favicon: "./public/favicon.ico",
-        title: "express-typescript-react",
-      }),
-      new webpack.DefinePlugin({
-        "process.env.UNDERLYING_HOSTNAME": JSON.stringify(
-          process.env.UNDERLYING_HOSTNAME,
-        ),
-      }),
-      new MiniCssExtractPlugin({
-        filename: "./css/[name].css",
-        chunkFilename: "./css/[id].css",
-      }),
-    ].filter(Boolean),
-  };
-};
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Rishi Ghan	108260a84a	📗 Upgraded Storybook to v7 rc	2023-03-15 11:38:00 -04:00
Rishi Ghan	79f9b22fad	Elasticsearch upgrade fix (#67 ) * 🔧 Fixed the response object in reducers and components https://github.com/rishighan/threetwo/issues/64 Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * #️⃣ Added a key prop to MetadataPanel in global search results Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * 🔧 Fixed DOMNesting issues Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * 🔧 Fixed the response in wanted reducer action Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * ➕ Committing the reducer Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * 🔧 Fixes for DOMNesting issues on the Downloads page Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> --------- Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>	2023-03-13 11:25:15 -04:00
dependabot[bot]	e291b4806b	Bump http-cache-semantics from 4.1.0 to 4.1.1 (#65 ) Bumps [http-cache-semantics](https://github.com/kornelski/http-cache-semantics) from 4.1.0 to 4.1.1. - [Release notes](https://github.com/kornelski/http-cache-semantics/releases) - [Commits](https://github.com/kornelski/http-cache-semantics/compare/v4.1.0...v4.1.1) --- updated-dependencies: - dependency-name: http-cache-semantics dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-03-02 21:47:16 -05:00
Rishi Ghan	ff7b7c9207	Fix for elasticsearch upgrade breakage (#66 ) * 🔧 Fixed the response object in reducers and components https://github.com/rishighan/threetwo/issues/64 Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * #️⃣ Added a key prop to MetadataPanel in global search results Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * 🔧 Fixed DOMNesting issues Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * 🔧 Fixed the response in wanted reducer action Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * ➕ Committing the reducer Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> * 🔧 Fixes for DOMNesting issues on the Downloads page Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> --------- Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>	2023-03-02 00:32:43 -05:00
Rishi Ghan	2d61fa1436	Changing the build system to Vite (#62 ) * 🔧 Updated date for PullList on Dashboard * ⚡️ Added Vite config and removed useless files * 👷🏽 Updated build command * ❌ Removed useless deps * 🔧 Cleaned up package.json and bumped airdcpp-apisocket * 🔧 Updated some packages and deps * ⬆️ Bumped some deps * 🔧 Fixed typo in package.json * 🔧 Fix for broken paths https://github.com/rishighan/threetwo/issues/63 * 🔧 Fixed broken path and npm script Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com> --------- Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>	2023-03-01 23:31:22 -05:00