fix: Refactor use fetch plugins

Author: HusseinSerag

src/components/Plugins/PluginCard.tsx

@@ -4,8 +4,8 @@ import { Plugin } from "../../interfaces/Plugin";
 type PluginCardProps = {
   plugin: Plugin;
 }
-export function PluginCard({plugin}:PluginCardProps) {
-	return <section className="border gap-4 flex flex-col max-w-[314px]  hover:scale-[1.01]   p-4 pt-6 m-auto w-full border-[#27272A] rounded-md h-[300px]">
+export function PluginCard({ plugin }: PluginCardProps) {
+	return <section className="border gap-4 flex flex-col max-w-[314px]  hover:scale-[1.01]   p-4 pt-6 m-auto w-full border-[#27272A] rounded-md min-h-[300px]">
 		<div className="flex-1 flex flex-col gap-4">
 			<div>
 				<div>
@@ -18,7 +18,7 @@ export function PluginCard({plugin}:PluginCardProps) {
 			<div className="text-white text-sm">
 				{plugin.description}
 			</div>
-			<div className="w-full">
+			<div className="w-full max-w-[200px]">
 				<img className="w-full"  src={plugin.imageURL} />
 			</div>
 		</div>

src/hooks/useFetchPlugins.ts

@@ -19,34 +19,59 @@ function useFetchPlugins(
     const [plugins, setPlugins] = useState<Plugin[]>([]);
       const [isLoading, setIsLoading] = useState(false);
       const [error, setError] = useState("");
-    useEffect(function(){
-      
-      const fetchPlugins = async() => {
-        try{
-          setIsLoading(true)
-          if(searchQuery){
-           url += `?searchQuery=${searchQuery}`
-          }
-          console.log(url)
-          const data = await galleryApiFetch(url);
-          const plugins = await data.json()
-          setPlugins(plugins.data);
-        } catch(e){
-          
-        }
-        finally{
-          setIsLoading(false)
-        }
+    useEffect(function() {
+      // avoid race conditions
+      const controller = new AbortController()
+      let isAbort = false
+
+      setIsLoading(true)
+      setError("")
+      setPlugins([])
+
+      fetchPlugins(controller, url, searchQuery)
+
+      .then((plugins)=> {
+        setPlugins(plugins)
+        setError("")
+      })
+
+      .catch((err: Error) => {
+       if(err.name != 'AbortError') { 
+          setError(err.message);
       }
+        else {
+          isAbort = true
+        }
+      })
 
-       fetchPlugins();
+      .finally(() => {
+        if(!isAbort) setIsLoading(false)
+      })
 
-    },[searchQuery])
+      return () => controller.abort()
+    },[searchQuery, url, pageNum, pageSize])
 
 
 
     return {plugins, isLoading, error }
 }
 
+const fetchPlugins = async(controller: AbortController, url: string, searchQuery?: string) => {
+  try{
+    if(searchQuery){
+     url += `?searchQuery=${searchQuery}`
+    }
+    const data = await galleryApiFetch(url,{
+      signal: controller.signal
+    });
+    const plugins = await data.json()
+    return plugins.data
+  } catch(e: unknown){
+    if((e as Error).name != 'AbortError')
+    throw new Error("Problem fetching plugins!")
+    else throw e
+  }
+}
+
 
 export default useFetchPlugins

src/pages/Plugins.tsx

@@ -17,21 +17,21 @@ const Plugins: React.FC = () => {
 
 	const { plugins, isLoading, error } = useFetchPlugins(Endpoints.fetchApiPlugins, 30, 1,searchQuery );
 
- 
 	return (
 		<div className=" min-h-screen bg-black">
 			<div className='p-8 flex flex-col gap-8 max-w-[1024px] m-auto'>
 				<PluginSearchBar />
 				<div className='grid xs:grid-cols-1  sm:grid-cols-2 lg:grid-cols-3 gap-x-16 gap-y-8'>
-					{isLoading ? Array.from({length : 9}).map((_,i)=><Skeleton width="300px" containerClassName='m-auto' height="300px" />) :
+					{isLoading ? Array.from({length : 9}).map((_ , i)=><Skeleton key={i} width="280px" containerClassName='m-auto' height="300px" />) :
 						plugins.length > 0 && plugins.map(plugin =>{
-							return <PluginCard plugin={plugin} />
+							return <PluginCard key={plugin.id} plugin={plugin} />
 						})}
 				</div>
+        {!isLoading && error && <h1 className='text-white text-lg flex items-center justify-center '>{error}</h1>
+	 }
 				{
-					!isLoading && plugins.length == 0 &&
+					!error && !isLoading && plugins.length == 0 &&
 					<h1 className='text-white text-lg flex items-center justify-center '>No search results found...</h1>
-      
 				}
 			</div>
 		</div>