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

📕 Added recently imported section to dashboard

Browse Source
This commit is contained in:
Rishi Ghan
2021-06-10 16:18:44 -07:00
parent 1cfe2b215d
commit 62b55a4bd8
9 changed files with 144 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,7 @@ import { io } from "socket.io-client";
import {
IMS_COMICBOOK_METADATA_FETCHED,
IMS_SOCKET_CONNECTION_CONNECTED,
IMS_RECENT_COMICS_FETCHED,
} from "../constants/action-types";
export async function walkFolder(path: string): Promise<Array<IFolderData>> {
@@ -61,7 +62,6 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
extractionOptions,
walkedFolders,
},
opts: { garam: "pasha" },
});
socket.on("comicBookCoverMetadata", (data: IExtractedComicBookCoverFile) => {
@@ -72,3 +72,21 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
});
});
};
export const getRecentlyImportedComicBooks = (options) => async (dispatch) => {
const { paginationOptions } = options;
return axios
.request({
url: "http://localhost:3000/api/import/getRecentlyImportedComicBooks",
method: "POST",
data: {
paginationOptions,
},
})
.then((response) => {
dispatch({
type: IMS_RECENT_COMICS_FETCHED,
data: response.data.docs,
});
});
};

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

@@ -16317,7 +16317,7 @@ readers do not read off random characters that represent icons */
}
.card-container .card {
max-width: 500px;
max-width: 200px;
margin: 0 0 15px 0;
}
.card-container .card .is-horizontal {

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

@@ -40,26 +40,26 @@ $border-color: red;
}
}
.card-container {
// display: grid;
// grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
// column-gap: 0.5em;
// row-gap: 1.2em;
// .card {
// max-width: 200px;
//
// .truncate {
// width: 100px;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// }
//
// img {
// max-width: 200px;
// }
// }
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
column-gap: 0.5em;
row-gap: 1.2em;
.card {
max-width: 500px;
max-width: 200px;
.truncate {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
img {
max-width: 200px;
}
}
.card {
max-width: 200px;
margin: 0 0 15px 0;
.is-horizontal {
flex-direction: row;

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

@@ -3,7 +3,7 @@ import { IExtractedComicBookCoverFile } from "../../server/interfaces/folder.int
import { map, isUndefined, isEmpty } from "lodash";
interface IProps {
comicBookCoversMetadata: IExtractedComicBookCoverFile[];
comicBookCoversMetadata: IExtractedComicBookCoverFile;
}
interface IState {}
@@ -20,58 +20,38 @@ class Card extends React.Component<IProps, IState> {
return input;
};
public drawCoverCard = (
metadata: IExtractedComicBookCoverFile[],
): JSX.Element[] => {
return map(metadata, (item: any, idx: number) => {
return (
<div key={idx}>
<div className="card">
<div className="is-horizontal">
<div className="card-image">
<figure className="image">
<img
src={
"http://localhost:3000" +
this.removeLeadingPeriod(
item.comicBookCoverMetadata.path,
) +
"/" +
item.comicBookCoverMetadata.name
}
alt="Placeholder image"
/>
</figure>
</div>
<div className="card-content">
<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>
metadata: IExtractedComicBookCoverFile,
): JSX.Element => {
return (
<div>
<div className="card">
<div>
<div className="card-image">
<figure className="image">
<img
src={
"http://localhost:3000" +
this.removeLeadingPeriod(metadata.path) +
"/" +
metadata.name
}
alt="Placeholder image"
/>
</figure>
</div>
<div className="card-content">
<ul>
<li className="has-text-weight-semibold">{metadata.name}</li>
</ul>
</div>
</div>
</div>
);
});
</div>
);
};
public render() {
console.log(this.props.comicBookCoversMetadata);
return (
<>
{!isUndefined(this.props.comicBookCoversMetadata) &&

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

@@ -1,29 +1,65 @@
import * as React from "react";
import { connect } from "react-redux";
import ZeroState from "./ZeroState";
import { RecentlyImported } from "./RecentlyImported";
import { getRecentlyImportedComicBooks } from "../actions/fileops.actions";
import { isUndefined } from "lodash";
interface IProps {}
interface IState {}
interface IProps {
getRecentComics: Function;
recentComics: any;
}
interface IState {
fileOps: any;
}
class Dashboard extends React.Component<IProps, IState> {
componentDidMount() {
if (!isUndefined(this.props.recentComics)) {
console.log("asd");
}
this.props.getRecentComics();
}
public render() {
return (
<div className="container">
<section className="section">
<h1 className="title">Dashboard</h1>
<h2 className="subtitle">
A simple container to divide your page into{" "}
<strong>sections</strong>, like the one you're currently reading.
</h2>
<ZeroState
header={"Set the source directory"}
message={
"No comics were found! Please point ThreeTwo! to a directory..."
}
/>
<h2 className="subtitle">Recently Imported</h2>
{this.props.recentComics ? (
<RecentlyImported comicBookCovers={this.props.recentComics} />
) : (
<ZeroState
header={"Set the source directory"}
message={
"No comics were found! Please point ThreeTwo! to a directory..."
}
/>
)}
</section>
</div>
);
}
}
export default Dashboard;
function mapStateToProps(state: IState) {
console.log("state", state);
return {
recentComics: state.fileOps.recentComics,
};
}
const mapDispatchToProps = (dispatch) => ({
getRecentComics() {
dispatch(
getRecentlyImportedComicBooks({
paginationOptions: {
page: 0,
limit: 5,
},
}),
);
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

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

@@ -3,8 +3,6 @@ import { isUndefined } from "lodash";
import { connect } from "react-redux";
import { fetchComicBookMetadata } from "../actions/fileops.actions";
import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
import Card from "./Card";
import { Collapse } from "react-collapse";
import { io, Socket } from "socket.io-client";
import { SOCKET_BASE_URI } from "../constants/endpoints";
import DynamicList, { createCache } from "react-window-dynamic-list";
@@ -56,14 +54,14 @@ class Import extends React.Component<IProps, IState> {
<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">
<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">
<span className="tag is-success is-light has-text-weight-medium">
{this.props.covers[index].comicBookCoverMetadata.path}
</span>
</div>

17
src/client/components/RecentlyImported.tsx Normal file
View File

@@ -0,0 +1,17 @@
import React from "react";
import Card from "./Card";
import { map } from "lodash";
type RecentlyImportedProps = {
comicBookCovers: any;
};
export const RecentlyImported = ({
comicBookCovers,
}: RecentlyImportedProps) => (
<section className="card-container">
{map(comicBookCovers, (cover) => {
return <Card comicBookCoversMetadata={cover.rawFileDetails} />;
})}
</section>
);

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

@@ -13,3 +13,6 @@ export const IMS_SOCKET_ERROR = "IMS_SOCKET_ERROR";
export const IMS_RAW_IMPORT_SUCCESSFUL = "IMS_RAW_IMPORT_SUCCESSFUL";
export const IMS_RAW_IMPORT_FAILED = "IMS_RAW_IMPORT_FAILED";
export const IMS_RECENT_COMICS_FETCHED = "IMS_RECENT_COMICS_FETCHED";
export const IMS_DATA_FETCH_ERROR = "IMS_DATA_FETCH_ERROR";

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

@@ -5,6 +5,8 @@ import {
IMS_SOCKET_ERROR,
IMS_RAW_IMPORT_SUCCESSFUL,
IMS_RAW_IMPORT_FAILED,
IMS_RECENT_COMICS_FETCHED,
IMS_DATA_FETCH_ERROR,
} from "../constants/action-types";
const initialState = {
dataTransferred: false,
@@ -37,6 +39,11 @@ function fileOpsReducer(state = initialState, action) {
...state,
rawImportErorr: action.rawImportError,
};
case IMS_RECENT_COMICS_FETCHED:
return {
...state,
recentComics: action.data,
};
default:
return state;
}