🌊 qBittorrent Settings Scaffold (#90)
* 🌊 qBittorrent settings scaffold * 🔧 Added scaffold for the qBittorrent connection form * 🔧 Some refactoring * 🔧 Cleaned up folder structure * 🔧 Fixed broken paths * 🔧 Cleaned up Search and Import component hierarchy * 🔧 More path fixes * 🔧 Tooling changes * 📝 Qbittorrent form scaffold * ⬆️ Bumped @dnd-kit deps * 🧑🏼🔧 Fixed the hostname regex * 🏗️ Adding fields to the settings form * 🔧 Formatting and more layout changes * 🔧 Added Prowlarr settings items in JSON * 📝 Purified Card Component * 📝 Abstracted connection form into a component * 🏗️ Reorganized tabs * Migrating from Redux to RTK-query * ⬇️ Fetched qBittorrent settings * 🏗️ Trying out react-query * 🧩 Added react-query query to qBittorrentSettings page * 📝 qbittorrent form RU actions first draft * 🏗️ Added loading state check * 🏗 Added error check state * 🏗️ Refactored AirDCPP context using react-query * 🏗️ Refactoring AirDCPP Settings Form with react-query * 🔧 Removed context * 🔧 Removing context from AirDCPP settings page * 🔧 Fixed early init error on the store * 🐛 Debugging AirDCPP Settings Form page * 🧸 Zustand-ified AirDCPP Form * ❌ AirDCPP code cleaned up from App.tsx * ➕ Re-added yarn.lock
This commit was merged in pull request #90.
This commit is contained in:
GitHub
@@ -1,21 +1,18 @@
|
||||
import React, { ReactElement, useContext, useEffect } from "react";
|
||||
import Dashboard from "./Dashboard/Dashboard";
|
||||
import Import from "./Import";
|
||||
import Import from "./Import/Import";
|
||||
import { ComicDetailContainer } from "./ComicDetail/ComicDetailContainer";
|
||||
import TabulatedContentContainer from "./Library/TabulatedContentContainer";
|
||||
import LibraryGrid from "./Library/LibraryGrid";
|
||||
import Search from "./Search";
|
||||
import Settings from "./Settings";
|
||||
import Search from "./Search/Search";
|
||||
import Settings from "./Settings/Settings";
|
||||
import VolumeDetail from "./VolumeDetail/VolumeDetail";
|
||||
import Downloads from "./Downloads/Downloads";
|
||||
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import Navbar from "./Navbar";
|
||||
import Navbar from "./shared/Navbar";
|
||||
import "../assets/scss/App.scss";
|
||||
import {
|
||||
AirDCPPSocketContextProvider,
|
||||
AirDCPPSocketContext,
|
||||
} from "../context/AirDCPPSocket";
|
||||
|
||||
import { SocketIOProvider } from "../context/SocketIOContext";
|
||||
import socketIOConnectionInstance from "../shared/socket.io/instance";
|
||||
import { isEmpty, isNil, isUndefined } from "lodash";
|
||||
@@ -23,7 +20,6 @@ import {
|
||||
AIRDCPP_DOWNLOAD_PROGRESS_TICK,
|
||||
LS_SINGLE_IMPORT,
|
||||
} from "../constants/action-types";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
/**
|
||||
* Method that initializes an AirDC++ socket connection
|
||||
@@ -31,131 +27,26 @@ import { useDispatch, useSelector } from "react-redux";
|
||||
* 2. Handles errors in case the connection to AirDC++ is not established or terminated
|
||||
* @returns void
|
||||
*/
|
||||
const AirDCPPSocketComponent = (): ReactElement => {
|
||||
const airDCPPConfiguration = useContext(AirDCPPSocketContext);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
const initializeAirDCPPEventListeners = async () => {
|
||||
if (
|
||||
!isUndefined(airDCPPConfiguration.airDCPPState) &&
|
||||
!isEmpty(airDCPPConfiguration.airDCPPState.settings) &&
|
||||
!isEmpty(airDCPPConfiguration.airDCPPState.socket)
|
||||
) {
|
||||
await airDCPPConfiguration.airDCPPState.socket.addListener(
|
||||
"queue",
|
||||
"queue_bundle_added",
|
||||
async (data) => {
|
||||
console.log("JEMEN:", data);
|
||||
},
|
||||
);
|
||||
// download tick listener
|
||||
await airDCPPConfiguration.airDCPPState.socket.addListener(
|
||||
`queue`,
|
||||
"queue_bundle_tick",
|
||||
async (downloadProgressData) => {
|
||||
dispatch({
|
||||
type: AIRDCPP_DOWNLOAD_PROGRESS_TICK,
|
||||
downloadProgressData,
|
||||
});
|
||||
},
|
||||
);
|
||||
// download complete listener
|
||||
await airDCPPConfiguration.airDCPPState.socket.addListener(
|
||||
`queue`,
|
||||
"queue_bundle_status",
|
||||
async (bundleData) => {
|
||||
let count = 0;
|
||||
if (bundleData.status.completed && bundleData.status.downloaded) {
|
||||
// dispatch the action for raw import, with the metadata
|
||||
if (count < 1) {
|
||||
console.log(`[AirDCPP]: Download complete.`);
|
||||
dispatch({
|
||||
type: LS_SINGLE_IMPORT,
|
||||
meta: { remote: true },
|
||||
data: bundleData,
|
||||
});
|
||||
count += 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
console.log(
|
||||
"[AirDCPP]: Listener registered - listening to queue bundle download ticks",
|
||||
);
|
||||
console.log(
|
||||
"[AirDCPP]: Listener registered - listening to queue bundle changes",
|
||||
);
|
||||
console.log(
|
||||
"[AirDCPP]: Listener registered - listening to transfer completion",
|
||||
);
|
||||
}
|
||||
};
|
||||
initializeAirDCPPEventListeners();
|
||||
}, [airDCPPConfiguration]);
|
||||
return <></>;
|
||||
};
|
||||
export const App = (): ReactElement => {
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
// Check if there is a sessionId in localStorage
|
||||
const sessionId = localStorage.getItem("sessionId");
|
||||
if (!isNil(sessionId)) {
|
||||
// Resume the session
|
||||
dispatch({
|
||||
type: "RESUME_SESSION",
|
||||
meta: { remote: true },
|
||||
session: { sessionId },
|
||||
});
|
||||
} else {
|
||||
// Inititalize the session and persist the sessionId to localStorage
|
||||
socketIOConnectionInstance.on("sessionInitialized", (sessionId) => {
|
||||
localStorage.setItem("sessionId", sessionId);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<SocketIOProvider socket={socketIOConnectionInstance}>
|
||||
<AirDCPPSocketContextProvider>
|
||||
<div>
|
||||
<AirDCPPSocketComponent />
|
||||
<Navbar />
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/import" element={<Import path={"./comics"} />} />
|
||||
<Route
|
||||
path="/library"
|
||||
element={<TabulatedContentContainer category="library" />}
|
||||
/>
|
||||
<Route path="/library-grid" element={<LibraryGrid />} />
|
||||
<Route path="/downloads" element={<Downloads data={{}} />} />
|
||||
<Route path="/search" element={<Search />} />
|
||||
<Route
|
||||
path={"/comic/details/:comicObjectId"}
|
||||
element={<ComicDetailContainer />}
|
||||
/>
|
||||
<Route
|
||||
path={"/volume/details/:comicObjectId"}
|
||||
element={<VolumeDetail />}
|
||||
/>
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
<Route
|
||||
path="/pull-list/all"
|
||||
element={<TabulatedContentContainer category="pullList" />}
|
||||
/>
|
||||
<Route
|
||||
path="/wanted/all"
|
||||
element={<TabulatedContentContainer category="wanted" />}
|
||||
/>
|
||||
<Route
|
||||
path="/volumes/all"
|
||||
element={<TabulatedContentContainer category="volumes" />}
|
||||
/>
|
||||
</Routes>
|
||||
</div>
|
||||
</AirDCPPSocketContextProvider>
|
||||
</SocketIOProvider>
|
||||
);
|
||||
// useEffect(() => {
|
||||
// // Check if there is a sessionId in localStorage
|
||||
// const sessionId = localStorage.getItem("sessionId");
|
||||
// if (!isNil(sessionId)) {
|
||||
// // Resume the session
|
||||
// dispatch({
|
||||
// type: "RESUME_SESSION",
|
||||
// meta: { remote: true },
|
||||
// session: { sessionId },
|
||||
// });
|
||||
// } else {
|
||||
// // Inititalize the session and persist the sessionId to localStorage
|
||||
// socketIOConnectionInstance.on("sessionInitialized", (sessionId) => {
|
||||
// localStorage.setItem("sessionId", sessionId);
|
||||
// });
|
||||
// }
|
||||
// }, []);
|
||||
return <>{/* The rest of your application */}</>;
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import React, { useState, ReactElement, useCallback } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useParams } from "react-router-dom";
|
||||
import Card from "../Carda";
|
||||
import Card from "../shared/Carda";
|
||||
import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
|
||||
|
||||
import { RawFileDetails } from "./RawFileDetails";
|
||||
import { ComicVineSearchForm } from "../ComicVineSearchForm";
|
||||
import { ComicVineSearchForm } from "./ComicVineSearchForm";
|
||||
|
||||
import TabControls from "./TabControls";
|
||||
import { EditMetadataPanel } from "./EditMetadataPanel";
|
||||
@@ -198,8 +198,8 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: <i className="fa-solid fa-floppy-disk"></i>,
|
||||
name: "Acquisition",
|
||||
icon: <i className="fa-solid fa-circle-nodes"></i>,
|
||||
name: "DC++ Search",
|
||||
content: (
|
||||
<AcquisitionPanel
|
||||
query={airDCPPQuery}
|
||||
@@ -213,6 +213,13 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: <i className="fa-solid fa-droplet"></i>,
|
||||
name: "Torrent Search",
|
||||
content: <>Torrents</>,
|
||||
shouldShow: true,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
icon: null,
|
||||
name: !isEmpty(data.data) ? (
|
||||
<span className="download-tab-name">Downloads</span>
|
||||
@@ -290,7 +297,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
|
||||
<ComicViewer
|
||||
pages={extractedComicBook}
|
||||
direction="ltr"
|
||||
className={{closeButton: "border: 1px solid red;"}}
|
||||
className={{
|
||||
closeButton: "border: 1px solid red;",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
@@ -317,4 +326,4 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ComicDetail;
|
||||
export default ComicDetail;
|
||||
|
||||
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
|
||||
import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
|
||||
import dayjs from "dayjs";
|
||||
import { isUndefined } from "lodash";
|
||||
import Card from "../Carda";
|
||||
import Card from "../shared/Carda";
|
||||
export const ComicVineDetails = (props): ReactElement => {
|
||||
const { data, updatedAt } = props;
|
||||
return (
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import { ComicVineSearchForm } from "../ComicVineSearchForm";
|
||||
import MatchResult from "../MatchResult";
|
||||
import MatchResult from "./MatchResult";
|
||||
import { isEmpty } from "lodash";
|
||||
|
||||
export const ComicVineMatchPanel = (comicVineData): ReactElement => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useCallback } from "react";
|
||||
import { Form, Field } from "react-final-form";
|
||||
import Collapsible from "react-collapsible";
|
||||
import { fetchComicVineMatches } from "../actions/fileops.actions";
|
||||
import { fetchComicVineMatches } from "../../actions/fileops.actions";
|
||||
import { useDispatch } from "react-redux";
|
||||
|
||||
/**
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useCallback } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { isNil, map } from "lodash";
|
||||
import { applyComicVineMatch } from "../actions/comicinfo.actions";
|
||||
import { applyComicVineMatch } from "../../actions/comicinfo.actions";
|
||||
import { convert } from "html-to-text";
|
||||
import ellipsize from "ellipsize";
|
||||
|
||||
@@ -25,12 +25,15 @@ export const TabControls = (props): ReactElement => {
|
||||
>
|
||||
{/* Downloads tab and count badge */}
|
||||
<a>
|
||||
{id === 5 &&
|
||||
{id === 6 &&
|
||||
!isNil(comicBookDetailData.acquisition.directconnect) ? (
|
||||
<span className="download-icon-labels">
|
||||
<i className="fa-solid fa-download"></i>
|
||||
<span className="tag downloads-count is-info is-light">
|
||||
{comicBookDetailData.acquisition.directconnect.downloads.length}
|
||||
{
|
||||
comicBookDetailData.acquisition.directconnect.downloads
|
||||
.length
|
||||
}
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { ReactElement, useCallback, useState } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { DnD } from "../../DnD";
|
||||
import { DnD } from "../../shared/Draggable/DnD";
|
||||
import { isEmpty } from "lodash";
|
||||
import Sticky from "react-stickynode";
|
||||
import SlidingPane from "react-sliding-pane";
|
||||
|
||||
@@ -12,114 +12,53 @@ import {
|
||||
} from "../../actions/fileops.actions";
|
||||
import { getLibraryStatistics } from "../../actions/comicinfo.actions";
|
||||
import { isEmpty, isNil } from "lodash";
|
||||
import Header from "../Header";
|
||||
import Header from "../shared/Header";
|
||||
|
||||
export const Dashboard = (): ReactElement => {
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
dispatch(fetchVolumeGroups());
|
||||
dispatch(
|
||||
getComicBooks({
|
||||
paginationOptions: {
|
||||
page: 0,
|
||||
limit: 5,
|
||||
sort: { updatedAt: "-1" },
|
||||
},
|
||||
predicate: { "acquisition.source.wanted": false },
|
||||
comicStatus: "recent",
|
||||
}),
|
||||
);
|
||||
dispatch(
|
||||
getComicBooks({
|
||||
paginationOptions: {
|
||||
page: 0,
|
||||
limit: 5,
|
||||
sort: { updatedAt: "-1" },
|
||||
},
|
||||
predicate: { "acquisition.source.wanted": true },
|
||||
comicStatus: "wanted",
|
||||
}),
|
||||
);
|
||||
dispatch(getLibraryStatistics());
|
||||
}, []);
|
||||
|
||||
const recentComics = useSelector(
|
||||
(state: RootState) => state.fileOps.recentComics,
|
||||
);
|
||||
const wantedComics = useSelector(
|
||||
(state: RootState) => state.fileOps.wantedComics,
|
||||
);
|
||||
const volumeGroups = useSelector(
|
||||
(state: RootState) => state.fileOps.comicVolumeGroups,
|
||||
);
|
||||
|
||||
const libraryStatistics = useSelector(
|
||||
(state: RootState) => state.comicInfo.libraryStatistics,
|
||||
);
|
||||
// useEffect(() => {
|
||||
// dispatch(fetchVolumeGroups());
|
||||
// dispatch(
|
||||
// getComicBooks({
|
||||
// paginationOptions: {
|
||||
// page: 0,
|
||||
// limit: 5,
|
||||
// sort: { updatedAt: "-1" },
|
||||
// },
|
||||
// predicate: { "acquisition.source.wanted": false },
|
||||
// comicStatus: "recent",
|
||||
// }),
|
||||
// );
|
||||
// dispatch(
|
||||
// getComicBooks({
|
||||
// paginationOptions: {
|
||||
// page: 0,
|
||||
// limit: 5,
|
||||
// sort: { updatedAt: "-1" },
|
||||
// },
|
||||
// predicate: { "acquisition.source.wanted": true },
|
||||
// comicStatus: "wanted",
|
||||
// }),
|
||||
// );
|
||||
// dispatch(getLibraryStatistics());
|
||||
// }, []);
|
||||
//
|
||||
// const recentComics = useSelector(
|
||||
// (state: RootState) => state.fileOps.recentComics,
|
||||
// );
|
||||
// const wantedComics = useSelector(
|
||||
// (state: RootState) => state.fileOps.wantedComics,
|
||||
// );
|
||||
// const volumeGroups = useSelector(
|
||||
// (state: RootState) => state.fileOps.comicVolumeGroups,
|
||||
// );
|
||||
//
|
||||
// const libraryStatistics = useSelector(
|
||||
// (state: RootState) => state.comicInfo.libraryStatistics,
|
||||
// );
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="section">
|
||||
<h1 className="title">Dashboard</h1>
|
||||
|
||||
{!isEmpty(recentComics) ? (
|
||||
<>
|
||||
{/* Pull List */}
|
||||
<PullList issues={recentComics} />
|
||||
<>
|
||||
<div className="content mt-6">
|
||||
<Header
|
||||
headerContent="Import Activity"
|
||||
subHeaderContent="Results aggregated from the last import"
|
||||
iconClassNames="fa-solid fa-file-invoice mr-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<abbr title="Position">Pos</abbr>
|
||||
</th>
|
||||
<th>Team</th>
|
||||
<th>
|
||||
<abbr title="Played">Pld</abbr>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<td>38</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
|
||||
{/* Stats */}
|
||||
{!isEmpty(libraryStatistics) && (
|
||||
<LibraryStatistics stats={libraryStatistics} />
|
||||
)}
|
||||
{/* Wanted comics */}
|
||||
{!isEmpty(wantedComics) && (
|
||||
<WantedComicsList comics={wantedComics} />
|
||||
)}
|
||||
{/* Recent imports */}
|
||||
<RecentlyImported comicBookCovers={recentComics} />
|
||||
|
||||
{/* Volumes */}
|
||||
{!isEmpty(volumeGroups) && (
|
||||
<VolumeGroups volumeGroups={volumeGroups} />
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<ZeroState
|
||||
header={"Set the source directory"}
|
||||
message={
|
||||
"No comics were found! Please point ThreeTwo! to a directory..."
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { isNil, map } from "lodash";
|
||||
import React, { createRef, ReactElement, useCallback, useEffect } from "react";
|
||||
import Card from "../Carda";
|
||||
import Header from "../Header";
|
||||
import Card from "../shared/Carda";
|
||||
import Header from "../shared/Header";
|
||||
import Masonry from "react-masonry-css";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { getWeeklyPullList } from "../../actions/comicinfo.actions";
|
||||
@@ -21,7 +21,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
|
||||
useEffect(() => {
|
||||
dispatch(
|
||||
getWeeklyPullList({
|
||||
startDate: "2023-8-9",
|
||||
startDate: "2023-9-9",
|
||||
pageSize: "15",
|
||||
currentPage: "1",
|
||||
}),
|
||||
@@ -91,7 +91,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
|
||||
<div className="content">
|
||||
<Header headerContent="Discover"
|
||||
subHeaderContent="Pull List aggregated for the week from League Of Comic Geeks"
|
||||
iconClassNames="fa-solid fa-splotch mr-2"/>
|
||||
iconClassNames="fa-solid fa-binoculars mr-2"/>
|
||||
<div className="field is-grouped">
|
||||
{/* select week */}
|
||||
<div className="control">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import Card from "../Carda";
|
||||
import Card from "../shared/Carda";
|
||||
import { Link } from "react-router-dom";
|
||||
import ellipsize from "ellipsize";
|
||||
import { isEmpty, isNil, isUndefined, map } from "lodash";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import Card from "../Carda";
|
||||
import Card from "../shared/Carda";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import ellipsize from "ellipsize";
|
||||
import { isEmpty, isNil, isUndefined, map } from "lodash";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { debounce, isEmpty, map } from "lodash";
|
||||
import React, { ReactElement, useCallback, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import Card from "../Carda";
|
||||
import Card from "../shared/Carda";
|
||||
|
||||
import { searchIssue } from "../../actions/fileops.actions";
|
||||
import MetadataPanel from "../shared/MetadataPanel";
|
||||
|
||||
@@ -4,7 +4,7 @@ import {
|
||||
fetchComicBookMetadata,
|
||||
getImportJobResultStatistics,
|
||||
setQueueControl,
|
||||
} from "../actions/fileops.actions";
|
||||
} from "../../actions/fileops.actions";
|
||||
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
|
||||
import { format } from "date-fns";
|
||||
import Loader from "react-loader-spinner";
|
||||
@@ -12,7 +12,7 @@ import { useDispatch, useSelector } from "react-redux";
|
||||
import { getComicBooks } from "../../actions/fileops.actions";
|
||||
import { isNil, isEmpty, isUndefined } from "lodash";
|
||||
import Masonry from "react-masonry-css";
|
||||
import Card from "../Carda";
|
||||
import Card from "../shared/Carda";
|
||||
import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
|
||||
import { Link } from "react-router-dom";
|
||||
import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { ReactElement, useEffect, useMemo } from "react";
|
||||
import T2Table from "../shared/T2Table";
|
||||
import { getWeeklyPullList } from "../../actions/comicinfo.actions";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import Card from "../Carda";
|
||||
import Card from "../shared/Carda";
|
||||
import ellipsize from "ellipsize";
|
||||
import { isNil } from "lodash";
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import React, { useCallback, ReactElement } from "react";
|
||||
import { isNil, isEmpty } from "lodash";
|
||||
import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
|
||||
import { importToDB } from "../actions/fileops.actions";
|
||||
import { importToDB } from "../../actions/fileops.actions";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { comicinfoAPICall } from "../actions/comicinfo.actions";
|
||||
import { search } from "../services/api/SearchApi";
|
||||
import { comicinfoAPICall } from "../../actions/comicinfo.actions";
|
||||
import { search } from "../../services/api/SearchApi";
|
||||
import { Form, Field } from "react-final-form";
|
||||
import Card from "./Carda";
|
||||
import Card from "../shared/Carda";
|
||||
import ellipsize from "ellipsize";
|
||||
import { convert } from "html-to-text";
|
||||
import dayjs from "dayjs";
|
||||
@@ -3,8 +3,8 @@ import { Form, Field } from "react-final-form";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { isEmpty, isNil, isUndefined } from "lodash";
|
||||
import Select from "react-select";
|
||||
import { saveSettings } from "../../actions/settings.actions";
|
||||
import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
|
||||
import { saveSettings } from "../../../actions/settings.actions";
|
||||
import { AirDCPPSocketContext } from "../../../context/AirDCPPSocket";
|
||||
|
||||
export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
|
||||
const dispatch = useDispatch();
|
||||
@@ -2,7 +2,6 @@ import React, { ReactElement } from "react";
|
||||
|
||||
export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
|
||||
const { settings } = settingsObject;
|
||||
console.log(settings);
|
||||
return (
|
||||
<div className="mt-4 is-clearfix">
|
||||
<div className="card">
|
||||
@@ -0,0 +1,67 @@
|
||||
import React, { ReactElement, useCallback } from "react";
|
||||
import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
|
||||
import { isUndefined, isEmpty } from "lodash";
|
||||
import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
|
||||
import { useStore } from "../../../store/index";
|
||||
import { useShallow } from "zustand/react/shallow";
|
||||
|
||||
export const AirDCPPSettingsForm = (): ReactElement => {
|
||||
// cherry-picking selectors for:
|
||||
// 1. initial values for the form
|
||||
// 2. If initial values are present, get the socket information to display
|
||||
const {
|
||||
airDCPPSocketConnected,
|
||||
airDCPPDisconnectionInfo,
|
||||
airDCPPSocketConnectionInformation,
|
||||
airDCPPClientConfiguration,
|
||||
} = useStore(
|
||||
useShallow((state) => ({
|
||||
airDCPPSocketConnected: state.airDCPPSocketConnected,
|
||||
airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo,
|
||||
airDCPPClientConfiguration: state.airDCPPClientConfiguration,
|
||||
airDCPPSocketConnectionInformation:
|
||||
state.airDCPPSocketConnectionInformation,
|
||||
})),
|
||||
);
|
||||
|
||||
const onSubmit = useCallback(async (values) => {
|
||||
try {
|
||||
// airDCPPSettings.setSettings(values);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}, []);
|
||||
const removeSettings = useCallback(async () => {
|
||||
// airDCPPSettings.setSettings({});
|
||||
}, []);
|
||||
//
|
||||
const initFormData = !isUndefined(airDCPPClientConfiguration)
|
||||
? airDCPPClientConfiguration
|
||||
: {};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConnectionForm
|
||||
initialData={initFormData}
|
||||
submitHandler={onSubmit}
|
||||
formHeading={"Configure AirDC++"}
|
||||
/>
|
||||
|
||||
{!isEmpty(airDCPPSocketConnectionInformation) ? (
|
||||
<AirDCPPSettingsConfirmation
|
||||
settings={airDCPPSocketConnectionInformation}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{!isEmpty(airDCPPClientConfiguration) ? (
|
||||
<p className="control mt-4">
|
||||
<button className="button is-danger" onClick={removeSettings}>
|
||||
Delete
|
||||
</button>
|
||||
</p>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AirDCPPSettingsForm;
|
||||
@@ -0,0 +1,72 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export const QbittorrentConnectionForm = (): ReactElement => {
|
||||
// fetch settings
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ["settings"],
|
||||
queryFn: async () =>
|
||||
await axios({
|
||||
url: "http://localhost:3000/api/settings/getAllSettings",
|
||||
method: "GET",
|
||||
}),
|
||||
});
|
||||
const hostDetails = data?.data.bittorrent.client.host;
|
||||
// connect to qbittorrent client
|
||||
const { data: connectionDetails } = useQuery({
|
||||
queryKey: [],
|
||||
queryFn: async () =>
|
||||
await axios({
|
||||
url: "http://localhost:3060/api/qbittorrent/connect",
|
||||
method: "POST",
|
||||
data: hostDetails,
|
||||
}),
|
||||
enabled: !!hostDetails,
|
||||
});
|
||||
// get qbittorrent client info
|
||||
const { data: qbittorrentClientInfo } = useQuery({
|
||||
queryKey: ["qbittorrentClientInfo"],
|
||||
queryFn: async () =>
|
||||
await axios({
|
||||
url: "http://localhost:3060/api/qbittorrent/getClientInfo",
|
||||
method: "GET",
|
||||
}),
|
||||
enabled: !!connectionDetails,
|
||||
});
|
||||
console.log(qbittorrentClientInfo?.data);
|
||||
// Update action using a mutation
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: async (values) =>
|
||||
await axios({
|
||||
url: `http://localhost:3000/api/settings/saveSettings`,
|
||||
method: "POST",
|
||||
data: { settingsPayload: values, settingsKey: "bittorrent" },
|
||||
}),
|
||||
});
|
||||
|
||||
if (isError)
|
||||
return (
|
||||
<>
|
||||
<pre>Something went wrong connecting to qBittorrent.</pre>
|
||||
</>
|
||||
);
|
||||
if (!isLoading) {
|
||||
return (
|
||||
<>
|
||||
<ConnectionForm
|
||||
initialData={hostDetails}
|
||||
formHeading={"qBittorrent Configuration"}
|
||||
submitHandler={mutate}
|
||||
/>
|
||||
|
||||
<pre className="mt-5">
|
||||
{JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
|
||||
</pre>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default QbittorrentConnectionForm;
|
||||
@@ -1,9 +1,10 @@
|
||||
import React, { useState, ReactElement } from "react";
|
||||
import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
|
||||
import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
|
||||
import { QbittorrentConnectionForm } from "./QbittorrentSettings/QbittorrentConnectionForm";
|
||||
import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
|
||||
import { ServiceStatuses } from "./ServiceStatuses/ServiceStatuses";
|
||||
import settingsObject from "../constants/settings/settingsMenu.json";
|
||||
import { ServiceStatuses } from "../ServiceStatuses/ServiceStatuses";
|
||||
import settingsObject from "../../constants/settings/settingsMenu.json";
|
||||
import { isUndefined, map } from "lodash";
|
||||
|
||||
interface ISettingsProps {}
|
||||
@@ -13,7 +14,7 @@ export const Settings = (props: ISettingsProps): ReactElement => {
|
||||
const settingsContent = [
|
||||
{
|
||||
id: "adc-hubs",
|
||||
content: <div key="adc-hubs">{<AirDCPPHubsForm />}</div>,
|
||||
content: <div key="adc-hubs">{/* <AirDCPPHubsForm /> */}</div>,
|
||||
},
|
||||
{
|
||||
id: "adc-connection",
|
||||
@@ -23,17 +24,21 @@ export const Settings = (props: ISettingsProps): ReactElement => {
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "qbt-connection",
|
||||
content: (
|
||||
<div key="qbt-connection">
|
||||
<QbittorrentConnectionForm />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "core-service",
|
||||
content: <ServiceStatuses />,
|
||||
content: <>a</>,
|
||||
},
|
||||
{
|
||||
id: "flushdb",
|
||||
content: (
|
||||
<div key="flushdb">
|
||||
<SystemSettingsForm />
|
||||
</div>
|
||||
),
|
||||
content: <div key="flushdb">{/* <SystemSettingsForm /> */}</div>,
|
||||
},
|
||||
];
|
||||
return (
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { ReactElement, useCallback } from "react";
|
||||
import { flushDb } from "../../actions/settings.actions";
|
||||
import { flushDb } from "../../../actions/settings.actions";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
export const SystemSettingsForm = (): ReactElement => {
|
||||
@@ -2,7 +2,7 @@ import { isArray, map } from "lodash";
|
||||
import React, { useEffect, ReactElement } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { getComicBooksDetailsByIds } from "../../actions/comicinfo.actions";
|
||||
import { Card } from "../Carda";
|
||||
import { Card } from "../shared/Carda";
|
||||
import ellipsize from "ellipsize";
|
||||
import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
|
||||
import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
} from "../../actions/comicinfo.actions";
|
||||
import PotentialLibraryMatches from "./PotentialLibraryMatches";
|
||||
import Masonry from "react-masonry-css";
|
||||
import { Card } from "../Carda";
|
||||
import { Card } from "../shared/Carda";
|
||||
import SlidingPane from "react-sliding-pane";
|
||||
import { convert } from "html-to-text";
|
||||
import ellipsize from "ellipsize";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { ReactElement, useEffect, useMemo } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { searchIssue } from "../../actions/fileops.actions";
|
||||
import Card from "../Carda";
|
||||
import Card from "../shared/Carda";
|
||||
import T2Table from "../shared/T2Table";
|
||||
import ellipsize from "ellipsize";
|
||||
import { convert } from "html-to-text";
|
||||
|
||||
@@ -15,7 +15,7 @@ interface ICardProps {
|
||||
imageStyle?: PropTypes.object;
|
||||
}
|
||||
|
||||
const renderCard = (props): ReactElement => {
|
||||
const renderCard = (props: ICardProps): ReactElement => {
|
||||
switch (props.orientation) {
|
||||
case "horizontal":
|
||||
return (
|
||||
@@ -85,8 +85,8 @@ const renderCard = (props): ReactElement => {
|
||||
}
|
||||
};
|
||||
|
||||
export const Card = (props: ICardProps): ReactElement => {
|
||||
return renderCard(props);
|
||||
};
|
||||
export const Card = React.memo(
|
||||
(props: ICardProps): ReactElement => renderCard(props),
|
||||
);
|
||||
|
||||
export default Card;
|
||||
@@ -1,62 +1,22 @@
|
||||
import React, { ReactElement, useCallback, useContext } from "react";
|
||||
import React, { ReactElement } from "react";
|
||||
import { Form, Field } from "react-final-form";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { saveSettings, deleteSettings } from "../../actions/settings.actions";
|
||||
import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
|
||||
import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
|
||||
import { isUndefined, isEmpty, isNil } from "lodash";
|
||||
|
||||
export const AirDCPPSettingsForm = (): ReactElement => {
|
||||
const dispatch = useDispatch();
|
||||
const airDCPPSettings = useContext(AirDCPPSocketContext);
|
||||
|
||||
const hostValidator = (hostname: string): string | null => {
|
||||
const hostnameRegex = /[\W]+/gm;
|
||||
try {
|
||||
if (!isUndefined(hostname)) {
|
||||
const matches = hostname.match(hostnameRegex);
|
||||
return isNil(matches) && matches.length !== 0
|
||||
? hostname
|
||||
: "Invalid hostname; it should not contain special characters";
|
||||
}
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = useCallback(async (values) => {
|
||||
try {
|
||||
airDCPPSettings.setSettings(values);
|
||||
dispatch(
|
||||
saveSettings({
|
||||
host: values,
|
||||
}),
|
||||
);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}, []);
|
||||
const removeSettings = useCallback(async () => {
|
||||
airDCPPSettings.setSettings({});
|
||||
dispatch(deleteSettings());
|
||||
}, []);
|
||||
const validate = async () => {};
|
||||
const initFormData = !isUndefined(
|
||||
airDCPPSettings.airDCPPState.settings.directConnect,
|
||||
)
|
||||
? airDCPPSettings.airDCPPState.settings.directConnect.client.host
|
||||
: {};
|
||||
import { hostNameValidator } from "../../../shared/utils/validator.utils";
|
||||
import { isEmpty } from "lodash";
|
||||
|
||||
export const ConnectionForm = ({
|
||||
initialData,
|
||||
submitHandler,
|
||||
formHeading,
|
||||
}): ReactElement => {
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
onSubmit={onSubmit}
|
||||
validate={validate}
|
||||
initialValues={initFormData}
|
||||
onSubmit={submitHandler}
|
||||
initialValues={initialData}
|
||||
render={({ handleSubmit }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<h2>AirDC++ Connection Information</h2>
|
||||
<label className="label">AirDC++ Hostname</label>
|
||||
<h2>{formHeading}</h2>
|
||||
<label className="label">Hostname</label>
|
||||
<div className="field has-addons">
|
||||
<p className="control">
|
||||
<span className="select">
|
||||
@@ -68,13 +28,13 @@ export const AirDCPPSettingsForm = (): ReactElement => {
|
||||
</span>
|
||||
</p>
|
||||
<div className="control is-expanded">
|
||||
<Field name="hostname" validate={hostValidator}>
|
||||
<Field name="hostname" validate={hostNameValidator}>
|
||||
{({ input, meta }) => (
|
||||
<div>
|
||||
<input
|
||||
{...input}
|
||||
type="text"
|
||||
placeholder="AirDC++ hostname"
|
||||
placeholder="hostname"
|
||||
className="input"
|
||||
/>
|
||||
{meta.error && meta.touched && (
|
||||
@@ -91,14 +51,12 @@ export const AirDCPPSettingsForm = (): ReactElement => {
|
||||
name="port"
|
||||
component="input"
|
||||
className="input"
|
||||
placeholder="AirDC++ port"
|
||||
placeholder="port"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<div className="is-clearfix">
|
||||
<label className="label">Credentials</label>
|
||||
</div>
|
||||
<label className="label">Credentials</label>
|
||||
<div className="field-body">
|
||||
<div className="field">
|
||||
<p className="control is-expanded has-icons-left">
|
||||
@@ -125,9 +83,6 @@ export const AirDCPPSettingsForm = (): ReactElement => {
|
||||
<span className="icon is-small is-left">
|
||||
<i className="fa-solid fa-lock"></i>
|
||||
</span>
|
||||
<span className="icon is-small is-right">
|
||||
<i className="fas fa-check"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -135,28 +90,19 @@ export const AirDCPPSettingsForm = (): ReactElement => {
|
||||
<div className="field is-grouped">
|
||||
<p className="control">
|
||||
<button type="submit" className="button is-primary">
|
||||
{!isEmpty(initFormData) ? "Update" : "Save"}
|
||||
{!isEmpty(initialData) ? "Update" : "Save"}
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p className="control">
|
||||
<button type="submit" className="button is-danger">
|
||||
{!isEmpty(initialData) && "Delete"}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
/>
|
||||
{!isEmpty(airDCPPSettings.airDCPPState.socketConnectionInformation) ? (
|
||||
<AirDCPPSettingsConfirmation
|
||||
settings={airDCPPSettings.airDCPPState.socketConnectionInformation}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{!isEmpty(airDCPPSettings.airDCPPState.socketConnectionInformation) ? (
|
||||
<p className="control mt-4">
|
||||
<button className="button is-danger" onClick={removeSettings}>
|
||||
Delete
|
||||
</button>
|
||||
</p>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AirDCPPSettingsForm;
|
||||
@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import ellipsize from "ellipsize";
|
||||
import prettyBytes from "pretty-bytes";
|
||||
import { Card } from "../Carda";
|
||||
import { Card } from "../shared/Carda";
|
||||
import { convert } from "html-to-text";
|
||||
import { determineCoverFile } from "../../shared/utils/metadata.utils";
|
||||
import { find, isUndefined } from "lodash";
|
||||
|
||||
@@ -1,44 +1,11 @@
|
||||
import React, { useContext } from "react";
|
||||
import { SearchBar } from "./GlobalSearchBar/SearchBar";
|
||||
import { DownloadProgressTick } from "./ComicDetail/DownloadProgressTick";
|
||||
import { SearchBar } from "../GlobalSearchBar/SearchBar";
|
||||
import { DownloadProgressTick } from "../ComicDetail/DownloadProgressTick";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
import { isUndefined } from "lodash";
|
||||
import { format, fromUnixTime } from "date-fns";
|
||||
|
||||
const Navbar: React.FunctionComponent = (props) => {
|
||||
const downloadProgressTick = useSelector(
|
||||
(state: RootState) => state.airdcpp.downloadProgressData,
|
||||
);
|
||||
|
||||
const airDCPPSocketConnectionStatus = useSelector(
|
||||
(state: RootState) => state.airdcpp.isAirDCPPSocketConnected,
|
||||
);
|
||||
const airDCPPSessionInfo = useSelector(
|
||||
(state: RootState) => state.airdcpp.airDCPPSessionInfo,
|
||||
);
|
||||
const socketDisconnectionReason = useSelector(
|
||||
(state: RootState) => state.airdcpp.socketDisconnectionReason,
|
||||
);
|
||||
|
||||
// Import-related selector hooks
|
||||
const successfulImportJobCount = useSelector(
|
||||
(state: RootState) => state.fileOps.successfulJobCount,
|
||||
);
|
||||
const failedImportJobCount = useSelector(
|
||||
(state: RootState) => state.fileOps.failedJobCount,
|
||||
);
|
||||
|
||||
const lastQueueJob = useSelector(
|
||||
(state: RootState) => state.fileOps.lastQueueJob,
|
||||
);
|
||||
const libraryQueueImportStatus = useSelector(
|
||||
(state: RootState) => state.fileOps.LSQueueImportStatus,
|
||||
);
|
||||
|
||||
const allImportJobResults = useSelector(
|
||||
(state: RootState) => state.fileOps.importJobStatistics,
|
||||
);
|
||||
return (
|
||||
<nav className="navbar is-fixed-top">
|
||||
<div className="navbar-brand">
|
||||
@@ -88,8 +55,6 @@ const Navbar: React.FunctionComponent = (props) => {
|
||||
Downloads
|
||||
</Link>
|
||||
|
||||
<SearchBar />
|
||||
|
||||
<Link to="/search" className="navbar-item">
|
||||
Search ComicVine
|
||||
</Link>
|
||||
@@ -98,102 +63,7 @@ const Navbar: React.FunctionComponent = (props) => {
|
||||
<div className="navbar-end">
|
||||
<a className="navbar-item is-hidden-desktop-only"></a>
|
||||
|
||||
<div className="navbar-item has-dropdown is-hoverable">
|
||||
<a className="navbar-link is-arrowless">
|
||||
<i className="fa-solid fa-download"></i>
|
||||
{downloadProgressTick && <div className="pulsating-circle"></div>}
|
||||
</a>
|
||||
{!isUndefined(downloadProgressTick) ? (
|
||||
<div className="navbar-dropdown is-right is-boxed">
|
||||
<a className="navbar-item">
|
||||
<DownloadProgressTick data={downloadProgressTick} />
|
||||
</a>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{!isUndefined(libraryQueueImportStatus) &&
|
||||
location.hash !== "#/import" ? (
|
||||
<div className="navbar-item has-dropdown is-hoverable">
|
||||
<a className="navbar-link is-arrowless">
|
||||
<i className="fa-solid fa-file-import has-text-warning-dark"></i>
|
||||
</a>
|
||||
|
||||
<div className="navbar-dropdown is-right is-boxed">
|
||||
<a className="navbar-item">
|
||||
<ul>
|
||||
{successfulImportJobCount > 0 ? (
|
||||
<li className="mb-2">
|
||||
<span className="tag is-success mr-2">
|
||||
{successfulImportJobCount}
|
||||
</span>
|
||||
imported.
|
||||
</li>
|
||||
) : null}
|
||||
{failedImportJobCount > 0 ? (
|
||||
<li>
|
||||
<span className="tag is-danger mr-2">
|
||||
{failedImportJobCount}
|
||||
</span>
|
||||
failed to import.
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* AirDC++ socket connection status */}
|
||||
<div className="navbar-item has-dropdown is-hoverable">
|
||||
{airDCPPSocketConnectionStatus ? (
|
||||
<>
|
||||
<a className="navbar-link is-arrowless has-text-success">
|
||||
<i className="fa-solid fa-bolt"></i>
|
||||
</a>
|
||||
<div className="navbar-dropdown pr-2 pl-2 is-right airdcpp-status is-boxed">
|
||||
{/* AirDC++ Session Information */}
|
||||
|
||||
<p>
|
||||
Last login was{" "}
|
||||
<span className="tag">
|
||||
{format(
|
||||
fromUnixTime(airDCPPSessionInfo.user.last_login),
|
||||
"dd MMMM, yyyy",
|
||||
)}
|
||||
</span>
|
||||
</p>
|
||||
<hr className="navbar-divider" />
|
||||
<p>
|
||||
<span className="tag has-text-success">
|
||||
{airDCPPSessionInfo.user.username}
|
||||
</span>
|
||||
connected to{" "}
|
||||
<span className="tag has-text-success">
|
||||
{airDCPPSessionInfo.system_info.client_version}
|
||||
</span>{" "}
|
||||
with session ID{" "}
|
||||
<span className="tag has-text-success">
|
||||
{airDCPPSessionInfo.session_id}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
{/* <pre>{JSON.stringify(airDCPPSessionInfo, null, 2)}</pre> */}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<a className="navbar-link is-arrowless has-text-danger">
|
||||
<i className="fa-solid fa-bolt"></i>
|
||||
</a>
|
||||
<div className="navbar-dropdown pr-2 pl-2 is-right is-boxed">
|
||||
<pre>
|
||||
{JSON.stringify(socketDisconnectionReason, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="navbar-item has-dropdown is-hoverable is-mega">
|
||||
<div className="navbar-link flex">Blog</div>
|
||||
Reference in New Issue
Block a user