{name} diff --git a/src/components/masonry/test.tsx b/src/components/masonry/test.tsx new file mode 100644 index 0000000..f2420d0 --- /dev/null +++ b/src/components/masonry/test.tsx @@ -0,0 +1,78 @@ +import { useState, useCallback, useEffect, FC } from "react"; +//@ts-ignore +import Masonry from "@mui/lab/Masonry"; +import { SingleRun, concurrencyRequest } from "@utils/index"; +import { fetchVideos } from "@utils/fetch"; +import { nanoid } from "nanoid"; +import Image from "@components/image"; +export default function ImageMasonry() { + const [lists, setLists] = useState< + { + image: string; + name: string; + id: string; + }[] + >([]); + const fetchMoreItems = async ( + startIndex: number, + stopIndex: number, + currentItems: any[] + ) => { + const res = await fetchVideos({ + order: "view", + page: 1, + }), + data = res.data.result, + urls = data.map((item) => item.face); + await concurrencyRequest(urls, 6, "success", "error"); + setLists((lists) => { + return [ + ...lists, + ...data.map((item) => ({ + image: item.face, + name: item.name, + id: nanoid(10), + })), + ]; + }); + }; + const fetchMoreItemsHandler = useCallback(SingleRun(fetchMoreItems), [ + setLists, + ]); + useEffect(() => { + fetchMoreItemsHandler(0, 20, []); + console.log("effect"); + }, [fetchMoreItemsHandler]); + return ( + <> +
+ {name} +
+- 1672570020000->{time} + 1672570020000-{time}
); diff --git a/src/utils/index.ts b/src/utils/index.ts index c5289f5..dc0a096 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,9 +1,9 @@ -export function Once(fn: Function) { +export function Once