added resource images #9

frontend/src/components/navigation.js

@@ -214,7 +214,7 @@ export default function Navigation() {
                     {['Resources'].map((text, index) => (
 
                         <ListItemLink key={text} to={"/" + text.toLowerCase()} component={Link}>
-                            <Tooltip TransitionComponent={Zoom} placement='right' title="Resources" arrow enterDelay="500">
+                            <Tooltip TransitionComponent={Zoom} placement='right' title="Resources" arrow enterDelay={500}>
                                 <ListItemIcon><EmojiObjectsIcon fontSize="large" color="secondary"></EmojiObjectsIcon></ListItemIcon>
                             </Tooltip>
                             <ListItemText primary={text} />

frontend/src/components/selectResource/index.js

@@ -8,6 +8,8 @@ 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';
+import ResourceCard from './resourceCard';
 
 
 const useStyles = makeStyles(theme => ({
@@ -16,23 +18,7 @@ const useStyles = makeStyles(theme => ({
     }
 }));
 
-function CreateResourceCard(resource, classes) {
-    function ListItemLink(props) {
-        return <ListItem button component={Link1} {...props} />;
-    }
-    return (
-        <Grid item xs={4} lg={2} >
-            <Card >
-                <CardContent style={{ padding: 0 }}>
-                    <ListItemLink to={"/resourcechart/" + resource["db_letter"]} component={Link}>
-                        <ListItemText primary={resource["name"]} />
-                    </ListItemLink>
-                </CardContent>
-            </Card>
-        </Grid>
 
-    )
-}
 
 export default function SelectResource() {
     const classes = useStyles();
@@ -43,7 +29,7 @@ export default function SelectResource() {
         resourceJSON = await resourceJSON.json();
         let rArr = [];
         for (let i = 0; i < resourceJSON.length; i++) {
-            rArr.push(CreateResourceCard(resourceJSON[i], classes));
+            rArr.push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
         }
         setResources(rArr);
     }

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>
+
+    );
+}