From 6630037ac0b677398c4d853d3c6b3e0b65c672b2 Mon Sep 17 00:00:00 2001 From: Pierre Hubert Date: Tue, 22 Aug 2023 17:08:58 +0200 Subject: [PATCH] Turn class component into function component --- .../routes/family/FamilyMemberTreeRoute.tsx | 4 +- .../complex_family_tree/ComplexFamilyTree.tsx | 384 +++++++++--------- 2 files changed, 192 insertions(+), 196 deletions(-) diff --git a/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx b/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx index ceda5b8..9e09d14 100644 --- a/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx +++ b/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 ? ( ) : ( - + )} diff --git a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx index 33c33c6..370b50d 100644 --- a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx +++ b/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,186 +39,193 @@ export default class ComlexFamilyTree extends React.Component { view.setCard(Card); store.setOnUpdate((props) => view.update(props || {})); store.update.tree({ initial: true }); + }; - function data() { - return [ - { - id: "0", - rels: { - spouses: ["8c92765f-92d3-4120-90dd-85a28302504c"], - father: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19", - mother: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56", - children: [ - "ce2fcb9a-6058-4326-b56a-aced35168561", - "f626d086-e2d6-4722-b4f3-ca4f15b109ab", - ], - }, - data: { - "first name": "Agnus", - "last name": "", - birthday: "1970", - avatar: - "https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg", - gender: "M", - }, - }, - { - id: "8c92765f-92d3-4120-90dd-85a28302504c", - data: { - gender: "F", - "first name": "Andrea", - "last name": "", - birthday: "", - avatar: "", - }, - rels: { - spouses: ["0"], - children: [ - "ce2fcb9a-6058-4326-b56a-aced35168561", - "f626d086-e2d6-4722-b4f3-ca4f15b109ab", - ], - }, - }, - { - id: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19", - data: { - gender: "M", - "first name": "Zen", - "last name": "", - birthday: "", - avatar: "", - }, - rels: { - children: ["0"], - spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"], - }, - }, - { - id: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56", - data: { - gender: "F", - "first name": "Zebra", - "last name": "", - birthday: "", - avatar: "", - }, - rels: { - spouses: ["0c09cfa0-5e7c-4073-8beb-94f6c69ada19"], - children: ["0"], - father: "12a9bddf-855a-4583-a695-c73fa8c0e9b2", - mother: "bd56a527-b613-474d-9f38-fcac0aae218b", - }, - }, - { - id: "ce2fcb9a-6058-4326-b56a-aced35168561", - data: { - gender: "M", - "first name": "Ben", - "last name": "", - birthday: "", - avatar: "", - }, - rels: { - mother: "8c92765f-92d3-4120-90dd-85a28302504c", - father: "0", - spouses: ["b4e33c68-20a7-47ba-9dcc-1168a07d5b52"], - children: [ - "eabd40c9-4518-4485-af5e-e4bc3ffd27fb", - "240a3f71-c921-42d7-8a13-dec5e1acc4fd", - ], - }, - }, - { - id: "f626d086-e2d6-4722-b4f3-ca4f15b109ab", - data: { - gender: "F", - "first name": "Becky", - "last name": "", - birthday: "", - avatar: "", - }, - rels: { - mother: "8c92765f-92d3-4120-90dd-85a28302504c", - father: "0", - }, - }, - { - id: "eabd40c9-4518-4485-af5e-e4bc3ffd27fb", - data: { - gender: "M", - "first name": "Carlos", - "last name": "", - birthday: "", - avatar: "", - }, - rels: { - mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52", - father: "ce2fcb9a-6058-4326-b56a-aced35168561", - }, - }, - { - id: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52", - data: { - gender: "F", - "first name": "Branka", - "last name": "", - birthday: "", - avatar: "", - }, - rels: { - spouses: ["ce2fcb9a-6058-4326-b56a-aced35168561"], - children: [ - "eabd40c9-4518-4485-af5e-e4bc3ffd27fb", - "240a3f71-c921-42d7-8a13-dec5e1acc4fd", - ], - }, - }, - { - id: "240a3f71-c921-42d7-8a13-dec5e1acc4fd", - data: { - gender: "F", - "first name": "Carla", - "last name": "", - birthday: "", - avatar: "", - }, - rels: { - mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52", - father: "ce2fcb9a-6058-4326-b56a-aced35168561", - }, - }, - { - id: "12a9bddf-855a-4583-a695-c73fa8c0e9b2", - data: { - gender: "M", - "first name": "Yvo", - "last name": "", - birthday: "", - avatar: "", - }, - rels: { - children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"], - spouses: ["bd56a527-b613-474d-9f38-fcac0aae218b"], - }, - }, - { - id: "bd56a527-b613-474d-9f38-fcac0aae218b", - data: { - gender: "F", - "first name": "Yva", - "last name": "", - birthday: "", - avatar: "", - }, - rels: { - spouses: ["12a9bddf-855a-4583-a695-c73fa8c0e9b2"], - children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"], - }, - }, - ]; - } + return
; +} - setTimeout(() => { +const data = () => + structuredClone([ + { + id: "0", + rels: { + spouses: ["8c92765f-92d3-4120-90dd-85a28302504c"], + father: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19", + mother: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56", + children: [ + "ce2fcb9a-6058-4326-b56a-aced35168561", + "f626d086-e2d6-4722-b4f3-ca4f15b109ab", + ], + }, + data: { + "first name": "Agnus", + "last name": "", + birthday: "1970", + avatar: + "https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg", + gender: "M", + }, + }, + { + id: "8c92765f-92d3-4120-90dd-85a28302504c", + data: { + gender: "F", + "first name": "Andrea", + "last name": "", + birthday: "", + avatar: "", + }, + rels: { + spouses: ["0"], + children: [ + "ce2fcb9a-6058-4326-b56a-aced35168561", + "f626d086-e2d6-4722-b4f3-ca4f15b109ab", + ], + }, + }, + { + id: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19", + data: { + gender: "M", + "first name": "Zen", + "last name": "", + birthday: "", + avatar: "", + }, + rels: { + children: ["0"], + spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"], + }, + }, + { + id: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56", + data: { + gender: "F", + "first name": "Zebra", + "last name": "", + birthday: "", + avatar: "", + }, + rels: { + spouses: ["0c09cfa0-5e7c-4073-8beb-94f6c69ada19"], + children: ["0"], + father: "12a9bddf-855a-4583-a695-c73fa8c0e9b2", + mother: "bd56a527-b613-474d-9f38-fcac0aae218b", + }, + }, + { + id: "ce2fcb9a-6058-4326-b56a-aced35168561", + data: { + gender: "M", + "first name": "Ben", + "last name": "", + birthday: "", + avatar: "", + }, + rels: { + mother: "8c92765f-92d3-4120-90dd-85a28302504c", + father: "0", + spouses: ["b4e33c68-20a7-47ba-9dcc-1168a07d5b52"], + children: [ + "eabd40c9-4518-4485-af5e-e4bc3ffd27fb", + "240a3f71-c921-42d7-8a13-dec5e1acc4fd", + ], + }, + }, + { + id: "f626d086-e2d6-4722-b4f3-ca4f15b109ab", + data: { + gender: "F", + "first name": "Becky", + "last name": "", + birthday: "", + avatar: "", + }, + rels: { + mother: "8c92765f-92d3-4120-90dd-85a28302504c", + father: "0", + }, + }, + { + id: "eabd40c9-4518-4485-af5e-e4bc3ffd27fb", + data: { + gender: "M", + "first name": "Carlos", + "last name": "", + birthday: "", + avatar: "", + }, + rels: { + mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52", + father: "ce2fcb9a-6058-4326-b56a-aced35168561", + }, + }, + { + id: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52", + data: { + gender: "F", + "first name": "Branka", + "last name": "", + birthday: "", + avatar: "", + }, + rels: { + spouses: ["ce2fcb9a-6058-4326-b56a-aced35168561"], + children: [ + "eabd40c9-4518-4485-af5e-e4bc3ffd27fb", + "240a3f71-c921-42d7-8a13-dec5e1acc4fd", + ], + }, + }, + { + id: "240a3f71-c921-42d7-8a13-dec5e1acc4fd", + data: { + gender: "F", + "first name": "Carla", + "last name": "", + birthday: "", + avatar: "", + }, + rels: { + mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52", + father: "ce2fcb9a-6058-4326-b56a-aced35168561", + }, + }, + { + id: "12a9bddf-855a-4583-a695-c73fa8c0e9b2", + data: { + gender: "M", + "first name": "Yvo", + "last name": "", + birthday: "", + avatar: "", + }, + rels: { + children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"], + spouses: ["bd56a527-b613-474d-9f38-fcac0aae218b"], + }, + }, + { + id: "bd56a527-b613-474d-9f38-fcac0aae218b", + data: { + gender: "F", + "first name": "Yva", + "last name": "", + birthday: "", + avatar: "", + }, + rels: { + spouses: ["12a9bddf-855a-4583-a695-c73fa8c0e9b2"], + children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"], + }, + }, + ]); + +/* +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
; - } -} + }, 6000);*/