Function TasksSidebarGroup

site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx:137–175

({ owner })

};

const TasksSidebarGroup: FC<TasksSidebarGroupProps> = ({ owner }) => {
	const filter: TasksFilter = { owner };
	const tasksQuery = useQuery({
		queryKey: ["tasks", filter],
		queryFn: () => API.getTasks(filter),
		refetchInterval: 10_000,
	});

	return (
		<ScrollArea className="flex-1">
			<div className="flex flex-col gap-2 p-3">
				<div className="text-content-secondary text-xs">Tasks</div>
				<div className="flex flex-col flex-1 gap-1">
					{tasksQuery.data ? (
						tasksQuery.data.length > 0 ? (
							tasksQuery.data.map((task) => (
								<TaskSidebarMenuItem key={task.id} task={task} />
							))
						) : (
							<div className="text-content-secondary text-xs p-4 border-border border-solid rounded text-center">
								No tasks found
							</div>
						)
					) : tasksQuery.error ? (
						<div className="text-content-secondary text-xs p-4 border-border border-solid rounded text-center">
							{getErrorMessage(tasksQuery.error, "Failed to load tasks")}
						</div>
					) : (
						<div className="flex flex-col gap-1">
							{Array.from({ length: 5 }).map((_, index) => (
								<Skeleton className="h-8 w-full" key={index} />
							))}
						</div>
					)}
				</div>
			</div>
		</ScrollArea>
	);
};

type TaskSidebarMenuItemProps = {
	task: Task;