diff --git a/src/components/palmistry/step-scan-photo/step-scan-photo.tsx b/src/components/palmistry/step-scan-photo/step-scan-photo.tsx index 5684176..9ca7f3d 100644 --- a/src/components/palmistry/step-scan-photo/step-scan-photo.tsx +++ b/src/components/palmistry/step-scan-photo/step-scan-photo.tsx @@ -8,6 +8,7 @@ import { selectors } from "@/store"; import { useNavigate } from "react-router-dom"; import routes from "@/routes"; import { IPalmistryLine } from "@/api/resources/Palmistry"; +import { IPalmistryFingerLocal } from "@/store/palmistry"; const drawElementChangeDelay = 1500; const startDelay = 500; @@ -33,7 +34,10 @@ export default function StepScanPhoto() { const goNextElement = (delay: number) => { changeTitleTimeOut.current = setTimeout(() => { - setTitle(drawElements[currentElementIndex]?.name); + const title = + (drawElements[currentElementIndex] as IPalmistryFingerLocal) + .fingerName || drawElements[currentElementIndex].name; + setTitle(title); setCurrentElementIndex((prevState) => prevState + 1); }, delay); }; diff --git a/src/components/palmistry/step-upload/step-upload.tsx b/src/components/palmistry/step-upload/step-upload.tsx index 68c4ae6..faa58b1 100644 --- a/src/components/palmistry/step-upload/step-upload.tsx +++ b/src/components/palmistry/step-upload/step-upload.tsx @@ -10,6 +10,28 @@ 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; @@ -40,11 +62,12 @@ export default function StepUpload(props: Props) { 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: result?.fingers, + fingers, }) ); }; @@ -54,10 +77,10 @@ export default function StepUpload(props: Props) { if (!event.target.files || event.target.files.length === 0) return; - await getLines(event.target.files[0]); - setIsUpladProcessing(true); + await getLines(event.target.files[0]); + const reader = new FileReader(); reader.onloadend = () => { diff --git a/src/store/palmistry.ts b/src/store/palmistry.ts index 94fc57f..347a29c 100644 --- a/src/store/palmistry.ts +++ b/src/store/palmistry.ts @@ -2,9 +2,11 @@ import { IPalmistryFinger, IPalmistryLine } from "@/api/resources/Palmistry"; import { createSlice, createSelector } from "@reduxjs/toolkit"; import type { PayloadAction } from "@reduxjs/toolkit"; +export type IPalmistryFingerLocal = IPalmistryFinger & { fingerName?: string } + interface IPalmistry { lines: IPalmistryLine[]; - fingers: IPalmistryFinger[]; + fingers: IPalmistryFingerLocal[]; } const initialState: IPalmistry = {