🐛 fix(VideoPart.tsx): import DraggableProvidedDragHandleProps from re…

…act-beautiful-dnd 🐛 fix(VideoPart.tsx): remove unused isMoved prop from VideoPart component 🐛 fix(index.tsx): remove unused isMoved state variable from VideoParts component 🐛 fix(index.tsx): remove setIsMoved call and setFieldTouched to false when moving video parts
AppQuality · Oct 20, 2023 · 464ef7c · 464ef7c
1 parent bccf917
commit 464ef7c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git 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 (
     <ListItemCard data-qa={`insight-videopart-${videoPartIndex}`}>
       <Handler handleDragProps={handleDragProps} />
@@ -67,8 +67,6 @@ const VideoPart = ({
         <FormikField
           name={`${fieldName}[${videoPartIndex}].end`}
           validate={(value: number) => {
-            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);
                 }}
               />
               <ErrorMessage name={field.name} />

diff --git 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<FormValuesInterface>();
+  const formikContext = useFormikContext<FormValuesInterface>();
+  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}
                     />
                   </Video>
                 )}