From 532f2df1b15d38fd290150716095705e48e371d2 Mon Sep 17 00:00:00 2001 From: Alexander Midteide <144693023+alexdigdir@users.noreply.github.com> Date: Wed, 13 Nov 2024 11:33:50 +0100 Subject: [PATCH] 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 --- .../embeddable-markdown-html/src/html.tsx | 4 +- .../embeddable-markdown-html/src/markdown.tsx | 5 +-- .../AdditonalInfoContent.tsx | 9 ++-- .../MainContentReference.tsx | 45 +++++++++---------- 4 files changed, 30 insertions(+), 33 deletions(-) diff --git a/packages/embeddable-markdown-html/src/html.tsx b/packages/embeddable-markdown-html/src/html.tsx index 910208777..e6b747257 100644 --- 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(null); useEffect(() => { diff --git a/packages/embeddable-markdown-html/src/markdown.tsx b/packages/embeddable-markdown-html/src/markdown.tsx index 2602c2af0..6ac823770 100644 --- 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(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 index 21093802d..956a858af 100644 --- a/packages/frontend/src/components/AdditonalInfoContent/AdditonalInfoContent.tsx +++ b/packages/frontend/src/components/AdditonalInfoContent/AdditonalInfoContent.tsx @@ -1,4 +1,5 @@ import { Html, Markdown } from 'embeddable-markdown-html'; +import { memo } from 'react'; import styles from '../InboxItem/inboxItemDetail.module.css'; interface AdditionalInfoContentProps { @@ -6,7 +7,7 @@ interface AdditionalInfoContentProps { value: string | undefined; } -export const AdditionalInfoContent = ({ mediaType, value }: AdditionalInfoContentProps) => { +export const AdditionalInfoContent = memo(({ mediaType, value }: AdditionalInfoContentProps) => { if (!value) { return null; } @@ -14,9 +15,9 @@ export const AdditionalInfoContent = ({ mediaType, value }: AdditionalInfoConten const getContent = (mediaType: string) => { switch (mediaType) { case 'text/html': - return {value}; + return console.error('Html error: ', e)}>{value}; case 'text/markdown': - return {value}; + return console.error('Markdown error: ', e)}>{value}; case 'text/plain': return value; default: @@ -29,4 +30,4 @@ export const AdditionalInfoContent = ({ mediaType, value }: AdditionalInfoConten {getContent(mediaType ?? 'text/plain')} ); -}; +}); diff --git a/packages/frontend/src/components/MainContentReference/MainContentReference.tsx b/packages/frontend/src/components/MainContentReference/MainContentReference.tsx index 2ea719cd2..b651a09ce 100644 --- a/packages/frontend/src/components/MainContentReference/MainContentReference.tsx +++ b/packages/frontend/src/components/MainContentReference/MainContentReference.tsx @@ -1,5 +1,6 @@ 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'; @@ -7,33 +8,31 @@ import styles from './mainContentReference.module.css'; const getContent = (mediaType: EmbeddableMediaType, data: string) => { switch (mediaType) { case EmbeddableMediaType.markdown: - return {data}; + return console.error('Markdown error: ', e)}>{data}; case EmbeddableMediaType.html: - return {data}; + return console.error('Html error: ', e)}>{data}; 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
{getContent(content.mediaType, data)}
; -}; + if (!content || !isSuccess) { + return null; + } + return
{getContent(content.mediaType, data)}
; + }, +);