dependency cleanup & refactor of error message component [skip ci]

hyperglass/ui/components/results/error.tsx

@@ -1,21 +1,30 @@
 import { Text } from '@chakra-ui/react';
-import strReplace from 'react-string-replace';
 
 import type { TFormattedError } from './types';
 
+type TFormatError = string | JSX.Element;
+
+function formatError(text: string, values: string[], regex: RegExp): TFormatError[] | TFormatError {
+  if (!values.length) {
+    return text;
+  }
+
+  const parts = text.split(regex);
+
+  return parts.reduce((prev, current, i) => {
+    if (!i) {
+      return [current];
+    }
+
+    return prev.concat(
+      values.includes(current) ? <strong key={i + current}>{current}</strong> : current,
+    );
+  }, [] as TFormatError[]);
+}
+
 export const FormattedError = (props: TFormattedError) => {
   const { keywords, message } = props;
-  const patternStr = keywords.map(kw => `(${kw})`).join('|');
+  const pattern = new RegExp(keywords.map(kw => `(${kw})`).join('|'), 'gi');
-  const pattern = new RegExp(patternStr, 'gi');
+  const things = formatError(message, keywords, pattern);
-  let errorFmt;
+  return <Text as="span">{keywords.length !== 0 ? things : message}</Text>;
-  try {
-    errorFmt = strReplace(message, pattern, match => (
-      <Text key={match} as="strong">
-        {match}
-      </Text>
-    ));
-  } catch (err) {
-    errorFmt = <Text as="span">{message}</Text>;
-  }
-  return <Text as="span">{keywords.length !== 0 ? errorFmt : message}</Text>;
 };

hyperglass/ui/package.json

@@ -37,12 +37,12 @@
     "react-markdown": "^4.3.1",
     "react-query": "^3.5.6",
     "react-select": "^3.1.1",
-    "react-string-replace": "^0.4.4",
     "react-table": "^7.6.2",
     "string-format": "^2.0.0",
     "yup": "^0.32.8"
   },
   "devDependencies": {
+    "@hookstate/devtools": "^3.0.0",
     "@types/node": "^14.11.10",
     "@types/react-select": "^3.0.28",
     "@types/react-table": "^7.0.25",

hyperglass/ui/pages/_app.tsx

@@ -3,6 +3,9 @@ import { HyperglassProvider } from '~/context';
 import { IConfig } from '~/types';
 // import { useRouter } from "next/router";
 // import Error from "./_error";
+if (process.env.NODE_ENV === 'development') {
+  require('@hookstate/devtools');
+}
 
 import type { AppProps, AppInitialProps } from 'next/app';
 

hyperglass/ui/yarn.lock

@@ -905,6 +905,14 @@
   resolved "https://registry.yarnpkg.com/@hookstate/core/-/core-3.0.1.tgz#dc46ea71e3bf0ab5c2dc024029c9210ed12fbb84"
   integrity sha512-buRie83l3FYPLCuaBE68puE3XS19r2O+jwC/kH2ikIW7ww8AavndR3MspzMMkNpq2zL8pZtIcpiWJBbn4Uq2Vw==
 
+"@hookstate/devtools@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@hookstate/devtools/-/devtools-3.0.0.tgz#9b289503112f0f95221d0c86e602ada7793bbd3a"
+  integrity sha512-jXI9e+4+dr0FbdtHhQPa0/SmRwLM7twMU0Qf87AgM3DqqFDV9dRPD56jPXaTh8xD1Bt2R72TmGmqdkDhdKG8AQ==
+  dependencies:
+    redux "4.0.5"
+    redux-devtools-extension "2.13.8"
+
 "@hookstate/persistence@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@hookstate/persistence/-/persistence-3.0.0.tgz#973b30d3a3bb1b29f4f59b1afe0d914e71a23882"
@@ -4313,7 +4321,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4:
+lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -5597,13 +5605,6 @@ react-select@^3.1.1:
     react-input-autosize "^2.2.2"
     react-transition-group "^4.3.0"
 
-react-string-replace@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-0.4.4.tgz#24006fbe0db573d5be583133df38b1a735cb4225"
-  integrity sha512-FAMkhxmDpCsGTwTZg7p/2v+/GTmxAp73so3fbSvlAcBBX36ujiGRNEaM/1u+jiYQrArhns+7eE92g2pi5E5FUA==
-  dependencies:
-    lodash "^4.17.4"
-
 react-style-singleton@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
@@ -5674,12 +5675,17 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+redux-devtools-extension@2.13.8:
+  version "2.13.8"
+  resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
+  integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
+
 redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
   integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
 
-redux@^4.0.5:
+redux@4.0.5, redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
   integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==