mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-06-08 10:22:47 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(frontend): improve performance by caching translated texts

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-06-26 22:32:19 +02:00
parent ced4cd953c
commit 76242330fd
81 changed files with 341 additions and 292 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/components/layout/settings-dialog/settings-modal.tsx
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useTranslatedText } from '../../../hooks/common/use-translated-text'
import type { CommonModalProps } from '../../common/modals/common-modal'
import { CommonModal } from '../../common/modals/common-modal'
import { EditorSettingsTabContent } from './editor/editor-settings-tab-content'
@ -10,7 +11,6 @@ import { GlobalSettingsTabContent } from './global/global-settings-tab-content'
import React from 'react'
import { Modal, Tab, Tabs } from 'react-bootstrap'
import { Gear as IconGear } from 'react-bootstrap-icons'
import { useTranslation } from 'react-i18next'
/**
* Shows global and scope specific settings
@ -19,7 +19,8 @@ import { useTranslation } from 'react-i18next'
* @param onHide callback that is executed if the modal should be closed
*/
export const SettingsModal: React.FC<CommonModalProps> = ({ show, onHide }) => {
const { t } = useTranslation()
const globalLabelTitle = useTranslatedText('settings.global.label')
const editorLabelTitle = useTranslatedText('settings.editor.label')
return (
<CommonModal
@ -31,10 +32,10 @@ export const SettingsModal: React.FC<CommonModalProps> = ({ show, onHide }) => {
showCloseButton={true}>
<Modal.Body>
<Tabs navbar={false} variant={'tabs'} defaultActiveKey={'global'}>
<Tab title={t('settings.global.label')} eventKey={'global'}>
<Tab title={globalLabelTitle} eventKey={'global'}>
<GlobalSettingsTabContent />
</Tab>
<Tab title={t('settings.editor.label')} eventKey={'editor'}>
<Tab title={editorLabelTitle} eventKey={'editor'}>
<EditorSettingsTabContent />
</Tab>
</Tabs>

9
frontend/src/components/layout/settings-dialog/utils/settings-toggle-button.tsx
View file

@ -3,11 +3,12 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useTranslatedText } from '../../../../hooks/common/use-translated-text'
import type { PropsWithDataTestId } from '../../../../utils/test-id'
import React, { useCallback, useMemo } from 'react'
import React, { useCallback } from 'react'
import type { ButtonProps } from 'react-bootstrap'
import { Button } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { Trans } from 'react-i18next'
type DarkModeToggleButtonProps = Omit<ButtonProps, 'onSelect'> &
PropsWithDataTestId & {
@ -36,9 +37,7 @@ export const SettingsToggleButton = ({
value,
...props
}: DarkModeToggleButtonProps) => {
const { t } = useTranslation()
const title = useMemo(() => t(i18nKeyTooltip), [i18nKeyTooltip, t])
const title = useTranslatedText(i18nKeyTooltip)
const onChange = useCallback(() => {
if (!selected) {