From 7bcc7c57fd16fe857a4276cd2f451e9ddc85c436 Mon Sep 17 00:00:00 2001
From: pymit <amkr.here@gmail.com>
Date: Thu, 11 Jul 2019 21:28:56 +0530
Subject: [PATCH 1/4] retriving data from feedback api

---
 src/main/Homepage/feedback/FeedBackDB.js |  8 ++++----
 src/main/Homepage/feedback/index.js      | 20 +++++++++++---------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/main/Homepage/feedback/FeedBackDB.js b/src/main/Homepage/feedback/FeedBackDB.js
index 93cccdf..6178e74 100644
--- 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/index.js b/src/main/Homepage/feedback/index.js
index 406f87e..ec4e45b 100644
--- a/src/main/Homepage/feedback/index.js
+++ b/src/main/Homepage/feedback/index.js
@@ -8,28 +8,30 @@ class FeedBack extends Component {
         super(props);
 
         this.state = {
-            EmbeddingContents: [{ id: "", title: "", fileurl: "", created_on: "" }]
-
+            EmbeddingContents: [
+                { id: null, title: null, fileurl: null, created_on: null }
+            ],
+            test:[{data:null,}],
         };
     }
 
     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,this.state.test.fileurl);
 
-        return (
-            <div> feedback {indexId}</div>
-        )
+        return <div> feedback {indexId}</div>;
     }
 }
 

From 1b7d0d9c39bfcb7821d8444528630b038b4a6bbb Mon Sep 17 00:00:00 2001
From: pymit <amkr.here@gmail.com>
Date: Sat, 13 Jul 2019 10:39:45 +0530
Subject: [PATCH 2/4] face image now showing in card

---
 src/main/Homepage/feedback/cardview.js | 50 ++++++++++++++++++++++++++
 src/main/Homepage/feedback/index.css   | 10 ++++++
 src/main/Homepage/feedback/index.js    | 18 +++++++---
 3 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 src/main/Homepage/feedback/cardview.js

diff --git a/src/main/Homepage/feedback/cardview.js b/src/main/Homepage/feedback/cardview.js
new file mode 100644
index 0000000..37135b0
--- /dev/null
+++ b/src/main/Homepage/feedback/cardview.js
@@ -0,0 +1,50 @@
+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 Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import "./index.css";
+
+const useStyles = makeStyles({
+  card: {
+    maxWidth: 300,
+  },
+  media: {
+    height: 300,
+  },
+});
+
+export default function Maincard(props) {
+  const classes = useStyles();
+
+  return (
+
+    <div className="maincardview">
+    <Card className={classes.card}>
+    <CardActionArea>
+      <CardMedia
+        className={classes.media}
+        // image="https://avatars3.githubusercontent.com/u/22710677?s=460&v=4"
+        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>
+
+  );
+}
diff --git a/src/main/Homepage/feedback/index.css b/src/main/Homepage/feedback/index.css
index e69de29..b8d841e 100644
--- a/src/main/Homepage/feedback/index.css
+++ b/src/main/Homepage/feedback/index.css
@@ -0,0 +1,10 @@
+.maincardview {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 400px;
+    height: 400px;
+}
diff --git a/src/main/Homepage/feedback/index.js b/src/main/Homepage/feedback/index.js
index ec4e45b..4ffac60 100644
--- a/src/main/Homepage/feedback/index.js
+++ b/src/main/Homepage/feedback/index.js
@@ -1,7 +1,8 @@
 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) {
@@ -11,7 +12,7 @@ class FeedBack extends Component {
             EmbeddingContents: [
                 { id: null, title: null, fileurl: null, created_on: null }
             ],
-            test:[{data:null,}],
+            test: [{ data: null }]
         };
     }
 
@@ -29,9 +30,18 @@ class FeedBack extends Component {
         let randomIndex = Math.floor(Math.random() * EmbeddingContents.length);
         let indexId = EmbeddingContents[randomIndex]["id"];
         // console.log(indexId, EmbeddingContents[randomIndex]);
-        console.log(this.state.test.data,this.state.test.fileurl);
+        console.log(this.state.test.data,API_URL+ this.state.test.fileurl);
+
+
+        return (
+            <div>
+               <div> <Maincard fileurl={API_URL + this.state.test.fileurl} data = {this.state.test.data}/></div>
+                <div>feedback {indexId}</div>
+                {/*{JSON.stringify( this.state.test.data,null, 4)}
+        {this.state.test.fileurl} */}
 
-        return <div> feedback {indexId}</div>;
+            </div>
+        );
     }
 }
 

From 0ad519b915e16cb10c963a6884d86b6f1f56b99e Mon Sep 17 00:00:00 2001
From: pymit <amkr.here@gmail.com>
Date: Sat, 13 Jul 2019 12:55:46 +0530
Subject: [PATCH 3/4] Adding list view

---
 public/index.html                      |  1 +
 src/App.js                             |  1 -
 src/main/Homepage/feedback/cardview.js | 84 +++++++++++++-------------
 src/main/Homepage/feedback/divider.js  | 35 +++++++++++
 src/main/Homepage/feedback/index.css   | 11 ++--
 src/main/Homepage/feedback/index.js    | 12 ++--
 6 files changed, 92 insertions(+), 52 deletions(-)
 create mode 100644 src/main/Homepage/feedback/divider.js

diff --git a/public/index.html b/public/index.html
index d08e4d9..c211a12 100644
--- 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
index a4776d6..5b8e3b9 100644
--- 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/cardview.js b/src/main/Homepage/feedback/cardview.js
index 37135b0..490c1d2 100644
--- a/src/main/Homepage/feedback/cardview.js
+++ b/src/main/Homepage/feedback/cardview.js
@@ -1,50 +1,50 @@
-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 Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+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 InsetDividers from "./divider";
 const useStyles = makeStyles({
-  card: {
-    maxWidth: 300,
-  },
-  media: {
-    height: 300,
-  },
+    card: {
+        maxWidth: 800
+    },
+    media: {
+        height: 300
+    }
 });
 
 export default function Maincard(props) {
-  const classes = useStyles();
-
-  return (
-
-    <div className="maincardview">
-    <Card className={classes.card}>
-    <CardActionArea>
-      <CardMedia
-        className={classes.media}
-        // image="https://avatars3.githubusercontent.com/u/22710677?s=460&v=4"
-        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>
+    const classes = useStyles();
 
-    </div>
+    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>
+        
+            <InsetDividers data= {props.data}/>
+            </div>
+        </div>
+    );
 }
diff --git a/src/main/Homepage/feedback/divider.js b/src/main/Homepage/feedback/divider.js
new file mode 100644
index 0000000..c6d6f52
--- /dev/null
+++ b/src/main/Homepage/feedback/divider.js
@@ -0,0 +1,35 @@
+import React from "react";
+import { render } from "react-dom";
+import { makeStyles } from "@material-ui/core/styles";
+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 Divider from "@material-ui/core/Divider";
+import Icon from "@material-ui/core/Icon";
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        width: "120%",
+        maxWidth: 300,
+        backgroundColor: theme.palette.background.paper
+    }
+}));
+
+export default function InsetDividers(props) {
+	const classes = useStyles();
+	const somedata = props.data;
+
+	console.log(somedata)
+	// somedata.map(o => console.log(typeof(o)));
+
+
+    return (
+		<div>
+		{
+			// temp
+			JSON.stringify(props.data,null,4)
+		}</div>
+    );
+}
diff --git a/src/main/Homepage/feedback/index.css b/src/main/Homepage/feedback/index.css
index b8d841e..162332a 100644
--- a/src/main/Homepage/feedback/index.css
+++ b/src/main/Homepage/feedback/index.css
@@ -1,10 +1,11 @@
 .maincardview {
-    position: absolute;
-    margin: auto;
+    /* position: absolute; */
+    /* margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
-    left: 0;
-    width: 400px;
-    height: 400px;
+    left: 0; */
+    /* width: 600px;
+	height: 600px; */
+	display: flex;
 }
diff --git a/src/main/Homepage/feedback/index.js b/src/main/Homepage/feedback/index.js
index 4ffac60..aaa8716 100644
--- a/src/main/Homepage/feedback/index.js
+++ b/src/main/Homepage/feedback/index.js
@@ -30,16 +30,20 @@ class FeedBack extends Component {
         let randomIndex = Math.floor(Math.random() * EmbeddingContents.length);
         let indexId = EmbeddingContents[randomIndex]["id"];
         // console.log(indexId, EmbeddingContents[randomIndex]);
-        console.log(this.state.test.data,API_URL+ this.state.test.fileurl);
-
+        // console.log(this.state.test.data,API_URL+ this.state.test.fileurl);
 
         return (
             <div>
-               <div> <Maincard fileurl={API_URL + this.state.test.fileurl} data = {this.state.test.data}/></div>
+                <div>
+                    {" "}
+                    <Maincard
+                        fileurl={API_URL + this.state.test.fileurl}
+                        data={this.state.test.data}
+                    />
+                </div>
                 <div>feedback {indexId}</div>
                 {/*{JSON.stringify( this.state.test.data,null, 4)}
         {this.state.test.fileurl} */}
-
             </div>
         );
     }

From 77adc499996675fbf82396f1c5850f87a5d36bf9 Mon Sep 17 00:00:00 2001
From: pymit <amkr.here@gmail.com>
Date: Sat, 13 Jul 2019 19:41:14 +0530
Subject: [PATCH 4/4] solved the object undefined issue

---
 src/main/Homepage/feedback/cardview.js | 56 ++++++++++--------
 src/main/Homepage/feedback/divider.js  | 79 +++++++++++++++++++-------
 src/main/Homepage/feedback/index.js    |  7 +--
 3 files changed, 93 insertions(+), 49 deletions(-)

diff --git a/src/main/Homepage/feedback/cardview.js b/src/main/Homepage/feedback/cardview.js
index 490c1d2..251aa53 100644
--- a/src/main/Homepage/feedback/cardview.js
+++ b/src/main/Homepage/feedback/cardview.js
@@ -6,10 +6,10 @@ 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 InsetDividers from "./divider";
+import DividerMain from "./divider";
 const useStyles = makeStyles({
     card: {
-        maxWidth: 800
+        maxWidth: 400
     },
     media: {
         height: 300
@@ -18,32 +18,40 @@ const useStyles = makeStyles({
 
 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>
-        
-            <InsetDividers data= {props.data}/>
+                <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
index c6d6f52..197cf15 100644
--- a/src/main/Homepage/feedback/divider.js
+++ b/src/main/Homepage/feedback/divider.js
@@ -1,35 +1,72 @@
-import React from "react";
-import { render } from "react-dom";
-import { makeStyles } from "@material-ui/core/styles";
+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 Divider from "@material-ui/core/Divider";
 import Icon from "@material-ui/core/Icon";
+import Divider from "@material-ui/core/Divider";
+
+export class DividerMain extends Component {
+    constructor(props) {
+        super(props);
 
-const useStyles = makeStyles(theme => ({
-    root: {
-        width: "120%",
-        maxWidth: 300,
-        backgroundColor: theme.palette.background.paper
+        this.state = {
+            contents: null,
+        };
     }
-}));
 
-export default function InsetDividers(props) {
-	const classes = useStyles();
-	const somedata = props.data;
+	componentWillMount() {
+        this.setState({ contents: this.props.data });
+	}
 
-	console.log(somedata)
-	// somedata.map(o => console.log(typeof(o)));
 
+    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))
 
-    return (
-		<div>
+		if(typeof this.props.data !=='undefined')
 		{
-			// temp
-			JSON.stringify(props.data,null,4)
-		}</div>
-    );
+			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.js b/src/main/Homepage/feedback/index.js
index aaa8716..8bc5aa1 100644
--- a/src/main/Homepage/feedback/index.js
+++ b/src/main/Homepage/feedback/index.js
@@ -12,7 +12,7 @@ class FeedBack extends Component {
             EmbeddingContents: [
                 { id: null, title: null, fileurl: null, created_on: null }
             ],
-            test: [{ data: null }]
+            test: []
         };
     }
 
@@ -35,15 +35,14 @@ class FeedBack extends Component {
         return (
             <div>
                 <div>
-                    {" "}
+
                     <Maincard
                         fileurl={API_URL + this.state.test.fileurl}
                         data={this.state.test.data}
                     />
                 </div>
                 <div>feedback {indexId}</div>
-                {/*{JSON.stringify( this.state.test.data,null, 4)}
-        {this.state.test.fileurl} */}
+
             </div>
         );
     }