fix: Handle error state in DetectBottom component

Author: AbhishekA1509

src/Shared/Components/DetectBottom/DetectBottom.component.tsx

@@ -16,12 +16,14 @@
 
 import { useEffect, useRef } from 'react'
 import { useIntersection } from '../../Helpers'
+import { GenericSectionErrorState } from '../GenericSectionErrorState'
 
 interface DetectBottomProps {
     callback: () => void
+    hasError?: boolean
 }
 
-const DetectBottom = ({ callback }: DetectBottomProps) => {
+const DetectBottom = ({ callback, hasError }: DetectBottomProps) => {
     const target = useRef<HTMLSpanElement>(null)
     const intersected = useIntersection(target, {
         rootMargin: '0px',
@@ -34,6 +36,14 @@ const DetectBottom = ({ callback }: DetectBottomProps) => {
         }
     }, [intersected])
 
+    if (hasError) {
+        return (
+            <div className="p-24 flex">
+                <GenericSectionErrorState reload={callback} />
+            </div>
+        )
+    }
+
     return <span className="pb-5" ref={target} />
 }
 

src/Shared/Components/Plugin/PluginList.tsx

@@ -23,8 +23,11 @@ const PluginList = ({
     const { appId } = useParams<PluginListParamsType>()
 
     const [isLoadingMorePlugins, setIsLoadingMorePlugins] = useState<boolean>(false)
+    const [hasError, setHasError] = useState<boolean>(false)
+
     const handleLoadMore = async () => {
         setIsLoadingMorePlugins(true)
+        setHasError(false)
         try {
             const pluginDataResponse = await abortPreviousRequests(
                 () =>
@@ -40,7 +43,7 @@ const PluginList = ({
 
             handleDataUpdateForPluginResponse(pluginDataResponse, true)
         } catch (error) {
-            // Do nothing
+            setHasError(true)
         } finally {
             setIsLoadingMorePlugins(false)
         }
@@ -73,8 +76,9 @@ const PluginList = ({
 
             {isLoadingMorePlugins && <PluginCardSkeletonList />}
 
-            {/* TODO: Handle on error */}
-            {totalCount > pluginList.length && !isLoadingMorePlugins && <DetectBottom callback={handleLoadMore} />}
+            {totalCount > pluginList.length && !isLoadingMorePlugins && (
+                <DetectBottom callback={handleLoadMore} hasError={hasError} />
+            )}
         </>
     )
 }