Loading...
diff --git a/frontend/src/pages/SearchPage.tsx b/frontend/src/pages/SearchPage.tsx
new file mode 100644
index 0000000..08e4894
--- /dev/null
+++ b/frontend/src/pages/SearchPage.tsx
@@ -0,0 +1,282 @@
+import { SearchContext } from '@/components/layout/MainLayout';
+import LoadingSpinner from '@/components/ui/LoadingSpinner';
+import { fetchAllBoards } from '@/services/boardService';
+import type { Board, TaskSearchResponse } from '@/types';
+import { Check, StickyNote } from 'lucide-react';
+import { useContext, useEffect, useRef, useState } from 'react'
+import { formatDistanceToNow } from "date-fns";
+import { useDebounce } from 'use-debounce';
+import taskService from '@/services/taskService';
+import { useNavigate } from 'react-router-dom';
+
+
+interface DisplayBoard {
+ isChoosen: boolean;
+ detail: Board;
+}
+
+const SearchPage = () => {
+ const searchContext = useContext(SearchContext);
+ const [isLoading, setIsLoading] = useState(false);
+ const [boards, setBoards] = useState
([]);
+ const [displayBoards, setDisplayBoards] = useState([]);
+ const [boardSearch, setBoardSearch] = useState("");
+ const [showBoardDropdown, setShowBoardDropdown] = useState(false);
+ const dropdownRef = useRef(null);
+ const [keyword, setKeyword] = useState("");
+ const [debounceQuery] = useDebounce(keyword, 500);
+ const [tasks, setTasks] = useState([]);
+ const [page, setPage] = useState(1);
+ const [hasMore, setHasMore] = useState(false);
+ const size = 10;
+ const navigate = useNavigate();
+
+ if (!searchContext) return null;
+ const { setShowSearch } = searchContext;
+
+ const fetchBoards = async () => {
+ try {
+ setIsLoading(true);
+ const res = await fetchAllBoards();
+ setBoards(res.data);
+ setDisplayBoards(res.data.slice(0, 3).map(b => ({ isChoosen: false, detail: b })));
+ }
+ catch (error) {
+ console.error('Error fetching boards:', error);
+ }
+ finally {
+ setIsLoading(false);
+ }
+ }
+
+ const fetchTasks = async () => {
+ try {
+ setIsLoading(true);
+ const chosenIds = displayBoards.filter(b => b.isChoosen).map(b => b.detail.id);
+ const res = await taskService.searchTasks(debounceQuery, chosenIds, page, size);
+ setTasks(prev => page === 1 ? res.data : [...prev, ...res.data]);
+ if (res.data.length === size) {
+ setHasMore(true);
+ }
+ else {
+ setHasMore(false);
+ }
+ } catch (error) {
+ console.error("Error searching tasks:", error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ dropdownRef.current &&
+ !dropdownRef.current.contains(event.target as Node)
+ ) {
+ setShowBoardDropdown(false);
+ }
+ };
+
+ useEffect(() => {
+ setShowSearch(false);
+ fetchBoards();
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, []);
+
+ useEffect(() => {
+ fetchTasks();
+ }, [debounceQuery, displayBoards, page]);
+
+ const toggleBoard = (board: DisplayBoard) => {
+ setDisplayBoards(prev => {
+ const defaultBoardIds = boards.slice(0, 3).map(b => b.id);
+ const isDefaultBoard = defaultBoardIds.includes(board.detail.id);
+ if (isDefaultBoard) {
+ return prev.map(b => b.detail.id === board.detail.id ? { ...b, isChoosen: !b.isChoosen } : b);
+ }
+ return prev.filter(b => b.detail.id !== board.detail.id);
+ });
+ }
+
+ return (
+
+ {isLoading ? (
+
+ ) : (
+ <>
+ {/* Sidebar filter */}
+
+
+ {/* Results */}
+
+ {/* Search bar */}
+
+ setKeyword(e.target.value)}
+ />
+
+
+ {/* Cards */}
+ Cards
+
+ {tasks.map((card) => (
+
{
+ setShowSearch(true);
+ navigate(`/board/${card.projectId}`);
+ }}
+ >
+
+
+
+
+
+ {card.taskName}
+
+ Updated {formatDistanceToNow(new Date(card.updatedAt), { addSuffix: true })}
+
+
+
+ {card.projectName}: {card.columnName} {card.taskStatus === 'archived' && `• ${card.taskStatus}`}
+
+ {card.taskDescription && (
+
{card.taskDescription}
+ )}
+
+
+ ))}
+
+ {tasks.length === 0 && (
+
No results found.
+ )}
+
+
+
+ )}
+
+
+
+ )
+ }
+
+