🪛 Escaped # in encoded image URI

package.json

@@ -47,6 +47,7 @@
     "sharp": "^0.28.1",
     "socket.io-client": "^4.1.2",
     "threetwo-ui-typings": "^1.0.1",
+    "voca": "^1.4.0",
     "xregexp": "^5.0.2"
   },
   "devDependencies": {

src/client/components/Card.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import { IExtractedComicBookCoverFile } from "threetwo-ui-typings";
-import { removeLeadingPeriod } from "../shared/utils/formatting.utils";
+import {
+  removeLeadingPeriod,
+  escapePoundSymbol,
+} from "../shared/utils/formatting.utils";
 import { isUndefined, isEmpty } from "lodash";
 import { Link } from "react-router-dom";
 
@@ -18,6 +21,13 @@ class Card extends React.Component<IProps, IState> {
   public drawCoverCard = (
     metadata: IExtractedComicBookCoverFile,
   ): JSX.Element => {
+    const filePath = encodeURI(
+      "http://localhost:3000" +
+        removeLeadingPeriod(metadata.path) +
+        "/" +
+        metadata.name,
+    );
+
     return (
       <div>
         <div className="card generic-card">
@@ -25,12 +35,7 @@ class Card extends React.Component<IProps, IState> {
             <div className="card-image">
               <figure className="image">
                 <img
-                  src={
+                  src={escapePoundSymbol(filePath)}
-                    "http://localhost:3000" +
-                    removeLeadingPeriod(metadata.path) +
-                    "/" +
-                    metadata.name
-                  }
                   alt="Placeholder image"
                 />
               </figure>

src/client/components/Dashboard.tsx

@@ -55,7 +55,7 @@ const mapDispatchToProps = (dispatch) => ({
       getRecentlyImportedComicBooks({
         paginationOptions: {
           page: 0,
-          limit: 17,
+          limit: 18,
         },
       }),
     );

src/client/shared/utils/formatting.utils.ts

@@ -4,3 +4,8 @@ export const removeLeadingPeriod = (input: string): string => {
   }
   return input;
 };
+
+export const escapePoundSymbol = (input: string): string => {
+  console.log(input.replace(/\#/gi, "%23"));
+  return input.replace(/\#/gi, "%23");
+};

src/client/shared/utils/nlp.utils.ts

@@ -3,7 +3,7 @@ import { default as dates } from "compromise-dates";
 import { default as sentences } from "compromise-sentences";
 import { default as numbers } from "compromise-numbers";
 import xregexp from "xregexp";
-import { map, xor, isEmpty } from "lodash";
+import { map, xor, isEmpty, isNull } from "lodash";
 
 nlp.extend(sentences);
 nlp.extend(numbers);
@@ -70,13 +70,7 @@ export const tokenize = (inputString: string) => {
 
   // regexes to match constituent parts of the search string
   // and isolate the search terms
-  const foo = replaceRecursive(
+
-    "jagan sampatkar ((((asdasd)(Asdasd)(3019)))) (123) milun",
-    "\\(",
-    "\\)",
-    (match) => "",
-  );
-  console.log(foo);
   const chapters = inputString.replace(
     /ch(a?p?t?e?r?)(\W?)(\_?)(\#?)(\d)/gi,
     "",
@@ -85,18 +79,31 @@ export const tokenize = (inputString: string) => {
     /(\b(vo?l?u?m?e?)\.?)(\s*-|\s*_)?(\s*[0-9]+[.0-9a-z]*)/gi,
     "",
   );
-  const pageCounts = inputString.match(
+  const pageCounts = inputString.replace(
     /\b[.,]?\s*\d+\s*(p|pg|pgs|pages)\b\s*/gi,
+    "",
   );
 
-  const parantheses = inputString.match(/\([^\(]*?\)/gi);
+  // if the name has things like "4 of 5", remove the " of 5" part
+  // also, if the name has 3-6, remove the -6 part.  note that we'll
+  // try to handle the word "of" in a few common languages, like french/
+  // spanish (de), italian (di), german (von), dutch (van) or polish (z)
+  replaceRecursive(inputString, "\\(", "\\)", (match) => "");
+  replaceRecursive(inputString, "\\[", "\\]", (match) => "");
+  replaceRecursive(inputString, "\\{", "\\}", (match) => "");
+  const parantheses = inputString.replace(/\([^\(]*?\)/gi, "");
+  const curlyBraces = inputString.replace(/\{[^\{]*?\}/gi, "");
+  const squareBrackets = inputString.replace(/\[[^\[]*?\]/gi, "");
 
-  const curlyBraces = inputString.match(/\{[^\{]*?\}/gi);
+  const genericNumericRange = inputString.replace(
-  const squareBrackets = inputString.match(/\[[^\[]*?\]/gi);
-  const genericNumericRange = inputString.match(
     /([^\d]+)(\s*(of|de|di|von|van|z)\s*#*\d+)/gi,
+    "",
   );
-  const hyphenatedNumericRange = inputString.match(/([^\d])?(-\d+)/gi);
+  const hyphenatedIssueRange = inputString.match(/(\d)(-\d+)/gi);
+  if (!isNull(hyphenatedIssueRange) && hyphenatedIssueRange.length > 2) {
+    let issueNumber = hyphenatedIssueRange[0];
+  }
+
   const readingListIndicators = inputString.match(
     /^\s*\d+(\.\s+?|\s*-?\s*)/gim,
   );
@@ -124,7 +131,6 @@ export const tokenize = (inputString: string) => {
       curlyBraces,
       squareBrackets,
       genericNumericRange,
-      hyphenatedNumericRange,
       readingListIndicators,
       volumes,
     },