Merge pull request #255 from FACT-Finder/fix-broken-ui

Fix UI
FACT-Finder · Jul 2, 2024 · 6f02bd6 · 6f02bd6
2 parents 1311f69 + 41be40a
commit 6f02bd6
Show file tree

Hide file tree

Showing 5 changed files with 450 additions and 599 deletions.
diff --git a/package.json b/package.json
@@ -19,10 +19,10 @@
   "devDependencies": {
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jest": "28.6.0",
-    "eslint-plugin-promise": "6.2.0",
+    "eslint-plugin-promise": "6.4.0",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-unicorn": "54.0.0",
-    "lerna": "8.1.3"
+    "lerna": "8.1.5"
   },
   "resolutions": {
     "@types/react": "18.3.3",

diff --git a/packages/snage/package.json b/packages/snage/package.json
@@ -24,10 +24,10 @@
     "ajv": "8.16.0",
     "cross-env": "7.0.3",
     "express": "4.19.2",
-    "fp-ts": "2.16.6",
+    "fp-ts": "2.16.7",
     "io-ts": "2.2.21",
     "parsimmon": "1.18.1",
-    "prom-client": "15.1.2",
+    "prom-client": "15.1.3",
     "semver": "7.6.2",
     "string-similarity": "4.0.4",
     "winston": "3.13.0",
@@ -41,7 +41,7 @@
     "@types/inquirer": "8.2.10",
     "@types/jest": "29.5.12",
     "@types/nock": "11.1.0",
-    "@types/node": "20.14.5",
+    "@types/node": "20.14.9",
     "@types/parsimmon": "1.10.9",
     "@types/query-string": "6.3.0",
     "@types/semver": "7.5.8",
@@ -54,9 +54,9 @@
     "get-port": "7.1.0",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",
-    "lerna": "8.1.3",
+    "lerna": "8.1.5",
     "nock": "13.5.4",
-    "nodemon": "3.1.3",
+    "nodemon": "3.1.4",
     "npm-run-all": "4.1.5",
     "portable-fetch": "3.0.0",
     "prettier": "3.3.2",
@@ -66,8 +66,8 @@
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
     "tslib": "2.6.3",
-    "typescript": "5.4.5",
-    "webpack": "5.92.0",
+    "typescript": "5.5.3",
+    "webpack": "5.92.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
     "webpack-shell-plugin-next": "2.3.1"

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -6,11 +6,11 @@
   "dependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@mui/icons-material": "5.15.20",
-    "@mui/material": "5.15.20",
-    "@mui/styles": "5.15.20",
+    "@mui/icons-material": "5.15.21",
+    "@mui/material": "5.15.21",
+    "@mui/styles": "5.15.21",
     "@types/axios": "0.14.0",
-    "@types/node": "20.14.5",
+    "@types/node": "20.14.9",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "axios": "1.7.2",
@@ -22,7 +22,7 @@
     "react-syntax-highlighter": "15.5.0",
     "react-virtualized": "9.22.5",
     "remark-gfm": "4.0.0",
-    "typescript": "5.4.5",
+    "typescript": "5.5.3",
     "use-debounce": "10.0.1"
   },
   "scripts": {

diff --git a/packages/ui/src/ReactMarkdown.tsx b/packages/ui/src/ReactMarkdown.tsx
@@ -5,7 +5,8 @@ import {Link, Theme} from '@mui/material';
 import LinkIcon from '@mui/icons-material/Link';
 import remarkGfm from 'remark-gfm';
 import {getStateFromURL, NavigateNote} from './state';
-import Markdown from 'react-markdown';
+import Markdown, {Components, ExtraProps} from 'react-markdown';
+import {ElementContent} from 'react-markdown/lib';
 
 const useStyles = makeStyles(
     (theme: Theme) => ({
@@ -43,15 +44,17 @@ export const ReactMarkdown = React.memo(({content, navigateNote}: {content: stri
     );
 });
 
-const MarkdownCodeBlock: React.FC<any> = ({inline, className, children, ...props}) => {
+const MarkdownCodeBlock: (
+    props: React.JSX.IntrinsicElements['code'] & ExtraProps
+) => React.JSX.Element | string | null | undefined = ({node, className, children}) => {
     const classes = useStyles();
     const match = /language-(\w+)/.exec(className ?? '');
-    return !inline && match ? (
-        <SyntaxHighlighter className={classes.code} language={match[1]} PreTag="div" {...props}>
+    return !node?.properties?.inline && match ? (
+        <SyntaxHighlighter className={classes.code} language={match[1]} PreTag="div" {...node?.properties}>
             {String(children).replace(/\n$/, '')}
         </SyntaxHighlighter>
     ) : (
-        <code className={className} {...props}>
+        <code className={className} {...node?.properties}>
             {children}
         </code>
     );
@@ -62,9 +65,11 @@ const toNoteURL = (href: string): string => {
     return `/?q=${encodeURIComponent(query)}&n=${href}`;
 };
 
-const MarkdownLink: (navigateNote: NavigateNote) => React.FC<any> =
+const MarkdownLink: (
+    navigateNote: NavigateNote
+) => (props: React.JSX.IntrinsicElements['a'] & ExtraProps) => React.JSX.Element | string | null | undefined =
     (navigateNote) =>
-    ({href: nullableHref, ...props}) => {
+    ({href: nullableHref, node}) => {
         const href = nullableHref ?? '';
         const isNoteLink =
             !href.includes('://') && !href.startsWith('//') && !href.startsWith('/') && !href.startsWith('#');
@@ -73,7 +78,7 @@ const MarkdownLink: (navigateNote: NavigateNote) => React.FC<any> =
 
         return (
             <Link
-                {...props}
+                {...node?.properties}
                 href={hrefWithNote}
                 onClick={(e) => {
                     e.stopPropagation();
@@ -86,36 +91,40 @@ const MarkdownLink: (navigateNote: NavigateNote) => React.FC<any> =
         );
     };
 
-const flatten = (text, child): any =>
+const flatten = (text: string, child: ElementContent): string =>
     // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-    typeof child === 'string' ? text + child : React.Children.toArray(child.props.children).reduce(flatten, text);
+    child.type === 'text' ? text + child.value : child.type === 'element' ? child.children.reduce(flatten, text) : '';
 
-const HeadingRenderer: React.FC<any> = ({level, children}) => {
-    const text = children.reduce(flatten, '');
-    const slug = text.toLowerCase().replace(/\W/g, '-');
-    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-    return React.createElement('h' + level, {id: slug}, [
-        ...React.Children.toArray(children),
-        <React.Fragment key="link">
-            {level !== 1 ? (
-                <>
-                    &nbsp;
-                    <a className="slug-link" href={`#${slug}`}>
-                        <LinkIcon fontSize="small" />
-                    </a>
-                </>
-            ) : null}
-        </React.Fragment>,
-    ]);
-};
+const getHeadingRenderer =
+    <TagName extends keyof React.JSX.IntrinsicElements>(
+        level: number
+    ): ((props: React.JSX.IntrinsicElements[TagName] & ExtraProps) => React.JSX.Element | string | null | undefined) =>
+    ({node, children}) => {
+        const text = node?.children?.reduce(flatten, '');
+        const slug = text?.toLowerCase().replace(/\W/g, '-') ?? 'No headline text';
+        // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+        return React.createElement('h' + level, {id: slug}, [
+            ...React.Children.toArray(children),
+            <React.Fragment key="link">
+                {level === 1 ? null : (
+                    <>
+                        &nbsp;
+                        <a className="slug-link" href={`#${slug}`}>
+                            <LinkIcon fontSize="small" />
+                        </a>
+                    </>
+                )}
+            </React.Fragment>,
+        ]);
+    };
 
-const renderers: (n: NavigateNote) => any = (navigateNote) => ({
+const renderers: (n: NavigateNote) => Components = (navigateNote) => ({
     code: MarkdownCodeBlock,
     a: MarkdownLink(navigateNote),
-    h1: HeadingRenderer,
-    h2: HeadingRenderer,
-    h3: HeadingRenderer,
-    h4: HeadingRenderer,
-    h5: HeadingRenderer,
-    h6: HeadingRenderer,
+    h1: getHeadingRenderer<'h1'>(1),
+    h2: getHeadingRenderer<'h2'>(2),
+    h3: getHeadingRenderer<'h3'>(3),
+    h4: getHeadingRenderer<'h4'>(4),
+    h5: getHeadingRenderer<'h5'>(5),
+    h6: getHeadingRenderer<'h6'>(6),
 });