From 4aa1b02aa0b72512ce2e961f48ede7c25c2ae68b Mon Sep 17 00:00:00 2001
From: Przemek Wiech <pwiech@gmail.com>
Date: Wed, 3 Nov 2021 14:32:20 +0100
Subject: [PATCH] Refactored `Details` component from class-based to functional

---
 src/details/details.tsx | 56 ++++++++++++++++-------------------------
 1 file changed, 21 insertions(+), 35 deletions(-)

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