🧸 Zustand and Tanstack Query (#96)
* ↪️ Removed node-sass, added sass * 🏗️ Refactoring Navbar to read from zustand store * ⬆️ Bumped deps * 🏗️ Refactored AirDC++ session status indicator * 🏗️ Refactored Import page to read from global state * 🏗 Wired up the event emit correctly * 🏗️ Added import queue related state * 🏗 Implemented setQueueAction * 🏗️ Wired up job queue control methods * 🏗️ Added null check and removed useless deps * 🏗️ Refactored the Import page * ↪️ Added cache invalidation to job statistics query * 🏗️ Refactoring the Library page * 🏗️ Fixed pagination and disabled states * ✏️ Changed page to offset To better reflect what we are doing with the pagination controls * 🏗️ Refactoring ComicDetail page and its children * 🏗️ Refactored ComicDetailContainer with useQuery * 🔧 Fixed the error check on Library page * 🏗️ Refactoring AcquisitionPanel * 🏗️ Refactoring the AirDC++ Forms * 🦃 Thanksgiving Day bug fixes * ⬆️ Bumped up Vite to 5.0 * 🔧 Refactoring AcquisitionPanel * 🏗️ Wiring up the DC++ search method * 🏗️ Refactoring AirDC++ search method * 🔎 Added some validation to ADC++ Hubs settings form * 🏗️ Fixed the ADC++ search results * 🏗️ Cleanup of the search results pane
This commit was merged in pull request #96.
This commit is contained in:
GitHub
5
src/client/components/shared/ErrorPage.tsx
Normal file
5
src/client/components/shared/ErrorPage.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import React from "react";
|
||||
|
||||
export const ErrorPage = () => {
|
||||
return <>Error has been encountered.</>;
|
||||
};
|
||||
@@ -1,15 +1,46 @@
|
||||
import React, { useContext } from "react";
|
||||
import React from "react";
|
||||
import { SearchBar } from "../GlobalSearchBar/SearchBar";
|
||||
import { DownloadProgressTick } from "../ComicDetail/DownloadProgressTick";
|
||||
import { Link } from "react-router-dom";
|
||||
import { isUndefined } from "lodash";
|
||||
import { isEmpty, isNil, isUndefined } from "lodash";
|
||||
import { format, fromUnixTime } from "date-fns";
|
||||
import { useStore } from "../../store/index";
|
||||
import { useShallow } from "zustand/react/shallow";
|
||||
|
||||
const Navbar: React.FunctionComponent = (props) => {
|
||||
const {
|
||||
airDCPPSocketConnected,
|
||||
airDCPPDisconnectionInfo,
|
||||
airDCPPSessionInformation,
|
||||
airDCPPDownloadTick,
|
||||
importJobQueue,
|
||||
} = useStore(
|
||||
useShallow((state) => ({
|
||||
airDCPPSocketConnected: state.airDCPPSocketConnected,
|
||||
airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo,
|
||||
airDCPPSessionInformation: state.airDCPPSessionInformation,
|
||||
airDCPPDownloadTick: state.airDCPPDownloadTick,
|
||||
importJobQueue: state.importJobQueue,
|
||||
})),
|
||||
);
|
||||
// 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,
|
||||
// );
|
||||
|
||||
return (
|
||||
<nav className="navbar is-fixed-top">
|
||||
<div className="navbar-brand">
|
||||
<Link to="/" className="navbar-item">
|
||||
<Link to="/dashboard" className="navbar-item">
|
||||
<img
|
||||
src="/src/client/assets/img/threetwo.svg"
|
||||
alt="ThreeTwo! A comic book curator"
|
||||
@@ -55,6 +86,8 @@ const Navbar: React.FunctionComponent = (props) => {
|
||||
Downloads
|
||||
</Link>
|
||||
|
||||
{/* <SearchBar /> */}
|
||||
|
||||
<Link to="/search" className="navbar-item">
|
||||
Search ComicVine
|
||||
</Link>
|
||||
@@ -63,7 +96,102 @@ 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>
|
||||
{!isEmpty(airDCPPDownloadTick) && (
|
||||
<div className="pulsating-circle"></div>
|
||||
)}
|
||||
</a>
|
||||
{!isEmpty(airDCPPDownloadTick) ? (
|
||||
<div className="navbar-dropdown is-right is-boxed">
|
||||
<a className="navbar-item">
|
||||
<DownloadProgressTick data={airDCPPDownloadTick} />
|
||||
</a>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{!isUndefined(importJobQueue.status) &&
|
||||
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>
|
||||
{importJobQueue.successfulJobCount > 0 ? (
|
||||
<li className="mb-2">
|
||||
<span className="tag is-success mr-2">
|
||||
{importJobQueue.successfulJobCount}
|
||||
</span>
|
||||
imported.
|
||||
</li>
|
||||
) : null}
|
||||
{importJobQueue.failedJobCount > 0 ? (
|
||||
<li>
|
||||
<span className="tag is-danger mr-2">
|
||||
{importJobQueue.failedJobCount}
|
||||
</span>
|
||||
failed to import.
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* AirDC++ socket connection status */}
|
||||
<div className="navbar-item has-dropdown is-hoverable">
|
||||
{!isUndefined(airDCPPSessionInformation.user) ? (
|
||||
<>
|
||||
<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(
|
||||
airDCPPSessionInformation?.user.last_login,
|
||||
),
|
||||
"dd MMMM, yyyy",
|
||||
)}
|
||||
</span>
|
||||
</p>
|
||||
<hr className="navbar-divider" />
|
||||
<p>
|
||||
<span className="tag has-text-success">
|
||||
{airDCPPSessionInformation.user.username}
|
||||
</span>
|
||||
connected to{" "}
|
||||
<span className="tag has-text-success">
|
||||
{airDCPPSessionInformation.system_info.client_version}
|
||||
</span>{" "}
|
||||
with session ID{" "}
|
||||
<span className="tag has-text-success">
|
||||
{airDCPPSessionInformation.session_id}
|
||||
</span>
|
||||
</p>
|
||||
</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(airDCPPDisconnectionInfo, null, 2)}</pre>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="navbar-item has-dropdown is-hoverable is-mega">
|
||||
<div className="navbar-link flex">Blog</div>
|
||||
|
||||
@@ -12,26 +12,30 @@ import {
|
||||
} from "@tanstack/react-table";
|
||||
|
||||
export const T2Table = (tableOptions): ReactElement => {
|
||||
const { sourceData, columns, paginationHandlers: { nextPage, previousPage }, totalPages, rowClickHandler } =
|
||||
tableOptions;
|
||||
const {
|
||||
sourceData,
|
||||
columns,
|
||||
paginationHandlers: { nextPage, previousPage },
|
||||
totalPages,
|
||||
rowClickHandler,
|
||||
} = tableOptions;
|
||||
|
||||
const [{ pageIndex, pageSize }, setPagination] =
|
||||
useState<PaginationState>({
|
||||
pageIndex: 1,
|
||||
pageSize: 15,
|
||||
});
|
||||
const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
|
||||
pageIndex: 1,
|
||||
pageSize: 15,
|
||||
});
|
||||
|
||||
const pagination = useMemo(
|
||||
() => ({
|
||||
pageIndex,
|
||||
pageSize,
|
||||
}),
|
||||
[pageIndex, pageSize]
|
||||
[pageIndex, pageSize],
|
||||
);
|
||||
|
||||
/**
|
||||
* Pagination control to move forward one page
|
||||
* @returns void
|
||||
* Pagination control to move forward one page
|
||||
* @returns void
|
||||
*/
|
||||
const goToNextPage = () => {
|
||||
setPagination({
|
||||
@@ -39,10 +43,10 @@ export const T2Table = (tableOptions): ReactElement => {
|
||||
pageSize,
|
||||
});
|
||||
nextPage(pageIndex, pageSize);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Pagination control to move backward one page
|
||||
* Pagination control to move backward one page
|
||||
* @returns void
|
||||
**/
|
||||
const goToPreviousPage = () => {
|
||||
@@ -51,7 +55,7 @@ export const T2Table = (tableOptions): ReactElement => {
|
||||
pageSize,
|
||||
});
|
||||
previousPage(pageIndex, pageSize);
|
||||
}
|
||||
};
|
||||
|
||||
const table = useReactTable({
|
||||
data: sourceData,
|
||||
@@ -75,15 +79,29 @@ export const T2Table = (tableOptions): ReactElement => {
|
||||
{/* pagination controls */}
|
||||
<nav className="pagination columns">
|
||||
<div className="mr-4 has-text-weight-semibold has-text-left">
|
||||
<p className="is-size-5">Page {pageIndex} of {Math.ceil(totalPages / pageSize)}</p>
|
||||
{/* <p>{totalPages} comics in all</p> */}
|
||||
<p className="is-size-5">
|
||||
Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
|
||||
</p>
|
||||
<p>{totalPages} comics in all</p>
|
||||
</div>
|
||||
<div className="field has-addons">
|
||||
<div className="control">
|
||||
<div className="button" onClick={() => goToPreviousPage()}> <i className="fas fa-chevron-left"></i></div>
|
||||
<button
|
||||
className="button"
|
||||
onClick={() => goToPreviousPage()}
|
||||
disabled={pageIndex === 1}
|
||||
>
|
||||
<i className="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="control">
|
||||
<div className="button" onClick={() => goToNextPage()}> <i className="fas fa-chevron-right"></i> </div>
|
||||
<button
|
||||
className="button"
|
||||
onClick={() => goToNextPage()}
|
||||
disabled={pageIndex > Math.floor(totalPages / pageSize)}
|
||||
>
|
||||
<i className="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="field has-addons ml-5">
|
||||
@@ -112,16 +130,13 @@ export const T2Table = (tableOptions): ReactElement => {
|
||||
{table.getHeaderGroups().map((headerGroup, idx) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header, idx) => (
|
||||
<th
|
||||
key={header.id}
|
||||
colSpan={header.colSpan}
|
||||
>
|
||||
<th key={header.id} colSpan={header.colSpan}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
@@ -131,11 +146,8 @@ export const T2Table = (tableOptions): ReactElement => {
|
||||
<tbody>
|
||||
{table.getRowModel().rows.map((row, idx) => {
|
||||
return (
|
||||
<tr
|
||||
key={row.id}
|
||||
onClick={() => rowClickHandler(row)}
|
||||
>
|
||||
{row.getVisibleCells().map(cell => (
|
||||
<tr key={row.id} onClick={() => rowClickHandler(row)}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user