From 61362f91750155b50fa35ed2219643f86b5b8adc Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Fri, 20 Oct 2023 08:49:46 +0200 Subject: [PATCH] fix(frontend): migrate type changes Signed-off-by: Tilman Vatteroth --- .../application-loader/application-loader.tsx | 2 ++ .../loading-screen/loading-screen.tsx | 2 +- .../hooks/use-attach-line-numbers.tsx | 36 +++++++++---------- .../highlighted-code/hooks/use-code-dom.tsx | 6 ++-- ...nd-additional-configuration-to-renderer.ts | 2 +- .../hooks/use-send-scroll-state.ts | 4 +-- .../renderer-iframe/renderer-iframe.tsx | 4 +-- .../use-change-editor-content-callback.tsx | 4 +-- .../editor-page/editor-pane/editor-pane.tsx | 4 +-- .../use-code-mirror-scroll-watch-extension.ts | 2 +- .../hooks/use-apply-scroll-state.ts | 2 +- .../hooks/use-line-based-position.ts | 4 +-- .../hooks/yjs/use-websocket-url.ts | 4 +-- .../status-bar/selected-characters.tsx | 2 +- .../tool-bar/table-picker/table-size-text.tsx | 2 +- .../hooks/use-on-scroll-with-line-offset.ts | 8 ++--- .../use-scroll-state-without-line-offset.ts | 6 ++-- .../renderer-pane/renderer-pane.tsx | 4 +-- .../note-info-line-created-at.tsx | 2 +- .../note-info-line-updated-at.tsx | 2 +- .../permission-entry-user.tsx | 4 +-- .../share-modal/note-url-field.tsx | 2 +- .../editor-page/synced-scroll/scroll-props.ts | 4 +-- .../global-dialogs/motd-modal/motd-modal.tsx | 6 ++-- .../global/language-option.tsx | 2 +- .../markdown-to-react/markdown-to-react.tsx | 2 ++ .../register-page/register-error.tsx | 4 +-- .../use-document-sync-scrolling.ts | 6 ++-- .../hooks/sync-scroll/use-on-user-scroll.ts | 2 +- .../sync-scroll/use-scroll-to-line-mark.ts | 4 +-- .../document/document-markdown-renderer.tsx | 4 +-- .../hooks/use-editor-receive-handler.ts | 2 +- .../hooks/use-send-to-renderer.ts | 2 +- .../slide-show-page-content.tsx | 2 +- .../csv/csv-table.tsx | 2 +- .../common/use-single-string-url-parameter.ts | 5 ++- ...te-markdown-content-without-frontmatter.ts | 4 +-- 37 files changed, 80 insertions(+), 79 deletions(-) diff --git a/frontend/src/components/application-loader/application-loader.tsx b/frontend/src/components/application-loader/application-loader.tsx index 3c0062e0c..aa9161216 100644 --- a/frontend/src/components/application-loader/application-loader.tsx +++ b/frontend/src/components/application-loader/application-loader.tsx @@ -42,6 +42,8 @@ export const ApplicationLoader: React.FC = ({ children }) => For further information look into the browser console. ) + } else { + return null } }, [error]) diff --git a/frontend/src/components/application-loader/loading-screen/loading-screen.tsx b/frontend/src/components/application-loader/loading-screen/loading-screen.tsx index fb274dc93..c19944370 100644 --- a/frontend/src/components/application-loader/loading-screen/loading-screen.tsx +++ b/frontend/src/components/application-loader/loading-screen/loading-screen.tsx @@ -11,7 +11,7 @@ import React from 'react' import { Alert } from 'react-bootstrap' export interface LoadingScreenProps { - errorMessage?: string | ReactElement + errorMessage?: string | ReactElement | null } /** diff --git a/frontend/src/components/common/highlighted-code/hooks/use-attach-line-numbers.tsx b/frontend/src/components/common/highlighted-code/hooks/use-attach-line-numbers.tsx index 75eceb388..42ef0b15a 100644 --- a/frontend/src/components/common/highlighted-code/hooks/use-attach-line-numbers.tsx +++ b/frontend/src/components/common/highlighted-code/hooks/use-attach-line-numbers.tsx @@ -14,21 +14,21 @@ import { Fragment, useMemo } from 'react' * @param lines The elements to wrap * @param startLineNumber The line number to start with. Will default to 1 if omitted. */ -export const useAttachLineNumbers = ( - lines: undefined | ReactElement[], - startLineNumber = 1 -): undefined | ReactElement[] => - useMemo( - () => - lines?.map((line, index) => ( - - - {startLineNumber + index} - -
- {line} -
- - )), - [startLineNumber, lines] - ) +export const useAttachLineNumbers = (lines: ReactElement[] | null, startLineNumber = 1): ReactElement | null => { + return useMemo(() => { + if (lines === null) { + return null + } + const adjustedLines = lines.map((line, index) => ( + + + {startLineNumber + index} + +
+ {line} +
+ + )) + return {adjustedLines} + }, [startLineNumber, lines]) +} diff --git a/frontend/src/components/common/highlighted-code/hooks/use-code-dom.tsx b/frontend/src/components/common/highlighted-code/hooks/use-code-dom.tsx index 17dc3f24e..6b8000f2e 100644 --- a/frontend/src/components/common/highlighted-code/hooks/use-code-dom.tsx +++ b/frontend/src/components/common/highlighted-code/hooks/use-code-dom.tsx @@ -3,7 +3,7 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import { HtmlToReact } from '../../../../components/common/html-to-react/html-to-react' +import { HtmlToReact } from '../../html-to-react/html-to-react' import type { HLJSApi } from 'highlight.js' import type { ReactElement } from 'react' import React, { useMemo } from 'react' @@ -16,10 +16,10 @@ import React, { useMemo } from 'react' * @param language The language of the code to use for highlighting * @return The react elements that represent the highlighted code */ -export const useCodeDom = (code: string, hljs: HLJSApi | undefined, language?: string): ReactElement[] | undefined => { +export const useCodeDom = (code: string, hljs: HLJSApi | undefined, language?: string): ReactElement[] | null => { return useMemo(() => { if (!hljs) { - return + return null } if (!!language && hljs.listLanguages().includes(language)) { const highlightedHtml = hljs.highlight(code, { language }).value diff --git a/frontend/src/components/common/renderer-iframe/hooks/use-send-additional-configuration-to-renderer.ts b/frontend/src/components/common/renderer-iframe/hooks/use-send-additional-configuration-to-renderer.ts index c4428c79c..68fc253db 100644 --- a/frontend/src/components/common/renderer-iframe/hooks/use-send-additional-configuration-to-renderer.ts +++ b/frontend/src/components/common/renderer-iframe/hooks/use-send-additional-configuration-to-renderer.ts @@ -20,7 +20,7 @@ export const useSendAdditionalConfigurationToRenderer = (rendererReady: boolean) useSendToRenderer( useMemo(() => { return newlinesAreBreaks === undefined - ? undefined + ? null : { type: CommunicationMessageType.SET_ADDITIONAL_CONFIGURATION, darkModePreference: darkModePreference, diff --git a/frontend/src/components/common/renderer-iframe/hooks/use-send-scroll-state.ts b/frontend/src/components/common/renderer-iframe/hooks/use-send-scroll-state.ts index a6f1925c1..7936c00c2 100644 --- a/frontend/src/components/common/renderer-iframe/hooks/use-send-scroll-state.ts +++ b/frontend/src/components/common/renderer-iframe/hooks/use-send-scroll-state.ts @@ -15,13 +15,13 @@ import { useMemo, useRef } from 'react' * @param scrollState The scroll state to send * @param rendererReady Defines if the target renderer is ready */ -export const useSendScrollState = (scrollState: ScrollState | undefined, rendererReady: boolean): void => { +export const useSendScrollState = (scrollState: ScrollState | null, rendererReady: boolean): void => { const oldScrollState = useRef(undefined) useSendToRenderer( useMemo(() => { if (!scrollState || equal(scrollState, oldScrollState.current)) { - return + return null } oldScrollState.current = scrollState return { type: CommunicationMessageType.SET_SCROLL_STATE, scrollState } diff --git a/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx b/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx index a7fa837e3..abe822be6 100644 --- a/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx +++ b/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx @@ -112,7 +112,7 @@ export const RendererIframe: React.FC = ({ CommunicationMessageType.EXTENSION_EVENT, useMemo(() => { return eventEmitter === undefined - ? undefined + ? null : (values: ExtensionEvent) => eventEmitter.emit(values.eventName, values.payload) }, [eventEmitter]) ) @@ -159,7 +159,7 @@ export const RendererIframe: React.FC = ({ useSendAdditionalConfigurationToRenderer(rendererReady) useSendMarkdownToRenderer(markdownContentLines, rendererReady) - useSendScrollState(scrollState, rendererReady) + useSendScrollState(scrollState ?? null, rendererReady) useEditorReceiveHandler( CommunicationMessageType.SET_SCROLL_STATE, useCallback((values: SetScrollStateMessage) => onScroll?.(values.scrollState), [onScroll]) diff --git a/frontend/src/components/editor-page/change-content-context/use-change-editor-content-callback.tsx b/frontend/src/components/editor-page/change-content-context/use-change-editor-content-callback.tsx index 14909852c..18565a5b4 100644 --- a/frontend/src/components/editor-page/change-content-context/use-change-editor-content-callback.tsx +++ b/frontend/src/components/editor-page/change-content-context/use-change-editor-content-callback.tsx @@ -40,9 +40,7 @@ export const changeEditorContent = (view: EditorView, formatter: ContentFormatte export const useChangeEditorContentCallback = () => { const [codeMirrorRef] = useCodemirrorReferenceContext() return useMemo(() => { - if (codeMirrorRef) { - return (callback: ContentFormatter) => changeEditorContent(codeMirrorRef, callback) - } + return !codeMirrorRef ? null : (callback: ContentFormatter) => changeEditorContent(codeMirrorRef, callback) }, [codeMirrorRef]) } diff --git a/frontend/src/components/editor-page/editor-pane/editor-pane.tsx b/frontend/src/components/editor-page/editor-pane/editor-pane.tsx index 44bf89fac..90226d11e 100644 --- a/frontend/src/components/editor-page/editor-pane/editor-pane.tsx +++ b/frontend/src/components/editor-page/editor-pane/editor-pane.tsx @@ -59,14 +59,14 @@ export type EditorPaneProps = ScrollProps */ export const EditorPane: React.FC = ({ scrollState, onScroll, onMakeScrollSource }) => { const { dispatchUiNotification } = useUiNotifications() - useApplyScrollState(scrollState) + useApplyScrollState(scrollState ?? null) const messageTransporter = useRealtimeConnection() useDisconnectOnUserLoginStatusChange(messageTransporter) const realtimeDoc = useRealtimeDoc() - const editorScrollExtension = useCodeMirrorScrollWatchExtension(onScroll) + const editorScrollExtension = useCodeMirrorScrollWatchExtension(onScroll ?? null) const tablePasteExtensions = useCodeMirrorTablePasteExtension() const fileInsertExtension = useCodeMirrorFileInsertExtension() const spellCheckExtension = useCodeMirrorSpellCheckExtension() diff --git a/frontend/src/components/editor-page/editor-pane/hooks/codemirror-extensions/use-code-mirror-scroll-watch-extension.ts b/frontend/src/components/editor-page/editor-pane/hooks/codemirror-extensions/use-code-mirror-scroll-watch-extension.ts index b0a32e4d4..79261b90f 100644 --- a/frontend/src/components/editor-page/editor-pane/hooks/codemirror-extensions/use-code-mirror-scroll-watch-extension.ts +++ b/frontend/src/components/editor-page/editor-pane/hooks/codemirror-extensions/use-code-mirror-scroll-watch-extension.ts @@ -35,7 +35,7 @@ export const extractScrollState = (view: EditorView): ScrollState => { * @param onScroll The callback that is used to post {@link ScrollState scroll states} when the editor view is scrolling. * @return The extensions that watches the scrolling in the editor. */ -export const useCodeMirrorScrollWatchExtension = (onScroll: OnScrollCallback): Extension => { +export const useCodeMirrorScrollWatchExtension = (onScroll: OnScrollCallback | null): Extension => { const onEditorScroll = useCallback( (view: EditorView) => { if (!onScroll || !view) { diff --git a/frontend/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts b/frontend/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts index d36f646d2..6e9c87e8e 100644 --- a/frontend/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts +++ b/frontend/src/components/editor-page/editor-pane/hooks/use-apply-scroll-state.ts @@ -35,7 +35,7 @@ const applyScrollState = (view: EditorView, scrollState: ScrollState): void => { * * @param scrollState The scroll state that should be monitored */ -export const useApplyScrollState = (scrollState?: ScrollState): void => { +export const useApplyScrollState = (scrollState: ScrollState | null): void => { const lastScrollPosition = useRef() const [codeMirrorRef] = useCodemirrorReferenceContext() diff --git a/frontend/src/components/editor-page/editor-pane/hooks/use-line-based-position.ts b/frontend/src/components/editor-page/editor-pane/hooks/use-line-based-position.ts index 09bf2b0a4..987451bd1 100644 --- a/frontend/src/components/editor-page/editor-pane/hooks/use-line-based-position.ts +++ b/frontend/src/components/editor-page/editor-pane/hooks/use-line-based-position.ts @@ -23,13 +23,13 @@ const calculateLineBasedPosition = (absolutePosition: number, lineStartIndexes: /** * Returns the line+character based position of the to-cursor, if available. */ -export const useLineBasedToPosition = (): LineBasedPosition | undefined => { +export const useLineBasedToPosition = (): LineBasedPosition | null => { const lineStartIndexes = useApplicationState((state) => state.noteDetails?.markdownContent.lineStartIndexes ?? []) const selectionTo = useApplicationState((state) => state.noteDetails?.selection.to) return useMemo(() => { if (selectionTo === undefined) { - return undefined + return null } return calculateLineBasedPosition(selectionTo, lineStartIndexes) }, [selectionTo, lineStartIndexes]) diff --git a/frontend/src/components/editor-page/editor-pane/hooks/yjs/use-websocket-url.ts b/frontend/src/components/editor-page/editor-pane/hooks/yjs/use-websocket-url.ts index 6ce35d265..0f514e8f8 100644 --- a/frontend/src/components/editor-page/editor-pane/hooks/yjs/use-websocket-url.ts +++ b/frontend/src/components/editor-page/editor-pane/hooks/yjs/use-websocket-url.ts @@ -13,7 +13,7 @@ const LOCAL_FALLBACK_URL = 'ws://localhost:8080/realtime/' /** * Provides the URL for the realtime endpoint. */ -export const useWebsocketUrl = (): URL | undefined => { +export const useWebsocketUrl = (): URL | null => { const noteId = useApplicationState((state) => state.noteDetails?.id) const baseUrl = useBaseUrl() @@ -34,7 +34,7 @@ export const useWebsocketUrl = (): URL | undefined => { return useMemo(() => { if (noteId === '' || noteId === undefined) { - return + return null } const url = new URL(websocketUrl) url.search = `?noteId=${noteId}` diff --git a/frontend/src/components/editor-page/editor-pane/status-bar/selected-characters.tsx b/frontend/src/components/editor-page/editor-pane/status-bar/selected-characters.tsx index f57fe10ac..46df11751 100644 --- a/frontend/src/components/editor-page/editor-pane/status-bar/selected-characters.tsx +++ b/frontend/src/components/editor-page/editor-pane/status-bar/selected-characters.tsx @@ -16,7 +16,7 @@ export const SelectedCharacters: React.FC = () => { const selection = useApplicationState((state) => state.noteDetails?.selection) const count = useMemo( - () => (selection === undefined || selection.to === undefined ? undefined : selection.to - selection.from), + () => (selection === undefined || selection.to === undefined ? null : selection.to - selection.from), [selection] ) const countTranslationOptions = useMemo(() => ({ count }), [count]) diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-text.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-text.tsx index a5219ef57..aa966d129 100644 --- a/frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-text.tsx +++ b/frontend/src/components/editor-page/editor-pane/tool-bar/table-picker/table-size-text.tsx @@ -20,7 +20,7 @@ export const TableSizeText: React.FC = ({ tableSize }) => { useTranslation() const translationValues = useMemo(() => { - return tableSize ? { cols: tableSize.columns, rows: tableSize.rows } : undefined + return tableSize ? { cols: tableSize.columns, rows: tableSize.rows } : null }, [tableSize]) if (!translationValues) { diff --git a/frontend/src/components/editor-page/renderer-pane/hooks/use-on-scroll-with-line-offset.ts b/frontend/src/components/editor-page/renderer-pane/hooks/use-on-scroll-with-line-offset.ts index 279b3af22..294d3f9c9 100644 --- a/frontend/src/components/editor-page/renderer-pane/hooks/use-on-scroll-with-line-offset.ts +++ b/frontend/src/components/editor-page/renderer-pane/hooks/use-on-scroll-with-line-offset.ts @@ -13,15 +13,15 @@ import { useMemo } from 'react' * @param onScroll The callback that posts a scroll state * @return the modified callback that posts the same scroll state but with line offset */ -export const useOnScrollWithLineOffset = (onScroll: ScrollCallback | undefined): ScrollCallback | undefined => { +export const useOnScrollWithLineOffset = (onScroll: ScrollCallback | null): ScrollCallback | null => { return useMemo(() => { - if (onScroll === undefined) { - return undefined + if (onScroll === null) { + return null } else { return (scrollState: ScrollState) => { const noteDetails = getGlobalState().noteDetails if (noteDetails === null) { - return undefined + return null } onScroll({ firstLineInView: scrollState.firstLineInView + noteDetails.startOfContentLineOffset, diff --git a/frontend/src/components/editor-page/renderer-pane/hooks/use-scroll-state-without-line-offset.ts b/frontend/src/components/editor-page/renderer-pane/hooks/use-scroll-state-without-line-offset.ts index 777fc4ba3..ebdd37a3a 100644 --- a/frontend/src/components/editor-page/renderer-pane/hooks/use-scroll-state-without-line-offset.ts +++ b/frontend/src/components/editor-page/renderer-pane/hooks/use-scroll-state-without-line-offset.ts @@ -13,11 +13,11 @@ import { useMemo } from 'react' * @param scrollState The original scroll state with the line offset * @return the adjusted scroll state without the line offset */ -export const useScrollStateWithoutLineOffset = (scrollState: ScrollState | undefined): ScrollState | undefined => { +export const useScrollStateWithoutLineOffset = (scrollState: ScrollState | null): ScrollState | null => { const lineOffset = useApplicationState((state) => state.noteDetails?.startOfContentLineOffset) return useMemo(() => { - return scrollState === undefined || lineOffset === undefined - ? undefined + return scrollState === null || lineOffset === undefined + ? null : { firstLineInView: scrollState.firstLineInView - lineOffset, scrolledPercentage: scrollState.scrolledPercentage diff --git a/frontend/src/components/editor-page/renderer-pane/renderer-pane.tsx b/frontend/src/components/editor-page/renderer-pane/renderer-pane.tsx index 75f0ec398..ce2c41342 100644 --- a/frontend/src/components/editor-page/renderer-pane/renderer-pane.tsx +++ b/frontend/src/components/editor-page/renderer-pane/renderer-pane.tsx @@ -29,8 +29,8 @@ export type RendererPaneProps = Omit< export const RendererPane: React.FC = ({ scrollState, onScroll, ...props }) => { const trimmedContentLines = useTrimmedNoteMarkdownContentWithoutFrontmatter() const noteType = useApplicationState((state) => state.noteDetails?.frontmatter.type) - const adjustedOnScroll = useOnScrollWithLineOffset(onScroll) - const adjustedScrollState = useScrollStateWithoutLineOffset(scrollState) + const adjustedOnScroll = useOnScrollWithLineOffset(onScroll ?? null) + const adjustedScrollState = useScrollStateWithoutLineOffset(scrollState ?? null) if (!noteType) { return null diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-created-at.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-created-at.tsx index f9be610d0..d39b6c794 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-created-at.tsx +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-created-at.tsx @@ -18,7 +18,7 @@ export const NoteInfoLineCreatedAt: React.FC = () => { useTranslation() const noteCreateTime = useApplicationState((state) => state.noteDetails?.createdAt) const noteCreateDateTime = useMemo( - () => (noteCreateTime === undefined ? undefined : DateTime.fromSeconds(noteCreateTime)), + () => (noteCreateTime === undefined ? null : DateTime.fromSeconds(noteCreateTime)), [noteCreateTime] ) diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-updated-at.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-updated-at.tsx index 85251a40a..b275aa572 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-updated-at.tsx +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-updated-at.tsx @@ -18,7 +18,7 @@ export const NoteInfoLineUpdatedAt: React.FC = () => { useTranslation() const noteUpdateTime = useApplicationState((state) => state.noteDetails?.updatedAt) const noteUpdateDateTime = useMemo( - () => (noteUpdateTime === undefined ? undefined : DateTime.fromSeconds(noteUpdateTime)), + () => (noteUpdateTime === undefined ? null : DateTime.fromSeconds(noteUpdateTime)), [noteUpdateTime] ) diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-user.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-user.tsx index 02ff3e8c2..f960a014b 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-user.tsx +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-user.tsx @@ -40,8 +40,8 @@ export const PermissionEntryUser: React.FC - (everyonePermission && everyonePermission.canEdit && !entry.canEdit) || - (loggedInPermission && loggedInPermission.canEdit && !entry.canEdit), + (!!everyonePermission && everyonePermission.canEdit && !entry.canEdit) || + (!!loggedInPermission && loggedInPermission.canEdit && !entry.canEdit), [everyonePermission, loggedInPermission, entry] ) diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/share-note-sidebar-entry/share-modal/note-url-field.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/share-note-sidebar-entry/share-modal/note-url-field.tsx index 70fcd03fb..1150791ba 100644 --- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/share-note-sidebar-entry/share-modal/note-url-field.tsx +++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/share-note-sidebar-entry/share-modal/note-url-field.tsx @@ -28,7 +28,7 @@ export const NoteUrlField: React.FC = ({ type }) => { const url = useMemo(() => { if (noteId === undefined) { - return undefined + return null } const url = new URL(baseUrl) url.pathname += `${type}/${noteId}` diff --git a/frontend/src/components/editor-page/synced-scroll/scroll-props.ts b/frontend/src/components/editor-page/synced-scroll/scroll-props.ts index 2b07e527d..07608abbb 100644 --- a/frontend/src/components/editor-page/synced-scroll/scroll-props.ts +++ b/frontend/src/components/editor-page/synced-scroll/scroll-props.ts @@ -7,8 +7,8 @@ export type ScrollCallback = (scrollState: ScrollState) => void export interface ScrollProps { - scrollState?: ScrollState - onScroll?: ScrollCallback + scrollState?: ScrollState | null + onScroll?: ScrollCallback | null onMakeScrollSource?: () => void } diff --git a/frontend/src/components/global-dialogs/motd-modal/motd-modal.tsx b/frontend/src/components/global-dialogs/motd-modal/motd-modal.tsx index 872b9bfb5..d732f8634 100644 --- a/frontend/src/components/global-dialogs/motd-modal/motd-modal.tsx +++ b/frontend/src/components/global-dialogs/motd-modal/motd-modal.tsx @@ -30,7 +30,7 @@ export const MotdModal: React.FC = () => { const { error, loading, value } = useAsync(fetchMotd) const [dismissed, setDismissed] = useState(false) - const lines = useMemo(() => value?.motdText.split('\n'), [value?.motdText]) + const lines = useMemo(() => value?.motdText.split('\n') ?? [], [value?.motdText]) const dismiss = useCallback(() => { if (value?.lastModified) { @@ -51,7 +51,7 @@ export const MotdModal: React.FC = () => { return ( 0 && !loading && !error && !dismissed} titleI18nKey={'motd.title'} {...cypressId('motd-modal')}> @@ -59,7 +59,7 @@ export const MotdModal: React.FC = () => { diff --git a/frontend/src/components/global-dialogs/settings-dialog/global/language-option.tsx b/frontend/src/components/global-dialogs/settings-dialog/global/language-option.tsx index a351726b2..ef30502a9 100644 --- a/frontend/src/components/global-dialogs/settings-dialog/global/language-option.tsx +++ b/frontend/src/components/global-dialogs/settings-dialog/global/language-option.tsx @@ -17,7 +17,7 @@ interface LanguageOptionProps { */ export const LanguageOption: React.FC = ({ languageCode }) => { const displayName = useMemo( - () => new Intl.DisplayNames([languageCode], { type: 'language' }).of(languageCode), + () => new Intl.DisplayNames([languageCode], { type: 'language' }).of(languageCode) ?? null, [languageCode] ) diff --git a/frontend/src/components/markdown-renderer/markdown-to-react/markdown-to-react.tsx b/frontend/src/components/markdown-renderer/markdown-to-react/markdown-to-react.tsx index 06a5ea88f..c34e4e3e9 100644 --- a/frontend/src/components/markdown-renderer/markdown-to-react/markdown-to-react.tsx +++ b/frontend/src/components/markdown-renderer/markdown-to-react/markdown-to-react.tsx @@ -41,12 +41,14 @@ export const MarkdownToReact: React.FC = ({ useMemo(() => { nodeToReactTransformer.setReplacers(markdownRenderExtensions.flatMap((extension) => extension.buildReplacers())) + return null //todo: replace usememo hack }, [nodeToReactTransformer, markdownRenderExtensions]) useMemo(() => { measurePerformance('markdown-to-react: update-line-mapping', () => { nodeToReactTransformer.setLineIds(lineNumberMapper.updateLineMapping(markdownContentLines)) }) + return null }, [nodeToReactTransformer, lineNumberMapper, markdownContentLines]) const nodePreProcessor = useCombinedNodePreprocessor(markdownRenderExtensions) diff --git a/frontend/src/components/register-page/register-error.tsx b/frontend/src/components/register-page/register-error.tsx index ca52bced6..a053b10e7 100644 --- a/frontend/src/components/register-page/register-error.tsx +++ b/frontend/src/components/register-page/register-error.tsx @@ -17,7 +17,7 @@ export const RegisterError: React.FC = ({ error }) => { const errorI18nKey = useMemo(() => { if (!error) { - return undefined + return null } return new ErrorToI18nKeyMapper(error, 'login.register.error') .withHttpCode(409, 'usernameExisting') @@ -28,7 +28,7 @@ export const RegisterError: React.FC = ({ error }) => { return ( - + ) } diff --git a/frontend/src/components/render-page/hooks/sync-scroll/use-document-sync-scrolling.ts b/frontend/src/components/render-page/hooks/sync-scroll/use-document-sync-scrolling.ts index 2c23bcdbf..b6f61758d 100644 --- a/frontend/src/components/render-page/hooks/sync-scroll/use-document-sync-scrolling.ts +++ b/frontend/src/components/render-page/hooks/sync-scroll/use-document-sync-scrolling.ts @@ -26,10 +26,10 @@ export const useDocumentSyncScrolling = ( outerContainerRef: React.RefObject, rendererRef: React.RefObject, numberOfLines: number, - scrollState?: ScrollState, - onScroll?: (scrollState: ScrollState) => void + scrollState: ScrollState | null, + onScroll: null | ((scrollState: ScrollState) => void) ): [(lineMarkers: LineMarkerPosition[]) => void, React.UIEventHandler] => { - const [lineMarks, setLineMarks] = useState() + const [lineMarks, setLineMarks] = useState([]) const recalculateLineMarkerPositions = useCallback( (linkMarkerPositions: LineMarkerPosition[]) => { diff --git a/frontend/src/components/render-page/hooks/sync-scroll/use-on-user-scroll.ts b/frontend/src/components/render-page/hooks/sync-scroll/use-on-user-scroll.ts index d22550e9d..1cb40d20b 100644 --- a/frontend/src/components/render-page/hooks/sync-scroll/use-on-user-scroll.ts +++ b/frontend/src/components/render-page/hooks/sync-scroll/use-on-user-scroll.ts @@ -19,7 +19,7 @@ import { useCallback } from 'react' export const useOnUserScroll = ( lineMarks: LineMarkerPosition[] | undefined, scrollContainer: React.RefObject, - onScroll: ((newScrollState: ScrollState) => void) | undefined + onScroll: ((newScrollState: ScrollState) => void) | null ): React.UIEventHandler => { return useCallback(() => { if (!scrollContainer.current || !lineMarks || lineMarks.length === 0 || !onScroll) { diff --git a/frontend/src/components/render-page/hooks/sync-scroll/use-scroll-to-line-mark.ts b/frontend/src/components/render-page/hooks/sync-scroll/use-scroll-to-line-mark.ts index 60782489f..d9e6bf38f 100644 --- a/frontend/src/components/render-page/hooks/sync-scroll/use-scroll-to-line-mark.ts +++ b/frontend/src/components/render-page/hooks/sync-scroll/use-scroll-to-line-mark.ts @@ -18,8 +18,8 @@ import { useCallback, useEffect, useRef } from 'react' * @param scrollContainer The container to scroll in */ export const useScrollToLineMark = ( - scrollState: ScrollState | undefined, - lineMarks: LineMarkerPosition[] | undefined, + scrollState: ScrollState | null, + lineMarks: LineMarkerPosition[], contentLineCount: number, scrollContainer: RefObject ): void => { diff --git a/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx b/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx index e785eb40d..6f30e8f2d 100644 --- a/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx +++ b/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx @@ -57,8 +57,8 @@ export const DocumentMarkdownRenderer: React.FC = internalDocumentRenderPaneRef, rendererRef, contentLineCount, - scrollState, - onScroll + scrollState ?? null, + onScroll ?? null ) const markdownBodyRef = useRef(null) diff --git a/frontend/src/components/render-page/window-post-message-communicator/hooks/use-editor-receive-handler.ts b/frontend/src/components/render-page/window-post-message-communicator/hooks/use-editor-receive-handler.ts index 61d5bbcb8..3dfa75267 100644 --- a/frontend/src/components/render-page/window-post-message-communicator/hooks/use-editor-receive-handler.ts +++ b/frontend/src/components/render-page/window-post-message-communicator/hooks/use-editor-receive-handler.ts @@ -16,7 +16,7 @@ import { useEffect } from 'react' */ export const useEditorReceiveHandler = ( messageType: R, - handler?: Handler + handler: Handler | null ): void => { const editorToRendererCommunicator = useEditorToRendererCommunicator() useEffect(() => { diff --git a/frontend/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts b/frontend/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts index e87cf1cf4..f6665d9f6 100644 --- a/frontend/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts +++ b/frontend/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts @@ -15,7 +15,7 @@ import { useEffect } from 'react' * @param rendererReady Defines if the target renderer is ready */ export const useSendToRenderer = ( - message: undefined | Extract>, + message: null | Extract>, rendererReady: boolean ): void => { const iframeCommunicator = useEditorToRendererCommunicator() diff --git a/frontend/src/components/slide-show-page/slide-show-page-content.tsx b/frontend/src/components/slide-show-page/slide-show-page-content.tsx index a329da6d2..050f69012 100644 --- a/frontend/src/components/slide-show-page/slide-show-page-content.tsx +++ b/frontend/src/components/slide-show-page/slide-show-page-content.tsx @@ -27,7 +27,7 @@ export const SlideShowPageContent: React.FC = () => { useSendToRenderer( useMemo(() => { return !slideOptions - ? undefined + ? null : { type: CommunicationMessageType.SET_SLIDE_OPTIONS, slideOptions diff --git a/frontend/src/extensions/essential-app-extensions/csv/csv-table.tsx b/frontend/src/extensions/essential-app-extensions/csv/csv-table.tsx index d2001901f..a3c26f745 100644 --- a/frontend/src/extensions/essential-app-extensions/csv/csv-table.tsx +++ b/frontend/src/extensions/essential-app-extensions/csv/csv-table.tsx @@ -38,7 +38,7 @@ export const CsvTable: React.FC = ({ }, [code, delimiter, showHeader]) const renderTableHeader = useMemo(() => { - return headerRow.length === 0 ? undefined : ( + return headerRow.length === 0 ? null : ( {headerRow.map((column, columnNumber) => ( diff --git a/frontend/src/hooks/common/use-single-string-url-parameter.ts b/frontend/src/hooks/common/use-single-string-url-parameter.ts index c0aeb6960..ac0eda112 100644 --- a/frontend/src/hooks/common/use-single-string-url-parameter.ts +++ b/frontend/src/hooks/common/use-single-string-url-parameter.ts @@ -16,7 +16,6 @@ import { useMemo } from 'react' export const useSingleStringUrlParameter = (parameter: string, fallback: T): string | T => { const router = useSearchParams() - return useMemo(() => { - return router?.get(parameter) ?? fallback - }, [fallback, parameter, router]) + const value = useMemo(() => router?.get(parameter) ?? null, [parameter, router]) + return value ?? fallback } diff --git a/frontend/src/hooks/common/use-trimmed-note-markdown-content-without-frontmatter.ts b/frontend/src/hooks/common/use-trimmed-note-markdown-content-without-frontmatter.ts index 9fee3ba39..afe2c824d 100644 --- a/frontend/src/hooks/common/use-trimmed-note-markdown-content-without-frontmatter.ts +++ b/frontend/src/hooks/common/use-trimmed-note-markdown-content-without-frontmatter.ts @@ -29,7 +29,7 @@ export const useTrimmedNoteMarkdownContentWithoutFrontmatter = (): string[] => { const trimmedLines = useMemo(() => { if (!markdownContent) { - return undefined + return null } if (markdownContent.content.length > maxLength) { return markdownContent.content.slice(0, maxLength).split('\n') @@ -39,6 +39,6 @@ export const useTrimmedNoteMarkdownContentWithoutFrontmatter = (): string[] => { }, [markdownContent, maxLength]) return useMemo(() => { - return trimmedLines === undefined || lineOffset === undefined ? [] : trimmedLines.slice(lineOffset) + return trimmedLines === null || lineOffset === undefined ? [] : trimmedLines.slice(lineOffset) }, [lineOffset, trimmedLines]) }