🚛 Massive refactor of dashboard

2022-05-23 22:01:51 -07:00
parent f0505d7428
commit d80c672cd1
18 changed files with 127 additions and 77 deletions
--- a/src/client/actions/airdcpp.actions.tsx
+++ b/src/client/actions/airdcpp.actions.tsx
@@ -117,6 +117,7 @@ export const downloadAirDCPPItem =
    instanceId: string,
    resultId: string,
    comicObjectId: string,
+    comicObject: any,
    ADCPPSocket: any,
    credentials: any,
  ): void =>
@@ -129,6 +130,7 @@ export const downloadAirDCPPItem =
          true,
        );
      }
+      console.log(comicObject)
      let bundleDBImportResult = {};
      const downloadResult = await ADCPPSocket.post(
        `search/${instanceId}/results/${resultId}/download`,
@@ -143,7 +145,7 @@ export const downloadAirDCPPItem =
            dispatch({
              type: LS_SINGLE_IMPORT,
              meta: { remote: true },
-              data: { downloadStatus, comicObjectId },
+              data: { downloadStatus, comicObjectId, comicObject },
            });
          }
          count += 1;
@@ -160,7 +162,7 @@ export const downloadAirDCPPItem =
          (item) => item.id,
        );
      }
-
+      console.log(comicObjectId)
      if (!isNil(downloadResult)) {
        bundleDBImportResult = await axios({
          method: "POST",
--- a/src/client/actions/fileops.actions.tsx
+++ b/src/client/actions/fileops.actions.tsx
@@ -132,9 +132,12 @@ export const getComicBooks = (options) => async (dispatch) => {
 * @returns Nothing.
 * @param payload
 */
-export const importToDB = (payload?: any) => (dispatch) => {
+export const importToDB = (sourceName: string, payload?: any) => (dispatch) => {
  try {
    const comicBookMetadata = {
+      rawFileDetails: {
+        name: "",
+      },
      importStatus: {
        isImported: true,
        tagged: false,
@@ -143,7 +146,7 @@ export const importToDB = (payload?: any) => (dispatch) => {
        },
      },
      sourcedMetadata: payload || null,
-      acquisition: { wanted: true },
+      acquisition: { source: { wanted: true, name: sourceName } },
    };
    dispatch({
      type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
@@ -153,7 +156,7 @@ export const importToDB = (payload?: any) => (dispatch) => {
        url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`,
        method: "POST",
        data: comicBookMetadata,
-        transformResponse: (r: string) => JSON.parse(r),
+        // transformResponse: (r: string) => JSON.parse(r),
      })
      .then((response) => {
        const { data } = response;
--- a/src/client/assets/img/cvlogo.svg
+++ b/src/client/assets/img/cvlogo.svg
--- a/src/client/assets/img/locglogo.svg
+++ b/src/client/assets/img/locglogo.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- Generated by Pixelmator Pro 2.4.3 -->
 <svg width="624" height="561" viewBox="0 0 624 561" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <text id="LCG" xml:space="preserve"><tspan x="57" y="382" font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="-2.88" xml:space="preserve">L</tspan><tspan font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="11.52" xml:space="preserve">CG</tspan></text>
-    <path id="Rounded-Rectangle" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 96 422 C 84.954399 422 76 430.954407 76 442 L 76 446 C 76 457.045593 84.954399 466 96 466 L 193 466 C 204.045593 466 213 457.045593 213 446 L 213 442 C 213 430.954407 204.045593 422 193 422 Z"/>
-    <path id="Rounded-Rectangle-copy-2" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 425 422 C 413.954407 422 405 430.954407 405 442 L 405 446 C 405 457.045593 413.954407 466 425 466 L 522 466 C 533.045593 466 542 457.045593 542 446 L 542 442 C 542 430.954407 533.045593 422 522 422 Z"/>
+    <text id="LCG" xml:space="preserve"><tspan x="57" y="282" font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="-2.88" xml:space="preserve">L</tspan><tspan font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="11.52" xml:space="preserve">CG</tspan></text>
+    <path id="Rounded-Rectangle" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 96 322 C 84.954399 322 76 330.954407 76 342 L 76 346 C 76 357.045593 84.954399 366 96 366 L 193 366 C 204.045593 366 213 357.045593 213 346 L 213 342 C 213 330.954407 204.045593 322 193 322 Z"/>
+    <path id="Rounded-Rectangle-copy-2" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 425 322 C 413.954407 322 405 330.954407 405 342 L 405 346 C 405 357.045593 413.954407 366 425 366 L 522 366 C 533.045593 366 542 357.045593 542 346 L 542 342 C 542 330.954407 533.045593 322 522 322 Z"/>
 </svg>
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -245,6 +245,7 @@ pre {
      flex: 1 1 auto;
      display: flex;
      .card-image {
+        // leaving this here... for posterity
        img.image {
          border-top-left-radius: 8px;
          border-bottom-left-radius: 8px;
@@ -255,6 +256,18 @@ pre {
          object-fit: cover;
          flex: 1 1 auto;
        }
+        img.cropped-image {
+          width: 70px;
+          border-top-left-radius: 8px;
+          border-bottom-left-radius: 8px;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+           height: 64px; 
+           object-fit: cover;
+           object-position: 100% 0;
+          //  flex: 1 1 auto;
+
+        }
      }
    }
    .card-content {
--- a/src/client/components/Carda.tsx
+++ b/src/client/components/Carda.tsx
@@ -25,7 +25,7 @@ const renderCard = (props): ReactElement => {
                <img
                  src={props.imageUrl}
                  alt="Placeholder image"
-                  className="image"
+                  className="cropped-image"
                />
              </div>
              {props.hasDetails && (
@@ -34,9 +34,6 @@ const renderCard = (props): ReactElement => {
            </div>
          </div>
        </div>
-
-
-
      );
    case "vertical":
      return (
--- a/src/client/components/ComicDetail/AcquisitionPanel.tsx
+++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx
@@ -19,12 +19,15 @@ import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 interface IAcquisitionPanelProps {
  query: any;
  comicObjectid: any;
+  comicObject: any;
+  userSettings: any;
 }

 export const AcquisitionPanel = (
  props: IAcquisitionPanelProps,
 ): ReactElement => {
-  const issueName = props.query.issue.name;
+  const issueName = props.query.issue.name || "";
+  const { userSettings } = props;
  const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");

  // Selectors for picking state
@@ -41,11 +44,11 @@ export const AcquisitionPanel = (
    (state: RootState) => state.airdcpp.searchInstance,
  );

-  const userSettings = useSelector((state: RootState) => state.settings.data);
+  // const userSettings = useSelector((state: RootState) => state.settings.data);
  const { ADCPPSocket } = useContext(AirDCPPSocketContext);
  const dispatch = useDispatch();
  const [dcppQuery, setDcppQuery] = useState({});
-
+  console.log(ADCPPSocket);
  useEffect(() => {
    if (!isNil(userSettings.directConnect)) {
      // AirDC++ search query
@@ -89,12 +92,13 @@ export const AcquisitionPanel = (

  // download via AirDC++
  const downloadDCPPResult = useCallback(
-    (searchInstanceId, resultId, comicBookObjectId) => {
+    (searchInstanceId, resultId, comicBookObjectId, comicObject) => {
      dispatch(
        downloadAirDCPPItem(
          searchInstanceId,
          resultId,
          comicBookObjectId,
+          comicObject,
          ADCPPSocket,
          {
            username: `${userSettings.directConnect.client.host.username}`,
@@ -293,6 +297,7 @@ export const AcquisitionPanel = (
                              searchInstance.id,
                              result.id,
                              props.comicObjectid,
+                              props.comicObject,
                            )
                          }
                        >
--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/src/client/components/ComicDetail/ComicDetail.tsx
@@ -31,9 +31,6 @@ import SlidingPane from "react-sliding-pane";
 import Modal from "react-modal";
 import ComicViewer from "react-comic-viewer";

-import { getSettings } from "../../actions/settings.actions";
-import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
-import AirDCPPSocket from "../../services/DcppSearchService";
 import { extractComicArchive } from "../../actions/fileops.actions";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";

@@ -68,8 +65,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
    (state: RootState) => state.fileOps.extractedComicBookArchive,
  );
  const { comicObjectId } = useParams<{ comicObjectId: string }>();
-  const userSettings = useSelector((state: RootState) => state.settings.data);
-  const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext);
+
  const dispatch = useDispatch();

  const openModal = useCallback((filePath) => {
@@ -86,24 +82,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
    setIsOpen(false);
  }, []);

-  useEffect(() => {
-    dispatch(getSettings());
-  }, [page, dispatch]);
-
-  useEffect(() => {
-    if (isEmpty(ADCPPSocket) && !isNil(userSettings.directConnect)) {
-      setADCPPSocket(
-        new AirDCPPSocket({
-          protocol: `${userSettings.directConnect.client.host.protocol}`,
-          hostname: `${userSettings.directConnect.client.host.hostname}`,
-        }),
-      );
-    }
-  }, [userSettings]);
-
-  // destructure props
-  console.log(ADCPPSocket)
-
  // sliding panel init
  const contentForSlidingPanel = {
    CVMatches: {
@@ -147,7 +125,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
      rawFileDetails,
      inferredMetadata,
      sourcedMetadata: { comicvine, locg, comicInfo },
-    },
+    }, userSettings,
  } = data;

  // check for the availability of CV metadata
@@ -207,7 +185,13 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
      icon: <i className="fa-solid fa-floppy-disk"></i>,
      name: "Acquisition",
      content: (
-        <AcquisitionPanel query={airDCPPQuery} comicObjectid={_id} key={4} />
+        <AcquisitionPanel
+          query={airDCPPQuery}
+          comicObjectid={_id}
+          comicObject={data.data}
+          userSettings={userSettings}
+          key={4}
+        />
      ),
      shouldShow: true,
    },
--- a/src/client/components/ComicDetail/ComicDetailContainer.tsx
+++ b/src/client/components/ComicDetail/ComicDetailContainer.tsx
@@ -1,13 +1,13 @@
-import { isEmpty, isUndefined } from "lodash";
-import React, { ReactElement, useEffect, useState } from "react";
+import { isEmpty, isNil, isUndefined } from "lodash";
+import React, { ReactElement, useContext, useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
 import { getComicBookDetailById } from "../../actions/comicinfo.actions";
 import { ComicDetail } from "../ComicDetail/ComicDetail";
-import { escapePoundSymbol } from "../../shared/utils/formatting.utils";

-import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 import { getSettings } from "../../actions/settings.actions";
+import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
+import AirDCPPSocket from "../../services/DcppSearchService";


 export const ComicDetailContainer = (): ReactElement | null => {
@@ -15,12 +15,28 @@ export const ComicDetailContainer = (): ReactElement | null => {
    (state: RootState) => state.comicInfo.comicBookDetail,
  );
  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getSettings());
+  }, [dispatch]);
+  const userSettings = useSelector((state: RootState) => state.settings.data);
+  const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext);
+
+  useEffect(() => {
+    if (isEmpty(ADCPPSocket) && !isNil(userSettings.directConnect)) {
+      setADCPPSocket(
+        new AirDCPPSocket({
+          protocol: `${userSettings.directConnect.client.host.protocol}`,
+          hostname: `${userSettings.directConnect.client.host.hostname}`,
+        }),
+      );
+    }
+  }, [userSettings]);
  const { comicObjectId } = useParams<{ comicObjectId: string }>();
  useEffect(() => {
    dispatch(getComicBookDetailById(comicObjectId));
    // dispatch(getSettings());
  }, [dispatch]);
  return !isEmpty(comicBookDetailData) ? (
-    <ComicDetail data={comicBookDetailData} />
+    <ComicDetail data={comicBookDetailData} userSettings={userSettings} />
  ) : null;
 };
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -24,7 +24,7 @@ export const Dashboard = (): ReactElement => {
          limit: 5,
          sort: { updatedAt: "-1" },
        },
-        predicate: { "acquisition.wanted": false },
+        predicate: { "acquisition.source.wanted": false },
        comicStatus: "recent",
      }),
    );
@@ -35,7 +35,7 @@ export const Dashboard = (): ReactElement => {
          limit: 5,
          sort: { updatedAt: "-1" },
        },
-        predicate: { "acquisition.wanted": true },
+        predicate: { "acquisition.source.wanted": true },
        comicStatus: "wanted",
      }),
    );
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/src/client/components/Dashboard/PullList.tsx
@@ -20,14 +20,15 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
  useEffect(() => {
    dispatch(
      getWeeklyPullList({
-        startDate: "2022-5-1",
+        startDate: "2022-2-11",
        pageSize: "15",
        currentPage: "1",
      }),
    );
  }, []);
  const addToLibrary = useCallback(
-    (locgMetadata) => dispatch(importToDB({ locg: locgMetadata })),
+    (sourceName: string, locgMetadata) =>
+      dispatch(importToDB(sourceName, { locg: locgMetadata })),
    [],
  );
  /*
@@ -144,7 +145,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
                  <div className="mt-2">
                    <button
                      className="button is-small is-warning is-light"
-                      onClick={() => addToLibrary(issue)}
+                      onClick={() => addToLibrary("locg", issue)}
                    >
                      <i className="fa-solid fa-plus"></i> Want
                    </button>
--- a/src/client/components/Dashboard/RecentlyImported.tsx
+++ b/src/client/components/Dashboard/RecentlyImported.tsx
@@ -7,7 +7,10 @@ import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import Masonry from "react-masonry-css";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
-import { determineCoverFile } from "../../shared/utils/metadata.utils";
+import {
+  determineCoverFile,
+  determineExternalMetadata,
+} from "../../shared/utils/metadata.utils";

 type RecentlyImportedProps = {
  comicBookCovers: any;
@@ -42,6 +45,9 @@ export const RecentlyImported = ({
            _id,
            rawFileDetails,
            sourcedMetadata: { comicvine, comicInfo, locg },
+            acquisition: {
+              source: { name },
+            },
          }) => {
            const consolidatedComicMetadata = {
              rawFileDetails,
@@ -49,10 +55,14 @@ export const RecentlyImported = ({
              comicInfo,
              locg,
            };
-
            const { issueName, url } = determineCoverFile(
              consolidatedComicMetadata,
            );
+            const { issue, coverURL, icon } = determineExternalMetadata(name, {
+              comicvine,
+              comicInfo,
+              locg,
+            });

            const isComicBookMetadataAvailable =
              !isUndefined(comicvine) &&
@@ -73,11 +83,6 @@ export const RecentlyImported = ({
                  title={issueName ? titleElement : null}
                >
                  <div className="content is-flex is-flex-direction-row">
-                    {isComicBookMetadataAvailable && (
-                      <span className="icon custom-icon is-small">
-                        <img src="/img/cvlogo.svg" />
-                      </span>
-                    )}
                    {/* Raw file presence  */}
                    {isNil(rawFileDetails) && (
                      <span className="icon custom-icon is-small has-text-danger mr-2">
@@ -108,17 +113,19 @@ export const RecentlyImported = ({
                    ) : null}
                  </div>
                </Card>
-                {/* original reference */}
-                {!isUndefined(comicvine.image) ? (
-                  <Card
-                    orientation="horizontal"
-                    hasDetails
-                    imageUrl={comicvine.image.icon_url}
-                  >
+                {/* metadata card */}
+                {!isNil(name) ? (
+                  <Card orientation="horizontal" hasDetails imageUrl={coverURL}>
                    <dd className="is-size-9">
-                      <dl>{ellipsize(comicvine.volumeInformation.name, 22)}</dl>
                      <dl>
-                        <span className="small-tag mt-1">{comicvine.id}</span>
+                        <span className="icon custom-icon">
+                          <img src={`/img/${icon}`} />
+                        </span>
+                      </dl>
+                      <dl>
+                        <span className="small-tag">
+                          {ellipsize(issue, 15)}
+                        </span>
                      </dl>
                    </dd>
                  </Card>
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -91,7 +91,10 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
                : row._source.sourcedMetadata,
            Cell: ({ value }) => {
              // If no CV info available, use raw file metadata
-              if (!isUndefined(value.rawFileDetails)) {
+              if (
+                !isUndefined(value.rawFileDetails) &&
+                !isEmpty(value.rawFileDetails.cover)
+              ) {
                return <RawFileDetails data={value} />;
              }
              // If CV metadata available, show it
@@ -134,7 +137,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
          },
          {
            Header: "Something",
-            accessor: "_source.acquisition.wanted",
+            accessor: "_source.acquisition.source.wanted",
            Cell: (props) => {
              return <WantedStatus value={props.cell.value.toString()} />;
            },
--- a/src/client/components/PullList/PullList.tsx
+++ b/src/client/components/PullList/PullList.tsx
@@ -14,7 +14,7 @@ export const PullList = (): ReactElement => {
  useEffect(() => {
    dispatch(
      getWeeklyPullList({
-        startDate: "2022-5-15",
+        startDate: "2022-6-1",
        pageSize: "100",
        currentPage: "1",
      }),
--- a/src/client/components/Search.tsx
+++ b/src/client/components/Search.tsx
@@ -37,7 +37,8 @@ export const Search = ({}: ISearchProps): ReactElement => {
  );

  const addToLibrary = useCallback(
-    (comicData) => dispatch(importToDB({ comicvine: comicData })),
+    (sourceName: string, comicData) =>
+      dispatch(importToDB(sourceName, { comicvine: comicData })),
    [],
  );

@@ -108,7 +109,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
                      ></p>
                      <button
                        className="button is-success is-light is-outlined"
-                        onClick={() => addToLibrary(result)}
+                        onClick={() => addToLibrary("comicvine", result)}
                      >
                        Add to Library
                      </button>
--- a/src/client/reducers/comicinfo.reducer.ts
+++ b/src/client/reducers/comicinfo.reducer.ts
@@ -54,7 +54,6 @@ function comicinfoReducer(state = initialState, action) {
        IMS_inProgress: false,
      };
    case IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED:
-      console.log(action);
      return {
        ...state,
        comicBooksDetails: action.comicBooks,
@@ -110,7 +109,6 @@ function comicinfoReducer(state = initialState, action) {
        ...state,
      };
    case CV_WEEKLY_PULLLIST_FETCHED: {
-      console.log(action.data);
      return {
        ...state,
        inProgress: false,
@@ -123,7 +121,6 @@ function comicinfoReducer(state = initialState, action) {
        ...state,
      };
    case LIBRARY_STATISTICS_FETCHED:
-      console.log(action);
      return {
        ...state,
        inProgress: false,
--- a/src/client/reducers/fileops.reducer.ts
+++ b/src/client/reducers/fileops.reducer.ts
@@ -77,7 +77,6 @@ function fileOpsReducer(state = initialState, action) {
        recentComics: action.data,
      };
    case IMS_WANTED_COMICS_FETCHED:
-      console.log(action.data);
      return {
        ...state,
        wantedComics: action.data,
--- a/src/client/shared/utils/metadata.utils.ts
+++ b/src/client/shared/utils/metadata.utils.ts
@@ -58,3 +58,25 @@ export const determineCoverFile = (data) => {
    return result[0];
  }
 };
+
+export const determineExternalMetadata = (metadataSource, source) => {
+  switch (metadataSource) {
+    case "comicvine":
+      return {
+        coverURL: source.comicvine.image.small_url,
+        issue: source.comicvine.name,
+        icon: "cvlogo.svg",
+      };
+    case "locg":
+      return {
+        coverURL: source.locg.cover,
+        issue: source.locg.name,
+        icon: "locglogo.svg",
+      };
+    case undefined:
+      return {};
+
+    default:
+      break;
+  }
+};