From 62b55a4bd8874204a8936b68490ad22f1bbfde14 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Thu, 10 Jun 2021 16:18:44 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=95=20Added=20recently=20imported=20se?= =?UTF-8?q?ction=20to=20dashboard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/actions/fileops.actions.tsx | 20 +++++- src/client/assets/scss/App.css | 2 +- src/client/assets/scss/App.scss | 38 +++++------ src/client/components/Card.tsx | 74 ++++++++-------------- src/client/components/Dashboard.tsx | 62 ++++++++++++++---- src/client/components/Import.tsx | 6 +- src/client/components/RecentlyImported.tsx | 17 +++++ src/client/constants/action-types.ts | 3 + src/client/reducers/fileops.reducer.ts | 7 ++ 9 files changed, 144 insertions(+), 85 deletions(-) create mode 100644 src/client/components/RecentlyImported.tsx diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 85c74d0..dadc179 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -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> { @@ -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, + }); + }); +}; diff --git a/src/client/assets/scss/App.css b/src/client/assets/scss/App.css index c3bfb26..81a5d43 100644 --- a/src/client/assets/scss/App.css +++ b/src/client/assets/scss/App.css @@ -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 { diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index a6ba4e5..fd9872e 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -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; diff --git a/src/client/components/Card.tsx b/src/client/components/Card.tsx index a1e5de2..0a3675b 100644 --- a/src/client/components/Card.tsx +++ b/src/client/components/Card.tsx @@ -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 { return input; }; public drawCoverCard = ( - metadata: IExtractedComicBookCoverFile[], - ): JSX.Element[] => { - return map(metadata, (item: any, idx: number) => { - return ( -
-
-
-
-
- Placeholder image -
-
-
-
    -
  • - {item.comicBookCoverMetadata.name} -
    • -
  • - {item.comicBookCoverMetadata.path} -
    • -
  • - {item.dbImportResult.importStatus.isImported && ( -
    - - - - - - Imported -
    - )} -
    • -
-
+ metadata: IExtractedComicBookCoverFile, + ): JSX.Element => { + return ( +
+
+
+
+
+ Placeholder image +
+
+
+
    +
  • {metadata.name}
    • +
- ); - }); +
+ ); }; public render() { + console.log(this.props.comicBookCoversMetadata); return ( <> {!isUndefined(this.props.comicBookCoversMetadata) && diff --git a/src/client/components/Dashboard.tsx b/src/client/components/Dashboard.tsx index ce9ab4f..0e6b890 100644 --- a/src/client/components/Dashboard.tsx +++ b/src/client/components/Dashboard.tsx @@ -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 { + componentDidMount() { + if (!isUndefined(this.props.recentComics)) { + console.log("asd"); + } + this.props.getRecentComics(); + } public render() { return (

Dashboard

-

- A simple container to divide your page into{" "} - sections, like the one you're currently reading. -

- +

Recently Imported

+ {this.props.recentComics ? ( + + ) : ( + + )}
); } } -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); diff --git a/src/client/components/Import.tsx b/src/client/components/Import.tsx index 1196756..05c899c 100644 --- a/src/client/components/Import.tsx +++ b/src/client/components/Import.tsx @@ -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 { {index}
cover - + {this.props.covers[index].comicBookCoverMetadata.name}
imported from
path - + {this.props.covers[index].comicBookCoverMetadata.path}
diff --git a/src/client/components/RecentlyImported.tsx b/src/client/components/RecentlyImported.tsx new file mode 100644 index 0000000..5a1c1fc --- /dev/null +++ b/src/client/components/RecentlyImported.tsx @@ -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) => ( +
+ {map(comicBookCovers, (cover) => { + return ; + })} +
+); diff --git a/src/client/constants/action-types.ts b/src/client/constants/action-types.ts index 94f0871..61f763b 100644 --- a/src/client/constants/action-types.ts +++ b/src/client/constants/action-types.ts @@ -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"; diff --git a/src/client/reducers/fileops.reducer.ts b/src/client/reducers/fileops.reducer.ts index 3ac77d5..de427f2 100644 --- a/src/client/reducers/fileops.reducer.ts +++ b/src/client/reducers/fileops.reducer.ts @@ -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; }