new features

src/pages/ProjectsPage/ProjectsPage.tsx

@@ -17,9 +17,13 @@ import {
 	RenameProjectModal,
 } from "@features/project"
 import api from "@shared/api"
+import { useDebounce } from "@shared/hooks/useDebounce"
 import { Button } from "@shared/ui"
 import { StaticLoader } from "@shared/ui/Loader"
-import { ProjectsHeader } from "@widgets/Projects/ProjectsHeader"
+import {
+	ProjectsHeader,
+	type ProjectStatusEnum,
+} from "@widgets/Projects/ProjectsHeader"
 
 import { IProjectsPageProps } from "./ProjectsPage.d"
 import styles from "./ProjectsPage.module.scss"
@@ -29,18 +33,29 @@ type ProjectRead = components["schemas"]["ProjectRead"]
 export const ProjectsPage: FunctionComponent<
 	IProjectsPageProps
 > = (): JSX.Element => {
-	useBreadcrumbs([{ label: "Projects", href: "/projects" }])
+	useBreadcrumbs([{ label: "Проекты", href: "/projects" }])
 	const router = useRouter()
 	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
 	const [editProject, setEditProject] = useState<ProjectRead | null>(null)
 	const [renameProject, setRenameProject] = useState<ProjectRead | null>(null)
 	const [deleteProject, setDeleteProject] = useState<ProjectRead | null>(null)
 
+	const [search, setSearch] = useState("")
+	const [statusFilter, setStatusFilter] = useState<ProjectStatusEnum>("")
+	const debouncedSearch = useDebounce(search, 300)
+
 	const {
 		data: projects,
 		isLoading: projectsLoading,
 		refetch: refetchProjects,
-	} = api.useQuery("get", "/api/projects/")
+	} = api.useQuery("get", "/api/projects/", {
+		params: {
+			query: {
+				search: debouncedSearch || undefined,
+				status: statusFilter || undefined,
+			},
+		},
+	})
 
 	return (
 		<div className={styles.root} data-testid="ProjectsPage">
@@ -110,7 +125,12 @@ export const ProjectsPage: FunctionComponent<
 				/>
 			)}
 
-			<ProjectsHeader />
+			<ProjectsHeader
+				search={search}
+				onSearchChange={setSearch}
+				statusFilter={statusFilter}
+				onStatusFilterChange={setStatusFilter}
+			/>
 
 			<div className={styles.projectList}>
 				{projects?.map((project) => (
@@ -119,7 +139,7 @@ export const ProjectsPage: FunctionComponent<
 						project={project}
 						progress={project.status === "PROCESSING" ? 45 : 0}
 						currentAction={
-							project.status === "PROCESSING" ? "Rendering" : undefined
+							project.status === "PROCESSING" ? "Рендеринг" : undefined
 						}
 						onClick={() => router.push(`/projects/${project.id}`)}
 						onEdit={() => setEditProject(project)}
@@ -128,6 +148,16 @@ export const ProjectsPage: FunctionComponent<
 					/>
 				))}
 			</div>
+
+			{!projectsLoading && projects?.length === 0 && (
+				<div className={styles.empty}>
+					<p className={styles.emptyText}>
+						{search || statusFilter
+							? "Проекты не найдены"
+							: "У вас пока нет проектов"}
+					</p>
+				</div>
+			)}
 		</div>
 	)
 }