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

🔎 Wiring up the refactored elasticsearch endpoint

Browse Source
This commit is contained in:
Rishi Ghan
2022-02-06 23:12:39 -08:00
parent c6265599de
commit cf1fe451c9
11 changed files with 143 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/client/actions/comicinfo.actions.tsx
View File

@@ -14,9 +14,11 @@ import {
CV_ISSUES_METADATA_CALL_IN_PROGRESS,
CV_CLEANUP,
IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED,
CV_ISSUES_MATCHES_IN_LIBRARY_FETCHED,
CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS,
} from "../constants/action-types";
import {
COMICBOOKINFO_SERVICE_URI,
COMICVINE_SERVICE_URI,
LIBRARY_SERVICE_BASE_URI,
} from "../constants/endpoints";
@@ -32,7 +34,7 @@ export const comicinfoAPICall = (options) => async (dispatch) => {
type: CV_API_CALL_IN_PROGRESS,
inProgress: true,
});
const serviceURI = `${COMICBOOKINFO_SERVICE_URI}/${options.callURIAction}`;
const serviceURI = `${COMICVINE_SERVICE_URI}/${options.callURIAction}`;
const response = await http(serviceURI, {
method: options.callMethod,
params: options.callParams,
@@ -65,23 +67,54 @@ export const comicinfoAPICall = (options) => async (dispatch) => {
});
}
};
export const findIssuesForSeriesInLibrary =
(comicObjectID: any) => async (dispatch) => {
dispatch({
type: CV_ISSUES_METADATA_CALL_IN_PROGRESS,
});
dispatch({
type: CV_CLEANUP,
});
export const getIssuesForSeries = (comicObjectID: any) => async (dispatch) => {
dispatch({
type: CV_ISSUES_METADATA_CALL_IN_PROGRESS,
});
dispatch({
type: CV_CLEANUP,
});
await axios({
url: `${LIBRARY_SERVICE_BASE_URI}/findIssuesForSeriesInLibrary`,
method: "POST",
params: {
comicObjectID,
},
});
};
const issues = await axios({
url: `${COMICVINE_SERVICE_URI}/getIssuesForSeries`,
method: "POST",
params: {
comicObjectID,
},
});
dispatch({
type: CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS,
issues: issues.data,
});
};
export const analyzeLibrary = (issues) => async (dispatch) => {
dispatch({
type: CV_ISSUES_METADATA_CALL_IN_PROGRESS,
});
const queryObjects = issues.map((issue) => {
const { id, name, issue_number } = issue;
return {
issueId: id,
issueName: name,
volumeName: issue.volume.name,
issueNumber: issue_number,
};
});
const foo = await axios({
url: `${LIBRARY_SERVICE_BASE_URI}/findIssueForSeries`,
method: "POST",
data: {
queryObjects,
},
});
console.log(foo);
dispatch({
type: CV_ISSUES_MATCHES_IN_LIBRARY_FETCHED,
matches: foo.data,
});
};
export const getComicBookDetailById =
(comicBookObjectId: string) => async (dispatch) => {

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

@@ -1,7 +1,7 @@
import axios from "axios";
import { IFolderData } from "threetwo-ui-typings";
import {
COMICBOOKINFO_SERVICE_URI,
COMICVINE_SERVICE_URI,
LIBRARY_SERVICE_BASE_URI,
} from "../constants/endpoints";
import {
@@ -161,19 +161,19 @@ export const fetchComicVineMatches =
console.log(seriesSearchQuery);
axios
.request({
url: `${COMICBOOKINFO_SERVICE_URI}/volumeBasedSearch`,
url: `${COMICVINE_SERVICE_URI}/volumeBasedSearch`,
method: "POST",
data: {
format: "json",
// hack
query: issueSearchQuery.searchParams.searchTerms.name
query: issueSearchQuery.inferredIssueDetails.name
.replace(/[^a-zA-Z0-9 ]/g, "")
.trim(),
limit: "100",
page: 1,
resources: "volume",
scorerConfiguration: {
searchParams: issueSearchQuery.searchParams,
searchParams: issueSearchQuery.inferredIssueDetails,
},
rawFileDetails: searchPayload.rawFileDetails,
},

7
src/client/components/ComicDetail/ComicVineMatchPanel.tsx
View File

@@ -23,10 +23,7 @@ export const ComicVineMatchPanel = (comicVineData): ReactElement => {
<div className="tags has-addons">
<span className="tag">Title</span>
<span className="tag is-info">
{
comicVineSearchQueryObject.issue.searchParams.searchTerms
.name
}
{comicVineSearchQueryObject.issue.inferredIssueDetails.name}
</span>
</div>
</div>
@@ -35,7 +32,7 @@ export const ComicVineMatchPanel = (comicVineData): ReactElement => {
<span className="tag">Number</span>
<span className="tag is-info">
{
comicVineSearchQueryObject.issue.searchParams.searchTerms
comicVineSearchQueryObject.issue.inferredIssueDetails
.number
}
</span>

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

@@ -32,15 +32,7 @@ export const Dashboard = (): ReactElement => {
{!isEmpty(recentComics) && !isEmpty(recentComics.docs) ? (
<>
<div className="columns">
<div className="column is-half card">
<div className="card-content">
<h1 className="is-size-5">13,476 Books</h1>
</div>
</div>
</div>
<RecentlyImported comicBookCovers={recentComics} />
{!isNil(volumeGroups) ? <VolumeGroups /> : null}
</>
) : (

2
src/client/components/RecentlyImported.tsx
View File

@@ -24,7 +24,7 @@ export const RecentlyImported = ({
return (
<>
<div className="content">
<h4 className="subtitle">Recently Imported</h4>
<h4 className="title is-4">Recently Imported</h4>
</div>
<Masonry
breakpointCols={breakpointColumnsObj}

86
src/client/components/VolumeDetail/VolumeDetail.tsx
View File

@@ -4,7 +4,8 @@ import { useDispatch, useSelector } from "react-redux";
import { useParams } from "react-router";
import {
getComicBookDetailById,
findIssuesForSeriesInLibrary,
getIssuesForSeries,
analyzeLibrary,
} from "../../actions/comicinfo.actions";
import PotentialLibraryMatches from "./PotentialLibraryMatches";
import Masonry from "react-masonry-css";
@@ -31,7 +32,7 @@ const VolumeDetails = (props): ReactElement => {
potentialMatchesInLibrary: {
content: () => {
const ids = map(matches, partialRight(pick, "_id"));
const matchIds = ids.map((id:any) => id._id);
const matchIds = ids.map((id: any) => id._id);
return <PotentialLibraryMatches matches={matchIds} />;
},
},
@@ -44,6 +45,10 @@ const VolumeDetails = (props): ReactElement => {
setVisible(true);
}, []);
const analyzeIssues = useCallback((issues) => {
dispatch(analyzeLibrary(issues));
}, []);
const comicBookDetails = useSelector(
(state: RootState) => state.comicInfo.comicBookDetail,
);
@@ -53,45 +58,56 @@ const VolumeDetails = (props): ReactElement => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(findIssuesForSeriesInLibrary(comicObjectId));
dispatch(getIssuesForSeries(comicObjectId));
dispatch(getComicBookDetailById(comicObjectId));
}, []);
const { comicObjectId } = useParams<{ comicObjectId: string }>();
const IssuesInVolume = () => (
<Masonry
breakpointCols={breakpointColumnsObj}
className="issues-container"
columnClassName="issues-column"
>
{!isUndefined(issuesForVolume) && !isEmpty(issuesForVolume)
? issuesForVolume.map((issue) => {
return (
<Card
key={issue.issue.id}
imageUrl={issue.issue.image.thumb_url}
orientation={"vertical"}
hasDetails={!isEmpty(issue.matches) ? true : false}
borderColorClass={!isEmpty(issue.matches) ? "green-border" : ""}
backgroundColor={!isEmpty(issue.matches) ? "#e0f5d0" : ""}
onClick={() => openPotentialLibraryMatchesPanel(issue.matches)}
>
{!isEmpty(issue.matches) ? (
<>
<span className="icon has-text-success">
<i className="fa-regular fa-clone"></i>
</span>
<span className="tag is-light is-warning is-size-7">
{"#" + issue.issue.issue_number}
</span>
</>
) : null}
</Card>
);
})
: "loading"}
</Masonry>
<>
{!isUndefined(issuesForVolume) ? (
<div className="button" onClick={() => analyzeIssues(issuesForVolume)}>
Analyze Library
</div>
) : null}
<Masonry
breakpointCols={breakpointColumnsObj}
className="issues-container"
columnClassName="issues-column"
>
{!isUndefined(issuesForVolume) && !isEmpty(issuesForVolume)
? issuesForVolume.map((issue) => {
return (
<Card
key={issue.id}
imageUrl={issue.image.thumb_url}
orientation={"vertical"}
hasDetails={!isEmpty(issue.matches) ? true : false}
borderColorClass={
!isEmpty(issue.matches) ? "green-border" : ""
}
backgroundColor={!isEmpty(issue.matches) ? "#e0f5d0" : ""}
onClick={() =>
openPotentialLibraryMatchesPanel(issue.matches)
}
>
{!isEmpty(issue.matches) ? (
<>
<span className="icon has-text-success">
<i className="fa-regular fa-clone"></i>
</span>
<span className="tag is-light is-warning is-size-7">
{"#" + issue.issue_number}
</span>
</>
) : null}
</Card>
);
})
: "loading"}
</Masonry>
</>
);
// Tab content and header details

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

@@ -28,7 +28,8 @@ export const IMS_DATA_FETCH_ERROR = "IMS_DATA_FETCH_ERROR";
// Single or multiple comic book mongo objects
export const IMS_COMIC_BOOK_DB_OBJECT_FETCHED =
"IMS_COMIC_BOOK_DB_OBJECT_FETCHED";
export const IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED = "IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED";
export const IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED =
"IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED";
export const IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS =
"IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS";
export const IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED =
@@ -50,6 +51,9 @@ export const CV_ISSUES_METADATA_FETCH_FAILED =
"CV_ISSUES_METADATA_FETCH_FAILED";
export const CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS =
"CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS";
export const CV_ISSUES_FOR_VOLUME_IN_LIBRARY_UPDATED =
"CV_ISSUES_FOR_VOLUME_IN_LIBRARY_UPDATED";
export const CV_ISSUES_MATCHES_IN_LIBRARY_FETCHED = "CV_ISSUES_MATCHES_IN_LIBRARY_FETCHED";
// extracted comic archive
export const IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS =

2
src/client/constants/endpoints.ts
View File

@@ -16,7 +16,7 @@ export const CORS_PROXY_SERVER_URI = hostURIBuilder({
apiPath: "/",
});
export const COMICBOOKINFO_SERVICE_URI = hostURIBuilder({
export const COMICVINE_SERVICE_URI = hostURIBuilder({
protocol: "http",
host: process.env.UNDERLYING_HOSTNAME || "localhost",
port: "3080",

20
src/client/reducers/comicinfo.reducer.js
View File

@@ -1,3 +1,4 @@
import { isEmpty, extend, each } from "lodash";
import {
CV_API_CALL_IN_PROGRESS,
CV_SEARCH_SUCCESS,
@@ -7,8 +8,11 @@ import {
IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
CV_ISSUES_METADATA_CALL_IN_PROGRESS,
CV_ISSUES_METADATA_FETCH_SUCCESS,
CV_ISSUES_FOR_VOLUME_IN_LIBRARY_UPDATED,
CV_ISSUES_MATCHES_IN_LIBRARY_FETCHED,
CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS,
} from "../constants/action-types";
import { refineQuery } from "filename-parser";
const initialState = {
searchResults: [],
@@ -67,12 +71,24 @@ function comicinfoReducer(state = initialState, action) {
};
case CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS:
console.log("jagan", action);
// console.log("jagan", action);
return {
...state,
issuesForVolume: [...state.issuesForVolume, action.result],
issuesForVolume: action.issues,
inProgress: false,
};
case CV_ISSUES_MATCHES_IN_LIBRARY_FETCHED:
console.log(action);
const updatedState = [...state.issuesForVolume];
// updatedState[issueToUpdateIndex].matches = action.result.matches;
// console.log(issueToUpdateIndex);
// console.log(updatedState[issueToUpdateIndex]);
return {
...state,
issuesForVolume: updatedState,
};
default:
return state;
}