🦸🏻 Integrating with Metron service

src/client/actions/fileops.actions.tsx

@@ -1,12 +1,10 @@
 import axios from "axios";
-import { IFolderData, IExtractedComicBookCoverFile } from "threetwo-ui-typings";
+import { IFolderData } from "threetwo-ui-typings";
 import {
-  API_BASE_URI,
   COMICBOOKINFO_SERVICE_URI,
   IMPORT_SERVICE_BASE_URI,
 } from "../constants/endpoints";
 import {
-  IMS_COMICBOOK_METADATA_FETCHED,
   IMS_COMIC_BOOK_GROUPS_FETCHED,
   IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS,
   IMS_COMIC_BOOK_GROUPS_CALL_FAILED,
@@ -19,8 +17,6 @@ import {
   IMS_CV_METADATA_IMPORT_FAILED,
   LS_IMPORT,
 } from "../constants/action-types";
-import { refineQuery } from "../shared/utils/filenameparser.utils";
-import sortBy from "array-sort-by";
 import { success } from "react-notification-system-redux";
 import { isNil } from "lodash";
 
@@ -208,8 +204,6 @@ export const fetchComicVineMatches =
             },
           });
         });
-
-      /* return { issueSearchQuery, series: seriesSearchQuery.searchParams }; */
     } catch (error) {
       console.log(error);
     }

src/client/actions/metron.actions.tsx

@@ -0,0 +1,24 @@
+import axios from "axios";
+import { METRON_SERVICE_URI } from "../constants/endpoints";
+import {
+  METRON_DATA_FETCH_SUCCESS,
+  METRON_DATA_FETCH_IN_PROGRESS,
+} from "../constants/action-types";
+
+export const fetchMetronResource = async (options) => {
+  console.log(options);
+
+  const metronResourceResults = await axios.post(
+    `${METRON_SERVICE_URI}/fetchResource`,
+    options,
+  );
+  console.log(metronResourceResults);
+  const foo = metronResourceResults.data.results.map((result) => {
+    return {
+      label: result.name,
+      value: result.id,
+    };
+  });
+  console.log({ options: foo, hasMore: false });
+  return { options: foo, hasMore: false };
+};

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -1,6 +1,11 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useCallback, useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
 import { Form, Field } from "react-final-form";
 import DatePicker from "react-datepicker";
+import Creatable from "react-select/creatable";
+import { fetchMetronResource } from "../../actions/metron.actions";
+import { withAsyncPaginate } from "react-select-async-paginate";
+const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
 
 import "react-datepicker/dist/react-datepicker.css";
 export const EditMetadataPanel = (props): ReactElement => {
@@ -9,6 +14,20 @@ export const EditMetadataPanel = (props): ReactElement => {
   const DayPickerAdapter = ({ input, ...rest }) => {
     return <DatePicker {...input} {...rest} />;
   };
+  const dispatch = useDispatch();
+  const [value, onChange] = useState(null);
+
+  const mudasir = useCallback((query) => {
+    return fetchMetronResource({
+      method: "GET",
+      resource: "publisher",
+      query: {
+        name: query,
+        page: 1,
+      },
+    });
+  }, []);
+
   return (
     <>
       <Form
@@ -89,6 +108,29 @@ export const EditMetadataPanel = (props): ReactElement => {
                 </div>
               </div>
             </div>
+
+            {/* Publisher */}
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Publisher</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <CreatableAsyncPaginate
+                      SelectComponent={Creatable}
+                      debounceTimeout={3}
+                      // isDisabled={isAddingInProgress}
+                      value={value}
+                      loadOptions={(e) => mudasir(e)}
+                      // onCreateOption={onCreateOption}
+                      onChange={onChange}
+                      // cacheUniqs={[cacheUniq]}
+                    />
+                  </p>
+                </div>
+              </div>
+            </div>
           </form>
         )}
       />

src/client/constants/action-types.ts

@@ -69,3 +69,8 @@ export const SETTINGS_OBJECT_FETCHED = "SETTINGS_OBJECT_FETCHED";
 export const SETTINGS_CALL_FAILED = "SETTINGS_CALL_FAILED";
 export const SETTINGS_OBJECT_DELETED = "SETTINGS_OBJECT_DELETED";
 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";

src/client/constants/endpoints.ts

@@ -23,6 +23,13 @@ export const COMICBOOKINFO_SERVICE_URI = hostURIBuilder({
   apiPath: "/api/comicvine",
 });
 
+export const METRON_SERVICE_URI = hostURIBuilder({
+  protocol: "http",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
+  port: "3080",
+  apiPath: "/api/metron",
+});
+
 export const API_BASE_URI = hostURIBuilder({
   protocol: "http",
   host: process.env.UNDERLYING_HOSTNAME || "localhost",