From 03da0e211b3b04f41a82d2d36cecf4bf6eea2c01 Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 31 May 2023 05:53:31 +0100 Subject: [PATCH] added qr code and print function --- src/components/FamilyAcc/FamilyManageTabs.jsx | 64 ++++++++----------- 1 file changed, 27 insertions(+), 37 deletions(-) diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx index fc32640..e14c6fb 100644 --- a/src/components/FamilyAcc/FamilyManageTabs.jsx +++ b/src/components/FamilyAcc/FamilyManageTabs.jsx @@ -4,12 +4,14 @@ import React, { useMemo, useRef, useState, + forwardRef } from "react"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import profile from "../../assets/images/profile-info-profile.png"; -import qrSample from "../../assets/images/qr-sample.png"; import usersService from "../../services/UsersService"; import FamilyTasks from "./FamilyTasks"; +import QRCode from "react-qr-code"; +import { useReactToPrint } from "react-to-print"; export default function FamilyManageTabs({ className, @@ -78,6 +80,12 @@ export default function FamilyManageTabs({ familyManageHandler(); }, [tab]); + const accountRef = useRef(); + // to handle printing + const useHandlePrint = useReactToPrint({ + content: () => accountRef.current, + }); + return (
)} {name === "Account" && ( - + <> + + )} {name === "Profile" && } @@ -217,37 +231,12 @@ function ProfileInfo({ ); } -function Account({ familyDetails }) { - const handlePrint = () => { - const printableContent = ` - - - - - -
-

Family member details

-

Username: ${familyDetails?.username}

-

Password: ${familyDetails?.pin}

- QR Code - - - `; - - const printWindow = window.open('', '', 'width=800,height=700'); - printWindow.document.open(); - printWindow.document.write(printableContent); - printWindow.document.close(); - - printWindow.onload = () => { - printWindow.print(); - }; - }; - +const Account = forwardRef(({ familyDetails, myRef, handlePrint }) => { return ( -
+
@@ -271,10 +260,11 @@ function Account({ familyDetails }) {

Scan the code from mobile app

- qr-sample
@@ -286,7 +276,7 @@ function Account({ familyDetails }) {
); -} +}) function Profile() { return <>Profile;