import { useEffect, useState } from "react"; import useSteps from "../../../hooks/palmistry/use-steps"; import Button from "../button/button"; import BiometricData from "../biometric-data/biometric-data"; import UploadModal from "../upload-modal/upload-modal"; import ModalOverlay from "../modal-overlay/modal-overlay"; import PalmRecognitionErrorModal from "../palm-recognition-error-modal/palm-recognition-error-modal"; import PalmCameraModal from "../palm-camera-modal/palm-camera-modal"; import { useApi } from "@/api"; import { useDispatch } from "react-redux"; import { actions } from "@/store"; import { IPalmistryFinger } from "@/api/resources/Palmistry"; import { IPalmistryFingerLocal } from "@/store/palmistry"; const fingersNames = { thumb: "Thumb finger", index_finger: "Index finger", middle_finger: "Middle finger", ring_finger: "Ring finger", pinky: "Little finger", }; const setFingersNames = ( fingers: IPalmistryFinger[] ): IPalmistryFingerLocal[] => { if (!fingers) return []; return fingers.map((finger) => { return { ...finger, fingerName: fingersNames[finger.name as keyof typeof fingersNames], }; }); }; type Props = { onOpenModal: (isOpen: boolean) => void; }; const isProduction = import.meta.env.MODE === "production"; export default function StepUpload(props: Props) { const steps = useSteps(); const api = useApi(); const dispatch = useDispatch(); const [uploadMenuModalIsOpen, setUploadMenuModalIsOpen] = useState(false); const [isUpladProcessing, setIsUpladProcessing] = useState(false); const [recognitionErrorModalIsOpen, setRecognitionErrorModalIsOpen] = useState(false); const [palmCameraModalIsOpen, setPalmCameraModalIsOpen] = useState(false); const [palmPhoto, setPalmPhoto] = useState(); // const imitateRequestError = () => { // setTimeout(() => { // setIsUpladProcessing(false); // setRecognitionErrorModalIsOpen(true); // }, 2000); // }; const getLines = async (file: File | Blob) => { const formData = new FormData(); formData.append("file", file); const result = await api.getPalmistryLines({ formData }); const fingers = setFingersNames(result?.fingers); dispatch( actions.palmistry.update({ lines: result?.lines, fingers, }) ); }; const onSelectFile = async (event: React.ChangeEvent) => { setUploadMenuModalIsOpen(false); if (!event.target.files || event.target.files.length === 0) return; setIsUpladProcessing(true); await getLines(event.target.files[0]); const reader = new FileReader(); reader.onloadend = () => { setPalmPhoto(reader.result as string); }; reader.readAsDataURL(event.target.files[0]); }; const DataURIToBlob = (dataURI: string) => { const splitDataURI = dataURI.split(","); const byteString = splitDataURI[0].indexOf("base64") >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1]); const mimeString = splitDataURI[0].split(":")[1].split(";")[0]; const ia = new Uint8Array(byteString.length); for (let i = 0; i < byteString.length; i++) ia[i] = byteString.charCodeAt(i); return new Blob([ia], { type: mimeString }); }; const onTakePhoto = async (photo: string) => { setUploadMenuModalIsOpen(false); setPalmCameraModalIsOpen(false); setIsUpladProcessing(true); const file = DataURIToBlob(photo); await getLines(file); setPalmPhoto(photo as string); }; useEffect(() => { if (palmPhoto) { setIsUpladProcessing(false); steps.saveCurrent(palmPhoto); steps.goNext(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [palmPhoto]); useEffect(() => { if (recognitionErrorModalIsOpen || palmCameraModalIsOpen) { props.onOpenModal(true); } else { props.onOpenModal(false); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [recognitionErrorModalIsOpen, palmCameraModalIsOpen]); return ( <>

Take your palm picture as instructed

Correct

Wrong

{uploadMenuModalIsOpen && ( setUploadMenuModalIsOpen(false)} onSelectFile={onSelectFile} onChooseCamera={() => setPalmCameraModalIsOpen(true)} /> )} {isUpladProcessing && } {recognitionErrorModalIsOpen && ( setRecognitionErrorModalIsOpen(false)} /> )} {palmCameraModalIsOpen && ( setPalmCameraModalIsOpen(false)} onTakePhoto={onTakePhoto} /> )} ); }