Feat: Added post search suggestion when search on searchbar successfully issue 586

backend/src/routes/post/controller.ts

@@ -893,4 +893,36 @@ export const getAllTagsController = async (req: Request, res: Response) => {
       error: "Failed to fetch tags",
     });
   }
-};
+};
+
+export const getSearchSuggestions = async (req: Request, res: Response) => {
+  try {
+    const searchQuery = req.query.searchQuery as string || "";
+
+    if (!searchQuery) {
+      return res.status(200).json({ suggestions: [] });
+    }
+
+    const suggestions = await prisma.post.findMany({
+      where: {
+        OR: [
+          { title: { contains: searchQuery, mode: 'insensitive' } },
+          { description: { contains: searchQuery, mode: 'insensitive' } }
+        ]
+      },
+      select: {
+        id: true,
+        title: true,
+      },
+      orderBy: {
+        title: 'asc',
+      },
+      take: 10,
+    });
+
+    res.status(200).json({ suggestions });
+  } catch (error) {
+    console.error(error);
+    res.status(500).json({ error: 'Failed to fetch search suggestions' });
+  }
+};

backend/src/routes/post/route.ts

@@ -1,7 +1,7 @@
 import { Router } from "express";
 import authMiddleware from "../../middleware/auth"
 
-import { checkFavoriteStatusController,aiCustomization, createCommentController, createPostController, deletePostController, favoritePostController, getAllTagsController, getCommentsController, getFavoritePostsController, getLeaderboardController, getPostController, getPostReactionsController, getPostsWithPagination, getUserReactionController, reactToPostController, removeReactionController, unfavoritePostController, updatePostController } from "./controller";
+import { checkFavoriteStatusController,aiCustomization, createCommentController, createPostController, deletePostController, favoritePostController, getAllTagsController, getCommentsController, getFavoritePostsController, getLeaderboardController, getPostController, getPostReactionsController, getPostsWithPagination, getUserReactionController, reactToPostController, removeReactionController, unfavoritePostController, updatePostController, getSearchSuggestions } from "./controller";
 
 const postRouter = Router();
 
@@ -43,4 +43,6 @@ postRouter.get('/all/tags', getAllTagsController);
 
 postRouter.post('/customize', aiCustomization);
 
+postRouter.get('/search/suggestions', getSearchSuggestions);
+
 export default postRouter;

frontend/src/hooks/usePosts.tsx

@@ -47,6 +47,16 @@ const usePosts = ({ initialPage = 1, pageSize = 12 }: Props) => {
     fetchPosts(page, pageSize, searchQuery, initialTags);
   }, [page, searchParams]);
 
+const fetchSearchSuggestions = async (query: string) => {
+  try {
+    const response = await axios.get(`/api/v1/posts/search/suggestions?searchQuery=${query}`);
+    return response.data.suggestions;
+  } catch (error) {
+    console.error("Failed to fetch search suggestions");
+    return [];
+  }
+};
+
   const handlePreviousPage = () => {
     if (page > 1) {
       setPage(page - 1);
@@ -96,7 +106,8 @@ const usePosts = ({ initialPage = 1, pageSize = 12 }: Props) => {
     searchQuery,
     setSearchQuery,
     tags,
-    fetchPosts 
+    fetchPosts ,
+    fetchSearchSuggestions
   };
 };
 

frontend/src/pages/Posts.tsx

@@ -24,6 +24,7 @@ const Posts = () => {
     searchQuery,
     setSearchQuery,
     fetchPosts,
+    fetchSearchSuggestions
   } = usePosts({
     initialPage: 1,
     pageSize: 12,
@@ -32,6 +33,9 @@ const Posts = () => {
   const [showFilterDialog, setShowFilterDialog] = useState(false);
   const [tagInput, setTagInput] = useState("");
   const [filterTags, setFilterTags] = useState<string[]>([]);
+  const [suggestions, setSuggestions] = useState<{ id: string; title: string }[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const timeoutRef = useRef<number | null>(null);
   const filterRef = useRef<HTMLDivElement>(null);
   const filteredPosts = posts;
   const allTags = filteredPosts.map(post => post.tags).flat();
@@ -78,10 +82,39 @@ const Posts = () => {
     }
   };
 
+  useEffect(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = window.setTimeout(async () => {
+      if (searchQuery.length > 0) {
+        const results = await fetchSearchSuggestions(searchQuery);
+        setSuggestions(results);
+        setShowSuggestions(true);
+      } else {
+        setSuggestions([]);
+        setShowSuggestions(false);
+      }
+    }, 300);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [searchQuery]);
+
   const handleSearch = () => {
     fetchPosts(page, 12, searchQuery, filterTags);
   };
 
+  const handleSuggestionClick = (suggestion: { id: string; title: string }) => {
+    setSearchQuery(suggestion.title);
+    setShowSuggestions(false);
+    handleSearch();
+  };
+
   if (loading) {
     return <PostsPageSkeleton />;
   }
@@ -180,6 +213,19 @@ const Posts = () => {
             >
               Search
             </button>
+            {showSuggestions && (
+          <ul className="z-20 absolute top-full mt-2 bg-white rounded-md dark:bg-gray-800 border border-sky-400 px-3 py-2 ">
+            {suggestions.map((suggestion) => (
+              <li
+                key={suggestion.id}
+                onClick={() => handleSuggestionClick(suggestion)}
+                className="cursor-pointer p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md"
+              >
+                {suggestion.title}
+              </li>
+            ))}
+          </ul>
+        )}
           </div>
         </div>
         {filteredPosts.length === 0 ? (