Merge pull request #75 from HusseinSerag/FEATURE-plugins-page

feature: implement barebones of plugins page

Author: hunxjunedo

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-card-border 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 max-w-[200px]">
+				<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-brand-purple 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,77 @@
+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() {
+      // 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
+        }
+      })
+
+      .finally(() => {
+        if(!isAbort) setIsLoading(false)
+      })
+
+      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/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/LoginProcess.tsx

@@ -10,7 +10,7 @@ const LoginProcessPage = () => {
 	const { setUserData, setIsLoggedIn } = useAuth();
 	const navigate = useNavigate();
 	const location = useLocation();
-  const [gracetime, setgracetime] = useState(false)
+	const [gracetime, setgracetime] = useState(false)
 
 	// Retrieve provider and key from query params to be used for getting user data
 	const queryParams = new URLSearchParams(location.search);
@@ -28,26 +28,26 @@ const LoginProcessPage = () => {
 			setUserData(data);
 			setIsLoggedIn(true);
 			const redirectUri = localStorage.getItem('login_redirect_uri');
-      if(gracetime){
-        //keep waiting until gracetime ends
-        return;
-      }
+			if(gracetime){
+				//keep waiting until gracetime ends
+				return;
+			}
 			if (redirectUri) {
 				window.location.href = redirectUri;
 			} else {
 				navigate('/themes');
 			}
 		}
 	}, [loading, error, data, gracetime]);
-  useEffect(()=> {
-    if(loading){
-      setgracetime(true)
-      setTimeout(() => {
-        //allow the spinner to remove from render once the gracetime elapses
-        setgracetime(false)
-      }, SiteConfig.loginSpinnerGraceTime);
-    }
-  }, [loading])
+	useEffect(()=> {
+		if(loading){
+			setgracetime(true)
+			setTimeout(() => {
+				//allow the spinner to remove from render once the gracetime elapses
+				setgracetime(false)
+			}, SiteConfig.loginSpinnerGraceTime);
+		}
+	}, [loading])
 	return (
 		<div className="h-screen w-full bg-black flex justify-center items-center">
 			{(loading || gracetime) && <LoadingSpinner />}

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 key={i} width="280px" containerClassName='m-auto' height="300px" />) :
+						plugins.length > 0 && plugins.map(plugin =>{
+							return <PluginCard key={plugin.id} plugin={plugin} />
+						})}
+				</div>
+				{!isLoading && error && <h1 className='text-white text-lg flex items-center justify-center '>{error}</h1>
+	 }
+				{
+					!error && !isLoading && plugins.length == 0 &&
+					<h1 className='text-white text-lg flex items-center justify-center '>No search results found...</h1>
+				}
 			</div>
 		</div>
 	);

tailwind.config.js

@@ -55,7 +55,8 @@ export default {
 				'black': '#000000',
 				'white': '#ffffff',
 				'slate-400': '#94a3b8',
-				'slate-500': '#64748b'
+				'slate-500': '#64748b',
+        'card-border': '#27272A'
       },
       keyframes: {
 				wiggle: {