AW-105-palmistry-points-edits

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);
   };

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 = () => {

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 = {