fix: Application freezing but when moving dialog to bin (#1352)

* fix: Application freezing but when moving dialog to bin * Updated according to PR comments * Fixed linting * Fixed linting
digdir · Nov 13, 2024 · 532f2df · 532f2df
1 parent efba0f5
commit 532f2df
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 33 deletions.
diff --git a/packages/embeddable-markdown-html/src/html.tsx b/packages/embeddable-markdown-html/src/html.tsx
@@ -13,8 +13,8 @@ const production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs };
 
 export const Html: React.FC<{
   children: string;
-  onError?: (err: Error) => void;
-}> = ({ children, onError = () => {} }) => {
+  onError: (err: Error) => void;
+}> = ({ children, onError }) => {
   const [reactContent, setReactContent] = useState<ReactElement | null>(null);
 
   useEffect(() => {

diff --git a/packages/embeddable-markdown-html/src/markdown.tsx b/packages/embeddable-markdown-html/src/markdown.tsx
@@ -24,10 +24,7 @@ const production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs };
 export const Markdown: ({
   children,
   onError,
-}: { children: string; onError?: (error: unknown) => void }) => ReactElement | null = ({
-  children,
-  onError = () => {},
-}) => {
+}: { children: string; onError: (error: unknown) => void }) => ReactElement | null = ({ children, onError }) => {
   const [reactContent, setReactContent] = useState<ReactElement | null>(null);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed

diff --git a/packages/frontend/src/components/AdditonalInfoContent/AdditonalInfoContent.tsx b/packages/frontend/src/components/AdditonalInfoContent/AdditonalInfoContent.tsx
@@ -1,22 +1,23 @@
 import { Html, Markdown } from 'embeddable-markdown-html';
+import { memo } from 'react';
 import styles from '../InboxItem/inboxItemDetail.module.css';
 
 interface AdditionalInfoContentProps {
   mediaType: string | undefined;
   value: string | undefined;
 }
 
-export const AdditionalInfoContent = ({ mediaType, value }: AdditionalInfoContentProps) => {
+export const AdditionalInfoContent = memo(({ mediaType, value }: AdditionalInfoContentProps) => {
   if (!value) {
     return null;
   }
 
   const getContent = (mediaType: string) => {
     switch (mediaType) {
       case 'text/html':
-        return <Html>{value}</Html>;
+        return <Html onError={(e) => console.error('Html error: ', e)}>{value}</Html>;
       case 'text/markdown':
-        return <Markdown>{value}</Markdown>;
+        return <Markdown onError={(e) => console.error('Markdown error: ', e)}>{value}</Markdown>;
       case 'text/plain':
         return value;
       default:
@@ -29,4 +30,4 @@ export const AdditionalInfoContent = ({ mediaType, value }: AdditionalInfoConten
       {getContent(mediaType ?? 'text/plain')}
     </section>
   );
-};
+});
diff --git a/packages/frontend/src/components/MainContentReference/MainContentReference.tsx b/packages/frontend/src/components/MainContentReference/MainContentReference.tsx
@@ -1,39 +1,38 @@
 import { useQuery } from '@tanstack/react-query';
 import { Html, Markdown } from 'embeddable-markdown-html';
+import { memo } from 'react';
 import { type DialogByIdDetails, EmbeddableMediaType } from '../../api/useDialogById.tsx';
 import { QUERY_KEYS } from '../../constants/queryKeys.ts';
 import styles from './mainContentReference.module.css';
 
 const getContent = (mediaType: EmbeddableMediaType, data: string) => {
   switch (mediaType) {
     case EmbeddableMediaType.markdown:
-      return <Markdown>{data}</Markdown>;
+      return <Markdown onError={(e) => console.error('Markdown error: ', e)}>{data}</Markdown>;
     case EmbeddableMediaType.html:
-      return <Html>{data}</Html>;
+      return <Html onError={(e) => console.error('Html error: ', e)}>{data}</Html>;
     default:
       return data;
   }
 };
 
-export const MainContentReference = ({
-  content,
-  dialogToken,
-}: { content: DialogByIdDetails['mainContentReference']; dialogToken: string }) => {
-  const { data, isSuccess } = useQuery({
-    queryKey: [QUERY_KEYS.MAIN_CONTENT_REFERENCE, content?.url, content?.mediaType],
-    queryFn: () =>
-      fetch(content!.url, {
-        headers: {
-          'Content-Type': 'text/plain',
-          Authorization: `Bearer ${dialogToken}`,
-        },
-      }).then((res) => res.text()),
-    enabled: content?.url !== undefined && Object.values(EmbeddableMediaType).includes(content.mediaType),
-  });
+export const MainContentReference = memo(
+  ({ content, dialogToken }: { content: DialogByIdDetails['mainContentReference']; dialogToken: string }) => {
+    const { data, isSuccess } = useQuery({
+      queryKey: [QUERY_KEYS.MAIN_CONTENT_REFERENCE, content?.url, content?.mediaType],
+      queryFn: () =>
+        fetch(content!.url, {
+          headers: {
+            'Content-Type': 'text/plain',
+            Authorization: `Bearer ${dialogToken}`,
+          },
+        }).then((res) => res.text()),
+      enabled: content?.url !== undefined && Object.values(EmbeddableMediaType).includes(content.mediaType),
+    });
 
-  if (!content || !isSuccess) {
-    return null;
-  }
-
-  return <section className={styles.mainContentReference}>{getContent(content.mediaType, data)}</section>;
-};
+    if (!content || !isSuccess) {
+      return null;
+    }
+    return <section className={styles.mainContentReference}>{getContent(content.mediaType, data)}</section>;
+  },
+);