Carousal bug fixed (#464)

* added whats new feature

* added Changes log feature in whats new modal

* small fix

* samll fixe

* fixed parsing error issue and carousal dots issue

* excluded node_modules from parsing in webpack

* add support for video and make change log data optional

* carousal bug fix

* change setTimeout to 200ms

catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx

@@ -21,17 +21,19 @@ import { uniqueId } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import Slider from 'react-slick';
 
-type Props = {
+type CarousalData = {
-  data: {
   title: string;
   description: string;
   isImage: boolean;
   path: string;
-  }[];
+};
+
+type Props = {
+  data: CarousalData[];
 };
 
 const FeaturesCarousel = ({ data }: Props) => {
-  const [currentSlide, setCurrentSlide] = useState(0);
+  const [isDataChange, setIsDataChange] = useState(false);
   const sliderRef = useRef<typeof Slider | null>(null);
 
   const settings = {
@@ -41,19 +43,27 @@ const FeaturesCarousel = ({ data }: Props) => {
     speed: 500,
     slidesToShow: 1,
     slidesToScroll: 1,
-    initialSlide: 0,
+    beforeChange: (current: number) => {
-    afterChange: (currentSlide: number) => setCurrentSlide(currentSlide),
+      if (current >= data.length) {
+        setIsDataChange(true);
+      } else {
+        setIsDataChange(false);
+      }
+    },
+    onReInit: () => {
+      if (isDataChange) {
+        setTimeout(() => {
+          sliderRef?.current?.slickGoTo(0);
+        }, 200);
+      }
+    },
   };
 
   useEffect(() => {
-    if (currentSlide > 0 && sliderRef.current) {
+    setIsDataChange(true);
-      sliderRef.current.slickGoTo(0, true);
-      setCurrentSlide(0);
-    }
   }, [data]);
 
   return (
-    <>
     <Slider ref={sliderRef} {...settings}>
       {data.map((d) => (
         <div className="tw-px-1" key={uniqueId()}>
@@ -75,7 +85,6 @@ const FeaturesCarousel = ({ data }: Props) => {
         </div>
       ))}
     </Slider>
-    </>
   );
 };