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

💽 DB import log beautified in the UI

Browse Source
This commit is contained in:
Rishi Ghan
2021-06-08 21:48:02 -07:00
parent db94ab29eb
commit 0d6eb0d980
8 changed files with 162 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -35,6 +35,9 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hooks-worker": "^1.0.0",
"react-virtualized-auto-sizer": "^1.0.5",
"react-window": "^1.8.6",
"react-window-dynamic-list": "^2.3.5",
"request": "^2.88.2",
"sharp": "^0.28.1",
"socket.io-client": "^4.1.2"
@@ -58,6 +61,7 @@
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.2",
"@types/react-redux": "^7.1.16",
"@types/react-syntax-highlighter": "^13.5.0",
"@types/unzipper": "^0.10.3",
"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0",

4
src/client/actions/fileops.actions.tsx
View File

@@ -71,8 +71,4 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
dataTransferred: true,
});
});
socket.on("comicBookCoverMetadataSent", (status) => {
console.log(status);
});
};

26
src/client/assets/scss/App.css
View File

@@ -16299,6 +16299,22 @@ readers do not read off random characters that represent icons */
padding: 0.375rem 1rem;
}
.min {
overflow: visible;
}
.min .tags {
display: inline;
margin-right: 5px;
}
.min .tags:first-child {
margin-left: 0;
}
.min pre {
border-radius: 0.4em;
margin: 10px 0 10px 0;
white-space: pre-wrap;
}
.card-container .card {
max-width: 500px;
margin: 0 0 15px 0;
@@ -16324,12 +16340,22 @@ readers do not read off random characters that represent icons */
border-bottom-left-radius: 0.25em;
}
.card-container .card .is-horizontal .card-content {
align-self: center;
flex: 1;
padding-left: 1em;
padding-top: 0;
padding-bottom: 0;
font-size: 0.8em;
}
.card-container .card .is-horizontal .card-content ul li.status {
margin-top: 10px;
}
.card-container .card .is-horizontal .card-content .truncate {
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-container .card .is-horizontal .is-divider {
margin-top: 1.5rem;
margin-bottom: 1rem;

2
src/client/assets/scss/App.css.map
View File

File diff suppressed because one or more lines are too long

29
src/client/assets/scss/App.scss
View File

@@ -23,6 +23,22 @@ $border-color: red;
}
}
.min {
overflow: visible;
.tags {
display: inline;
margin-right: 5px;
margin-left: 5px;
&:first-child {
margin-left: 0;
}
}
pre {
border-radius: 0.4em;
margin: 10px 0 10px 0;
white-space: pre-wrap;
}
}
.card-container {
// display: grid;
// grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -66,11 +82,24 @@ $border-color: red;
}
}
.card-content {
align-self: center;
flex: 1;
padding-left: 1em;
padding-top: 0;
padding-bottom: 0;
font-size: 0.8em;
ul {
li.status {
margin-top: 10px;
}
}
.truncate {
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.is-divider {
margin-top: 1.5rem;

23
src/client/components/Card.tsx
View File

@@ -43,9 +43,26 @@ class Card extends React.Component<IProps, IState> {
</figure>
</div>
<div className="card-content">
<div className="truncate">
{item.comicBookCoverMetadata.name}
</div>
<ul>
<li className="has-text-weight-semibold">
{item.comicBookCoverMetadata.name}
</li>
<li className="truncate">
{item.comicBookCoverMetadata.path}
</li>
<li className="status">
{item.dbImportResult.importStatus.isImported && (
<div className="tags has-addons">
<a className="tag">
<span className="icon has-text-success-dark">
<i className="fas fa-file-import"></i>
</span>
</a>
<span className="tag is-success">Imported</span>
</div>
)}
</li>
</ul>
</div>
</div>
</div>

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

@@ -6,6 +6,7 @@ import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
import Card from "./Card";
import { io, Socket } from "socket.io-client";
import { SOCKET_BASE_URI } from "../constants/endpoints";
import DynamicList, { createCache } from "react-window-dynamic-list";
interface IProps {
matches: unknown;
@@ -47,6 +48,29 @@ class Import extends React.Component<IProps, IState> {
}
};
public cache = createCache();
public renderRow = ({ index, style }) => (
<div style={style} className="min is-size-7">
<span className="tag is-dark">{index}</span>
<div className="tags has-addons">
<span className="tag is-success">cover</span>
<span className="tag is-success is-light">
{this.props.garam[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">
{this.props.garam[index].comicBookCoverMetadata.path}
</span>
</div>
<pre className="has-background-success-light">
{JSON.stringify(this.props.garam[index].dbImportResult, null, 2)}
</pre>
</div>
);
public render() {
return (
<div className="container">
@@ -91,8 +115,16 @@ class Import extends React.Component<IProps, IState> {
</p>
{!isUndefined(this.state.folderWalkResults) ? (
<div className="card-container">
<Card comicBookCoversMetadata={this.props.garam} />
<div>
{/* <Card comicBookCoversMetadata={this.props.garam} /> */}
<DynamicList
data={this.props.garam}
cache={this.cache}
height={1000}
width={"100%"}
>
{this.renderRow}
</DynamicList>
</div>
) : null}
</section>

48
yarn.lock
View File

@@ -986,6 +986,13 @@
core-js-pure "^3.0.0"
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.0.0":
version "7.14.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.1.2":
version "7.13.10"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
@@ -1888,6 +1895,20 @@
"@types/history" "*"
"@types/react" "*"
"@types/react-syntax-highlighter@^13.5.0":
version "13.5.0"
resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-13.5.0.tgz#b93c05f28844e7c35a5f1d38d3819099ffa82fbd"
integrity sha512-U7DrUaQRv3b+fsbPXMf7vC21K7DOkdNCQtp14Wm0Z5YLI9fPhndN4YTZ9eVXwmAivIg6lZ3YBVtGYucAS3H76A==
dependencies:
"@types/react" "*"
"@types/react-window@^1.8.2":
version "1.8.3"
resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.3.tgz#14f74b144b4e3df9421eb31182dc580b7ccc7617"
integrity sha512-Xf+IR2Zyiyh/6z1CM8kv1aQba3S3X/hBXt4tH+T9bDSIGwFhle0GZFZGTSU8nw2cUT3UNbCHDjhxVQVZPtE8cA==
dependencies:
"@types/react" "*"
"@types/react@*":
version "17.0.1"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.1.tgz#eb1f1407dea8da3bc741879c1192aa703ab9975b"
@@ -8287,6 +8308,11 @@ mem@^4.0.0:
mimic-fn "^2.0.0"
p-is-promise "^2.0.0"
"memoize-one@>=3.1.1 <6":
version "5.2.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
memory-fs@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -10222,6 +10248,28 @@ react-router@5.2.0, react-router@^5.2.0:
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-virtualized-auto-sizer@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.5.tgz#9eeeb8302022de56fbd7a860b08513120ce36509"
integrity sha512-kivjYVWX15TX2IUrm8F1jaCEX8EXrpy3DD+u41WGqJ1ZqbljWpiwscV+VxOM1l7sSIM1jwi2LADjhhAJkJ9dxA==
react-window-dynamic-list@^2.3.5:
version "2.3.5"
resolved "https://registry.yarnpkg.com/react-window-dynamic-list/-/react-window-dynamic-list-2.3.5.tgz#f9c72a3e191c0b3ce907f79628d689bef2befd3c"
integrity sha512-SQavEsxvzVNbQXjYt3VO0IA0JUrlaD10SK36XsI/+G4Tx/bzteocE7lIhEJ3bUOe43vFc3naYpi+9XQUw/SBmQ==
dependencies:
"@types/react-window" "^1.8.2"
lodash.debounce "^4.0.8"
react-window "^1.8.5"
react-window@^1.8.5, react-window@^1.8.6:
version "1.8.6"
resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
dependencies:
"@babel/runtime" "^7.0.0"
memoize-one ">=3.1.1 <6"
react@^17.0.1:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"