Turn class component into function component

geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx

@@ -21,7 +21,7 @@ import { useFamily } from "../../widgets/BaseFamilyRoute";
 import { MemberItem } from "../../widgets/MemberItem";
 import { RouterLink } from "../../widgets/RouterLink";
 import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
-import ComlexFamilyTree from "../../widgets/complex_family_tree/ComplexFamilyTree";
+import { ComplexFamilyTree } from "../../widgets/complex_family_tree/ComplexFamilyTree";
 
 enum CurrTab {
   BasicTree,
@@ -122,7 +122,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
         {currTab === CurrTab.BasicTree ? (
           <BasicFamilyTree tree={tree!} />
         ) : (
-          <ComlexFamilyTree />
+          <ComplexFamilyTree />
         )}
       </Paper>
     </div>

geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx

@@ -2,14 +2,9 @@ import React from "react";
 import f3 from "family-chart";
 import "./family-chart.css";
 
-import { jsPDF } from "jspdf";
-import "svg2pdf.js";
-
-export default class ComlexFamilyTree extends React.Component {
-  cont = React.createRef();
-
-  componentDidMount() {
-    if (!this.cont.current) return;
+export function ComplexFamilyTree(): React.ReactElement {
+  const refCb = (container: HTMLDivElement) => {
+    if (!container) return;
 
     const store = f3.createStore({
         data: data(),
@@ -44,9 +39,13 @@ export default class ComlexFamilyTree extends React.Component {
     view.setCard(Card);
     store.setOnUpdate((props) => view.update(props || {}));
     store.update.tree({ initial: true });
+  };
 
-    function data() {
-      return [
+  return <div className="f3" id="FamilyChart" ref={refCb}></div>;
+}
+
+const data = () =>
+  structuredClone([
     {
       id: "0",
       rels: {
@@ -220,10 +219,13 @@ export default class ComlexFamilyTree extends React.Component {
         children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
       },
     },
-      ];
-    }
+  ]);
 
-    setTimeout(() => {
+/*
+import { jsPDF } from "jspdf";
+import "svg2pdf.js";
+
+setTimeout(() => {
       const doc = new jsPDF({
         orientation: "l",
         format: [1000, 1000],
@@ -233,12 +235,6 @@ export default class ComlexFamilyTree extends React.Component {
       console.log(element);
       doc.svg(element!.children[0], { height: 1000, width: 1000 }).then(() => {
         // save the created pdf
-        doc.save("myPDF.pdf");
+        //doc.save("myPDF.pdf");
       });
-    }, 6000);
-  }
-
-  render() {
-    return <div className="f3" id="FamilyChart" ref={this.cont as any}></div>;
-  }
-}
+    }, 6000);*/