-
Notifications
You must be signed in to change notification settings - Fork 0
/
NewsCard.js
44 lines (37 loc) · 1.92 KB
/
NewsCard.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import React, { useState, useEffect, createRef } from 'react';
import { Card, CardActions, CardActionArea, CardContent, CardMedia, Button, Typography } from '@material-ui/core';
import useStyles from './styles';
const NewsCard = ({ article: { description, publishedAt, source, title, url, urlToImage }, activeArticle, i }) => {
const classes = useStyles();
const [elRefs, setElRefs] = useState([]);
const scrollToRef = (ref) => window.scroll(0, ref.current.offsetTop - 50);
useEffect(() => {
window.scroll(0, 0);
setElRefs((refs) => Array(20).fill().map((_, j) => refs[j] || createRef()));
}, []);
useEffect(() => {
if (i === activeArticle && elRefs[activeArticle]) {
scrollToRef(elRefs[activeArticle]);
}
}, [i, activeArticle, elRefs]);
return (
<Card ref={elRefs[i]} className={activeArticle === i ? classes.activeCard : classes.card}>
<CardActionArea href={url} target="_blank">
<CardMedia className={classes.media} image={urlToImage || 'https://www.industry.gov.au/sites/default/files/August%202018/image/news-placeholder-738.png'} title={title} />
<div className={classes.details}>
<Typography variant="body2" color="textSecondary" component="h2">{(new Date(publishedAt)).toDateString()}</Typography>
<Typography variant="body2" color="textSecondary" component="h2">{source.name}</Typography>
</div>
<Typography className={classes.title} gutterBottom variant="h5" component="h2">{title}</Typography>
<CardContent>
<Typography variant="body2" color="textSecondary" component="p">{description}</Typography>
</CardContent>
</CardActionArea>
<CardActions className={classes.cardActions}>
<Button size="small" color="primary" href={url}>Learn More</Button>
<Typography variant="h5" color="textSecondary" component="h2">{i + 1}</Typography>
</CardActions>
</Card>
);
};
export default NewsCard;