135 lines
2.7 KiB
JavaScript
135 lines
2.7 KiB
JavaScript
import React, { useState } from "react";
|
|
import PropTypes from "prop-types";
|
|
|
|
import {
|
|
Card,
|
|
CardActionArea,
|
|
CardActions,
|
|
CardContent,
|
|
CardMedia,
|
|
Chip,
|
|
IconButton,
|
|
Link,
|
|
Menu,
|
|
MenuItem,
|
|
Typography
|
|
} from "@material-ui/core";
|
|
import { red } from "@material-ui/core/colors";
|
|
import { AccountCircle, Favorite, Link as LinkIcon } from "@material-ui/icons";
|
|
import { useHistory } from "react-router-dom";
|
|
import NavBar from "./shared/NavBar";
|
|
|
|
import config from "../config";
|
|
// TODO: Replace with API accessed feeds
|
|
import feeds from "./dummyData/feeds.json";
|
|
|
|
function FeedCard({ feed }) {
|
|
const [filled, setFilled] = useState(Math.random() > 0.5);
|
|
let style = {};
|
|
if (filled) {
|
|
style={
|
|
color: red.A400
|
|
};
|
|
}
|
|
return (
|
|
<Card
|
|
key={feed.id}
|
|
style={{
|
|
maxWidth: "600px",
|
|
margin: "20px auto",
|
|
}}
|
|
>
|
|
<CardActionArea>
|
|
<CardMedia
|
|
image={`${config.thumbnailServer}/${feed.id}.jpg`}
|
|
title={feed.title}
|
|
component="img"
|
|
/>
|
|
<CardContent>
|
|
<Typography gutterBottom variant="h5" component="h2">
|
|
{feed.title}
|
|
</Typography>
|
|
<Typography variant="body2" color="textSecondary" component="h2">
|
|
{feed.description}
|
|
</Typography>
|
|
{feed.tags.map((tag, idx) => <Chip label={tag} key={idx} style={{marginRight: "1em"}}/>)}
|
|
</CardContent>
|
|
</CardActionArea>
|
|
<CardActions>
|
|
<IconButton style={style} onClick={() => setFilled(!filled)}>
|
|
<Favorite />
|
|
</IconButton>
|
|
<Link href={feed.url}>
|
|
<IconButton>
|
|
<LinkIcon />
|
|
</IconButton>
|
|
</Link>
|
|
</CardActions>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
FeedCard.propTypes = {
|
|
feed: PropTypes.object,
|
|
};
|
|
|
|
function App() {
|
|
const history = useHistory();
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
const open = Boolean(anchorEl);
|
|
|
|
function handleMenu(event) {
|
|
setAnchorEl(event.currentTarget);
|
|
}
|
|
|
|
function handleClose() {
|
|
setAnchorEl(null);
|
|
}
|
|
|
|
function logout() {
|
|
handleClose();
|
|
history.push("/");
|
|
}
|
|
|
|
return (<>
|
|
<NavBar>
|
|
<div>
|
|
<IconButton
|
|
aria-label="account of current user"
|
|
aria-controls="menu-appbar"
|
|
aria-haspopup="true"
|
|
onClick={handleMenu}
|
|
color="inherit"
|
|
>
|
|
<AccountCircle />
|
|
</IconButton>
|
|
<Menu
|
|
id="menu-appbar"
|
|
anchorEl={anchorEl}
|
|
anchorOrigin={{
|
|
vertical: "top",
|
|
horizontal: "right",
|
|
}}
|
|
keepMounted
|
|
transformOrigin={{
|
|
vertical: "top",
|
|
horizontal: "right",
|
|
}}
|
|
open={open}
|
|
onClose={handleClose}
|
|
>
|
|
<MenuItem onClick={handleClose}>Profile</MenuItem>
|
|
<MenuItem onClick={handleClose}>My account</MenuItem>
|
|
<MenuItem onClick={logout}>Logout</MenuItem>
|
|
</Menu>
|
|
</div>
|
|
</NavBar>
|
|
|
|
<div>
|
|
{feeds.map(feed => <FeedCard key={feed.id} feed={feed} />)}
|
|
</div>
|
|
</>);
|
|
}
|
|
|
|
export default App;
|