forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-04-20 13:36:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use useIntl hook for i18n

Browse Source
This commit is contained in:
Przemek Wiech
2021-11-04 16:58:11 +01:00
parent 3059853807
commit 6e8b6c7b9e
5 changed files with 41 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/menu/search.tsx
View File

@@ -3,10 +3,10 @@ import {analyticsEvent} from '../util/analytics';
import {buildSearchIndex, SearchIndex, SearchResult} from './search_index';
import {formatDateOrRange} from '../util/date_util';
import {IndiInfo, JsonGedcomData} from 'topola';
import {injectIntl, WrappedComponentProps} from 'react-intl';
import {JsonIndi} from 'topola';
import {Search, SearchResultProps} from 'semantic-ui-react';
import {useEffect, useRef, useState} from 'react';
import {useIntl} from 'react-intl';
function getNameLine(result: SearchResult) {
const name = [result.indi.firstName, result.indi.lastName].join(' ').trim();
@@ -27,14 +27,15 @@ interface Props {
}
/** Displays and handles the search box in the top bar. */
function SearchBarComponent(props: WrappedComponentProps & Props) {
export function SearchBar(props: Props) {
const [searchResults, setSearchResults] = useState<SearchResultProps[]>([]);
const [searchString, setSearchString] = useState('');
const searchIndex = useRef<SearchIndex>();
const intl = useIntl();
function getDescriptionLine(indi: JsonIndi) {
const birthDate = formatDateOrRange(indi.birth, props.intl);
const deathDate = formatDateOrRange(indi.death, props.intl);
const birthDate = formatDateOrRange(indi.birth, intl);
const deathDate = formatDateOrRange(indi.death, intl);
if (!deathDate) {
return birthDate;
}
@@ -86,11 +87,11 @@ function SearchBarComponent(props: WrappedComponentProps & Props) {
onSearchChange={(_, data) => onChange(data.value!)}
onResultSelect={(_, data) => handleResultSelect(data.result.id)}
results={searchResults}
noResultsMessage={props.intl.formatMessage({
noResultsMessage={intl.formatMessage({
id: 'menu.search.no_results',
defaultMessage: 'No results found',
})}
placeholder={props.intl.formatMessage({
placeholder={intl.formatMessage({
id: 'menu.search.placeholder',
defaultMessage: 'Search for people',
})}
@@ -100,4 +101,3 @@ function SearchBarComponent(props: WrappedComponentProps & Props) {
/>
);
}
export const SearchBar = injectIntl(SearchBarComponent);

8
src/menu/wikitree_menu.tsx
View File

@@ -2,7 +2,7 @@ import * as queryString from 'query-string';
import wikitreeLogo from './wikitree.png';
import {analyticsEvent} from '../util/analytics';
import {Button, Form, Header, Input, Modal} from 'semantic-ui-react';
import {FormattedMessage, injectIntl, WrappedComponentProps} from 'react-intl';
import {FormattedMessage, useIntl} from 'react-intl';
import {getLoggedInUserName} from '../datasource/wikitree';
import {MenuItem, MenuType} from './menu_item';
import {RouteComponentProps} from 'react-router-dom';
@@ -153,9 +153,10 @@ export function WikiTreeMenu(props: RouteComponentProps & Props) {
}
/** Displays and handles the "Log in to WikiTree" menu. */
function WikiTreeLoginMenuComponent(props: WrappedComponentProps & Props) {
export function WikiTreeLoginMenu(props: Props) {
const formRef = useRef<HTMLFormElement>(null);
const returnUrlRef = useRef<HTMLInputElement>(null);
const intl = useIntl();
/**
* Redirect to the WikiTree Apps login page with a return URL pointing to
@@ -194,7 +195,7 @@ function WikiTreeLoginMenuComponent(props: WrappedComponentProps & Props) {
</>
);
}
const tooltip = props.intl.formatMessage(
const tooltip = intl.formatMessage(
{
id: 'menu.wikitree_popup_username',
defaultMessage: 'Logged in to WikiTree as {username}',
@@ -211,4 +212,3 @@ function WikiTreeLoginMenuComponent(props: WrappedComponentProps & Props) {
</MenuItem>
);
}
export const WikiTreeLoginMenu = injectIntl(WikiTreeLoginMenuComponent);