131 lines
4.1 KiB
TypeScript
131 lines
4.1 KiB
TypeScript
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Grid from '@mui/material/Grid';
|
|
import Typography from '@mui/material/Typography';
|
|
import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
import { LatestProps } from "../types/props";
|
|
import { StyledTypography, TitleTypography } from "../types/styles";
|
|
import { ArticleMeta } from "./ArticleMeta";
|
|
import Fade from '@mui/material/Fade';
|
|
|
|
export default function Latest({
|
|
articles,
|
|
onSelectArticle,
|
|
onLoadMore
|
|
}: LatestProps) {
|
|
const [visibleCount, setVisibleCount] = React.useState(2);
|
|
const [loadingMore, setLoadingMore] = React.useState(false);
|
|
const [animating, setAnimating] = React.useState(false);
|
|
const loaderRef = React.useRef<HTMLDivElement | null>(null);
|
|
|
|
const displayedArticles = articles.slice(0, visibleCount);
|
|
|
|
React.useEffect(() => {
|
|
if (!loaderRef.current) return;
|
|
|
|
const observer = new IntersectionObserver(
|
|
async (entries) => {
|
|
const first = entries[0];
|
|
if (first.isIntersecting && !loadingMore && visibleCount < articles.length) {
|
|
console.log('🟡 Intersection triggered — loading more blogs...');
|
|
setLoadingMore(true);
|
|
|
|
// simulate API load delay
|
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
|
|
if (onLoadMore) {
|
|
console.log(`📡 Calling onLoadMore(offset=${visibleCount}, limit=2)`);
|
|
await onLoadMore(visibleCount, 2);
|
|
}
|
|
|
|
setAnimating(true);
|
|
setVisibleCount((prev) => {
|
|
const newCount = prev + 2;
|
|
console.log(`✅ Increasing visibleCount from ${prev} → ${newCount}`);
|
|
return newCount;
|
|
});
|
|
|
|
setTimeout(() => setAnimating(false), 600);
|
|
setLoadingMore(false);
|
|
}
|
|
},
|
|
{ threshold: 0.5 }
|
|
);
|
|
|
|
const current = loaderRef.current;
|
|
observer.observe(current);
|
|
|
|
console.log('👀 IntersectionObserver attached to loaderRef:', loaderRef.current);
|
|
|
|
return () => {
|
|
if (current) observer.unobserve(current);
|
|
console.log('🧹 IntersectionObserver detached');
|
|
};
|
|
}, [loadingMore, visibleCount, articles.length, onLoadMore]);
|
|
|
|
return (
|
|
<Box>
|
|
<Typography variant="h2" gutterBottom>
|
|
Latest
|
|
</Typography>
|
|
<Grid container spacing={8} columns={12} sx={{ my: 4 }}>
|
|
{displayedArticles.map((article, index) => (
|
|
<Grid key={index} size={{ xs: 12, sm: 6 }}>
|
|
<Fade in timeout={animating ? 700 : 0}>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
gap: 1,
|
|
height: '100%',
|
|
transition: 'transform 0.3s ease',
|
|
'&:hover': { transform: 'translateY(-3px)' },
|
|
}}
|
|
>
|
|
<Typography gutterBottom variant="caption" component="div">
|
|
{article.tag}
|
|
</Typography>
|
|
|
|
<TitleTypography
|
|
gutterBottom
|
|
variant="h6"
|
|
tabIndex={0}
|
|
onClick={() => onSelectArticle?.(index)}
|
|
>
|
|
{article.title}
|
|
<NavigateNextRoundedIcon className="arrow" sx={{ fontSize: '1rem' }} />
|
|
</TitleTypography>
|
|
|
|
<StyledTypography variant="body2" color="text.secondary" gutterBottom>
|
|
{article.description}
|
|
</StyledTypography>
|
|
|
|
<ArticleMeta article={article} />
|
|
</Box>
|
|
</Fade>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
|
|
<Box
|
|
ref={loaderRef}
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
py: 3,
|
|
opacity: loadingMore ? 1 : 0.6,
|
|
transition: 'opacity 0.4s ease',
|
|
}}
|
|
>
|
|
{loadingMore ? (
|
|
<CircularProgress size={32} thickness={5} />
|
|
) : (
|
|
<Typography variant="caption">Scroll to load more...</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|