diff --git a/.babelrc b/.babelrc index 85009b1..9a8f9a2 100644 --- a/.babelrc +++ b/.babelrc @@ -7,7 +7,8 @@ "plugins": [ "react-hot-loader/babel", "@babel/transform-runtime", - "@babel/plugin-proposal-class-properties" + "@babel/plugin-proposal-class-properties", + "@babel/plugin-syntax-top-level-await" ], "env": { "production": { diff --git a/package.json b/package.json index 5f8a007..830c6b3 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ "devDependencies": { "@babel/cli": "^7.13.10", "@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", diff --git a/src/client/components/AcquisitionPanel.tsx b/src/client/components/AcquisitionPanel.tsx index a611a2d..7458ea0 100644 --- a/src/client/components/AcquisitionPanel.tsx +++ b/src/client/components/AcquisitionPanel.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, ReactElement } from "react"; +import React, { useCallback, useEffect, useState, ReactElement } from "react"; import { search, downloadAirDCPPItem, @@ -7,8 +7,9 @@ import { import { useDispatch, useSelector } from "react-redux"; import { RootState, SearchInstance } from "threetwo-ui-typings"; import ellipsize from "ellipsize"; -import { isEmpty, isNil, map } from "lodash"; - +import { isEmpty, isNil, isUndefined, map } from "lodash"; +import { getSettings } from "../actions/settings.actions"; +import AirDCPPSocket from "../services/DcppSearchService"; interface IAcquisitionPanelProps { comicBookMetadata: any; } @@ -20,6 +21,10 @@ export const AcquisitionPanel = ( props.comicBookMetadata.sourcedMetadata.comicvine.volumeInformation.name; const sanitizedVolumeName = volumeName.replace(/[^a-zA-Z0-9 ]/g, ""); const issueName = props.comicBookMetadata.sourcedMetadata.comicvine.name; + + // local state + const [ADCPPSocket, setADCPPSocket] = useState({}); + // Selectors for picking state const airDCPPSearchResults = useSelector((state: RootState) => { return state.airdcpp.searchResults; }); @@ -32,8 +37,22 @@ export const AcquisitionPanel = ( const searchInstance: SearchInstance = useSelector( (state: RootState) => state.airdcpp.searchInstance, ); + const airDCPPClientSettings = useSelector( + (state: RootState) => state.settings.data, + ); const dispatch = useDispatch(); + useEffect(() => { + dispatch(getSettings()); + if (!isUndefined(airDCPPClientSettings[0])) { + const dcppSocket = new AirDCPPSocket({ + hostname: `${airDCPPClientSettings[0].directConnect.client.hostname}`, + }); + setADCPPSocket(dcppSocket); + } + }, [dispatch, airDCPPClientSettings.length]); + + console.log(ADCPPSocket); const getDCPPSearchResults = useCallback( (searchQuery) => { dispatch(search(searchQuery)); diff --git a/src/client/components/AirDCPPSettingsForm.tsx b/src/client/components/AirDCPPSettingsForm.tsx index baaa75f..a70577e 100644 --- a/src/client/components/AirDCPPSettingsForm.tsx +++ b/src/client/components/AirDCPPSettingsForm.tsx @@ -51,7 +51,9 @@ export const AirDCPPSettingsForm = (): ReactElement => {