Feature/sajmal (#45)

Author: sajmalyousef

simplq/src/components/page/QueueStatus.jsx

@@ -1,24 +1,32 @@
-import React from "react";
+import React, { useState } from "react";
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import CentralSection from "../CentralSection";
-
+import QueueService from '../../services/queue';
+import { CircularProgress } from "@material-ui/core";
 
 function QueueStatus(props) {
-  var aheadCount = 10;
+  const [aheadCount, setAheadCount] = useState();
+  QueueService.userIndexQueue(props.match.params.queueId, props.match.params.tokenId).then(
+    count => setAheadCount(count)
+  );
 
   return <CentralSection heading="Sit Tight!">
-    <Typography variant="h5" align="center" color="textSecondary" component="p">
-      There are {aheadCount} people ahead of you. Thanks for waiting!
-    </Typography>
+    {aheadCount ?
+      <Typography variant="h5" align="center" color="textSecondary" component="p">
+        There are {aheadCount} people ahead of you. Thanks for waiting!
+      </Typography>
+      :
+      <CircularProgress style={{ display: "block", margin: "0px auto" }} />
+    }
     <div style={{ display: "flex", justifyContent: 'flex-end' }}>
-            <Button variant="contained" color="primary" style={{
-                marginTop: 30,
-                marginLeft: 10,
-            }}>
-                Refresh
+      <Button variant="contained" color="primary" style={{
+        marginTop: 30,
+        marginLeft: 10,
+      }}>
+        Refresh
         </Button>
-        </div>
+    </div>
   </CentralSection>
 }
 

simplq/src/services/queue.js

@@ -34,18 +34,18 @@ class QueueService {
                 throw new Error("Queue not found");
             }
         });
-        
+
         const usersPromise = this.queues.doc(queueId).collection("users").get()
-                .then(snapshot => {
-                    const users = [];
-                    snapshot.forEach(doc => {
-                        users.push(doc.data())
-                    });
-                    return users;
-                })
-                .catch(err => {
-                    throw new Error('Error getting users from queue', err);
+            .then(snapshot => {
+                const users = [];
+                snapshot.forEach(doc => {
+                    users.push(doc.data())
                 });
+                return users;
+            })
+            .catch(err => {
+                throw new Error('Error getting users from queue', err);
+            });
 
         return {
             name: await namePromise,
@@ -55,12 +55,17 @@ class QueueService {
 
     addtoQueue(name, contact, queueId) {
         return this.queues.doc(queueId)
-            .collection("users")
-            .add({ name: name, contact: contact })
-            .then(docRef => docRef.id)
-            .catch(() => console.log("Error adding to queue"));
+            .collection("users").add({
+                name: name, contact: contact, "timestamp": firebase.firestore.Timestamp.now()
+            })
+            .then(docRef => docRef.id).catch(() => console.log("Error adding to queue"));
 
     }
+    async userIndexQueue(queueId, tokenId) {
+        const users = this.queues.doc(queueId).collection("users");
+        const timeStamp = await users.doc(tokenId).get().then(doc => doc.data().timestamp);
+        return users.where("timestamp", "<", timeStamp).get().then(snapshot => snapshot.size);
+    }
 }