frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🔧 Various AirDCPPSocketContext-related fixes

Browse Source
This commit is contained in:
Rishi Ghan
2022-06-10 18:39:27 -07:00
parent a73250d99c
commit f308ec0f01
14 changed files with 264 additions and 961 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.babelrc
View File

@@ -5,7 +5,6 @@
"@babel/preset-typescript"
],
"plugins": [
"react-hot-loader/babel",
"@babel/transform-runtime",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-top-level-await"

1
.gitignore vendored
View File

@@ -17,3 +17,4 @@ environment.list
.env
src/client/assets/img/missing-file.pxd
*.pxd
.parcel-cache

20
jsdoc.json
View File

@@ -1,7 +1,15 @@
{
"tags": { "allowUnknownTags": true },
"tags": {
"allowUnknownTags": true,
"dictionaries": [
"jsdoc",
"closure"
]
},
"source": {
"include": ["./src/"],
"include": [
"./src/"
],
"includePattern": "\\.(jsx|js|ts|tsx)$"
},
"plugins": [
@@ -10,7 +18,11 @@
"plugins/markdown",
"node_modules/better-docs/typescript"
],
"templates": { "better-docs": { "name": "My React components" } },
"templates": {
"better-docs": {
"name": "ThreeTwo UI components"
}
},
"opts": {
"destination": "docs/",
"readme": "README.md",
@@ -19,4 +31,4 @@
"verbose": true,
"template": "node_modules/better-docs"
}
}
}

30
package.json
View File

@@ -21,6 +21,7 @@
"@dnd-kit/core": "^4.0.0",
"@dnd-kit/sortable": "^5.0.0",
"@fortawesome/fontawesome-free": "^6.1.1",
"@redux-devtools/extension": "^3.2.2",
"@types/mime-types": "^2.1.0",
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.2",
@@ -33,12 +34,12 @@
"array-sort-by": "^1.2.1",
"axios-simple-cache-adapter": "^1.1.0",
"babel-polyfill": "^6.26.0",
"better-docs": "^2.3.2",
"comlink-loader": "^2.0.0",
"compromise": "^13.11.3",
"compromise-dates": "^2.2.1",
"compromise-numbers": "^1.4.0",
"compromise-sentences": "^0.3.0",
"date-fns": "^2.28.0",
"dayjs": "^1.10.6",
"ellipsize": "^0.1.0",
"express": "^4.17.1",
@@ -47,42 +48,37 @@
"final-form": "^4.20.2",
"final-form-arrays": "^3.0.2",
"html-to-text": "^8.1.0",
"jsdoc": "^3.6.7",
"opds-extra": "^3.0.9",
"pretty-bytes": "^5.6.0",
"react": "^18.1.0",
"react-collapsible": "^2.8.3",
"react-collapsible": "^2.9.0",
"react-comic-viewer": "^0.3.5",
"react-datepicker": "^4.5.0",
"react-day-picker": "^8.0.6",
"react-dom": "^18.1.0",
"react-fast-compare": "^3.2.0",
"react-final-form": "^6.5.3",
"react-final-form-arrays": "^3.1.3",
"react-hot-loader": "^4.13.0",
"react-loader-spinner": "^4.0.0",
"react-masonry-css": "^1.0.16",
"react-modal": "^3.15.1",
"react-notification-system": "^0.4.0",
"react-notification-system-redux": "^2.0.1",
"react-redux": "^7.2.6",
"react-router": "^6.2.2",
"react-router-dom": "^6.2.2",
"react-select": "^5.3.2",
"react-select-async-paginate": "^0.6.1",
"react-slick": "^0.28.1",
"react-sliding-pane": "^7.0.0",
"react-slick": "^0.29.0",
"react-sliding-pane": "^7.1.0",
"react-stickynode": "^4.0.0",
"react-table": "^7.7.0",
"react-textarea-autosize": "^8.3.3",
"react-window-dynamic-list": "^2.3.5",
"redux-devtools-extension": "^2.13.9",
"redux-first-history": "^5.0.8",
"react-table": "^7.8.0",
"react-textarea-autosize": "^8.3.4",
"reapop": "^4.0.5",
"redux-first-history": "^5.0.9",
"redux-socket.io-middleware": "^1.0.4",
"redux-thunk": "^2.4.1",
"sharp": "^0.30.5",
"slick-carousel": "^1.8.1",
"socket.io-client": "^4.3.2",
"styled-components": "^5.3.3",
"styled-components": "^5.3.5",
"threetwo-ui-typings": "^1.0.14",
"voca": "^1.4.0",
"websocket": "^1.0.34",
@@ -98,6 +94,7 @@
"@babel/preset-env": "^7.13.10",
"@babel/preset-react": "^7.12.13",
"@babel/preset-typescript": "^7.13.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
"@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
"@tsconfig/node14": "^1.0.0",
"@types/express": "^4.17.8",
@@ -148,6 +145,7 @@
"npm": "^8.11.0",
"prettier": "^2.2.1",
"qs": "^6.10.1",
"react-refresh": "^0.13.0",
"rimraf": "^3.0.2",
"sass-loader": "^11.0.1",
"source-map-loader": "^0.2.4",
@@ -156,7 +154,7 @@
"tslint": "^6.1.3",
"typescript": "^4.2.3",
"url-loader": "^1.0.1",
"webpack": "^5.70.0",
"webpack": "^5.73.0",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^4.7.4",

71
src/client/components/App.tsx
View File

@@ -17,65 +17,18 @@ import Downloads from "./Downloads/Downloads";
import { Routes, Route } from "react-router-dom";
import Navbar from "./Navbar";
import "../assets/scss/App.scss";
import Notifications from "react-notification-system-redux";
import {
AirDCPPSocketContextProvider,
AirDCPPSocketContext,
} from "../context/AirDCPPSocket";
import { isNil } from "lodash";
//Optional styling
const style = {
Containers: {
DefaultStyle: {
fontFamily: "inherit",
position: "fixed",
padding: "0 10px 10px 10px",
zIndex: 9998,
WebkitBoxSizing: "border-box",
MozBoxSizing: "border-box",
boxSizing: "border-box",
height: "auto",
},
tr: {
top: "40px",
right: "10px",
},
},
Title: {
DefaultStyle: {
fontSize: "14px",
margin: "0 0 5px 0",
padding: 0,
fontWeight: "bold",
},
success: {
color: "hsl(141, 71%, 48%)",
},
},
NotificationItem: {
// Override the notification item
success: {
// Applied to every notification, regardless of the notification level
borderTop: "none",
backgroundColor: "#FFF",
borderRadius: "0.4rem",
WebkitBoxShadow: "-7px 11px 25px -9px rgba(0, 0, 0, 0.3)",
MozBoxShadow: "-7px 11px 25px -9px rgba(0, 0, 0, 0.3)",
boxShadow: "-7px 11px 25px -9px rgba(0, 0, 0, 0.3)",
},
},
};
export const App = (): ReactElement => {
const notifications = useSelector((state: RootState) => state.notifications);
import { isEmpty, isNil, isUndefined } from "lodash";
const AirDCPPSocketComponent = (): ReactElement => {
const airDCPPConfiguration = useContext(AirDCPPSocketContext);
const { AirDCPPSocket } = airDCPPConfiguration;
const { AirDCPPSocket, settings } = airDCPPConfiguration;
useEffect(() => {
const addQueueListener = async () => {
if (!isNil(AirDCPPSocket)) {
const foo = async () => {
if (!isUndefined(AirDCPPSocket)) {
await AirDCPPSocket.addListener(
"queue",
"queue_bundle_added",
@@ -86,18 +39,16 @@ export const App = (): ReactElement => {
);
}
};
addQueueListener();
}, [AirDCPPSocket]);
foo();
}, [settings]);
return <></>;
};
export const App = (): ReactElement => {
return (
<AirDCPPSocketContextProvider>
<div>
<AirDCPPSocketComponent />
<Navbar />
<Notifications
notifications={notifications}
style={style}
newOnTop={true}
allowHTML={true}
/>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/import" element={<Import path={"./comics"} />} />

2
src/client/components/ComicDetail/AcquisitionPanel.tsx
View File

@@ -49,7 +49,7 @@ export const AcquisitionPanel = (
const { AirDCPPSocket, settings } = airDCPPConfiguration;
const dispatch = useDispatch();
const [dcppQuery, setDcppQuery] = useState({});
console.log(airDCPPConfiguration)
useEffect(() => {
if (!isNil(settings)) {
// AirDC++ search query

8
src/client/components/ComicDetail/EditMetadataPanel.tsx
View File

@@ -3,17 +3,13 @@ import { useSelector, useDispatch } from "react-redux";
import { Form, Field } from "react-final-form";
import arrayMutators from "final-form-arrays";
import { FieldArray } from "react-final-form-arrays";
import DatePicker from "react-datepicker";
import AsyncSelectPaginate from "./AsyncSelectPaginate/AsyncSelectPaginate";
import TextareaAutosize from "react-textarea-autosize";
import "react-datepicker/dist/react-datepicker.css";
export const EditMetadataPanel = (props): ReactElement => {
const validate = async () => {};
const onSubmit = async () => {};
const DayPickerAdapter = ({ input, ...rest }) => {
return <DatePicker {...input} {...rest} placeholderText={"Cover Date"} />;
};
const AsyncSelectPaginateAdapter = ({ input, ...rest }) => {
return (
<AsyncSelectPaginate
@@ -101,7 +97,7 @@ export const EditMetadataPanel = (props): ReactElement => {
<p className="control">
<Field
name="issue_year"
component={DayPickerAdapter}
component="input"
className="input"
/>
</p>

23
src/client/components/Dashboard/RecentlyImported.tsx
View File

@@ -6,7 +6,6 @@ import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
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,
determineExternalMetadata,
@@ -43,14 +42,17 @@ export const RecentlyImported = ({
>
{map(
comicBookCovers.docs,
({
_id,
rawFileDetails,
sourcedMetadata: { comicvine, comicInfo, locg },
acquisition: {
source: { name },
(
{
_id,
rawFileDetails,
sourcedMetadata: { comicvine, comicInfo, locg },
acquisition: {
source: { name },
},
},
}) => {
idx,
) => {
const { issueName, url } = determineCoverFile({
rawFileDetails,
comicvine,
@@ -73,9 +75,8 @@ export const RecentlyImported = ({
</Link>
);
return (
<>
<React.Fragment key={_id}>
<Card
key={_id}
orientation={"vertical"}
imageUrl={url}
hasDetails
@@ -138,7 +139,7 @@ export const RecentlyImported = ({
</dd>
</Card>
) : null}
</>
</React.Fragment>
);
},
)}

1
src/client/components/Import.tsx
View File

@@ -4,7 +4,6 @@ import {
fetchComicBookMetadata,
toggleImportQueueStatus,
} from "../actions/fileops.actions";
import DynamicList, { createCache } from "react-window-dynamic-list";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import Loader from "react-loader-spinner";

53
src/client/context/AirDCPPSocket.tsx
View File

@@ -1,40 +1,53 @@
import axios from "axios";
import React, { createContext, useEffect, useState } from "react";
import React, { createContext, useEffect, useMemo, useState } from "react";
import { SETTINGS_SERVICE_BASE_URI } from "../constants/endpoints";
import AirDCPPSocket from "../services/DcppSearchService";
/**
* Component for setting up and sharing the AirDC++ socket context.
*
* @component
* @example
* const age = 21
* const name = 'Jitendra Nirnejak'
* return (
* <User age={age} name={name} />
* )
*/
const AirDCPPSocketContext = createContext({});
const AirDCPPSocketContextProvider = ({ children }) => {
const [airDCPPConfiguration, setValue] = useState({});
useEffect(() => {
const initializeAirDCPPSocket = () => {
axios({
url: `${SETTINGS_SERVICE_BASE_URI}/getSettings`,
method: "POST",
data: "",
}).then(async (data) => {
const { directConnect } = data.data;
const initializedAirDCPPSocket = new AirDCPPSocket({
protocol: `${directConnect.client.host.protocol}`,
hostname: `${directConnect.client.host.hostname}`,
});
await initializedAirDCPPSocket.connect(
`${directConnect.client.host.username}`,
`${directConnect.client.host.password}`,
true,
);
setValue({
AirDCPPSocket: initializedAirDCPPSocket,
settings: data.data,
});
});
})
.then(async (data) => {
const { directConnect } = data.data;
const initializedAirDCPPSocket = new AirDCPPSocket({
protocol: `${directConnect.client.host.protocol}`,
hostname: `${directConnect.client.host.hostname}`,
});
await initializedAirDCPPSocket.connect(
`${directConnect.client.host.username}`,
`${directConnect.client.host.password}`,
true,
);
setValue({
AirDCPPSocket: initializedAirDCPPSocket,
settings: data.data,
});
})
.catch((error) => console.log(error));
};
initializeAirDCPPSocket();
}, []);
// the Provider gives access to the context to its children
console.log(airDCPPConfiguration);
return (
<AirDCPPSocketContext.Provider value={airDCPPConfiguration}>
{children}

2
src/client/reducers/index.js
View File

@@ -2,10 +2,8 @@ import comicinfoReducer from "../reducers/comicinfo.reducer";
import fileOpsReducer from "../reducers/fileops.reducer";
import airdcppReducer from "../reducers/airdcpp.reducer";
import settingsReducer from "../reducers/settings.reducer";
import { reducer as notifications } from "react-notification-system-redux";
export const reducers = {
notifications,
comicInfo: comicinfoReducer,
fileOps: fileOpsReducer,
airdcpp: airdcppReducer,

2
src/client/store/index.ts
View File

@@ -1,6 +1,6 @@
import { createStore, combineReducers, applyMiddleware } from "redux";
import { createHashHistory } from "history";
import { composeWithDevTools } from "redux-devtools-extension";
import { composeWithDevTools } from "@redux-devtools/extension";
import thunk from "redux-thunk";
import { createReduxHistoryContext } from "redux-first-history";
import { reducers } from "../reducers/index";

17
webpack.config.js
View File

@@ -5,8 +5,10 @@ const webpack = require("webpack");
const outputDirectory = "dist";
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const isDevelopment = process.env.NODE_ENV !== "production";
const HMRPlugin = isDevelopment ? new ReactRefreshWebpackPlugin() : [];
module.exports = () => {
return {
entry: ["babel-polyfill", "./src/client/index.tsx"],
@@ -36,7 +38,16 @@ module.exports = () => {
},
{
test: [/\.js?$/, /\.jsx?$/, /\.tsx?$/],
use: ["babel-loader"],
use: [
{
loader: "babel-loader",
options: {
plugins: [
isDevelopment && require.resolve("react-refresh/babel"),
].filter(Boolean),
},
},
],
exclude: /node_modules/,
},
{
@@ -72,6 +83,7 @@ module.exports = () => {
extensions: ["*", ".ts", ".tsx", ".js", ".jsx", ".json"],
aliasFields: ["browser", "browser.esm"],
},
mode: isDevelopment ? "development" : "production",
devServer: {
hot: true,
port: 3050,
@@ -88,6 +100,7 @@ module.exports = () => {
usedExports: false,
},
plugins: [
HMRPlugin,
// new BundleAnalyzerPlugin(),
new CopyPlugin({
patterns: [{ from: "./src/client/assets/img/", to: "img/" }],

994
yarn.lock
View File

File diff suppressed because it is too large Load Diff