From d92ff5a4a7816bffbfae20b4ae59ce46a6858cab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joni=20Kyr=C3=B6nlahti?= <L4599@student.jamk.fi> Date: Thu, 11 Jul 2019 14:17:19 +0300 Subject: [PATCH 01/10] New QR reader --- package.json | 97 ++++++++++++++++++++++++++-------------------------- 1 file changed, 49 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index 11f5a094..e267bd28 100755 --- a/package.json +++ b/package.json @@ -1,50 +1,51 @@ { - "name": "jonoxi", - "homepage": ".", - "version": "0.1.0", - "private": true, - "dependencies": { - "@material-ui/core": "^4.0.2", - "@material-ui/icons": "^4.0.1", - "axios": "^0.19.0", - "date-fns": "^1.30.1", - "firebase": "^6.1.0", - "material-ui": "^0.20.2", - "material-ui-popup-state": "^1.3.2", - "qrcode.react": "^0.9.3", - "react": "^16.8.6", - "react-dom": "^16.8.6", - "react-firebaseui": "^3.1.2", - "react-google-maps": "^9.4.5", - "react-qr-scanner": "0.0.8", - "react-router": "^5.0.0", - "react-router-dom": "^5.0.0", - "react-scripts": "3.0.1", - "react-swipeable-views": "^0.13.3" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject", - "start-sw": "http-server ./build" - }, - "eslintConfig": { - "extends": "react-app" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "devDependencies": { - "http-server": "^0.11.1" - } + "name": "jonoxi", + "homepage": ".", + "version": "0.1.0", + "private": true, + "dependencies": { + "@material-ui/core": "^4.0.2", + "@material-ui/icons": "^4.0.1", + "axios": "^0.19.0", + "date-fns": "^1.30.1", + "firebase": "^6.1.0", + "material-ui": "^0.20.2", + "material-ui-popup-state": "^1.3.2", + "qrcode.react": "^0.9.3", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "react-firebaseui": "^3.1.2", + "react-google-maps": "^9.4.5", + "react-qr-reader": "^2.2.1", + "react-qr-scanner": "0.0.8", + "react-router": "^5.0.0", + "react-router-dom": "^5.0.0", + "react-scripts": "3.0.1", + "react-swipeable-views": "^0.13.3" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject", + "start-sw": "http-server ./build" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "http-server": "^0.11.1" + } } -- GitLab From 0308a9b785de6e02abac67576bf9a18a7a976838 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joni=20Kyr=C3=B6nlahti?= <L4599@student.jamk.fi> Date: Thu, 11 Jul 2019 14:18:23 +0300 Subject: [PATCH 02/10] Remove Firebase import --- src/js/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/App.js b/src/js/App.js index b94bafdb..e3b1b77b 100755 --- a/src/js/App.js +++ b/src/js/App.js @@ -1,5 +1,4 @@ import React from "react"; -import firebase, { functions } from "./Firebase"; import { HashRouter as Router, Route } from "react-router-dom"; import Browse from "./Browse"; import Profile from "./Profile"; -- GitLab From 83e5cdb621e7530570a8732409b76ea2b3b8b951 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joni=20Kyr=C3=B6nlahti?= <L4599@student.jamk.fi> Date: Thu, 11 Jul 2019 14:20:30 +0300 Subject: [PATCH 03/10] ? --- src/js/AuthContext.js | 68 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 67 insertions(+), 1 deletion(-) diff --git a/src/js/AuthContext.js b/src/js/AuthContext.js index 82dbacdf..bbbee5b3 100644 --- a/src/js/AuthContext.js +++ b/src/js/AuthContext.js @@ -1,7 +1,8 @@ import React, { Component, createContext } from "react"; -import firebase from "./Firebase"; +import firebase, { functions } from "./Firebase"; export const AuthContext = createContext(); +const messaging = firebase.messaging(); export default class AuthContextProvider extends Component { constructor() { @@ -25,6 +26,7 @@ export default class AuthContextProvider extends Component { isAnonymous: user.isAnonymous }); console.log(this.state.uid); + this.notificationPermission(); } else { this.setState({ user: false, @@ -32,15 +34,79 @@ export default class AuthContextProvider extends Component { email: null, isAnonymous: null }); + this.deleteToken(); } }); } + componentDidUpdate() { + messaging.onTokenRefresh(() => { + messaging + .getToken() + .then(refreshedToken => { + console.log("Token refreshed."); + this.sendToken(refreshedToken); + localStorage.setItem("pushToken", refreshedToken); + }) + .catch(err => { + console.log("Unable to retrieve refreshed token ", err); + }); + }); + } + componentWillUnmount() { //Remove listener if component is unmounted to avoid memory leaks this.removeAuthListener(); } + notificationPermission() { + Notification.requestPermission().then(permission => { + if (permission === "granted") { + console.log("Notification permission granted."); + messaging + .getToken() + .then(currentToken => { + if (currentToken) { + this.sendToken(currentToken); //If token exists and it is not already saved in local storage + localStorage.setItem("pushToken", currentToken); + } + }) + .catch(err => { + console.log( + "An error occurred while retrieving token. ", + err + ); + }); + } else { + console.log("Unable to get permission to notify."); + } + }); + } + + sendToken(token) { + console.log("Sending token"); + console.log("FCM token:", token); + const registerToken = functions.httpsCallable("registerToken"); + // Tallentaa luodun fcm tokenin firestore users{$user} dokumenttiin + registerToken({ + messagingToken: token + }) + .then(res => {}) + .catch(error => { + console.error(error); + }); + } + + deleteToken() { + if (localStorage.getItem("pushToken")) { + messaging.getToken().then(currentToken => { + console.log("Deleting token:", currentToken); + messaging.deleteToken(currentToken); + }); + localStorage.removeItem("pushToken"); + } + } + render() { return ( <AuthContext.Provider value={this.state}> -- GitLab From f71c51e5a6cae8bab2c9f07238ae4e1daacba800 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joni=20Kyr=C3=B6nlahti?= <L4599@student.jamk.fi> Date: Thu, 11 Jul 2019 14:25:46 +0300 Subject: [PATCH 04/10] Remove unused imports and comment out unused functions --- src/js/Card.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/js/Card.js b/src/js/Card.js index af495a97..472d4349 100644 --- a/src/js/Card.js +++ b/src/js/Card.js @@ -1,6 +1,6 @@ import { React, Link } from "./Essentials"; -import { useState, useEffect } from "react"; -import firebase, { functions } from "./Firebase"; +import { useState } from "react"; +import { functions } from "./Firebase"; import Fab from "@material-ui/core/Fab"; import JoinIcon from "@material-ui/icons/HowToReg"; import Card from "@material-ui/core/Card"; @@ -16,16 +16,13 @@ import Button from "@material-ui/core/Button"; import ShareIcon from "@material-ui/icons/Share"; import ClearIcon from "@material-ui/icons/Clear"; import SettingsIcon from "@material-ui/icons/Settings"; -import FeedbackIcon from "@material-ui/icons/Feedback"; import CompassIcon from "@material-ui/icons/Explore"; import Snackbar from "@material-ui/core/Snackbar"; import Dialog from "./Dialog"; import { makeStyles } from "@material-ui/core/styles"; import QRCode from "qrcode.react"; -import { flexbox } from "@material-ui/system"; -import { NEG_ONE } from "long"; -const db = firebase.firestore(); +//const db = firebase.firestore(); const orange = "#fa8e2a"; const useStyles = makeStyles(theme => ({ card: { @@ -107,9 +104,9 @@ function PreviewCard(props) { setExpanded(!expanded); } - function handleClickOpen() { - setOpen(true); - } + // function handleClickOpen() { + // setOpen(true); + // } function handleClose() { setOpen(false); -- GitLab From 367a567bee0d05ba8c7b88214c7469ba89040966 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joni=20Kyr=C3=B6nlahti?= <L4599@student.jamk.fi> Date: Thu, 11 Jul 2019 14:27:00 +0300 Subject: [PATCH 05/10] Edit propTypes --- src/js/Dialog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/Dialog.js b/src/js/Dialog.js index cc028cc1..2299f790 100644 --- a/src/js/Dialog.js +++ b/src/js/Dialog.js @@ -77,7 +77,7 @@ class DialogComp extends Component { DialogComp.propTypes = { classes: PropTypes.object.isRequired, - open: PropTypes.bool.isRequired, + //open: PropTypes.bool.isRequired, handleClose: PropTypes.func.isRequired }; -- GitLab From 7e4ddcc83a29e20e77820c875e88a80127ebbc9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joni=20Kyr=C3=B6nlahti?= <L4599@student.jamk.fi> Date: Thu, 11 Jul 2019 14:27:59 +0300 Subject: [PATCH 06/10] Remove unused imports --- src/js/Drawer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/Drawer.js b/src/js/Drawer.js index 5ed594b2..42b15c1f 100644 --- a/src/js/Drawer.js +++ b/src/js/Drawer.js @@ -20,7 +20,6 @@ import ListItem from "@material-ui/core/ListItem"; import Account from "@material-ui/icons/AccountBox"; import Home from "@material-ui/icons/Home"; import LogOut from "@material-ui/icons/Cancel"; -import Friends from "@material-ui/icons/PeopleOutline"; import Line from "@material-ui/icons/Gesture"; import Settings from "@material-ui/icons/Settings"; import { AuthContext } from "./AuthContext"; -- GitLab From e7d49717381cc8b0c8e43941f01d9d3d0a085678 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joni=20Kyr=C3=B6nlahti?= <L4599@student.jamk.fi> Date: Thu, 11 Jul 2019 14:29:26 +0300 Subject: [PATCH 07/10] Moved notification premission and FCM token generation to AuthContext.js --- src/js/Firebase.js | 81 ++++++++-------------------------------------- 1 file changed, 13 insertions(+), 68 deletions(-) diff --git a/src/js/Firebase.js b/src/js/Firebase.js index 0fd8825a..95bfbad3 100644 --- a/src/js/Firebase.js +++ b/src/js/Firebase.js @@ -17,75 +17,20 @@ const config = { firebase.initializeApp(config); -const messaging = firebase.messaging(); - -messaging.usePublicVapidKey( - //With this key, client knows to listen for right notifications - "BAwAYfFPLrtTVwuyvm3a99ZFwQ9MbyBzqsh0mxRfuvUyegP-iGo8RgSQ_8zUoSUtOktFiUR0DwEYI97jpCzuz78" -); - -Notification.requestPermission().then(permission => { - if (permission === "granted") { - console.log("Notification permission granted."); - messaging - .getToken() - .then(currentToken => { - if (currentToken && tokenHasChanged(currentToken)) { - sendToken(currentToken); //If token exists and it is not already saved in local storage - } - sendToken(currentToken); - console.log("FCM token:", currentToken); - }) - .catch(err => { - console.log("An error occurred while retrieving token. ", err); - }); - } else { - console.log("Unable to get permission to notify."); - } -}); - -messaging.onMessage(payload => { - console.log("Message received. ", payload); - // ... +firebase + .messaging() + .usePublicVapidKey( + "BAwAYfFPLrtTVwuyvm3a99ZFwQ9MbyBzqsh0mxRfuvUyegP-iGo8RgSQ_8zUoSUtOktFiUR0DwEYI97jpCzuz78" + ); + +firebase.messaging().onMessage(payload => { + console.log(payload); + new Notification("moi", { + body: payload.notification.body, + icon: + "data:image/png;base64,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" + }); }); -messaging.onTokenRefresh(() => { - this.messaging - .getToken() - .then(refreshedToken => { - console.log("Token refreshed."); - sendToken(refreshedToken); - }) - .catch(err => { - console.log("Unable to retrieve refreshed token ", err); - }); -}); - -function sendToken(token) { - console.log("Sending token"); - console.log("FCM token:", token); - const registerToken = functions.httpsCallable("registerToken"); - registerToken({ - messagingToken: token - }) - .then(result => { - console.log(result); - }) - .catch(error => { - console.error(error); - }) - .finally(() => { - saveToken(token); - }); -} -function tokenHasChanged(token) { - //Also, returns true if token does not yet exist - return window.localStorage.getItem("token") !== token; -} -function saveToken(token) { - //Save the token to browsers local storage to later on check if it changes - window.localStorage.setItem("token", token); -} - export const functions = firebase.app().functions("europe-west1"); export default firebase; -- GitLab From 6092b4636da3f169b56c531cd0a5c5eea14eedf0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joni=20Kyr=C3=B6nlahti?= <L4599@student.jamk.fi> Date: Thu, 11 Jul 2019 14:31:10 +0300 Subject: [PATCH 08/10] Changed to better QR Code scanner & add button to close/open camera --- src/js/Manage.js | 67 ++++++++++++++++++++++++++++++++++-------------- 1 file changed, 48 insertions(+), 19 deletions(-) diff --git a/src/js/Manage.js b/src/js/Manage.js index f11cfd1b..b05cd521 100644 --- a/src/js/Manage.js +++ b/src/js/Manage.js @@ -3,8 +3,10 @@ import firebase, { functions } from "./Firebase"; import UsersTable from "./UsersTable"; import { distanceInWordsToNow } from "date-fns"; import locale from "date-fns/locale/fi"; +import Fab from "@material-ui/core/Fab"; +import CameraAlt from "@material-ui/icons/CameraAlt"; +import QrReader from "react-qr-reader"; -const QrReader = require("react-qr-scanner"); const db = firebase.firestore(); export default class Manage extends React.Component { @@ -12,9 +14,9 @@ export default class Manage extends React.Component { super(); this.state = { users: [], - delay: 100, result: "No result", - id: match.params.id + id: match.params.id, + open: false }; } @@ -141,33 +143,60 @@ export default class Manage extends React.Component { } userIsFirst(id) { - if (this.state.users[0].id === id) { - alert("Removing user"); - return true; + if (this.state.users[0]) { + if (this.state.users[0].id === id) { + alert("Removing user"); + return true; + } } + return false; } handleData = data => { - if (data !== null) { - (this.userIsFirst(data) && this.removeUser(data)) || - alert("Ei ole käyttäjän vuoro tai koodi on väärä."); + console.log(data); + if (data) { + if (this.userIsFirst(data)) { + this.clearUser(data); + } else { + alert("Käyttäjä ei ole ensimmäinen!"); + } } }; + handleCameraClick = () => { + this.setState(prevState => ({ open: !prevState.open })); + }; + getReader() { - const previewStyle = { - height: 320, - width: 320 + const { open } = this.state; + const fabStyle = { + marginLeft: "auto", + marginRight: "auto", + display: "flex", + marginTop: "20px" }; + if (open) { + return ( + <> + <QrReader + delay={400} + resolution={800} + onScan={this.handleData} + onError={err => console.error(err)} + /> + <Fab onClick={this.handleCameraClick} style={fabStyle}> + <CameraAlt /> + </Fab> + </> + ); + } return ( - <QrReader - delay={this.state.delay} - style={previewStyle} - onScan={this.handleData} - onError={err => console.error(err)} - facingMode="rear" - /> + <> + <Fab onClick={this.handleCameraClick} style={fabStyle}> + <CameraAlt /> + </Fab> + </> ); } -- GitLab From 362806cdf5dc7dfa72285ec0b3de8e1e159f22fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joni=20Kyr=C3=B6nlahti?= <L4599@student.jamk.fi> Date: Thu, 11 Jul 2019 14:32:18 +0300 Subject: [PATCH 09/10] Removed unused Dialog component --- src/js/Queue.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/js/Queue.js b/src/js/Queue.js index 5b03b226..c324f999 100644 --- a/src/js/Queue.js +++ b/src/js/Queue.js @@ -4,7 +4,7 @@ import Typography from "@material-ui/core/Typography"; import Snackbar from "@material-ui/core/Snackbar"; import { withStyles } from "@material-ui/styles"; import firebase, { functions } from "./Firebase"; -import Dialog from "./Dialog"; +//import Dialog from "./Dialog"; const QRCode = require("qrcode.react"); const db = firebase.firestore(); @@ -46,6 +46,7 @@ class Queue extends React.Component { handleClose = () => { this.setState({ open: false }); + console.log(this.state.open); }; // Updates in realtime getQueueData(id) { @@ -130,12 +131,12 @@ class Queue extends React.Component { </span> } /> - <Dialog + {/* <Dialog header="Haluatko varmasti poistua jonosta?" open={this.state.open} handleClose={this.handleClose} action={this.leaveQueue} - /> + /> */} </React.Fragment> )} </React.Fragment> -- GitLab From 07ec6739d31d98bcf6633f1ef512843d4f42d2d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joni=20Kyr=C3=B6nlahti?= <L4599@student.jamk.fi> Date: Thu, 11 Jul 2019 14:36:56 +0300 Subject: [PATCH 10/10] Styling, removed firebase import, added AuthContext, fixed displaying wait time, fixed dialog when leaving the queue --- src/js/QueueTabs.js | 48 ++++++++++++++++++++++++++++++--------------- 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/src/js/QueueTabs.js b/src/js/QueueTabs.js index 0f64348c..e4b9d13d 100644 --- a/src/js/QueueTabs.js +++ b/src/js/QueueTabs.js @@ -1,5 +1,5 @@ -import React, { useState } from "react"; -import PropTypes, { object } from "prop-types"; +import React, { useState, useContext } from "react"; +import PropTypes from "prop-types"; import SwipeableViews from "react-swipeable-views"; import { makeStyles, useTheme } from "@material-ui/core/styles"; import AppBar from "@material-ui/core/AppBar"; @@ -7,23 +7,27 @@ import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; import Typography from "@material-ui/core/Typography"; import Button from "@material-ui/core/Button"; -import firebase from "./Firebase"; import Map from "./Map"; import Dialog from "./Dialog"; +import { AuthContext } from "./AuthContext"; const QRCode = require("qrcode.react"); function TabContainer({ children, dir }) { return ( - <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}> + <Typography + component="div" + dir={dir} + style={{ padding: "12px 0", height: "100%" }} + > {children} </Typography> ); } -function getMain(props, classes, open, setOpen) { - let user = firebase.auth().currentUser; - const inQueue = Boolean(props.data.position); //If position is zero, he is not in que, otherwise he is +function getMain(props, classes, open, handleClose, handleOpen, uid) { + const inQueue = Boolean(props.data.position); + //If position is zero, he is not in que, otherwise he is return ( <div className={classes.positionContainer}> <Typography color="primary" variant="h4"> @@ -38,7 +42,7 @@ function getMain(props, classes, open, setOpen) { </Typography> ) : null} </Typography> - {props.data.averageTime && ( + {props.data.averageTime ? ( <Typography variant="h6"> {"Oletettu jonotusaika "} <Typography variant="inherit" color="primary"> @@ -50,11 +54,11 @@ function getMain(props, classes, open, setOpen) { min. </Typography> </Typography> - )} + ) : null} </div> <div className={classes.qr}> - <QRCode value={user.uid} /> - <Typography variant="subtitle2"> + <QRCode value={uid} /> + <Typography className={classes.subtitle} variant="subtitle2"> {"Näytä tämä koodi jonon valvojalle."} </Typography> </div> @@ -70,7 +74,7 @@ function getMain(props, classes, open, setOpen) { {inQueue ? ( <Button - onClick={setOpen} + onClick={handleOpen} className={classes.button} color="primary" variant="contained" @@ -80,7 +84,7 @@ function getMain(props, classes, open, setOpen) { ) : null} <Dialog open={open} - handleClose={setOpen} + handleClose={handleClose} header="Haluatko varmasti poistua?" action={props.leave} /> @@ -141,13 +145,16 @@ const useStyles = makeStyles(theme => ({ textAlign: "center" }, qr: { - marginTop: "3rem", + marginTop: "auto", display: "flex", flexDirection: "column", alignItems: "center" }, + subtitle: { + paddingTop: "40px" + }, buttons: { - marginTop: "5rem" + marginTop: "auto" }, button: { margin: "1rem" @@ -165,6 +172,7 @@ export default function FullWidthTabs(props) { const theme = useTheme(); const [value, setValue] = React.useState(0); const [open, setOpen] = useState(false); + const { uid } = useContext(AuthContext); function handleChange(event, newValue) { setValue(newValue); @@ -173,6 +181,14 @@ export default function FullWidthTabs(props) { function handleChangeIndex(index) { setValue(index); } + + function handleClose() { + setOpen(false); + } + + function handleOpen() { + setOpen(true); + } return ( <div className={classes.root}> <AppBar position="static" color="secondary"> @@ -194,7 +210,7 @@ export default function FullWidthTabs(props) { className={classes.views} > <TabContainer dir={theme.direction}> - {getMain(props, classes, open, setOpen)} + {getMain(props, classes, open, handleClose, handleOpen, uid)} </TabContainer> <TabContainer dir={theme.direction}> {getInfo(props.data, classes)} -- GitLab