Revert "feature: implement barebones of plugins page"

Author: hunxjunedo

src/components/Plugins/PluginCard.tsx

@@ -1,7 +1,6 @@
 // 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/components/Plugins/PluginSearchBar.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/constants/Endpoints.ts

@@ -1,38 +1,29 @@
 import React from 'react';
 
-import { Endpoints } from '../constants/Endpoints';
-import useFetchPlugins from '../hooks/useFetchPlugins';
+import { Link } from 'react-router-dom';
 
-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=" 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 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>
 		</div>
 	);

src/hooks/useFetchPlugins.ts

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