forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-08-02 17:11:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactored Details component from class-based to functional

Browse Source
This commit is contained in:
Przemek Wiech
2021-11-03 14:32:20 +01:00
parent a1a4b0d35e
commit 4aa1b02aa0
1 changed files with 21 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/details/details.tsx
View File

@@ -1,16 +1,9 @@
import * as React from 'react';
import flatMap from 'array.prototype.flatmap'; import flatMap from 'array.prototype.flatmap';
import {injectIntl, WrappedComponentProps} from 'react-intl';
import {dereference, GedcomData, getData} from '../util/gedcom_util'; import {dereference, GedcomData, getData} from '../util/gedcom_util';
import {GedcomEntry} from 'parse-gedcom';
import {TranslatedTag} from './translated-tag';
import {Events} from './events'; import {Events} from './events';
import {GedcomEntry} from 'parse-gedcom';
import {MultilineText} from './multiline-text'; import {MultilineText} from './multiline-text';
import {TranslatedTag} from './translated-tag';
interface Props {
gedcom: GedcomData;
indi: string;
}
const EXCLUDED_TAGS = [ const EXCLUDED_TAGS = [
'BIRT', 'BIRT',
@@ -119,30 +112,23 @@ function getOtherDetails(entries: GedcomEntry[]) {
)); ));
} }
class DetailsComponent extends React.Component< interface Props {
Props & WrappedComponentProps, gedcom: GedcomData;
{} indi: string;
> { }
render() {
const entries = this.props.gedcom.indis[this.props.indi].tree; export function Details(props: Props) {
const entriesWithData = entries const entries = props.gedcom.indis[props.indi].tree;
.map((entry) => const entriesWithData = entries
dereference(entry, this.props.gedcom, (gedcom) => gedcom.other), .map((entry) => dereference(entry, props.gedcom, (gedcom) => gedcom.other))
) .filter(hasData);
.filter(hasData);
return (
return ( <div className="ui segments details">
<div className="ui segments details"> {getDetails(entries, ['NAME'], nameDetails)}
{getDetails(entries, ['NAME'], nameDetails)} <Events gedcom={props.gedcom} entries={entries} indi={props.indi} />
<Events {getOtherDetails(entriesWithData)}
gedcom={this.props.gedcom} {getDetails(entriesWithData, ['NOTE'], noteDetails)}
entries={entries} </div>
indi={this.props.indi} );
/>
{getOtherDetails(entriesWithData)}
{getDetails(entriesWithData, ['NOTE'], noteDetails)}
</div>
);
}
} }
export const Details = injectIntl(DetailsComponent);