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

🚨 Implemented a notification system for background import

Browse Source
This commit is contained in:
Rishi Ghan
2021-09-16 09:24:06 -07:00
parent b40f63289a
commit 476a55614e
8 changed files with 202 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,153 +1,86 @@
import * as React from "react";
import { isUndefined } from "lodash";
import { connect } from "react-redux";
import React, { ReactElement, useCallback } from "react";
import { isNil, isUndefined } from "lodash";
import { useSelector, useDispatch } from "react-redux";
import { fetchComicBookMetadata } from "../actions/fileops.actions";
import { IFolderData } from "threetwo-ui-typings";
import DynamicList, { createCache } from "react-window-dynamic-list";
import toast, { Toaster } from "react-hot-toast";
;
interface IProps {
matches: unknown;
fetchComicMetadata: any;
matches?: unknown;
fetchComicMetadata?: any;
path: string;
covers: any;
covers?: any;
}
interface IState {
folderWalkResults?: Array<IFolderData>;
searchPaneIndex: number;
fileOps: any;
}
class Import extends React.Component<IProps, IState> {
/**
* Returns the average of two numbers.
*
* @remarks
* This method is part of the {@link core-library#Statistics | Statistics subsystem}.
*
* @param x - The first input number
* @param y - The second input number
* @returns The arithmetic mean of `x` and `y`
*
* @beta
*/
constructor(props: IProps) {
super(props);
this.state = {
folderWalkResults: [],
searchPaneIndex: 0,
fileOps: [],
};
}
public toggleSearchResultsPane(paneId: number): void {
this.setState({
searchPaneIndex: paneId,
});
}
/**
* Returns the average of two numbers.
*
* @remarks
* This method is part of the {@link core-library#Statistics | Statistics subsystem}.
*
* @param x - The first input number
* @param y - The second input number
* @returns The arithmetic mean of `x` and `y`
*
* @beta
*/
public initiateImport = () => {
if (typeof this.props.path !== "undefined") {
this.props.fetchComicMetadata();
toast.custom(
<div className="card">
<div className="card-content">Saokaaate</div>
</div>,
{
position: "top-right",
},
);
export const Import = (props: IProps): ReactElement => {
const dispatch = useDispatch();
const isSocketConnected = useSelector((state: RootState) => {
console.log(state);
return state.fileOps.isSocketConnected;
});
const initiateImport = useCallback(() => {
if (typeof props.path !== "undefined") {
console.log("asdasd");
dispatch(fetchComicBookMetadata(props.path));
}
};
}, [dispatch]);
public cache = createCache();
return (
<div className="container">
<section className="section is-small">
<h1 className="title">Import</h1>
{isSocketConnected}
<article className="message is-dark">
<div className="message-body">
<p className="mb-2">
<span className="tag is-medium is-info is-light">
Import Only
</span>
will add comics identified from the mapped folder into the local
db.
</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.
</p>
</div>
</article>
<p className="buttons">
<button className="button is-medium" onClick={initiateImport}>
<span className="icon">
<i className="fas fa-file-import"></i>
</span>
<span>Import Only</span>
</button>
public renderRow = ({ index, style }) => (
<div style={style} className="min is-size-7">
<span className="tag is-light">{index}</span>
<div className="tags has-addons">
<span className="tag is-success">cover</span>
<span className="tag is-success is-light has-text-weight-medium">
{this.props.covers[index].comicBookCoverMetadata.name}
</span>
</div>
imported from
<div className="tags has-addons">
<span className="tag is-success">path</span>
<span className="tag is-success is-light has-text-weight-medium">
{this.props.covers[index].comicBookCoverMetadata.path}
</span>
</div>
<div className="db-import-result-panel">
<pre className="has-background-success-light">
<span className="icon">
<i className="fas fa-database"></i>
</span>
{JSON.stringify(this.props.covers[index].dbImportResult, null, 2)}
</pre>
</div>
<button className="button is-medium">
<span className="icon">
<i className="fas fa-tag"></i>
</span>
<span>Import and Tag</span>
</button>
</p>
</section>
</div>
);
};
public render() {
return (
<div className="container">
<section className="section is-small">
<h1 className="title">Import</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
</span>
will add comics identified from the mapped folder into the local
db.
</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.
</p>
</div>
</article>
<Toaster />
<p className="buttons">
<button className="button is-medium" onClick={this.initiateImport}>
<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>
</button>
</p>
{!isUndefined(this.state.folderWalkResults) ? <div></div> : null}
</section>
</div>
);
}
}
function mapStateToProps(state: IState) {
console.log("state", state);
return {
// matches: state.comicInfo.searchResults,
// covers: state.fileOps.comicBookMetadata,
};
}
const mapDispatchToProps = (dispatch, ownProps) => ({
fetchComicMetadata() {
dispatch(fetchComicBookMetadata(ownProps.path));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Import);
export default Import;