added resource images #9

frontend/src/components/selectResource/resourceCard.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import { Link } from 'react-router-dom';
+import Link1 from '@material-ui/core/Link';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import CardMedia from '@material-ui/core/CardMedia';
+
+
+const useStyles = makeStyles(theme => ({
+    picture: {
+
+    }
+}));
+function ListItemLink(props) {
+    return <ListItem button component={Link1} {...props} />;
+}
+
+export default function ResourceCard(props) {
+    const classes = useStyles();
+    const [picture, setPicture] = React.useState(null);
+
+    var picUrl = "https://d1fxy698ilbz6u.cloudfront.net/static/" + props.resource["image"]
+
+
+    const loadResourcePicture = async () => {
+        await fetch(picUrl).then(res => { return res.blob() }).then(blob => {
+            var img = URL.createObjectURL(blob);
+            setPicture(img);
+
+        })
+
+
+    }
+
+    if (picture === null)
+        loadResourcePicture();
+
+    return (
+
+        <Grid item xs={4} lg={2} key={props.resource["name"]}>
+            <Card >
+                <CardContent style={{ padding: 0 }}>
+                    <ListItemLink to={"/resourcechart/" + props.resource["db_letter"]} component={Link}>
+                        <img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
+                        <ListItemText primary={props.resource["name"]} />
+                    </ListItemLink>
+                </CardContent>
+            </Card>
+        </Grid>
+
+    );
+}