Skip to content

Commit 80e1652

Browse files
Linda PengLinda Peng
Linda Peng
authored and
Linda Peng
committed
Add skeleton for Search, return resources using axios, and set up structure for a resources page with a PersonalMenu sidebar
1 parent 770992f commit 80e1652

File tree

5 files changed

+275
-4
lines changed

5 files changed

+275
-4
lines changed

‎package-lock.json

Lines changed: 56 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@material-ui/core": "^4.5.1",
7+
"@material-ui/icons": "^4.5.1",
8+
"@material-ui/lab": "^4.0.0-alpha.29",
9+
"axios": "^0.19.0",
610
"json-server": "^0.15.1",
711
"npm-run-all": "^4.1.5",
8-
"@material-ui/core": "^4.5.1",
912
"react": "16.10.2",
1013
"react-dom": "16.10.2",
1114
"react-router-dom": "5.1.2",

‎src/components/PersonalMenu/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
import { Typography } from "@material-ui/core";
3+
4+
export default function PersonalMenu() {
5+
return (
6+
<>
7+
<h2>Personal Menu</h2>
8+
<Typography variant="body1">lorem ipsum</Typography>
9+
</>
10+
);
11+
}

‎src/components/Resources/index.js

Lines changed: 188 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,190 @@
1-
import React from "react";
1+
import React, { useState, useEffect } from "react";
2+
import axios from "axios";
3+
import { makeStyles } from "@material-ui/core/styles";
4+
import clsx from "clsx";
5+
import PersonalMenu from "../PersonalMenu";
6+
import Card from "@material-ui/core/Card";
7+
import CardHeader from "@material-ui/core/CardHeader";
8+
import CardContent from "@material-ui/core/CardContent";
9+
import CardActions from "@material-ui/core/CardActions";
10+
import Collapse from "@material-ui/core/Collapse";
11+
import Avatar from "@material-ui/core/Avatar";
12+
import IconButton from "@material-ui/core/IconButton";
13+
import Rating from "@material-ui/lab/Rating";
14+
import StarBorderIcon from "@material-ui/icons/StarBorder";
15+
import Typography from "@material-ui/core/Typography";
16+
import { red } from "@material-ui/core/colors";
17+
import BookmarkIcon from "@material-ui/icons/Bookmark";
18+
import ShareIcon from "@material-ui/icons/Share";
19+
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
20+
import MoreVertIcon from "@material-ui/icons/MoreVert";
21+
import Grid from "@material-ui/core/Grid";
22+
import TextareaAutosize from "@material-ui/core/TextareaAutosize";
23+
import { Button } from "@material-ui/core";
24+
import LinkIcon from "@material-ui/icons/Link";
25+
import Search from "../Search";
226

3-
export default function Resources() {
4-
return <h2>Resources</h2>;
27+
const useStyles = makeStyles(theme => ({
28+
card: {
29+
maxWidth: 345
30+
},
31+
media: {
32+
height: 0,
33+
paddingTop: "56.25%" // 16:9
34+
},
35+
expand: {
36+
transform: "rotate(0deg)",
37+
marginLeft: "auto",
38+
transition: theme.transitions.create("transform", {
39+
duration: theme.transitions.duration.shortest
40+
})
41+
},
42+
expandOpen: {
43+
transform: "rotate(180deg)"
44+
},
45+
avatar: {
46+
backgroundColor: red[500]
47+
}
48+
}));
49+
50+
function Resources() {
51+
const [resources, setResources] = useState([]);
52+
53+
const classes = useStyles();
54+
const [expanded, setExpanded] = React.useState(false);
55+
56+
const handleExpandClick = () => {
57+
setExpanded(!expanded);
58+
};
59+
60+
useEffect(() => {
61+
axios
62+
.get("http://localhost:3000/resources")
63+
.then(function(response) {
64+
// handle success
65+
setResources(response.data);
66+
console.log(response);
67+
})
68+
.catch(function(error) {
69+
// handle error
70+
console.log(error);
71+
});
72+
}, []);
73+
74+
return (
75+
<>
76+
{console.log(resources)}
77+
78+
<Grid container spacing={1}>
79+
<Grid item lg={3}>
80+
<PersonalMenu />
81+
</Grid>
82+
<Grid item lg={9}>
83+
<h2>Resources</h2>
84+
<Search label="Search resources" />
85+
<br />
86+
<Grid container spacing={1}>
87+
{resources.map(
88+
({
89+
id,
90+
title,
91+
created,
92+
description,
93+
url,
94+
referrer,
95+
credit,
96+
date_published,
97+
paid,
98+
tags
99+
}) => {
100+
return (
101+
<Grid item lg={3} key={id}>
102+
<Card className={classes.card}>
103+
<CardHeader
104+
avatar={
105+
<Avatar
106+
aria-label="recipe"
107+
className={classes.avatar}
108+
>
109+
R
110+
</Avatar>
111+
}
112+
action={
113+
<IconButton aria-label="settings">
114+
<MoreVertIcon />
115+
</IconButton>
116+
}
117+
title={title}
118+
subheader={created}
119+
/>
120+
<CardContent>
121+
<Typography
122+
variant="body2"
123+
color="textSecondary"
124+
component="p"
125+
>
126+
{description}
127+
</Typography>
128+
</CardContent>
129+
<CardActions disableSpacing>
130+
<IconButton aria-label="add to favorites">
131+
<BookmarkIcon />
132+
</IconButton>
133+
<IconButton aria-label="share">
134+
<ShareIcon />
135+
</IconButton>
136+
<IconButton aria-label="share">
137+
<a
138+
href={url}
139+
target="_blank"
140+
rel="noopener noreferrer"
141+
>
142+
<LinkIcon />
143+
</a>
144+
</IconButton>
145+
<IconButton
146+
className={clsx(classes.expand, {
147+
[classes.expandOpen]: expanded
148+
})}
149+
onClick={handleExpandClick}
150+
aria-expanded={expanded}
151+
aria-label="show more"
152+
>
153+
<ExpandMoreIcon />
154+
</IconButton>
155+
</CardActions>
156+
<Collapse in={expanded} timeout="auto" unmountOnExit>
157+
<CardContent>
158+
<Rating
159+
name="customized-empty"
160+
value={2}
161+
precision={0.5}
162+
emptyIcon={<StarBorderIcon fontSize="inherit" />}
163+
/>
164+
<TextareaAutosize
165+
aria-label="Review"
166+
rows={3}
167+
placeholder="Your review"
168+
/>
169+
<Button
170+
type="submit"
171+
color="primary"
172+
variant="contained"
173+
>
174+
Submit
175+
</Button>
176+
</CardContent>
177+
</Collapse>
178+
</Card>
179+
</Grid>
180+
);
181+
}
182+
)}
183+
</Grid>
184+
</Grid>
185+
</Grid>
186+
</>
187+
);
5188
}
189+
190+
export default Resources;

‎src/components/Search/index.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
import { Input } from "@material-ui/core";
3+
import PropTypes from "prop-types";
4+
5+
function Search({ label }) {
6+
return (
7+
<div>
8+
<Input type="search" placeholder={label} />
9+
</div>
10+
);
11+
}
12+
export default Search;
13+
14+
Search.propTypes = {
15+
label: PropTypes.string
16+
};

0 commit comments

Comments
 (0)