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

🏗️ Trying out react-query

Browse Source
This commit is contained in:
Rishi Ghan
2023-10-30 13:47:35 -04:00
parent 2df0fce792
commit d45c53dff9
13 changed files with 117 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@@ -20,8 +20,8 @@
"@dnd-kit/utilities": "^3.2.1",
"@fortawesome/fontawesome-free": "^6.3.0",
"@redux-devtools/extension": "^3.2.5",
"@reduxjs/toolkit": "^1.9.7",
"@rollup/plugin-node-resolve": "^15.0.1",
"@tanstack/react-query": "^5.0.5",
"@tanstack/react-table": "^8.9.3",
"@types/mime-types": "^2.1.0",
"@types/react-router-dom": "^5.3.3",
@@ -56,7 +56,6 @@
"react-loader-spinner": "^4.0.0",
"react-masonry-css": "^1.0.16",
"react-modal": "^3.15.1",
"react-redux": "^8.0.5",
"react-router": "^6.9.0",
"react-router-dom": "^6.9.0",
"react-select": "^5.3.2",
@@ -66,9 +65,6 @@
"react-stickynode": "^4.1.0",
"react-textarea-autosize": "^8.3.4",
"reapop": "^4.2.1",
"redux-first-history": "^5.1.1",
"redux-socket.io-middleware": "^1.0.4",
"redux-thunk": "^2.4.2",
"slick-carousel": "^1.8.1",
"socket.io-client": "^4.3.2",
"styled-components": "^6.0.7",
@@ -86,6 +82,8 @@
"@storybook/react": "^7.4.1",
"@storybook/react-vite": "^7.4.1",
"@storybook/testing-library": "^0.2.0",
"@tanstack/eslint-plugin-query": "^5.0.5",
"@tanstack/react-query-devtools": "^5.1.0",
"@tsconfig/node14": "^1.0.0",
"@types/ellipsize": "^0.1.1",
"@types/express": "^4.17.8",

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

@@ -23,7 +23,11 @@ import {
AIRDCPP_DOWNLOAD_PROGRESS_TICK,
LS_SINGLE_IMPORT,
} from "../constants/action-types";
import { useDispatch, useSelector } from "react-redux";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
const queryClient = new QueryClient({});
/**
* Method that initializes an AirDC++ socket connection
@@ -32,128 +36,93 @@ import { useDispatch, useSelector } from "react-redux";
* @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]);
// 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);
});
}
}, []);
// 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 />
<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>
<QueryClientProvider client={queryClient}>
{/* The rest of your application */}
<ReactQueryDevtools initialIsOpen={true} />
{/* <AirDCPPSocketComponent /> */};
</QueryClientProvider>
);
};

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

@@ -15,7 +15,6 @@ import { isEmpty, isNil } from "lodash";
import Header from "../shared/Header";
export const Dashboard = (): ReactElement => {
const dispatch = useDispatch();
// useEffect(() => {
// dispatch(fetchVolumeGroups());
// dispatch(

15
src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx
View File

@@ -1,13 +1,10 @@
import React, { ReactElement, useCallback } from "react";
import { saveSettings } from "../../../actions/settings.actions";
import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
import { useConnectToQBittorrentClientQuery } from "../../../services/torrents.api";
export const QbittorrentConnectionForm = (): ReactElement => {
const { data, isLoading } = useConnectToQBittorrentClientQuery({});
const onSubmit = useCallback(async (values) => {
try {
dispatch(saveSettings(values, "bittorrent"));
} catch (error) {
console.log(error);
}
@@ -15,13 +12,11 @@ export const QbittorrentConnectionForm = (): ReactElement => {
return (
<>
{!isLoading && (
<ConnectionForm
initialData={data?.bittorrent.client.host}
submitHandler={onSubmit}
formHeading={"Qbittorrent Configuration"}
/>
)}
<ConnectionForm
initialData={data?.bittorrent.client.host}
submitHandler={onSubmit}
formHeading={"Qbittorrent Configuration"}
/>
<pre>{JSON.stringify(data?.qbittorrentClientInfo, null, 2)}</pre>
</>
);

18
src/client/components/Settings/Settings.tsx
View File

@@ -7,22 +7,18 @@ import { ServiceStatuses } from "../ServiceStatuses/ServiceStatuses";
import settingsObject from "../../constants/settings/settingsMenu.json";
import { isUndefined, map } from "lodash";
interface ISettingsProps { }
interface ISettingsProps {}
export const Settings = (props: ISettingsProps): ReactElement => {
const [active, setActive] = useState("gen-db");
const settingsContent = [
{
id: "adc-hubs",
content: <div key="adc-hubs">{<AirDCPPHubsForm />}</div>,
content: <div key="adc-hubs">{/* <AirDCPPHubsForm /> */}</div>,
},
{
id: "adc-connection",
content: (
<div key="adc-connection">
<AirDCPPSettingsForm />
</div>
),
content: <div key="adc-connection">{/* <AirDCPPSettingsForm /> */}</div>,
},
{
id: "qbt-connection",
@@ -34,15 +30,11 @@ export const Settings = (props: ISettingsProps): ReactElement => {
},
{
id: "core-service",
content: <ServiceStatuses />,
content: <>a</>,
},
{
id: "flushdb",
content: (
<div key="flushdb">
<SystemSettingsForm />
</div>
),
content: <div key="flushdb">{/* <SystemSettingsForm /> */}</div>,
},
];
return (

133
src/client/components/shared/Navbar.tsx
View File

@@ -2,46 +2,10 @@ import React, { useContext } from "react";
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 qBittorrentConnectionInfo = useSelector(
(state: RootState) => state.settings.data,
);
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">
@@ -91,8 +55,6 @@ const Navbar: React.FunctionComponent = (props) => {
Downloads
</Link>
<SearchBar />
<Link to="/search" className="navbar-item">
Search ComicVine
</Link>
@@ -101,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">
<i className="fa-solid fa-tower-cell"></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>

6
src/client/hooks/store.ts
View File

@@ -1,6 +0,0 @@
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "../store";
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

25
src/client/index.tsx
View File

@@ -1,18 +1,25 @@
import React from "react";
import { render } from "react-dom";
import { Provider, connect } from "react-redux";
import { HistoryRouter as Router } from "redux-first-history/rr6";
import { store, history } from "./store/index";
import { createRoot } from "react-dom/client";
import App from "./components/App";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Settings from "./components/Settings/Settings";
const rootEl = document.getElementById("root");
const root = createRoot(rootEl);
const router = createBrowserRouter([
{
path: "/",
element: <App />,
},
{
path: "/settings",
element: <Settings />,
},
]);
root.render(
<Provider store={store}>
<Router history={history}>
<App />
</Router>
</Provider>,
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>,
);

0
src/client/services/acquisition.api.ts
View File

7
src/client/services/empty.api.ts
View File

@@ -1,7 +0,0 @@
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
// initialize an empty api service that we'll inject endpoints into later as needed
export const emptySplitApi = createApi({
baseQuery: fetchBaseQuery({ baseUrl: "http://" }),
endpoints: () => ({}),
});

13
src/client/services/settings.api.ts
View File

@@ -1,13 +0,0 @@
import { emptySplitApi } from "./empty.api";
import { useConnectToQBittorrentClientQuery } from "./torrents.api";
export const settingsApi = emptySplitApi.injectEndpoints({
endpoints: (builder) => ({
getAllSettings: builder.query({
query: () => "localhost:3000/api/settings/getAllSettings",
}),
}),
overrideExisting: false,
});
export const { useGetAllSettingsQuery } = settingsApi;

33
src/client/services/torrents.api.ts
View File

@@ -1,33 +0,0 @@
import { emptySplitApi } from "./empty.api";
export const torrentsApi = emptySplitApi.injectEndpoints({
endpoints: (builder) => ({
connectToQBittorrentClient: builder.query({
queryFn: async (_arg, _queryApi, _extraOptions, fetchWithBQ) => {
try {
const {
data: { bittorrent },
} = await fetchWithBQ("localhost:3000/api/settings/getAllSettings");
await fetchWithBQ({
url: "localhost:3060/api/qbittorrent/connect",
method: "POST",
body: bittorrent?.client?.host,
});
const { data } = await fetchWithBQ({
url: "localhost:3060/api/qbittorrent/getClientInfo",
method: "GET",
});
return {
data: { bittorrent, qbittorrentClientInfo: data },
};
} catch (err) {
throw err;
}
},
}),
}),
overrideExisting: false,
});
export const { useConnectToQBittorrentClientQuery } = torrentsApi;

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

@@ -1,44 +0,0 @@
import { createHashHistory } from "history";
import thunk from "redux-thunk";
import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
import { createReduxHistoryContext } from "redux-first-history";
import socketIoMiddleware from "redux-socket.io-middleware";
import socketIOMiddleware from "../shared/middleware/SocketIOMiddleware";
import socketIOConnectionInstance from "../shared/socket.io/instance";
import settingsReducer from "../reducers/settings.reducer";
import { settingsApi } from "../services/settings.api";
const customSocketIOMiddleware = socketIOMiddleware(socketIOConnectionInstance);
const { createReduxHistory, routerMiddleware, routerReducer } =
createReduxHistoryContext({
history: createHashHistory(),
});
const rootReducer = (history) => ({
settings: settingsReducer,
[settingsApi.reducerPath]: settingsApi.reducer,
router: routerReducer,
});
const preloadedState = {};
export const store = configureStore({
middleware: [
socketIoMiddleware(socketIOConnectionInstance),
customSocketIOMiddleware,
thunk,
routerMiddleware,
settingsApi.middleware,
],
reducer: rootReducer(createHashHistory()),
preloadedState,
});
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
ReturnType,
RootState,
unknown,
Action<string>
>;
export const history = createReduxHistory(store);