Merge pull request #5 from pymit/embed

Solving object undefined issue
marxmit7 · Jul 13, 2019 · cff8e62 · cff8e62
2 parents a0c75cc + 77adc49
commit cff8e62
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 14 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,7 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/src/App.js b/src/App.js
@@ -6,7 +6,6 @@ import EmbedNow from "./main/Homepage/embed/index";
 import VideoFR from "./main/Homepage/video_upload/index";
 import FeedBack from "./main/Homepage/feedback/index";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
-
 class App extends Component {
     render() {
         return (

diff --git a/src/main/Homepage/feedback/FeedBackDB.js b/src/main/Homepage/feedback/FeedBackDB.js
@@ -3,15 +3,15 @@ import axios from "axios";
 
 const API_URL = "http://localhost:8000";
 
-export default class FeedBackService  {
-    constructor(){}
+export default class FeedBackService {
+    constructor() {}
 
     getEmeddingList() {
         const url = `${API_URL}/api/faceid/`;
         return axios.get(url).then(response => response.data);
-    };
+    }
     getFeedbackList() {
         const url = `${API_URL}/api/feedback/`;
-        return axios.get(url).then(response => response.data);
+        return axios.get(url).then(response => response);
     }
 }
diff --git a/src/main/Homepage/feedback/cardview.js b/src/main/Homepage/feedback/cardview.js
@@ -0,0 +1,58 @@
+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 CardMedia from "@material-ui/core/CardMedia";
+import Button from "@material-ui/core/Button";
+import "./index.css";
+import DividerMain from "./divider";
+const useStyles = makeStyles({
+    card: {
+        maxWidth: 400
+    },
+    media: {
+        height: 300
+    }
+});
+
+export default function Maincard(props) {
+    const classes = useStyles();
+    var pingDividerMain;
+    if(typeof props.data !=='undefined')
+    {
+      pingDividerMain = <DividerMain  data={props.data}/>;
+    }
+    else
+    {
+      pingDividerMain =  "";
+    }
+
+    return (
+        <div className="maincardview">
+            <div>
+                <Card className={classes.card}>
+                    <CardActionArea>
+                        <CardMedia
+                            className={classes.media}
+                            image={props.fileurl}
+                            title="Contemplative Reptile"
+                        />
+                    </CardActionArea>
+                    <CardActions>
+                        <Button size="small" color="primary">
+                            Share
+                        </Button>
+                        <Button size="small" color="primary">
+                            Learn More
+                        </Button>
+                    </CardActions>
+                </Card>
+            </div>
+            <div>
+
+          {pingDividerMain}
+            </div>
+        </div>
+    );
+}
diff --git a/src/main/Homepage/feedback/divider.js b/src/main/Homepage/feedback/divider.js
@@ -0,0 +1,72 @@
+import React, { Component } from "react";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import ListItemAvatar from "@material-ui/core/ListItemAvatar";
+import Avatar from "@material-ui/core/Avatar";
+import Icon from "@material-ui/core/Icon";
+import Divider from "@material-ui/core/Divider";
+
+export class DividerMain extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            contents: null,
+        };
+    }
+
+	componentWillMount() {
+        this.setState({ contents: this.props.data });
+	}
+
+
+    render() {
+		const someData = [{"id":18,"suggestedName":"Bill Gates","upvote":0,"downvote":0,"feedback":"6c2c99a1-6510-4584-9c05-6b87d4106565"},{"id":19,"suggestedName":"Bill Gates","upvote":0,"downvote":0,"feedback":"6c2c99a1-6510-4584-9c05-6b87d4106565"}];
+		// const testdata = JSON.parse(JSON.stringify( this.state.contents))
+		// console.log(this.state.contents.length)
+		console.log(typeof(this.state.contents))
+
+		if(typeof this.props.data !=='undefined')
+		{
+			console.log("oh no")
+			console.log( this.props.data.length)
+
+			this.props.data.map(o => (
+				  console.log(o)
+				))
+		}
+        return (
+            <div>
+
+
+				{ someData.map(o => (
+					<h4>
+					  {o.upvote} {o.suggestedName} {o.downvote}
+					</h4>
+					))
+				}
+
+
+                <List>
+                    <ListItem>
+                        <Divider variant="inset" />
+                        <ListItemAvatar>
+                            <Avatar>
+                                <Icon>thumb_up</Icon>
+                            </Avatar>
+                        </ListItemAvatar>
+                        <ListItemText primary="testing" secondary="" />
+                        <ListItemAvatar>
+                            <Avatar>
+                                <Icon>thumb_down</Icon>
+                            </Avatar>
+                        </ListItemAvatar>
+                    </ListItem>
+                </List>
+            </div>
+        );
+    }
+}
+
+export default DividerMain;
diff --git a/src/main/Homepage/feedback/index.css b/src/main/Homepage/feedback/index.css
@@ -0,0 +1,11 @@
+.maincardview {
+    /* position: absolute; */
+    /* margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0; */
+    /* width: 600px;
+	height: 600px; */
+	display: flex;
+}
diff --git a/src/main/Homepage/feedback/index.js b/src/main/Homepage/feedback/index.js
@@ -1,35 +1,50 @@
 import React, { Component } from "react";
 import FeedBackService from "./FeedBackDB";
+import Maincard from "./cardview";
 const fbservice = new FeedBackService();
-
+const API_URL = "http://localhost:8000";
 // https://djangobook.com/advanced-models/
 class FeedBack extends Component {
     constructor(props) {
         super(props);
 
         this.state = {
-            EmbeddingContents: [{ id: "", title: "", fileurl: "", created_on: "" }]
-
+            EmbeddingContents: [
+                { id: null, title: null, fileurl: null, created_on: null }
+            ],
+            test: []
         };
     }
 
     componentDidMount() {
         fbservice.getEmeddingList().then(result => {
             this.setState({ EmbeddingContents: result.data });
-        }
-        );
-
+        });
+        fbservice.getFeedbackList().then(result => {
+            this.setState({ test: result.data });
+        });
     }
 
     render() {
         const EmbeddingContents = this.state.EmbeddingContents;
         let randomIndex = Math.floor(Math.random() * EmbeddingContents.length);
         let indexId = EmbeddingContents[randomIndex]["id"];
-        console.log(indexId,EmbeddingContents[randomIndex]);
+        // console.log(indexId, EmbeddingContents[randomIndex]);
+        // console.log(this.state.test.data,API_URL+ this.state.test.fileurl);
 
         return (
-            <div> feedback {indexId}</div>
-        )
+            <div>
+                <div>
+
+                    <Maincard
+                        fileurl={API_URL + this.state.test.fileurl}
+                        data={this.state.test.data}
+                    />
+                </div>
+                <div>feedback {indexId}</div>
+
+            </div>
+        );
     }
 }