diff --git a/src/pages/UxDashboard/UxForm/VideoParts/VideoPart.tsx b/src/pages/UxDashboard/UxForm/VideoParts/VideoPart.tsx index 6b7dc824..77596ac6 100644 --- a/src/pages/UxDashboard/UxForm/VideoParts/VideoPart.tsx +++ b/src/pages/UxDashboard/UxForm/VideoParts/VideoPart.tsx @@ -16,6 +16,7 @@ import { Trash } from "react-bootstrap-icons"; import { ListItemCard } from "./ListItemCard"; import { videoCitMaxChar } from "../FormProvider"; import Handler from "../components/Handler"; +import { DraggableProvidedDragHandleProps } from "react-beautiful-dnd"; const Actions = styled.div` display: flex; @@ -43,19 +44,18 @@ const VideoPart = ({ remove, handleDragProps, title, - isMoved, }: { start: number; videoPartIndex: number; fieldName: string; remove: (index: number) => void; - handleDragProps: any; + handleDragProps?: DraggableProvidedDragHandleProps | null; title?: string; - isMoved?: boolean; }) => { const { context: { player }, } = useVideoContext(); + return ( @@ -67,8 +67,6 @@ const VideoPart = ({ { - if (isMoved) return; - if (player) { let error; if (value > player.totalTime - start) { @@ -100,6 +98,7 @@ const VideoPart = ({ field.name, moment.duration(value).asSeconds() ); + form.setFieldTouched(field.name); }} /> diff --git a/src/pages/UxDashboard/UxForm/VideoParts/index.tsx b/src/pages/UxDashboard/UxForm/VideoParts/index.tsx index ff16f6f4..aa61dc81 100644 --- a/src/pages/UxDashboard/UxForm/VideoParts/index.tsx +++ b/src/pages/UxDashboard/UxForm/VideoParts/index.tsx @@ -1,7 +1,7 @@ import { Card, Select, Title } from "@appquality/appquality-design-system"; import Video from "@appquality/stream-player"; import { FieldArray, useFormikContext } from "formik"; -import { useMemo, useState } from "react"; +import { useMemo } from "react"; import { OnDragEndResponder } from "react-beautiful-dnd"; import { Plus } from "react-bootstrap-icons"; import { useParams } from "react-router-dom"; @@ -44,10 +44,10 @@ const VideoParts = () => { const { id } = useParams<{ id: string }>(); const { data } = useGetCampaignsByCampaignObservationsQuery({ campaign: id }); const { insightIndex } = useAppSelector((state) => state.uxDashboard); - const { values } = useFormikContext(); + const formikContext = useFormikContext(); + const { values } = formikContext; const fieldName = `insights[${insightIndex}].videoParts`; const videoParts = values.insights[insightIndex].videoParts; - const [isMoved, setIsMoved] = useState(false); const observationsOptions: VideoPartsOption[] = useMemo( () => @@ -73,7 +73,7 @@ const VideoParts = () => { return; } move(result.source.index, result.destination.index); - setIsMoved(true); + formikContext.setFieldTouched(fieldName, false); }; return ( <> @@ -99,7 +99,6 @@ const VideoParts = () => { option.time === videopart.start )?.label } - isMoved={isMoved} /> )}