diff --git a/package.json b/package.json index cd982cc..69671e5 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "fs-extra": "^9.1.0", "imghash": "^0.0.8", "jsdoc": "^3.6.7", + "pretty-bytes": "^5.6.0", "react": "^17.0.1", "react-collapsible": "^2.8.3", "react-dom": "^17.0.1", diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 864f8cd..6070200 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -12,7 +12,8 @@ import { } from "../constants/action-types"; import { refineQuery } from "../shared/utils/nlp.utils"; -import { assign } from "lodash"; +import { matchScorer } from "../shared/utils/searchmatchscorer.utils"; +import { assign, isNull } from "lodash"; export async function walkFolder(path: string): Promise> { return axios @@ -131,8 +132,18 @@ export const fetchComicVineMatches = (searchPayload) => (dispatch) => { offset: "5", resources: "issue", }, + transformResponse: [ + (r) => { + const searchMatches = JSON.parse(r); + return matchScorer(searchMatches.results, { + issue: issueSearchQuery, + series: seriesSearchQuery, + }); + }, + ], }) .then((response) => { + console.log(response); dispatch({ type: CV_SEARCH_SUCCESS, searchResults: response.data, diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index 1f0e330..257ef1b 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -151,6 +151,10 @@ $border-color: red; border-radius: 5px; } .search-result-details { + width: 100%; + .score { + float: right; + } margin-left: 10px; } } diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index e78666e..2b50fe5 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -4,13 +4,14 @@ import axios from "axios"; import Card from "./Card"; import MatchResult from "./MatchResult"; import ComicVineSearchForm from "./ComicVineSearchForm"; -import { Divider } from "antd"; + import { css } from "@emotion/react"; import PuffLoader from "react-spinners/PuffLoader"; import { isEmpty, isUndefined } from "lodash"; import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings"; import { fetchComicVineMatches } from "../actions/fileops.actions"; -import { Drawer } from "antd"; +import { Drawer, Divider } from "antd"; +const prettyBytes = require("pretty-bytes"); import "antd/dist/antd.css"; import { useDispatch, useSelector } from "react-redux"; @@ -72,7 +73,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {

{comicDetail.rawFileDetails.containedIn}

-

{comicDetail.rawFileDetails.fileSize}

+

{prettyBytes(comicDetail.rawFileDetails.fileSize)}

@@ -85,7 +91,7 @@ export const ComicVineSearchForm = () => { return ( ({ getRecentlyImportedComicBooks({ paginationOptions: { page: 0, - limit: 5, + limit: 17, }, }), ); diff --git a/src/client/components/MatchResult.tsx b/src/client/components/MatchResult.tsx index 7c97134..4ca2871 100644 --- a/src/client/components/MatchResult.tsx +++ b/src/client/components/MatchResult.tsx @@ -6,10 +6,6 @@ interface MatchResultProps { } export const MatchResult = (props: MatchResultProps) => { - useEffect(() => { - console.log("match", props.matchData); - }, [props.matchData]); - return ( <> @@ -26,8 +22,12 @@ export const MatchResult = (props: MatchResultProps) => {
+
+ {parseFloat(match.score).toFixed(2)} +
{match.name}
{match.volume.name}
+
diff --git a/src/client/reducers/comicinfo.reducer.js b/src/client/reducers/comicinfo.reducer.js index 6cc7bbd..89d65d5 100644 --- a/src/client/reducers/comicinfo.reducer.js +++ b/src/client/reducers/comicinfo.reducer.js @@ -17,9 +17,10 @@ function comicinfoReducer(state = initialState, action) { inProgress: true, }; case CV_SEARCH_SUCCESS: + console.log("ACTION", action); return { ...state, - searchResults: action.searchResults.results, + searchResults: action.searchResults, searchQuery: action.searchQueryObject, inProgress: false, }; diff --git a/src/client/shared/utils/searchmatchscorer.utils.ts b/src/client/shared/utils/searchmatchscorer.utils.ts new file mode 100644 index 0000000..632818c --- /dev/null +++ b/src/client/shared/utils/searchmatchscorer.utils.ts @@ -0,0 +1,27 @@ +import { each, isUndefined, isNull } from "lodash"; +const stringSimilarity = require("string-similarity"); + +export const matchScorer = (searchMatches, searchQuery) => { + // 1. Check if it exists in the db (score: 0) + // 2. Check if issue name matches strongly (score: ++) + // 3. Check if issue number matches strongly (score: ++) + // 4. Check if issue covers hash match strongly (score: +++) + // 5. Check if issue year matches strongly (score: +) + const score = 0; + console.log("yedvadkar", searchMatches); + each(searchMatches, (match, idx) => { + if (!isNull(searchQuery.issue.meta.normalized) && !isNull(match.name)) { + const issueNameScore = stringSimilarity.compareTwoStrings( + searchQuery.issue.meta.normalized, + match.name, + ); + match.score = issueNameScore; + console.log("name score" + idx + ":", issueNameScore); + } else { + console.log("match not possible"); + } + }); + return searchMatches; + + // check for the issue name match +}; diff --git a/yarn.lock b/yarn.lock index be64784..62d0554 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10360,6 +10360,11 @@ prettier@^2.2.1: resolved "https://registry.npmjs.org/prettier/-/prettier-2.3.1.tgz" integrity sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA== +pretty-bytes@^5.6.0: + version "5.6.0" + resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb" + integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg== + pretty-error@^2.1.1: version "2.1.2" resolved "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz"