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

Code improvements (#1086)

Browse source 
* Extract code into hook
* Refactor code to remove let
* Reformat code
* Extract version-info-modal into components
* Use main block in landinglayout
* Add fixedWidth and classname attribute to IconButton

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-03-10 22:45:05 +01:00 • committed by GitHub
parent 029295dd3b
commit 107f0f6fa3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 192 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/components/landing-layout/footer/language-picker.tsx
View file

@ -1,11 +1,11 @@
/*
SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
SPDX-License-Identifier: AGPL-3.0-only
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { Settings } from 'luxon'
import React, { useCallback } from 'react'
import React, { useCallback, useMemo } from 'react'
import { Form } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
@ -40,41 +40,52 @@ const languages = {
sk: 'Slovensky'
}
const findLanguageCode = (wantedLanguage: string): string => {
let foundLanguage = Object.keys(languages)
.find((supportedLanguage) => wantedLanguage === supportedLanguage)
if (!foundLanguage) {
foundLanguage = Object.keys(languages)
.find((supportedLanguage) => wantedLanguage.substr(0, 2) === supportedLanguage)
}
return foundLanguage || ''
}
/**
* This function checks if the wanted language code is supported by our translations.
* The language code that is provided by the browser can (but don't need to) contain the region.
* Some of our translations are region dependent (e.g. chinese-traditional and chinese-simplified).
* Therefore we first need to check if the complete wanted language code is supported by our translations.
* If not, then we look if we at least have a region independent translation.
*
* @param wantedLanguage an ISO 639-1 standard language code
*/
const findLanguageCode = (wantedLanguage: string): string => (
(
Object.keys(languages)
.find((supportedLanguage) => wantedLanguage === supportedLanguage)
) ?? (
Object.keys(languages)
.find((supportedLanguage) => wantedLanguage.substr(0, 2) === supportedLanguage)
) ?? ''
)
const LanguagePicker: React.FC = () => {
export const LanguagePicker: React.FC = () => {
const { i18n } = useTranslation()
const onChangeLang = useCallback(() => async (event: React.ChangeEvent<HTMLSelectElement>) => {
const onChangeLang = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
const language = event.currentTarget.value
Settings.defaultLocale = language
await i18n.changeLanguage(language)
i18n.changeLanguage(language)
.catch(error => console.error('Error while switching language', error))
}, [i18n])
const languageCode = useMemo(() => findLanguageCode(i18n.language), [i18n.language])
const languageOptions = useMemo(() =>
Object.entries(languages)
.map(([language, languageName]) =>
<option key={ language } value={ language }>{ languageName }</option>), [])
return (
<Form.Control
as="select"
size="sm"
className="mb-2 mx-auto w-auto"
value={ findLanguageCode(i18n.language) }
onChange={ onChangeLang() }
>
value={ languageCode }
onChange={ onChangeLang }>
{
Object.entries(languages)
.map(([language, languageName]) => {
return <option key={ language } value={ language }>{ languageName }</option>
})
languageOptions
}
</Form.Control>
)
}
export { LanguagePicker }