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

🔧 Refactoring the Import Page

Browse Source
This commit is contained in:
Rishi Ghan
2023-08-18 11:38:37 -04:00
parent 31cd53b7a2
commit a2ae4ce79d
4 changed files with 61 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,7 +44,7 @@ export const Dashboard = (): ReactElement => {
}, []);
const recentComics = useSelector(
(state: RootState) => state.fileOps.recentComics
(state: RootState) => state.fileOps.recentComics,
);
const wantedComics = useSelector(
(state: RootState) => state.fileOps.wantedComics,
@@ -67,42 +67,30 @@ export const Dashboard = (): ReactElement => {
<PullList issues={recentComics} />
<>
<div className="content mt-6">
<Header headerContent="Import Activity"
<Header
headerContent="Import Activity"
subHeaderContent="Results aggregated from the last import"
iconClassNames="fa-solid fa-file-invoice mr-2" />
iconClassNames="fa-solid fa-file-invoice mr-2"
/>
</div>
<table className="table">
<thead>
<tr>
<th><abbr title="Position">Pos</abbr></th>
<th>
<abbr title="Position">Pos</abbr>
</th>
<th>Team</th>
<th><abbr title="Played">Pld</abbr></th>
<th><abbr title="Won">W</abbr></th>
<th><abbr title="Drawn">D</abbr></th>
<th><abbr title="Lost">L</abbr></th>
<th><abbr title="Goals for">GF</abbr></th>
<th><abbr title="Goals against">GA</abbr></th>
<th><abbr title="Goal difference">GD</abbr></th>
<th><abbr title="Points">Pts</abbr></th>
<th>Qualification or relegation</th>
<th>
<abbr title="Played">Pld</abbr>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
</td>
<td>38</td>
<td>23</td>
<td>12</td>
<td>3</td>
<td>68</td>
<td>36</td>
<td>+32</td>
<td>81</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
</tr>
</tbody>
</table>
@@ -137,4 +125,4 @@ export const Dashboard = (): ReactElement => {
);
};
export default Dashboard;
export default Dashboard;

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

@@ -32,6 +32,9 @@ export const Import = (props: IProps): ReactElement => {
const libraryQueueResults = useSelector(
(state: RootState) => state.fileOps.librarySearchResultCount,
);
const failedImportJobCount = useSelector(
(state: RootState) => state.fileOps.failedImportJobCount,
);
const libraryQueueImportStatus = useSelector(
(state: RootState) => state.fileOps.IMSCallInProgress,
);
@@ -63,22 +66,22 @@ export const Import = (props: IProps): ReactElement => {
return (
<div className="container">
<section className="section is-small">
<h1 className="title">Import</h1>
<h1 className="title">Import Comics</h1>
<article className="message is-dark">
<div className="message-body">
<p className="mb-2">
<span className="tag is-medium is-info is-light">
Import Only
Import Comics
</span>
will add comics identified from the mapped folder into the local
db.
will add comics identified from the mapped folder into ThreeTwo's
database.
</p>
<p>
<span className="tag is-medium is-info is-light">
Import and Tag
</span>
will scan the ComicVine, shortboxed APIs and import comics from
the mapped folder with the additional metadata.
Metadata from ComicInfo.xml, if present, will also be extracted.
</p>
<p>
This process could take a while, if you have a lot of comics, or
are importing over a network connection.
</p>
</div>
</article>
@@ -94,33 +97,34 @@ export const Import = (props: IProps): ReactElement => {
<span className="icon">
<i className="fas fa-file-import"></i>
</span>
<span>Import Only</span>
</button>
<button className="button is-medium">
<span className="icon">
<i className="fas fa-tag"></i>
</span>
<span>Import and Tag</span>
<span>Start Import</span>
</button>
</p>
<div className="columns is-multiline">
<div className="column is-one-fifth">
<div className="box control-palette">
<div className="columns is-multiline is-half">
<div className="column is-2 has-text-centered">
<div className="box has-background-success-light">
<span className="is-size-2 has-text-weight-bold">
{JSON.stringify(libraryQueueResults, null, 2)}
{libraryQueueResults}
</span>
</div>
<div className="is-half">
<div className="content">
<div className="control">
<button
className="button is-warning is-light"
onClick={toggleImport}
>
{!isImportQueuePaused ? pauseIconText : playIconText}
</button>
</div>
</div>
<div className="column is-2 has-text-centered">
<div className="box has-background-danger">
<span className="is-size-2 has-text-weight-bold">
{failedImportJobCount}
</span>
</div>
</div>
<div className="column">
<div className="content">
<div className="control">
<button
className="button is-warning is-light"
onClick={toggleImport}
>
{!isImportQueuePaused ? pauseIconText : playIconText}
</button>
</div>
</div>
</div>

3
src/client/constants/action-types.ts
View File

@@ -105,7 +105,7 @@ export const AIRDCPP_SEARCH_RESULTS_UPDATED = "AIRDCPP_SEARCH_RESULTS_UPDATED";
export const AIRDCPP_SEARCH_COMPLETE = "AIRDCPP_SEARCH_COMPLETE";
// AirDC++ related library query for issues with bundles associated with them
export const LIBRARY_ISSUE_BUNDLES = "LIBRARY_ISSUE_BUNDLES";
export const LIBRARY_ISSUE_BUNDLES = "LIBRARY_ISSUE_BUNDLES";
export const AIRDCPP_HUB_SEARCHES_SENT = "AIRDCPP_HUB_SEARCHES_SENT";
export const AIRDCPP_RESULT_DOWNLOAD_INITIATED =
@@ -127,6 +127,7 @@ export const WANTED_COMICS_FETCHED = "WANTED_COMICS_FETCHED";
// LIBRARY SOCKET ENDPOINT
export const LS_IMPORT = "LS_IMPORT";
export const LS_COVER_EXTRACTED = "LS_COVER_EXTRACTED";
export const LS_COVER_EXTRACTION_FAILED = "LS_COVER_EXTRACTION_FAILED";
export const LS_COMIC_ADDED = "LS_COMIC_ADDED";
// Settings

14
src/client/reducers/fileops.reducer.ts
View File

@@ -18,6 +18,7 @@ import {
IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
LS_IMPORT,
LS_COVER_EXTRACTED,
LS_COVER_EXTRACTION_FAILED,
LS_QUEUE_DRAINED,
LS_COMIC_ADDED,
IMG_ANALYSIS_CALL_IN_PROGRESS,
@@ -58,6 +59,7 @@ const initialState = {
volumes: [],
librarySearchResultsFormatted: [],
librarySearchResultCount: 0,
failedJobCount: 0,
libraryQueueResults: [],
librarySearchError: {},
libraryServiceStatus: {},
@@ -160,8 +162,16 @@ function fileOpsReducer(state = initialState, action) {
}
return {
...state,
librarySearchResultCount: state.librarySearchResultCount + 1,
recentComics: [...state.recentComics, action.result.data.importResult],
librarySearchResultCount: action.completedJobCount,
recentComics: [...state.recentComics, action.importResult],
};
}
case LS_COVER_EXTRACTION_FAILED: {
console.log("FAILED", action);
return {
...state,
failedImportJobCount: action.failedJobCount,
};
}