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

🗾 Beuatifying card view for import results

Browse Source
This commit is contained in:
Rishi Ghan
2021-06-03 14:51:49 -07:00
parent 20808b585c
commit db94ab29eb
7 changed files with 16443 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,10 +6,8 @@ import {
import { API_BASE_URI, SOCKET_BASE_URI } from "../constants/endpoints";
import { io } from "socket.io-client";
import {
IMS_SOCKET_DATA_FETCHED,
IMS_COMICBOOK_METADATA_FETCHED,
IMS_SOCKET_CONNECTION_CONNECTED,
IMS_RAW_IMPORT_SUCCESSFUL,
IMS_RAW_IMPORT_FAILED,
} from "../constants/action-types";
export async function walkFolder(path: string): Promise<Array<IFolderData>> {
@@ -28,28 +26,6 @@ export async function walkFolder(path: string): Promise<Array<IFolderData>> {
})
.catch((error) => error);
}
export const rawImportToDB = (payload: any) => async (dispatch) => {
return axios({
method: "POST",
url: "http://localhost:3000/api/import/rawImportToDb",
data: {
payload,
},
})
.then((result) => {
dispatch({
type: IMS_RAW_IMPORT_SUCCESSFUL,
rawImportDetails: result,
});
return result;
})
.catch((error) => {
dispatch({
type: IMS_RAW_IMPORT_FAILED,
rawImportDetails: error,
});
});
};
export const fetchComicBookMetadata = (options) => async (dispatch) => {
const extractionOptions = {
@@ -79,7 +55,7 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
socket.on("disconnect", () => {
console.log(`disconnect`);
});
socket.emit("call", {
socket.emit("importComicsInDB", {
action: "getComicCovers",
params: {
extractionOptions,
@@ -89,24 +65,11 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
});
socket.on("comicBookCoverMetadata", (data: IExtractedComicBookCoverFile) => {
console.log(data);
dispatch({
type: IMS_SOCKET_DATA_FETCHED,
type: IMS_COMICBOOK_METADATA_FETCHED,
data,
dataTransferred: true,
});
dispatch(
rawImportToDB({
importStatus: {
isImported: true,
tagged: false,
matchedResult: {
score: "0",
},
},
rawFileDetails: data,
}),
);
});
socket.on("comicBookCoverMetadataSent", (status) => {

16361
src/client/assets/scss/App.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
src/client/assets/scss/App.css.map Normal file
View File

File diff suppressed because one or more lines are too long

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

@@ -24,22 +24,58 @@ $border-color: red;
}
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
column-gap: 0.5em;
row-gap: 1.2em;
// 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;
// }
// }
.card {
max-width: 200px;
max-width: 500px;
margin: 0 0 15px 0;
.is-horizontal {
flex-direction: row;
display: flex;
flex-basis: 50ex;
flex-grow: 0;
flex-shrink: 1;
box-shadow: none;
.truncate {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
img {
max-width: 200px;
.card-image {
align-self: center;
.image {
max-width: 60px;
img {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0.25em;
border-bottom-left-radius: 0.25em;
}
}
}
.card-content {
flex: 1;
padding-left: 1em;
padding-top: 0;
padding-bottom: 0;
font-size: 0.8em;
}
.is-divider {
margin-top: 1.5rem;
margin-bottom: 1rem;
}
}
}
}

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

@@ -22,24 +22,32 @@ class Card extends React.Component<IProps, IState> {
public drawCoverCard = (
metadata: IExtractedComicBookCoverFile[],
): JSX.Element[] => {
return map(metadata, (item: IExtractedComicBookCoverFile, idx: number) => {
return map(metadata, (item: any, idx: number) => {
return (
<div className="card" key={idx}>
<div className="card-image">
<figure className="image">
<img
src={
"http://localhost:3000" +
this.removeLeadingPeriod(item.path) +
"/" +
item.name
}
alt="Placeholder image"
/>
</figure>
</div>
<div className="card-content">
<div className="content truncate">{item.name}</div>
<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">
<div className="truncate">
{item.comicBookCoverMetadata.name}
</div>
</div>
</div>
</div>
</div>
);

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

@@ -4,7 +4,7 @@ export const CV_SEARCH_SUCCESS = "CV_SEARCH_SUCCESS";
export const CV_API_GENERIC_FAILURE = "CV_API_GENERIC_FAILURE";
export const IMS_SOCKET_DATA_FETCHED = "IMS_SOCKET_DATA_FETCHED";
export const IMS_COMICBOOK_METADATA_FETCHED = "IMS_SOCKET_DATA_FETCHED";
export const IMS_SOCKET_CONNECTION_CONNECTED =
"IMS_SOCKET_CONNECTION_CONNECTED";
export const IMS_SOCKET_CONNECTION_DISCONNECTED =

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

@@ -1,7 +1,7 @@
import {
IMS_SOCKET_CONNECTION_CONNECTED,
IMS_SOCKET_CONNECTION_DISCONNECTED,
IMS_SOCKET_DATA_FETCHED,
IMS_COMICBOOK_METADATA_FETCHED,
IMS_SOCKET_ERROR,
IMS_RAW_IMPORT_SUCCESSFUL,
IMS_RAW_IMPORT_FAILED,
@@ -10,13 +10,12 @@ const initialState = {
dataTransferred: false,
comicBookMetadata: [],
socketConnected: false,
rawImportDetails: {},
rawImportError: {},
};
function fileOpsReducer(state = initialState, action) {
switch (action.type) {
case IMS_SOCKET_DATA_FETCHED:
case IMS_COMICBOOK_METADATA_FETCHED:
return {
...state,
comicBookMetadata: [...state.comicBookMetadata, action.data],