Merge pull request #1 from pymit/embed

Embed

src/header/index.css

@@ -4,6 +4,7 @@
   }
 
 .gradstyle
+
 {
 	background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
-}
+}

src/header/index.js

@@ -6,12 +6,16 @@ import { NavLink } from "react-router-dom";
 class NavBar extends Component {
     render() {
         return (
-            <div>
-                <Navbar className="gradstyle">
-                    <Navbar.Brand className="aligncenter">
+            <div >
+                <Navbar className="gradstyle"  fixed="top">
+                    <Navbar.Brand className="aligncenter" >
                         <NavLink to=""> Rekognition </NavLink>
                     </Navbar.Brand>
                 </Navbar>
+                <br></br>
+                <br></br>
+                <br></br>
+
             </div>
         );
     }

src/main/Homepage/embed/card.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Card from "@material-ui/core/Card";
+import CardActionArea from "@material-ui/core/CardActionArea";
+import CardActions from "@material-ui/core/CardActions";
+import CardContent from "@material-ui/core/CardContent";
+import CardMedia from "@material-ui/core/CardMedia";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles({
+  card: {
+    maxWidth: 100
+  }
+});
+
+export default function ImgMediaCard(props) {
+  const classes = useStyles();
+  const fileurl = "http://localhost:8000"+props.data.fileurl;
+
+  return (
+    <Card className={classes.card}>
+      <CardActionArea>
+        <CardMedia
+          component="img"
+          alt="Amazing Faces"
+          height="100"
+          width="100"
+          image= {fileurl}
+          title="Contemplative Reptile"
+        />
+
+      </CardActionArea>
+
+	  <CardActions>
+	 <div> {props.data.title}</div>
+
+{/*	<Typography variant="body2" color="textSecondary" component="p">
+	{props.data.created_on}
+  </Typography> */}
+
+      </CardActions>
+
+
+    </Card>
+  );
+}

src/main/Homepage/embed/index.js

@@ -1,14 +1,43 @@
-import React, { Component } from 'react'
+import React, { Component } from "react";
 import "./index.css";
+import EmbedService from "./result";
+import ImgMediaCard from "./card";
+const embedservice = new EmbedService();
 
 class EmbedNow extends Component {
-	render() {
-		return (
-			<div>
-					embed
-			</div>
-		)
-	}
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            contents: [{ id: "", title: "", fileurl: "", created_on: "" }]
+        };
+    }
+
+    componentDidMount() {
+        embedservice.getEmbeddingsList().then(result => {
+            this.setState({ contents: result.data });
+        });
+    }
+
+    render() {
+        const contents = this.state.contents;
+
+        return (
+            <div>
+                {contents.map(data => {
+                    // console.log(data.id, data.fileurl);
+                    // eslint-disable-next-line no-unused-expressions
+                    return (
+                        <div style={{ display: "inline-block" }} key = {data.id}>
+                            <div style={{ padding: "5px" }}>
+                                <ImgMediaCard data={data} />
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
 }
 
-export default EmbedNow;
+export default EmbedNow;

src/main/Homepage/embed/result.js

@@ -0,0 +1,13 @@
+import "./index.css";
+import axios from "axios";
+
+const API_URL = "http://localhost:8000";
+
+export default class EmbedService  {
+    constructor(){}
+
+    getEmbeddingsList() {
+        const url = `${API_URL}/api/faceid/`;
+        return axios.get(url).then(response => response.data);
+    }
+}