Implemented #1

main
Guus van Meerveld 2 years ago
parent 7d2cb0dd2e
commit 935c1df0ab
Signed by: Guusvanmeerveld
GPG Key ID: 2BA7D7912771966E

@ -21,6 +21,7 @@
"next-seo": "^5.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-intersection-observer": "^8.33.1",
"react-query": "^3.34.16"
},
"devDependencies": {

@ -3,8 +3,9 @@ import axios, { AxiosError } from "axios";
import Link from "next/link";
import { useRouter } from "next/router";
import { FC } from "react";
import { FC, useEffect } from "react";
import { useInView } from "react-intersection-observer/";
import { useQuery } from "react-query";
import Avatar from "@mui/material/Avatar";
@ -35,7 +36,10 @@ const Video: FC<VideoModel> = ({
}) => {
const requestFields = ["authorThumbnails"];
const { isLoading, error, data } = useQuery<Channel, AxiosError<Error>>(
const { isLoading, error, data, refetch, isFetched } = useQuery<
Channel,
AxiosError<Error>
>(
["channelData", author.id],
() =>
axios
@ -44,11 +48,20 @@ const Video: FC<VideoModel> = ({
fields: requestFields.join(",")
}
})
.then((res) => res.data)
.then((res) => res.data),
{ enabled: false }
);
const { ref, inView } = useInView({
threshold: 0
});
const router = useRouter();
useEffect(() => {
if (inView && !isFetched) refetch();
}, [inView, isFetched, refetch]);
return (
<Card sx={{ width: "100%" }}>
<CardActionArea
@ -67,7 +80,7 @@ const Video: FC<VideoModel> = ({
</Typography>
</Tooltip>
<Link passHref href={`/channel/${author.id}`}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Box ref={ref} sx={{ display: "flex", alignItems: "center" }}>
{isLoading && <CircularProgress sx={{ mr: 2 }} />}
{data && (
<Avatar

@ -2331,6 +2331,11 @@ react-dom@^17.0.2:
object-assign "^4.1.1"
scheduler "^0.20.2"
react-intersection-observer@^8.33.1:
version "8.33.1"
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.33.1.tgz#8e6442cac7052ed63056e191b7539e423e7d5c64"
integrity sha512-3v+qaJvp3D1MlGHyM+KISVg/CMhPiOlO6FgPHcluqHkx4YFCLuyXNlQ/LE6UkbODXlQcLOppfX6UMxCEkUhDLw==
react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

Loading…
Cancel
Save