Added user counter

package.json

@@ -34,6 +34,7 @@
     "node-stream-zip": "^1.8.2",
     "react": "^16.8.6",
     "react-bootstrap": "^1.0.0-beta.10",
+    "react-countup": "^4.2.2",
     "react-dom": "^16.8.6",
     "react-file-drop": "^0.2.8",
     "react-loading": "^2.0.3",

server/MongoHelper.js

@@ -98,10 +98,24 @@ const getFBMap = () => {
     })
 }
 
+const getUserCount = () => {
+    return new Promise((resolve, reject) => {
+        MongoPool.getInstance((client) => {
+            let db = client.db("pricemydata")
+            let collectionName = "price_entries"
+            db.collection(collectionName).count({}, function(error, numOfDocs){
+                if(error) return callback(error);
+                resolve(numOfDocs);
+            });
+        })
+    })
+}
+
 module.exports = {
     appendPriceEntry,
     getFBMap,
-    getGoogleMap
+    getGoogleMap,
+    getUserCount
 }
 
 

server/index.js

@@ -41,7 +41,7 @@ MongoPool.createPool(mongo, options);
 
 app.post('/valueFB', upload.single('fbFile'), valueFBData);
 
-app.post('/valueGoogle', upload.single('googleFile'), valueGoogleData)
+app.post('/valueGoogle', upload.single('googleFile'), valueGoogleData);
 
 //app.post('/loginUser', processLogin);
 
@@ -59,6 +59,13 @@ app.post('/api/appendEntry', (req, res) => {
   })
 })
 
+app.post('/fetchUserCount', async (req, res) => {
+  let userCount = await MongoHelper.getUserCount();
+  res.json({
+    count: userCount
+  })
+})
+
 /*
 
 app.post('/api/fetchFBMeans', async (req, res) => {

src/components/Home.js

@@ -1,21 +1,50 @@
 import React, {Component} from 'react';
 import Button from 'react-bootstrap/Button'
+import CountUp from 'react-countup';
 import "../styles/HomeStyle.css"
 
-export default function Home(props) {
-    return(
-        <React.Fragment>
-            <h3 className="centerTitle">How much is your data really worth?</h3>
-            <h6 className="centerSubtitle">Crowdfunding data valuations, for a safer, friendlier and more secure tomorrow.</h6>
-            <div className="buttons">
-                <Button className="buttonStyle" onClick={props.priceHandler}>Price my data!</Button>
-            </div>
-            <p className="readMore">Read more about this project <a href="#">here</a></p>
-            <p style={{position:"absolute", bottom:"5px", textAlign:"left", fontSize:"0.8rem", marginLeft:"2vw"}}>By using us to price your data, you agree to our <a href="https://github.com/raghavmecheri/PriceMyDataDocuments/blob/master/TOC.md" target="_blank" style={{
-                color: "#ffffff",
-                textDecoration: "underline"
-            }}>terms and conditions</a></p>
-            <Button className="circularButton">i</Button>
-        </React.Fragment>
-    );
+export default class Home extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            users:0
+        }
+    }
+
+    componentDidMount() {
+        const endpoint = "./fetchUserCount";
+        fetch(endpoint, {
+            method: 'POST',
+            headers:{
+                'Content-Type': 'application/json'
+            },
+            }).then(res => res.json()).then(response => {
+                let {count} = response;
+                console.log(count);
+                this.setState({users:count})
+        })
+        .catch(
+            error => console.log(error)
+        );
+    }
+
+    render() {
+        let {users} = this.state;
+        return(
+            <React.Fragment>
+                <h3 className="centerTitle">How much is your data really worth?</h3>
+                <h6 className="centerSubtitle">Crowdfunding data valuations, for a safer, friendlier and more secure tomorrow.</h6>
+                <div className="buttons">
+                    <Button className="buttonStyle" onClick={this.props.priceHandler}>Price my data</Button>
+                </div>
+                <p className="readMore">Read more about this project <a href="#">here</a></p>
+                <p style={{position:"absolute", bottom:"5px", textAlign:"left", fontSize:"0.8rem", marginLeft:"2vw"}}>By using us to price your data, you agree to our <a href="https://github.com/raghavmecheri/PriceMyDataDocuments/blob/master/TOC.md" target="_blank" style={{
+                    color: "#ffffff",
+                    textDecoration: "underline"
+                }}>terms and conditions</a></p>
+                <CountUp className="counter" delay={2} end={users} prefix="Users: "/>
+            </React.Fragment>
+        );
+    }
 }

src/components/PriceData.js

@@ -239,7 +239,7 @@ export default class PriceData extends Component {
                     <ToggleButton className="toggled" value={2}>Google</ToggleButton>
                 </ToggleButtonGroup>
             </ButtonToolbar>
-            <p className="readMore"><a href={this.state.download.url}>{this.state.download.message}</a></p>
+            <p className="readMore"><a href={this.state.download.url} target="_blank">{this.state.download.message}</a></p>
             <p style={{marginBottom:"2vh", marginTop:"1vh", fontSize:"1.1rem"}}><b>{this.state.content}</b></p>
             <DropzoneWithoutClick handleFileSet={this.setFile}/>
             <h4 className="centerElement">How much would you charge for:</h4>

src/styles/HomeStyle.css

@@ -34,15 +34,12 @@
     border-color: #ffffff;
 }
 
-.circularButton {
+.counter {
     position: absolute;
     top:1vh;
     left:1vw;
-    height:5vh;
-    width:5vh;
-    border-radius: 50%;
     background-color: transparent;
-    border-color: #ffffff;
+    color: #ffffff;
 }
 
 .readMore {