Update App.scss

🌜 Trying dark mode on the react-select
🌜 Initial Dark Mode support
2023-12-03 22:46:49 -05:00 · 2023-12-03 16:02:54 -05:00 · 2023-12-03 15:28:05 -05:00 · 2023-12-02 11:38:17 -05:00 · 2023-11-29 23:24:34 -05:00 · 2023-11-29 23:08:00 -05:00
12 changed files with 216 additions and 103 deletions
--- a/index.html
+++ b/index.html
@@ -1,16 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Three Two!</title>
-</head>
+  </head>

-<body>
+  <body>
    <div id="root"></div>
    <script type="module" src="/src/client/index.tsx"></script>
-</body>
-
-</html>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
    "axios-cache-interceptor": "^1.0.1",
    "axios-rate-limit": "^1.3.0",
    "babel-plugin-styled-components": "^2.1.4",
+    "bulma-prefers-dark": "^0.1.0-beta.1",
    "date-fns": "^2.28.0",
    "dayjs": "^1.10.6",
    "ellipsize": "^0.5.1",
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -1,4 +1,5 @@
@import "/node_modules/bulma/bulma.sass";
+@import "/node_modules/bulma-prefers-dark/bulma-prefers-dark.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";
@@ -14,8 +15,9 @@ $flexSize: 4em;
 $boxSpacing: 1em;
 $colorText: #404646;
 body {
-  background: #fffcc;
+  background: #20292f;
 }
+
 .is-size-8 {
  font-size: $size-8;
 }
@@ -72,10 +74,6 @@ pre {
    background: #454a59;
  }

-  body {
-    background: #454a59;
-  }
-
  .pulsating-circle {
    position: relative;
    left: -120%;
@@ -244,12 +242,16 @@ pre {

 .generic-card {
  display: inline-block;
-  background-color: #fff;
+  background-color: hsl(232, 11%, 15%);
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
-  box-shadow: 1px 8px 23px 7px rgba(0, 0, 0, 0.12);
+  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1),
+    /* 2. shadow ring 👇 */ 0 0 0 1px hsla(230, 13%, 9%, 0.075),
+    /* 3. multiple soft shadows 👇 */ 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
+    0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
+    0 3.5px 6px hsla(230, 13%, 9%, 0.09);

  .green-border {
    border: 1px dotted #168b64;
@@ -358,7 +360,7 @@ pre {
 // raw file details
 .raw-file-details {
  padding: 1rem;
-  background-color: beige;
+  background: #30475e;
  border-radius: 0.5rem;
 }

@@ -368,23 +370,23 @@ pre {

 // comicvine metadata
 .comicvine-metadata {
-  background-color: #f2f1f9;
+  background-color: #d6cc99;
  padding: 0.8rem;
  border-radius: 0.5rem;
 }

 .issue-metadata {
-  background-color: #fbffee;
+  background-color: #57615c;
  padding: 0.8em;
  border-radius: 0.5rem;
  .name {
    font-size: 0.95rem;
-    color: #4a4f50;
  }
 }

 .comicInfo-metadata {
-  background-color: #f7ebdd;
+  background-color: #d6cc99;
+  color: #000;
  padding: 0.8rem;
  border-radius: 0.5rem;
 }
@@ -421,17 +423,17 @@ pre {
 }
 // Library
 .header-area {
+  background: #20292f;
  width: 100%;
  padding: 25px 0 15px 0;
  position: sticky;
-  z-index: 9999;
-  background: #fffffc;
-  top: 50px;
+  z-index: 9;
+  top: 57px;
 }

 .library {
  .table-controls {
-    background: #fffffc;
+    background: #20292f;
    justify-content: space-between;
    position: sticky;
    top: 126px;
@@ -439,17 +441,17 @@ pre {
  }
  .pagination {
    margin: 0;
-    background: #fffffc;
  }

  table {
+    background: #20292f;
    border-collapse: separate;
    width: 100%;
    thead {
+      background: #20292f;
      position: sticky;
      top: 250px;
      z-index: 1;
-      background: #fffffc;
      min-height: 130px;
    }
    tr {
--- a/src/client/components/ComicDetail/AcquisitionPanel.tsx
+++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx
@@ -1,9 +1,5 @@
 import React, { useCallback, ReactElement, useEffect, useState } from "react";
-import {
-  downloadAirDCPPItem,
-  getBundlesForComic,
-  sleep,
-} from "../../actions/airdcpp.actions";
+import { getBundlesForComic, sleep } from "../../actions/airdcpp.actions";
 import { SearchQuery, PriorityEnum, SearchResponse } from "threetwo-ui-typings";
 import { RootState, SearchInstance } from "threetwo-ui-typings";
 import ellipsize from "ellipsize";
@@ -13,6 +9,7 @@ import { isEmpty, isNil, map } from "lodash";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 import { useQuery } from "@tanstack/react-query";
+import axios from "axios";

 interface IAcquisitionPanelProps {
  query: any;
@@ -28,14 +25,22 @@ export const AcquisitionPanel = (
    airDCPPSocketInstance,
    airDCPPClientConfiguration,
    airDCPPSessionInformation,
+    airDCPPDownloadTick,
  } = useStore(
    useShallow((state) => ({
      airDCPPSocketInstance: state.airDCPPSocketInstance,
      airDCPPClientConfiguration: state.airDCPPClientConfiguration,
      airDCPPSessionInformation: state.airDCPPSessionInformation,
+      airDCPPDownloadTick: state.airDCPPDownloadTick,
    })),
  );

+  interface SearchData {
+    query: Pick<SearchQuery, "pattern"> & Partial<Omit<SearchQuery, "pattern">>;
+    hub_urls: string[] | undefined | null;
+    priority: PriorityEnum;
+  }
+
  /**
   * Get the hubs list from an AirDCPP Socket
   */
@@ -43,34 +48,15 @@ export const AcquisitionPanel = (
    queryKey: ["hubs"],
    queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
  });
-
+  const { comicObjectId } = props;
  const issueName = props.query.issue.name || "";
-  // const { settings } = props;
  const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");

-  // Selectors for picking state
-  // const airDCPPSearchResults = useSelector((state: RootState) => {
-  //   return state.airdcpp.searchResults;
-  // });
-  // const isAirDCPPSearchInProgress = useSelector(
-  //   (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
-  // );
-  // const searchInfo = useSelector(
-  //   (state: RootState) => state.airdcpp.searchInfo,
-  // );
-  // const searchInstance: SearchInstance = useSelector(
-  //   (state: RootState) => state.airdcpp.searchInstance,
-  // );
-
-  // const settings = useSelector((state: RootState) => state.settings.data);
-  // const airDCPPConfiguration = useContext(AirDCPPSocketContext);
-  interface SearchData {
-    query: Pick<SearchQuery, "pattern"> & Partial<Omit<SearchQuery, "pattern">>;
-    hub_urls: string[] | undefined | null;
-    priority: PriorityEnum;
-  }
  const [dcppQuery, setDcppQuery] = useState({});
  const [airDCPPSearchResults, setAirDCPPSearchResults] = useState([]);
+  const [airDCPPSearchStatus, setAirDCPPSearchStatus] = useState(false);
+  const [airDCPPSearchInstance, setAirDCPPSearchInstance] = useState({});
+  const [airDCPPSearchInfo, setAirDCPPSearchInfo] = useState({});

  // Construct a AirDC++ query based on metadata inferred, upon component mount
  // Pre-populate the search input with the search string, so that
@@ -88,15 +74,18 @@ export const AcquisitionPanel = (
    setDcppQuery(dcppSearchQuery);
  }, []);

+  /**
+   * Method to perform a search via an AirDC++ websocket
+   * @param {SearchData} data - a SearchData query
+   * @param {any} ADCPPSocket - an intialized AirDC++ socket instance
+   */
  const search = async (data: SearchData, ADCPPSocket: any) => {
    try {
      if (!ADCPPSocket.isConnected()) {
        await ADCPPSocket();
      }
      const instance: SearchInstance = await ADCPPSocket.post("search");
-      // dispatch({
-      //   type: AIRDCPP_SEARCH_IN_PROGRESS,
-      // });
+      setAirDCPPSearchStatus(true);

      // We want to get notified about every new result in order to make the user experience better
      await ADCPPSocket.addListener(
@@ -142,6 +131,9 @@ export const AcquisitionPanel = (
          const currentInstance = await ADCPPSocket.get(
            `search/${instance.id}`,
          );
+          setAirDCPPSearchInstance(currentInstance);
+          setAirDCPPSearchInfo(searchInfo);
+          console.log("Asdas", airDCPPSearchInfo);
          if (currentInstance.result_count === 0) {
            // ...nothing was received, show an informative message to the user
            console.log("No more search results.");
@@ -149,11 +141,8 @@ export const AcquisitionPanel = (

          // The search can now be considered to be "complete"
          // If there's an "in progress" indicator in the UI, that could also be disabled here
-          // dispatch({
-          //   type: AIRDCPP_HUB_SEARCHES_SENT,
-          //   searchInfo,
-          //   instance,
-          // });
+          setAirDCPPSearchInstance(instance);
+          setAirDCPPSearchStatus(false);
        },
        instance.id,
      );
@@ -164,6 +153,68 @@ export const AcquisitionPanel = (
      throw error;
    }
  };
+
+  /**
+   * Method to download a bundle associated with a search result from AirDC++
+   * @param {Number} searchInstanceId - description
+   * @param {String} resultId - description
+   * @param {String} comicObjectId - description
+   * @param {String} name - description
+   * @param {Number} size - description
+   * @param {any} type - description
+   * @param {any} ADCPPSocket - description
+   * @returns {void}  - description
+   */
+  const download = async (
+    searchInstanceId: Number,
+    resultId: String,
+    comicObjectId: String,
+    name: String,
+    size: Number,
+    type: any,
+    ADCPPSocket: any,
+  ): void => {
+    try {
+      if (!ADCPPSocket.isConnected()) {
+        await ADCPPSocket.connect();
+      }
+      let bundleDBImportResult = {};
+      const downloadResult = await ADCPPSocket.post(
+        `search/${searchInstanceId}/results/${resultId}/download`,
+      );
+
+      if (!isNil(downloadResult)) {
+        bundleDBImportResult = await axios({
+          method: "POST",
+          url: `http://localhost:3000/api/library/applyAirDCPPDownloadMetadata`,
+          headers: {
+            "Content-Type": "application/json; charset=utf-8",
+          },
+          data: {
+            bundleId: downloadResult.bundle_info.id,
+            comicObjectId,
+            name,
+            size,
+            type,
+          },
+        });
+
+        //         dispatch({
+        //           type: AIRDCPP_RESULT_DOWNLOAD_INITIATED,
+        //           downloadResult,
+        //           bundleDBImportResult,
+        //         });
+        //
+        //         dispatch({
+        //           type: IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
+        //           comicBookDetail: bundleDBImportResult.data,
+        //           IMS_inProgress: false,
+        //         });
+      }
+    } catch (error) {
+      throw error;
+    }
+  };
  const getDCPPSearchResults = async (searchQuery) => {
    const manualQuery = {
      query: {
@@ -209,7 +260,6 @@ export const AcquisitionPanel = (
    },
    [],
  );
-  console.log("yaman", airDCPPSearchResults);
  return (
    <>
      <div className="comic-detail columns">
@@ -245,7 +295,7 @@ export const AcquisitionPanel = (
                      <button
                        type="submit"
                        className={
-                          false
+                          airDCPPSearchStatus
                            ? "button is-loading is-warning"
                            : "button is-success is-light"
                        }
@@ -273,6 +323,60 @@ export const AcquisitionPanel = (
        )}
      </div>

+      {/* AirDC++ search instance details */}
+      {!isNil(airDCPPSearchInstance) &&
+        !isEmpty(airDCPPSearchInfo) &&
+        !isNil(hubs) && (
+          <div className="columns">
+            <div className="column is-one-quarter is-size-7">
+              <div className="card">
+                <div className="card-content">
+                  <dl>
+                    <dt>
+                      <div className="tags mb-1">
+                        {hubs.map((value, idx) => (
+                          <span className="tag is-warning" key={idx}>
+                            {value.identity.name}
+                          </span>
+                        ))}
+                      </div>
+                    </dt>
+                    <dt>
+                      Query:
+                      <span className="has-text-weight-semibold">
+                        {airDCPPSearchInfo.query.pattern}
+                      </span>
+                    </dt>
+                    <dd>
+                      Extensions:
+                      <span className="has-text-weight-semibold">
+                        {airDCPPSearchInfo.query.extensions.join(", ")}
+                      </span>
+                    </dd>
+                    <dd>
+                      File type:
+                      <span className="has-text-weight-semibold">
+                        {airDCPPSearchInfo.query.file_type}
+                      </span>
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+            <div className="column is-one-quarter is-size-7">
+              <div className="card">
+                <div className="card-content">
+                  <dl>
+                    <dt>Search Instance: {airDCPPSearchInstance.id}</dt>
+                    <dt>Owned by {airDCPPSearchInstance.owner}</dt>
+                    <dd>Expires in: {airDCPPSearchInstance.expires_in}</dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
      {/* AirDC++ results */}
      <div className="columns">
        {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
@@ -342,12 +446,14 @@ export const AcquisitionPanel = (
                        <button
                          className="button is-small is-light is-success"
                          onClick={() =>
-                            downloadDCPPResult(
-                              searchInstance.id,
+                            download(
+                              airDCPPSearchInstance.id,
                              result.id,
+                              comicObjectId,
                              result.name,
                              result.size,
                              result.type,
+                              airDCPPSocketInstance,
                            )
                          }
                        >
--- a/src/client/components/ComicDetail/ActionMenu/Menu.tsx
+++ b/src/client/components/ComicDetail/ActionMenu/Menu.tsx
@@ -69,17 +69,29 @@ export const Menu = (props): ReactElement => {
        break;
    }
  };
+  const customStyles = {
+    option: (base, { data, isDisabled, isFocused, isSelected }) => {
+      return {
+        ...base,
+        backgroundColor: isFocused ? "gray" : "black",
+      };
+    },
+    control: (base) => ({
+      ...base,
+      backgroundColor: "black",
+      border: "1px solid #CCC",
+    }),
+  };

  return (
    <Select
-      className="basic-single"
-      classNamePrefix="select"
      components={{ Placeholder }}
      placeholder={
        <span>
          <i className="fa-solid fa-list"></i> Actions
        </span>
      }
+      styles={customStyles}
      name="actions"
      isSearchable={false}
      options={filteredActionOptions}
--- a/src/client/components/ComicDetail/DownloadProgressTick.tsx
+++ b/src/client/components/ComicDetail/DownloadProgressTick.tsx
@@ -3,10 +3,10 @@ import React, { ReactElement } from "react";

 export const DownloadProgressTick = (props): ReactElement => {
  return (
-    <div >
-      <h4 className="is-size-6">{props.data.name}</h4>
+    <div>
+      <h4 className="is-size-5">{props.data.name}</h4>
      <div>
-        <span className="is-size-3 has-text-weight-semibold">
+        <span className="is-size-4 has-text-weight-semibold">
          {prettyBytes(props.data.downloaded_bytes)} of{" "}
          {prettyBytes(props.data.size)}{" "}
        </span>
@@ -20,13 +20,12 @@ export const DownloadProgressTick = (props): ReactElement => {
          %
        </progress>
      </div>
-      <div className="is-size-5">
-        {prettyBytes(props.data.speed)} per second.
-      </div>
-      <div className="is-size-5">
+      <div className="is-size-6 mt-1 mb-2">
+        <p>{prettyBytes(props.data.speed)} per second.</p>
        Time left:
        {Math.round(parseInt(props.data.seconds_left) / 60)}
      </div>
+
      <div>{props.data.target}</div>
    </div>
  );
--- a/src/client/components/ComicDetail/RawFileDetails.tsx
+++ b/src/client/components/ComicDetail/RawFileDetails.tsx
@@ -7,7 +7,7 @@ export const RawFileDetails = (props): ReactElement => {
  const { rawFileDetails, inferredMetadata } = props.data;
  return (
    <>
-      <div className="comic-detail raw-file-details column is-three-fifths">
+      <div className="comic-detail raw-file-details column is-three-quarters">
        <dl>
          <dt>Raw File Details</dt>
          <dd className="is-size-7">
@@ -103,4 +103,4 @@ RawFileDetails.propTypes = {
      }),
    }),
  }),
-};
+};
--- a/src/client/components/Downloads/Downloads.tsx
+++ b/src/client/components/Downloads/Downloads.tsx
@@ -1,13 +1,5 @@
-import React, {
-  ReactElement,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import React, { ReactElement, useEffect, useState } from "react";
 import { getTransfers } from "../../actions/airdcpp.actions";
-import { useDispatch, useSelector } from "react-redux";
-import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import MetadataPanel from "../shared/MetadataPanel";
@@ -17,18 +9,18 @@ interface IDownloadsProps {
 }

 export const Downloads = (props: IDownloadsProps): ReactElement => {
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  // const airDCPPConfiguration = useContext(AirDCPPSocketContext);
  const {
    airDCPPState: { settings, socket },
  } = airDCPPConfiguration;
-  const dispatch = useDispatch();
+  // const dispatch = useDispatch();

-  const airDCPPTransfers = useSelector(
-    (state: RootState) => state.airdcpp.transfers,
-  );
-  const issueBundles = useSelector(
-    (state: RootState) => state.airdcpp.issue_bundles,
-  );
+  // const airDCPPTransfers = useSelector(
+  //   (state: RootState) => state.airdcpp.transfers,
+  // );
+  // const issueBundles = useSelector(
+  //   (state: RootState) => state.airdcpp.issue_bundles,
+  // );
  const [bundles, setBundles] = useState([]);
  // Make the call to get all transfers from AirDC++
  useEffect(() => {
--- a/src/client/components/Import/Import.tsx
+++ b/src/client/components/Import/Import.tsx
@@ -226,7 +226,7 @@ export const Import = (props: IProps): ReactElement => {
        {!isLoading && !isEmpty(data?.data) && (
          <>
            <h3 className="subtitle is-4 mt-5">Past Imports</h3>
-            <table className="table">
+            <table className="table is-striped">
              <thead>
                <tr>
                  <th>Time Started</th>
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
@@ -35,19 +35,16 @@ export const AirDCPPHubsForm = (): ReactElement => {
   * Get the hubs list from an AirDCPP Socket
   */
  const { data: hubs } = useQuery({
-    queryKey: [],
+    queryKey: ["hubs"],
    queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
-    enabled: !!settings,
  });
  let hubList = {};
-  if (!isEmpty(hubs)) {
-    console.log("hs", hubs);
+  if (!isNil(hubs)) {
    hubList = hubs.map(({ hub_url, identity }) => ({
      value: hub_url,
      label: identity.name,
    }));
  }
-  console.log(hubList);
  const { mutate } = useMutation({
    mutationFn: async (values) =>
      await axios({
--- a/src/client/store/index.ts
+++ b/src/client/store/index.ts
@@ -23,6 +23,7 @@ export const useStore = create((set, get) => ({
      airDCPPSocketConnected: value,
    })),
  airDCPPDownloadTick: {},
+  airDCPPTransfers: {},
  // Socket.io state
  socketIOInstance: {},

--- a/yarn.lock
+++ b/yarn.lock
@@ -4310,6 +4310,11 @@ builtin-modules@^3.3.0:
  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
  integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==

+bulma-prefers-dark@^0.1.0-beta.1:
+  version "0.1.0-beta.1"
+  resolved "https://registry.yarnpkg.com/bulma-prefers-dark/-/bulma-prefers-dark-0.1.0-beta.1.tgz#074aa71899f389a0137dd3753f0d89e96ab1e59b"
+  integrity sha512-ti4sKxIIrTAvGtsYc9Rk66SUZSH/j63EU1hApQijQVlKFF0qBLGSb8E16HhI83KJaIeYP4aAHQv2tj0ara831A==
+
 bulma@^0.9.4:
  version "0.9.4"
  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1"
Author	SHA1	Message	Date
Rishi Ghan	d36138c800	Update App.scss	2023-12-03 22:46:49 -05:00
Rishi Ghan	1ed6a622d4	🌜 Trying dark mode on the react-select	2023-12-03 16:02:54 -05:00
Rishi Ghan	29e0772a10	🌜 Initial Dark Mode support	2023-12-03 15:28:05 -05:00
Rishi Ghan	57b713aca1	🏗️ Refactored the AirDC++ download panel	2023-12-02 11:38:17 -05:00
Rishi Ghan	dfd99e45b6	🔧 Implementing download method	2023-11-29 23:24:34 -05:00
Rishi Ghan	591ecb394c	🔧 Formatted the search query box	2023-11-29 23:08:00 -05:00
Rishi Ghan	145427d3fd	🏗️ Acquisition Panel refactor WIP	2023-11-29 21:22:48 -05:00