117 lines
3.2 KiB
JavaScript
117 lines
3.2 KiB
JavaScript
import { useState, useCallback } from "react";
|
|
// import { ImageGalleryAPI } from "../repositories/ImageGalleyRepository";
|
|
import { ImageGalleryAPI } from "../repositories/ImageGalleryAPI";
|
|
|
|
// const PAGE_SIZE = 10;
|
|
|
|
// const useImageGallery = (selectedProjectId) => {
|
|
// const [images, setImages] = useState([]);
|
|
// const [allImagesData, setAllImagesData] = useState([]);
|
|
// const [pageNumber, setPageNumber] = useState(1);
|
|
// const [hasMore, setHasMore] = useState(true);
|
|
// const [loading, setLoading] = useState(false);
|
|
// const [loadingMore, setLoadingMore] = useState(false);
|
|
|
|
// const fetchImages = useCallback(async (page = 1, filters = {}, reset = false) => {
|
|
// if (!selectedProjectId) return;
|
|
|
|
// try {
|
|
// if (page === 1) {
|
|
// setLoading(true);
|
|
// } else {
|
|
// setLoadingMore(true);
|
|
// }
|
|
|
|
// const res = await ImageGalleryAPI.ImagesGet(
|
|
// selectedProjectId,
|
|
// filters,
|
|
// page,
|
|
// PAGE_SIZE
|
|
// );
|
|
|
|
// const newBatches = res.data || [];
|
|
// const receivedCount = newBatches.length;
|
|
|
|
// setImages((prev) => {
|
|
// if (page === 1 || reset) return newBatches;
|
|
// const uniqueNew = newBatches.filter(
|
|
// (batch) => !prev.some((b) => b.batchId === batch.batchId)
|
|
// );
|
|
// return [...prev, ...uniqueNew];
|
|
// });
|
|
|
|
// setAllImagesData((prev) => {
|
|
// if (page === 1 || reset) return newBatches;
|
|
// const uniqueAll = newBatches.filter(
|
|
// (batch) => !prev.some((b) => b.batchId === batch.batchId)
|
|
// );
|
|
// return [...prev, ...uniqueAll];
|
|
// });
|
|
|
|
// setHasMore(receivedCount === PAGE_SIZE);
|
|
// } catch (error) {
|
|
// console.error("Error fetching images:", error);
|
|
// if (page === 1) {
|
|
// setImages([]);
|
|
// setAllImagesData([]);
|
|
// }
|
|
// setHasMore(false);
|
|
// } finally {
|
|
// setLoading(false);
|
|
// setLoadingMore(false);
|
|
// }
|
|
// }, [selectedProjectId]);
|
|
|
|
// const resetGallery = useCallback(() => {
|
|
// setImages([]);
|
|
// setAllImagesData([]);
|
|
// setPageNumber(1);
|
|
// setHasMore(true);
|
|
// }, []);
|
|
|
|
// return {
|
|
// images,
|
|
// allImagesData,
|
|
// pageNumber,
|
|
// setPageNumber,
|
|
// hasMore,
|
|
// loading,
|
|
// loadingMore,
|
|
// fetchImages,
|
|
// resetGallery,
|
|
// };
|
|
// };
|
|
|
|
// export default useImageGallery;
|
|
import { useInfiniteQuery } from "@tanstack/react-query";
|
|
|
|
|
|
const PAGE_SIZE = 10;
|
|
|
|
const useImageGallery = (selectedProjectId, filters) => {
|
|
const hasFilters = filters && Object.values(filters).some(
|
|
value => Array.isArray(value) ? value.length > 0 : value !== null && value !== ""
|
|
);
|
|
|
|
return useInfiniteQuery({
|
|
queryKey: ["imageGallery", selectedProjectId, hasFilters ? filters : null],
|
|
enabled: !!selectedProjectId,
|
|
getNextPageParam: (lastPage, allPages) => {
|
|
if (!lastPage?.data?.length) return undefined;
|
|
return allPages.length + 1;
|
|
},
|
|
queryFn: async ({ pageParam = 1 }) => {
|
|
const res = await ImageGalleryAPI.ImagesGet(
|
|
selectedProjectId,
|
|
hasFilters ? filters : undefined,
|
|
pageParam,
|
|
PAGE_SIZE
|
|
);
|
|
return res;
|
|
},
|
|
});
|
|
};
|
|
|
|
export default useImageGallery;
|
|
|