= ({
{
const [api, setApi] = useState();
+ const [apiPro, setApiPro] = useState();
+ const [canScrollPrev, setCanScrollPrev] = useState(false);
+ const [canScrollNext, setCanScrollNext] = useState(false);
const [apiCat, setApiCat] = useState();
const { data, isLoading, isError } = useQuery({
@@ -36,6 +40,36 @@ const Welcome = () => {
},
});
+ useEffect(() => {
+ if (!apiPro) return;
+
+ const updateButtons = () => {
+ setCanScrollPrev(apiPro.canScrollPrev());
+ setCanScrollNext(apiPro.canScrollNext());
+ };
+
+ updateButtons();
+ apiPro.on('select', updateButtons);
+ apiPro.on('reInit', updateButtons);
+
+ return () => {
+ apiPro.off('select', updateButtons);
+ apiPro.off('reInit', updateButtons);
+ };
+ }, [apiPro]);
+
+ const scrollPrevPro = () => {
+ if (apiPro) {
+ apiPro?.scrollPrev();
+ }
+ };
+
+ const scrollNextPro = () => {
+ if (apiPro) {
+ apiPro?.scrollNext();
+ }
+ };
+
const { data: category } = useQuery({
queryKey: ['category_list'],
queryFn: () => category_api.getCategory({ page: 1, page_size: 99 }),
@@ -182,7 +216,12 @@ const Welcome = () => {
-
+
+
{productLoading &&
Array.from({ length: 6 }).map((__, index) => (
@@ -211,7 +250,35 @@ const Welcome = () => {
))}
-
+ {' '}
+
+
{category &&