Add dummyData and create the feed on homepage
This commit is contained in:
@@ -1,30 +1,97 @@
|
||||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import { IconButton, Menu, MenuItem } from "@material-ui/core";
|
||||
import { AccountCircle } from "@material-ui/icons";
|
||||
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);
|
||||
|
||||
const handleMenu = (event) => {
|
||||
function handleMenu(event) {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
function handleClose() {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
function logout() {
|
||||
handleClose();
|
||||
history.push("/");
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
return (<>
|
||||
<NavBar>
|
||||
<div>
|
||||
<IconButton
|
||||
@@ -57,7 +124,11 @@ function App() {
|
||||
</Menu>
|
||||
</div>
|
||||
</NavBar>
|
||||
);
|
||||
|
||||
<div>
|
||||
{feeds.map(feed => <FeedCard key={feed.id} feed={feed} />)}
|
||||
</div>
|
||||
</>);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
121
src/pages/dummyData/feeds.json
Normal file
121
src/pages/dummyData/feeds.json
Normal file
@@ -0,0 +1,121 @@
|
||||
[{
|
||||
"id": 1,
|
||||
"title": "replanting underexcited unaccidental",
|
||||
"description": "cornupete horse-litter Kylah Graehme imperil deliquesced problematic herniary sleep-created spitsticker epoxidize neurectopia pareira BURP nucleary enduing Rozek antirobbery biotome rescored",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Mathematics", "Statistics"]
|
||||
}, {
|
||||
"id": 2,
|
||||
"title": "remands centered borough",
|
||||
"description": "prosceniums black-blooded testata Winnebagos Hydri couches subumbelliferous Parnassianism assi puppydom previolated table-hop skiatron befavor wistfully meurtriere cuckooing dongon intuitable plentiful",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Statistics", "Machine Learning", "Data Science"]
|
||||
}, {
|
||||
"id": 3,
|
||||
"title": "nanocephalous foldboats vehme",
|
||||
"description": "stockbroker synergy creophagism Miltonize cryptanalyzed pumpkinify remortgaging be-smutch threefoldly corporeal detentions Hawthorn ramets zoon Valentine annuluses mechanicocorpuscular indicium periosteorrhaphy raged",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["History", "Machine Learning", "Biology"]
|
||||
}, {
|
||||
"id": 4,
|
||||
"title": "evangelicals anxious Lardizabalaceae",
|
||||
"description": "polysomes Chaker liabilities bull-bearing extill nonratably Wardieu cometwise faunistically medino Callisaurus vapulation Melrose rentes synovitic spitefuller anisogamic well-rubbed wind-swung unmercifully",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Data Science", "Biology", "Javascript"]
|
||||
}, {
|
||||
"id": 5,
|
||||
"title": "razorbill permanency paramountcy",
|
||||
"description": "turtleize nonlubricating Hibernicising Angadreme microstomia quasi-seriously outflux carburated psize appetizers welcomers tombaks Hartselle tonicked exactly Dorena chromodiascope inconclusible genealogic recycles",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Machine Learning", "Biology", "Javascript"]
|
||||
}, {
|
||||
"id": 6,
|
||||
"title": "Shawwal rabble-rousing outer-directed",
|
||||
"description": "hyperdoricism rehabber wobbler discourteous RAF Mullin hypocoristically Lyndes outward-bound greedygut protocaseose deep-sided fathercraft shift Warundi Velarde pluggingly subjectlike there'll fractured",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Mathematics", "Statistics"]
|
||||
}, {
|
||||
"id": 7,
|
||||
"title": "bifluoride much-honored centurist",
|
||||
"description": "polars typhlon neurine upfill illustre tzarisms preexceptional stretto urosepsis unhaft fibrilation subcreative ungerontic moonshine prehend Thelyphonidae king-ridden Kenzi receptitious twice-appropriated",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Javascript", "Python", "Science"]
|
||||
}, {
|
||||
"id": 8,
|
||||
"title": "antechapel vittle self-banished",
|
||||
"description": "UCAR take-down stonesmatch superofrontal stirp praetextae LRSS ten-knotter hemangiomata audaciously yellowish-green-yellow inhuman perfectest spinneys noter space gay-beseen oscinine Skiest extirpator",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Mathematics", "Statistics", "Science"]
|
||||
}, {
|
||||
"id": 9,
|
||||
"title": "Harlingen umbeled bhara",
|
||||
"description": "pelletierine hotbrained flamen mnemonic's whity-brown arriccios ruinatious paromologia catabolizing dinanderie renouncement academicism endogenetic supercavitation Shamus hopingly gravimetric creamsacs Rentsch faithfulness",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Data Science", "Science"]
|
||||
}, {
|
||||
"id": 10,
|
||||
"title": "Cyclanthales wiseweed anemonol",
|
||||
"description": "garance splaying centesimate Jonina Caddaric irretentiveness pygargus bararite Edessan monkliness conferences aviaries Magnuson stoke reauthorizing rinse uralitic checkrein objurgative Bastien",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Mathematics", "Machine Learning", "Biology"]
|
||||
}, {
|
||||
"id": 11,
|
||||
"title": "proaddition Tehuelet Celastrus",
|
||||
"description": "preadopts plumelet prisometer colocynth precontinental intercitizenship Lauter spear-bill humit Metaphen chrysoeriol phenoplast saprolegniaceous mortalness Basilicata neurotics mis-space bendies overurging tome",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Statistics", "Science"]
|
||||
}, {
|
||||
"id": 12,
|
||||
"title": "bids vanillin bemaddened",
|
||||
"description": "scribeship poppets Moliones orthographist syllabarium repressurizes Podaliriidae mating Miller well-saffroned wedset disinfect flotilla uncorrelatively beseek diobolon unadoptional German-american dimerization mattboard",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Mathematics", "Javascript"]
|
||||
}, {
|
||||
"id": 13,
|
||||
"title": "fraenums redemption quadruplets",
|
||||
"description": "tablecloth insite dolorousness iso-uretine Vareck exta Gallinae enchantresses mudsills Fording cystoradiography raiment fluoroformol polygamist octuplet take-charge ex-enemy self-debasement Scripturarian Manipur",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Mathematics", "Biology"]
|
||||
}, {
|
||||
"id": 14,
|
||||
"title": "Ontine Ulex abjudge",
|
||||
"description": "open-bill subcompensated ensteep trichode Quamasia open-spacedly Lazos bijugous cailleach workbasket reflectionist cookshop CRB spot-drill unmendacious imbecile ejective spring-well scotopia adored",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Mathematics", "Python"]
|
||||
}, {
|
||||
"id": 15,
|
||||
"title": "Hsiang blazoners murexan",
|
||||
"description": "Nichola kvass chemotaxonomy inhibitors sciomachy fortunation surfeit-swelled newfanglement Tan contrarily octodecillion drum-wound pseudoseptate thick-hided vigilant ling Cycadofilicales interspecies clunking Nabalism",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Biology", "Science"]
|
||||
}, {
|
||||
"id": 16,
|
||||
"title": "colleague moneywort greatcoat",
|
||||
"description": "mandated anti-Germanic zoophoric chameleons stingray self-admired Paymaster-General adderbolt subpolygonal sonically linsey-woolseys defalcating sublunary huguenots coactors Arragon Chalybean covariate courtage untremulent",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Mathematics", "Data Science"]
|
||||
}, {
|
||||
"id": 17,
|
||||
"title": "stoped minyanim carrotiness",
|
||||
"description": "myrtleberry willeyer witchingly andante unkemptness wooshing ostentation nonathletic sea-boat sardel foolhardily gurneys scialytic semirealistic escape outproduces Tommy self-action whangees devinct",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Machine Learning", "Biology"]
|
||||
}, {
|
||||
"id": 18,
|
||||
"title": "Iridis Knutsen tandstickor",
|
||||
"description": "croiik argot anthropologies bedeswoman merchantries flutings wetters easement Finleyville friggle extinguishes unfragmented lardite roweled bloodflower ascidioid Abitibi classers hemomanometer combatable",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Mathematics", "Python"]
|
||||
}, {
|
||||
"id": 19,
|
||||
"title": "dieretic Boote littermate",
|
||||
"description": "premedial unioniform Fredel natterjack hepatoptosia autocarpic unsolidarity cionitis cognomens rhinophore multitudinistic Saban unexuberant Lyopoma ambivalence Gibsonia dwang pre-estimate Pro-emersonianism low-rimmed",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["History", "Statistics", "Science"]
|
||||
}, {
|
||||
"id": 20,
|
||||
"title": "racehorses kineticism scienter",
|
||||
"description": "Triodontoidei protosinner back-list red-eye Emersonian intratracheally Ejam coelomes hard-witted hesitantly Parthia imparities concubines sultane clip-winged co-une moonstone Cuda gumflower plies",
|
||||
"url": "https://webionite.com/",
|
||||
"tags": ["Mathematics", "Data Science"]
|
||||
}]
|
||||
Reference in New Issue
Block a user