updated photoswipe gallery to functional component

src/components/PhotoSwipe/PhotoSwipe.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
 import Photoswipe from 'photoswipe';
 import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default';
 import classnames from 'classnames';
@@ -16,191 +15,181 @@ interface Iprops {
     gettingData?: (instance: any, index: number, item: file) => void;
     id?: string;
     className?: string;
-    favItemIds: Set<number>
-    setFavItemIds: React.Dispatch<React.SetStateAction<Set<number>>>
+    favItemIds: Set<number>;
+    setFavItemIds: (favItemIds: Set<number>) => void;
+    refetchData: () => void;
 };
-interface Istates {
-    isOpen: boolean;
-    favItemIds: Set<number>
-}
-class PhotoSwipe extends React.Component<Iprops, Istates> {
-    private pswpElement: any = null;
-    private photoSwipe: any = null;
-    state = {
-        isOpen: this.props.isOpen,
-        favItemIds: this.props.favItemIds,
-    };
 
-    componentDidMount = () => {
-        const { isOpen } = this.state;
+function PhotoSwipe(props: Iprops) {
+
+    let pswpElement;
+    const [photoSwipe, setPhotoSwipe] = useState<Photoswipe<any>>();
+
+    const { isOpen } = props;
+    const [isFav, setIsFav] = useState(false)
+
+
+    useEffect(() => {
+        if (!pswpElement)
+            return;
+        if (isOpen)
+            openPhotoSwipe();
+
+    }, [pswpElement]);
+
+    useEffect(() => {
+        if (!pswpElement)
+            return;
         if (isOpen) {
-            this.openPhotoSwipe(this.props);
+            openPhotoSwipe();
         }
-    };
-
-    componentWillReceiveProps = (nextProps) => {
-        const { isOpen } = this.state;
-        if (nextProps.isOpen) {
-            if (!isOpen) {
-                this.openPhotoSwipe(nextProps);
-            } else {
-                this.updateItems(nextProps.items);
-            }
-        } else if (isOpen) {
-            this.closePhotoSwipe();
+        if (!isOpen) {
+            closePhotoSwipe();
         }
-    };
+        return () => {
+            closePhotoSwipe();
+        }
+    }, [isOpen]);
+
+    function updateFavButton() {
+        console.log(this.currItem.id, props.favItemIds)
+        setIsFav(isInFav(this?.currItem));
+    }
 
-    componentWillUnmount = () => {
-        this.closePhotoSwipe();
-    };
 
-    openPhotoSwipe = (props) => {
+    const openPhotoSwipe = () => {
         const { items, options } = props;
-        const pswpElement = this.pswpElement;
-        this.photoSwipe = new Photoswipe(pswpElement, PhotoswipeUIDefault, items, options);
+        let photoSwipe = new Photoswipe(pswpElement, PhotoswipeUIDefault, items, options);
         events.forEach((event) => {
             const callback = props[event];
             if (callback || event === 'destroy') {
-                const self = this;
-                this.photoSwipe.listen(event, function (...args) {
+                photoSwipe.listen(event, function (...args) {
                     if (callback) {
                         args.unshift(this);
                         callback(...args);
                     }
                     if (event === 'destroy') {
-                        self.handleClose();
+                        handleClose();
                     }
                 });
             }
         });
-        this.setState({
-            isOpen: true,
-        }, () => {
-            this.photoSwipe.init();
-        });
+        photoSwipe.listen('beforeChange', updateFavButton);
+        photoSwipe.init();
+        setPhotoSwipe(photoSwipe);
+
     };
 
-    updateItems = (items = []) => {
-        this.photoSwipe.items.length = 0;
+    const updateItems = (items = []) => {
+        photoSwipe.items = [];
         items.forEach((item) => {
-            this.photoSwipe.items.push(item);
+            photoSwipe.items.push(item);
         });
-        this.photoSwipe.invalidateCurrItems();
-        this.photoSwipe.updateSize(true);
+        photoSwipe.invalidateCurrItems();
+        photoSwipe.updateSize(true);
     };
 
-    closePhotoSwipe = () => {
-        if (!this.photoSwipe) {
-            return;
-        }
-        this.photoSwipe.close();
+    const closePhotoSwipe = () => {
+        if (photoSwipe)
+            photoSwipe.close();
     };
 
-    handleClose = () => {
-        const { onClose } = this.props;
-        this.setState({
-            isOpen: false
-        }, () => {
-            if (onClose) {
-                onClose();
-            }
-        });
+    const handleClose = () => {
+        const { onClose } = props;
+        if (onClose) {
+            onClose();
+        }
     };
-    isInFav = (file) => {
-        const { favItemIds } = this.state;
+    const isInFav = (file) => {
+        const { favItemIds } = props;
         if (favItemIds && file) {
             return favItemIds.has(file.id);
         }
+        else
+            return false;
     }
-    onFavClick = (file) => {
-        const { setFavItemIds } = this.props;
-        const { favItemIds } = this.state;
 
-        if (!favItemIds || !file)
-            return;
-        if (!this.isInFav(file)) {
+    const onFavClick = (file) => {
+        const { favItemIds, refetchData, setFavItemIds } = props;
+        if (!isInFav(file)) {
             favItemIds.add(file.id);
-            setFavItemIds(favItemIds);
             console.log("added to Favorites");
-            this.setState(() => ({ favItemIds }));
-
+            setIsFav(true);
+            setFavItemIds(favItemIds);
         }
         else {
             favItemIds.delete(file.id);
-            setFavItemIds(favItemIds);
-            this.setState(() => ({ favItemIds }));
             console.log("removed from Favorites");
+            setIsFav(false);
+            setFavItemIds(favItemIds);
+
         }
     }
+    const { id } = props;
+    let { className } = props;
+    className = classnames(['pswp', className]).trim();
+    return (
+        <div
+            id={id}
+            className={className}
+            tabIndex={Number("-1")}
+            role="dialog"
+            aria-hidden="true"
+            ref={(node) => {
+                pswpElement = node;
+            }}
+        >
+            <div className="pswp__bg" />
+            <div className="pswp__scroll-wrap">
+                <div className="pswp__container">
+                    <div className="pswp__item" />
+                    <div className="pswp__item" />
+                    <div className="pswp__item" />
+                </div>
+                <div className="pswp__ui pswp__ui--hidden">
+                    <div className="pswp__top-bar">
+                        <div className="pswp__counter" />
 
-    render() {
-        const { id } = this.props;
-        let { className } = this.props;
-        className = classnames(['pswp', className]).trim();
-        return (
-            <div
-                id={id}
-                className={className}
-                tabIndex={Number("-1")}
-                role="dialog"
-                aria-hidden="true"
-                ref={(node) => {
-                    this.pswpElement = node;
-                }}
-            >
-                <div className="pswp__bg" />
-                <div className="pswp__scroll-wrap">
-                    <div className="pswp__container">
-                        <div className="pswp__item" />
-                        <div className="pswp__item" />
-                        <div className="pswp__item" />
-                    </div>
-                    <div className="pswp__ui pswp__ui--hidden">
-                        <div className="pswp__top-bar">
-                            <div className="pswp__counter" />
-
-                            <button
-                                className="pswp__button pswp__button--close"
-                                title="Share"
-                            />
-                            <button
-                                className="pswp__button pswp__button--share"
-                                title="Share"
-                            />
-                            <button
-                                className="pswp__button pswp__button--fs"
-                                title="Toggle fullscreen"
-                            />
-                            <button className="pswp__button pswp__button--zoom" title="Zoom in/out" />
-                            <FavButton isClick={this.isInFav(this.photoSwipe?.currItem)} onClick={() => { console.log("dd"); this.onFavClick(this.photoSwipe?.currItem) }} />
-                            <div className="pswp__preloader">
-                                <div className="pswp__preloader__icn">
-                                    <div className="pswp__preloader__cut">
-                                        <div className="pswp__preloader__donut" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
-                            <div className="pswp__share-tooltip" />
-                        </div>
                         <button
-                            className="pswp__button pswp__button--arrow--left"
-                            title="Previous (arrow left)"
+                            className="pswp__button pswp__button--close"
+                            title="Share"
+                        />
+                        <button
+                            className="pswp__button pswp__button--share"
+                            title="Share"
                         />
                         <button
-                            className="pswp__button pswp__button--arrow--right"
-                            title="Next (arrow right)"
+                            className="pswp__button pswp__button--fs"
+                            title="Toggle fullscreen"
                         />
-                        <div className="pswp__caption">
-                            <div className="pswp__caption__center" />
+                        <button className="pswp__button pswp__button--zoom" title="Zoom in/out" />
+                        <FavButton isClick={isFav} onClick={() => { onFavClick(photoSwipe?.currItem) }} />
+                        <div className="pswp__preloader">
+                            <div className="pswp__preloader__icn">
+                                <div className="pswp__preloader__cut">
+                                    <div className="pswp__preloader__donut" />
+                                </div>
+                            </div>
                         </div>
                     </div>
+                    <div className="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                        <div className="pswp__share-tooltip" />
+                    </div>
+                    <button
+                        className="pswp__button pswp__button--arrow--left"
+                        title="Previous (arrow left)"
+                    />
+                    <button
+                        className="pswp__button pswp__button--arrow--right"
+                        title="Next (arrow right)"
+                    />
+                    <div className="pswp__caption">
+                        <div className="pswp__caption__center" />
+                    </div>
                 </div>
             </div>
-        );
-    }
+        </div>
+    );
 }
 
 export default PhotoSwipe;