feature: implement barebones of plugins page

Author: HusseinSerag

src/components/Plugins/PluginCard.tsx

@@ -0,0 +1,37 @@
+import { ExternalLink } from "lucide-react";
+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]">
+		<div className="flex-1 flex flex-col gap-4">
+			<div>
+				<div>
+					<h1 className="text-white text-[22px] font-semibold">{plugin.name}</h1>
+					{/* 
+      // TODO: should add and fetch data about user using the userId or a github handle linked to it
+    */}
+				</div>
+			</div>
+			<div className="text-white text-sm">
+				{plugin.description}
+			</div>
+			<div className="w-full">
+				<img className="w-full"  src={plugin.imageURL} />
+			</div>
+		</div>
+		<div className="flex justify-between gap-3 sm:gap-1  flex-col sm:flex-row">
+			<button className="bg-slate-900 text-[12px] px-4 pt-[6px] pb-[7px] rounded-md text-white">
+				Read more
+			</button>
+      
+			<button className="bg-[#6d28d9] text-[12px] flex justify-center items-center gap-1  px-4 pt-[6px] pb-[7px] rounded-md text-white"><span>
+				View in NPM 
+			</span>
+				<ExternalLink className="w-4" /></button>
+		</div>
+    
+	</section>
+}

src/components/Plugins/PluginSearchBar.tsx

@@ -0,0 +1,22 @@
+import { Search } from "lucide-react";
+import { useSearchParams } from "react-router-dom";
+
+export default function PluginSearchBar() {
+	const [searchParams, setSearchParams] = useSearchParams()
+	const searchQuery = searchParams.get('searchQuery') || "";
+	const setSearchQuery = (input: string) => {
+		if(input == ""){
+			searchParams.delete("searchQuery")
+			setSearchParams(searchParams)
+		} else {
+			searchParams.set("searchQuery",input)
+			setSearchParams(searchParams)
+		}
+	}
+	return <div>
+		<div  className='bg-slate-900 border focus-within:ring-2 focus-within:ring-slate-300 border-slate-300 flex rounded-md gap-2 px-3 py-2 max-w-[500px] w-full'>
+			<Search className='text-slate-300 w-4' />
+			<input value={searchQuery} onChange={(e)=>setSearchQuery(e.target.value)}  placeholder='Search plugins...' className='bg-transparent focus:border-0  focus:outline-none focus:ring-0 placeholder:text-sm text-slate-300 rounded-md w-full' />
+		</div>
+	</div>
+}

src/constants/Endpoints.ts

@@ -1,6 +1,7 @@
 // endpoints for making requests
 const Endpoints = {
 	fetchApiThemes: `${import.meta.env.VITE_GALLERY_API_URL}/api/v1/themes`,
+  fetchApiPlugins: `${import.meta.env.VITE_GALLERY_API_URL}/api/v1/plugins`,
 	fetchUserProfile: `${import.meta.env.VITE_GALLERY_API_URL}/api/v1/users/profile`,
 	fetchCacheThemes: import.meta.env.VITE_GITHUB_THEMES_CACHE_URL,
 	loginUser: `${import.meta.env.VITE_GALLERY_API_URL}/api/v1/auth/login/process`,

src/hooks/useFetchPlugins.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { galleryApiFetch } from "../services/apiService";
+import { Plugin } from "../interfaces/Plugin";
+
+/**
+ * Fetches plugins from the backend api.
+ *
+ * @param url url to fetch plugins from
+ * @param pageSize number of plugins to fetch each page
+ * @param pageNum page number to fetch for
+ * @param searchQuery search query for filtering plugins
+ */
+function useFetchPlugins(
+  url: string,
+	pageSize: number,
+	pageNum: number,
+	searchQuery?: string
+  ) {
+    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)
+        }
+      }
+
+       fetchPlugins();
+
+    },[searchQuery])
+
+
+
+    return {plugins, isLoading, error }
+}
+
+
+export default useFetchPlugins

src/interfaces/Plugin.ts

@@ -0,0 +1,11 @@
+// plugin data fetched from both backend api
+export interface Plugin {
+  id: string;
+  name: string;
+  description: string;
+  favoritesCount: number;
+  imageURL: string;
+  createdAt: string;
+  updatedAt: string;
+  userId: string;
+}

src/pages/Plugins.tsx

@@ -1,29 +1,38 @@
 import React from 'react';
 
-import { Link } from 'react-router-dom';
+import { Endpoints } from '../constants/Endpoints';
+import useFetchPlugins from '../hooks/useFetchPlugins';
 
+import Skeleton from 'react-loading-skeleton';
+import { PluginCard } from '../components/Plugins/PluginCard';
+import PluginSearchBar from '../components/Plugins/PluginSearchBar';
+import { useSearchParams } from 'react-router-dom';
 /**
  * Displays plugins for users to search, browse and rate.
  * // todo: dynamically load plugins as user scrolls instead of fetching wholesale from backend
  */
 const Plugins: React.FC = () => {
+	const [searchParams] = useSearchParams()
+	const searchQuery = searchParams.get('searchQuery') || "";
+
+	const { plugins, isLoading, error } = useFetchPlugins(Endpoints.fetchApiPlugins, 30, 1,searchQuery );
+  
+ 
 	return (
-		<div className="flex items-center justify-center h-screen bg-black">
-			<div className="bg-white p-10 rounded-lg shadow-lg text-center max-w-screen-md">
-				<h1 className="text-4xl font-bold mb-4 text-gray-800">Coming Soon</h1>
-				<p className="text-lg text-gray-600 mb-8">
-					Plugins are not ready. Please check back later!
-				</p>
-				<p className="text-md text-gray-500 mb-4">
-					In the meantime, feel free to browse our available themes.
-				</p>
-				<Link
-					to="/themes"
-					className="inline-block bg-blue-500 text-white py-2 px-4 rounded-lg
-						hover:bg-blue-600 transition duration-300"
-				>
-					Browse Themes
-				</Link>
+		<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" />) :
+						plugins.length > 0 && plugins.map(plugin =>{
+							return <PluginCard plugin={plugin} />
+						})}
+				</div>
+				{
+					!isLoading && plugins.length == 0 &&
+					<h1 className='text-white text-lg flex items-center justify-center '>No search results found...</h1>
+      
+				}
 			</div>
 		</div>
 	);