SW-3757 View photos dialog react to initialSelectedSlide prop (#392)

- the initialSelectedSlide and open useEffects had been merged, separated them out
- also added logic in handleChange to differentiate between carousel triggered calls vs useEffect triggered calls

Author: Karthik B

src/components/ViewPhotosDialog/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import DialogBox from '../DialogBox/DialogBox';
 import Button from '../Button/Button';
 import Carousel from 'react-multi-carousel';
@@ -39,24 +39,18 @@ export default function ViewPhotosDialog(props: ViewPhotosDialogProps): JSX.Elem
   } = props;
   const [isPreviousDisabled, setIsPreviousDisabled] = useState(false);
   const [isNextDisabled, setIsNextDisabled] = useState(false);
-
   const [isLoading, setIsLoading] = useState<boolean[]>([]);
-
-  useEffect(() => {
-    setIsLoading(new Array(photos.length).fill(true));
-  }, [photos]);
-
   const [selectedSlide, setSelectedSlide] = useState(initialSelectedSlide);
-
   const myCarousel = useRef<Carousel>(null);
+
   const responsive = {
     mobile: {
       breakpoint: { max: 4000, min: 0 },
       items: 1,
     },
   };
 
-  const handleChange = () => {
+  const handleChange = useCallback((args?: any) => {
     if (myCarousel.current) {
       if (myCarousel.current.state.currentSlide + 1 >= photos.length) {
         setIsNextDisabled(true);
@@ -68,14 +62,31 @@ export default function ViewPhotosDialog(props: ViewPhotosDialogProps): JSX.Elem
       } else {
         setIsPreviousDisabled(false);
       }
-      setSelectedSlide(myCarousel.current.state.currentSlide);
+      if (args !== undefined) {
+        // if we came from the carousel component's call of handleChange, do the right thing
+        // don't set this slide if we came from useEffect on open
+        setSelectedSlide(myCarousel.current.state.currentSlide);
+      } else {
+        // we need to reinitialize to last state
+        if (selectedSlide === initialSelectedSlide) {
+          // explicitly go to slide, the useEffect won't be triggered
+          myCarousel.current.goToSlide(selectedSlide);
+        }
+      }
     }
-  };
+  }, [photos.length, selectedSlide, initialSelectedSlide, selectedSlide]);
+
+  useEffect(() => {
+    setIsLoading(new Array(photos.length).fill(true));
+  }, [photos.length]);
 
   useEffect(() => {
     setSelectedSlide(initialSelectedSlide);
+  }, [initialSelectedSlide]);
+
+  useEffect(() => {
     handleChange();
-  }, [initialSelectedSlide, open]);
+  }, [open, handleChange]);
 
   useEffect(() => {
     if (myCarousel.current) {

src/stories/ViewPhotosDialog.stories.tsx

@@ -1,6 +1,8 @@
+import { useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import React from 'react';
 import ViewPhotosDialog, {ViewPhotosDialogProps} from '../components/ViewPhotosDialog';
+import Button from '../components/Button/Button';
 import {Typography} from '@mui/material';
 
 export default {
@@ -9,7 +11,21 @@ export default {
 };
 
 const Template: StoryFn<ViewPhotosDialogProps> = (args: ViewPhotosDialogProps) => {
-  return <ViewPhotosDialog {...args} open={true} />;
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <ViewPhotosDialog
+        {...args}
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+      />
+      <Button
+        label='View Photos'
+        onClick={() => setModalOpen(true)}
+      />
+    </>
+  );
 };
 
 const captionForPhoto = (num: number): JSX.Element => {