Set up axios

package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.5.1",
+    "@material-ui/icons": "^4.5.1",
+    "@material-ui/lab": "^4.0.0-alpha.29",
+    "axios": "^0.19.0",
     "json-server": "^0.15.1",
     "npm-run-all": "^4.1.5",
-    "@material-ui/core": "^4.5.1",
     "react": "16.10.2",
     "react-dom": "16.10.2",
     "react-router-dom": "5.1.2",

src/components/PersonalMenu/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Typography } from "@material-ui/core";
+
+export default function PersonalMenu() {
+  return (
+    <>
+      <h2>Personal Menu</h2>
+      <Typography variant="body1">lorem ipsum</Typography>
+    </>
+  );
+}

src/components/Resources/index.js

@@ -1,5 +1,190 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { makeStyles } from "@material-ui/core/styles";
+import clsx from "clsx";
+import PersonalMenu from "../PersonalMenu";
+import Card from "@material-ui/core/Card";
+import CardHeader from "@material-ui/core/CardHeader";
+import CardContent from "@material-ui/core/CardContent";
+import CardActions from "@material-ui/core/CardActions";
+import Collapse from "@material-ui/core/Collapse";
+import Avatar from "@material-ui/core/Avatar";
+import IconButton from "@material-ui/core/IconButton";
+import Rating from "@material-ui/lab/Rating";
+import StarBorderIcon from "@material-ui/icons/StarBorder";
+import Typography from "@material-ui/core/Typography";
+import { red } from "@material-ui/core/colors";
+import BookmarkIcon from "@material-ui/icons/Bookmark";
+import ShareIcon from "@material-ui/icons/Share";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import MoreVertIcon from "@material-ui/icons/MoreVert";
+import Grid from "@material-ui/core/Grid";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import { Button } from "@material-ui/core";
+import LinkIcon from "@material-ui/icons/Link";
+import Search from "../Search";
 
-export default function Resources() {
-  return <h2>Resources</h2>;
+const useStyles = makeStyles(theme => ({
+  card: {
+    maxWidth: 345
+  },
+  media: {
+    height: 0,
+    paddingTop: "56.25%" // 16:9
+  },
+  expand: {
+    transform: "rotate(0deg)",
+    marginLeft: "auto",
+    transition: theme.transitions.create("transform", {
+      duration: theme.transitions.duration.shortest
+    })
+  },
+  expandOpen: {
+    transform: "rotate(180deg)"
+  },
+  avatar: {
+    backgroundColor: red[500]
+  }
+}));
+
+function Resources() {
+  const [resources, setResources] = useState([]);
+
+  const classes = useStyles();
+  const [expanded, setExpanded] = React.useState(false);
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  useEffect(() => {
+    axios
+      .get("http://localhost:3000/resources")
+      .then(function(response) {
+        // handle success
+        setResources(response.data);
+        console.log(response);
+      })
+      .catch(function(error) {
+        // handle error
+        console.log(error);
+      });
+  }, []);
+
+  return (
+    <>
+      {console.log(resources)}
+
+      <Grid container spacing={1}>
+        <Grid item lg={3}>
+          <PersonalMenu />
+        </Grid>
+        <Grid item lg={9}>
+          <h2>Resources</h2>
+          <Search label="Search resources" />
+          <br />
+          <Grid container spacing={1}>
+            {resources.map(
+              ({
+                id,
+                title,
+                created,
+                description,
+                url,
+                referrer,
+                credit,
+                date_published,
+                paid,
+                tags
+              }) => {
+                return (
+                  <Grid item lg={3} key={id}>
+                    <Card className={classes.card}>
+                      <CardHeader
+                        avatar={
+                          <Avatar
+                            aria-label="recipe"
+                            className={classes.avatar}
+                          >
+                            R
+                          </Avatar>
+                        }
+                        action={
+                          <IconButton aria-label="settings">
+                            <MoreVertIcon />
+                          </IconButton>
+                        }
+                        title={title}
+                        subheader={created}
+                      />
+                      <CardContent>
+                        <Typography
+                          variant="body2"
+                          color="textSecondary"
+                          component="p"
+                        >
+                          {description}
+                        </Typography>
+                      </CardContent>
+                      <CardActions disableSpacing>
+                        <IconButton aria-label="add to favorites">
+                          <BookmarkIcon />
+                        </IconButton>
+                        <IconButton aria-label="share">
+                          <ShareIcon />
+                        </IconButton>
+                        <IconButton aria-label="share">
+                          <a
+                            href={url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <LinkIcon />
+                          </a>
+                        </IconButton>
+                        <IconButton
+                          className={clsx(classes.expand, {
+                            [classes.expandOpen]: expanded
+                          })}
+                          onClick={handleExpandClick}
+                          aria-expanded={expanded}
+                          aria-label="show more"
+                        >
+                          <ExpandMoreIcon />
+                        </IconButton>
+                      </CardActions>
+                      <Collapse in={expanded} timeout="auto" unmountOnExit>
+                        <CardContent>
+                          <Rating
+                            name="customized-empty"
+                            value={2}
+                            precision={0.5}
+                            emptyIcon={<StarBorderIcon fontSize="inherit" />}
+                          />
+                          <TextareaAutosize
+                            aria-label="Review"
+                            rows={3}
+                            placeholder="Your review"
+                          />
+                          <Button
+                            type="submit"
+                            color="primary"
+                            variant="contained"
+                          >
+                            Submit
+                          </Button>
+                        </CardContent>
+                      </Collapse>
+                    </Card>
+                  </Grid>
+                );
+              }
+            )}
+          </Grid>
+        </Grid>
+      </Grid>
+    </>
+  );
 }
+
+export default Resources;

src/components/Search/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { Input } from "@material-ui/core";
+import PropTypes from "prop-types";
+
+function Search({ label }) {
+  return (
+    <div>
+      <Input type="search" placeholder={label} />
+    </div>
+  );
+}
+export default Search;
+
+Search.propTypes = {
+  label: PropTypes.string
+};