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

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>
);
};