🔧 Fixed broken path and npm script

Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>

.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",
@@ -95,13 +93,6 @@
     "@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/express": "^4.17.8",
     "@types/jest": "^26.0.20",
@@ -126,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",
@@ -136,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": "^4.9",
+    "typescript": "^4.2.3",
     "vite": "^4.1.1"
   }
 }

src/client/actions/fileops.actions.tsx

@@ -301,7 +301,7 @@ export const searchIssue = (query, options) => async (dispatch) => {
     case "wantedComicsPage":
       dispatch({
         type: WANTED_COMICS_FETCHED,
-        data: response.data.hits,
+        data: response.data.body,
       });
       break;
     case "globalSearchBar":
@@ -314,13 +314,13 @@ export const searchIssue = (query, options) => async (dispatch) => {
     case "libraryPage":
       dispatch({
         type: SS_SEARCH_RESULTS_FETCHED,
-        data: response.data.hits,
+        data: response.data.body,
       });
       break;
     case "volumesPage":
       dispatch({
         type: VOLUMES_FETCHED,
-        data: response.data.hits,
+        data: response.data.body,
       });
       break;
 

src/client/components/Downloads/Downloads.tsx

@@ -3,6 +3,7 @@ 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";
 
@@ -46,6 +47,7 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
       })
       setBundles(foo);
     }
+
   }, [issueBundles])
 
   return !isNil(bundles) ?
@@ -54,9 +56,9 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
         <h1 className="title">Downloads</h1>
         <div className="columns">
           <div className="column is-half">
-            {bundles.map((bundle, idx) => {
+            {bundles.map(bundle => {
               console.log(bundle);
-              return <div key={idx}>
+              return <>
                 <MetadataPanel
                   data={bundle}
                   imageStyle={{ maxWidth: 80 }}
@@ -68,33 +70,30 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
                     margin: "0 0 8px 0",
                   }} />
 
-                <table className="table is-size-7">
-                  <thead>
+                  <table className="table is-size-7">
                     <tr>
                       <th>Name</th>
                       <th>Size</th>
                       <th>Type</th>
                       <th>Bundle ID</th>
                     </tr>
-                  </thead>
-                  <tbody>
-                    {bundle.acquisition.directconnect.downloads.map((bundle, idx) => {
-                      return (<tr key={idx}>
+
+                    {bundle.acquisition.directconnect.downloads.map((bundle) => {
+                      return(<tr>
                         <td>{bundle.name}</td>
                         <td>{bundle.size}</td>
                         <td>{bundle.type.str}</td>
                         <td><span className="tag is-warning">{bundle.bundleId}</span></td>
                       </tr>)
                     })}
-                  </tbody>
-                </table>
+                  </table>
                 {/* <pre>{JSON.stringify(bundle.acquisition.directconnect.downloads, null, 2)}</pre> */}
-              </div>
+              </>
             })}
           </div>
         </div>
       </section>
-    </div> : <div>There are no downloads.</div>;
+    </div> : <div>asd</div>;
 };
 
 export default Downloads;

src/client/components/GlobalSearchBar/SearchBar.tsx

@@ -61,10 +61,9 @@ export const SearchBar = (data: ISearchBarProps): ReactElement => {
             margin: "60px 0 0 350px",
           }}
         >
-          {map(searchResults, (result, idx) => (
+          {map(searchResults, (result) => (
             <MetadataPanel
               data={result}
-              key={idx}
               imageStyle={{ maxWidth: 70 }}
               titleStyle={{ fontSize: "0.8rem" }}
               tagsStyle={{ fontSize: "0.7rem" }}

src/client/components/Library/Library.tsx

@@ -19,7 +19,10 @@ export const Library = (): ReactElement => {
   const searchResults = useSelector(
     (state: RootState) => state.fileOps.libraryComics,
   );
-  const searchError = useSelector((state: RootState) => state.fileOps.librarySearchError);
+  const searchError = useSelector((state: RootState) => {
+    console.log(state);
+    return state.fileOps.librarySearchError;
+  });
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(
@@ -218,9 +221,9 @@ export const Library = (): ReactElement => {
           <div>
             <div className="library">
               <T2Table
-                totalPages={searchResults.total.value}
+                totalPages={searchResults.hits.total.value}
                 columns={columns}
-                sourceData={searchResults?.hits}
+                sourceData={searchResults?.hits?.hits}
                 rowClickHandler={navigateToComicDetail}
                 paginationHandlers={{
                   nextPage,

src/client/components/Volumes/Volumes.tsx

@@ -166,8 +166,8 @@ export const Volumes = (props): ReactElement => {
           <div>
             <div className="library">
               <T2Table
-                sourceData={volumes?.hits}
-                totalPages={volumes.hits.length}
+                sourceData={volumes?.hits?.hits}
+                totalPages={volumes.hits.hits.length}
                 paginationHandlers={{
                   nextPage: () => {},
                   previousPage: () => {},

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, idx) => {
-              return <li className="is-size-7" key={idx}>{download.name}</li>;
+            {data.getValue().directconnect.downloads.map(download => {
+              return <li className="is-size-7">{download.name}</li>;
             })}
           </ol>
         },

src/client/components/shared/T2Table.tsx

@@ -20,6 +20,8 @@ export const T2Table = (tableOptions): ReactElement => {
       pageIndex: 1,
       pageSize: 15,
     });
+    console.log(sourceData)
+
 
   const pagination = useMemo(
     () => ({
@@ -79,12 +81,12 @@ export const T2Table = (tableOptions): ReactElement => {
             {/* <p>{totalPages} comics in all</p> */}
           </div>
           <div className="field has-addons">
-            <div className="control">
+            <p className="control">
               <div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
-            </div>
-            <div className="control">
+            </p>
+            <p className="control">
               <div className="button" onClick={() => goToNextPage()}> <i className="fas fa-chevron-right"></i> </div>
-            </div>
+            </p>
 
             <div className="field has-addons ml-5">
               <p className="control">

src/client/reducers/fileops.reducer.ts

@@ -246,7 +246,7 @@ function fileOpsReducer(state = initialState, action) {
     case WANTED_COMICS_FETCHED: {
       const foo = [];
       if (!isUndefined(action.data.hits)) {
-        map(action.data.hits, ({ _source }) => {
+        map(action.data.hits.hits, ({ _source }) => {
           foo.push(_source);
         });
       }

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": [] } },