3- suggested users fetched

frontend/src/components/common/RightPanel.jsx

@@ -1,9 +1,25 @@
 import { Link } from "react-router-dom";
 import RightPanelSkeleton from "../skeletons/RightPanelSkeleton";
-import { USERS_FOR_RIGHT_PANEL } from "../../utils/db/dummy";
+import { useQuery } from "@tanstack/react-query";
 
 const RightPanel = () => {
-	const isLoading = false;
+	const { data: suggestedUsers, isLoading } = useQuery({
+		queryKey: ["suggestedUsers"],
+		queryFn: async () => {
+			try {
+				const res = await fetch("/api/users/suggested");
+				const data = await res.json();
+				if (!res.ok) {
+					throw new Error(data.message || "Something went wrong!");
+				}
+				return data;
+			} catch (error) {
+				throw new Error(error.message);
+			}
+		},
+	});
+
+	if (suggestedUsers?.length === 0) return <div className='md:w-64 w-0'></div>;
 
 	return (
 		<div className='hidden lg:block my-4 mx-2'>
@@ -20,7 +36,7 @@ const RightPanel = () => {
 						</>
 					)}
 					{!isLoading &&
-						USERS_FOR_RIGHT_PANEL?.map((user) => (
+						suggestedUsers?.map((user) => (
 							<Link
 								to={`/profile/${user.username}`}
 								className='flex items-center justify-between gap-4'