From 39a38fe8eba6e856f51345cffc6f549c3f1ccb36 Mon Sep 17 00:00:00 2001
From: kunkliricsi <kunkli.ricsi@gmail.com>
Date: Wed, 18 Nov 2020 12:04:32 +0100
Subject: [PATCH] Added context to heatmap, and devices

---
 Birdmap.API/ClientApp/public/index.html       |  4 +-
 Birdmap.API/ClientApp/src/App.tsx             | 10 +-
 .../src/components/heatmap/Heatmap.jsx        | 94 +++++--------------
 .../ClientApp/src/contexts/DevicesContext.js  |  1 +
 .../src/contexts/DevicesContextProvider.js    | 17 ++--
 5 files changed, 45 insertions(+), 81 deletions(-)
diff --git a/Birdmap.API/ClientApp/public/index.html b/Birdmap.API/ClientApp/public/index.html
index 5082b3e..337161e 100644
--- a/Birdmap.API/ClientApp/public/index.html
+++ b/Birdmap.API/ClientApp/public/index.html
@@ -22,11 +22,11 @@
     -->
     <title>Birdmap</title>
   </head>
-  <body>
+  <body style="height: 100vh;">
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root"></div>
+    <div id="root" style="height: 100vh;"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/Birdmap.API/ClientApp/src/App.tsx b/Birdmap.API/ClientApp/src/App.tsx
index ba7dade..44f8f88 100644
--- a/Birdmap.API/ClientApp/src/App.tsx
+++ b/Birdmap.API/ClientApp/src/App.tsx
@@ -22,7 +22,7 @@ const theme = createMuiTheme({
     palette: {
         primary: {
             main: blueGrey[900],
-            dark: grey[200],
+            dark: grey[400],
         },
         secondary: {
             main: orange[200],
@@ -177,7 +177,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
 
     return (
         <React.Fragment>
-            <AppBar position="static">
+            <AppBar position="static" className={classes.bar_root}>
                 <Toolbar>
                     <BirdmapTitle />
                     <Typography component={'span'} className={classes.typo}>
@@ -194,8 +194,12 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
 
 const useDefaultLayoutStyles = makeStyles((theme: Theme) =>
     createStyles({
+        bar_root: {
+            height: '7%',
+        },
         box_root: {
-            color: theme.palette.secondary.dark,
+            backgroundColor: theme.palette.primary.dark,
+            height: '93%',
         },
         typo: {
             marginLeft: 'auto',
diff --git a/Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx b/Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx
index 188676b..ebcae64 100644
--- a/Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx
+++ b/Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx
@@ -1,96 +1,52 @@
 ﻿/*global google*/
 import GoogleMapReact from 'google-map-react';
 import React, { Component } from 'react';
-import DeviceService from '../../common/DeviceService'
 import DeviceMarker from './DeviceMarker'
-import { HubConnectionBuilder } from '@microsoft/signalr';
+import C from '../../common/Constants'
+import DevicesContext from '../../contexts/DevicesContext';
 
-const hub_url = '/hubs/devices';
-const probability_method_name = 'NotifyDeviceAsync';
-const update_method_name = 'NotifyDeviceUpdatedAsync';
-const update_all_method_name = 'NotifyAllUpdatedAsync';
 const lat_offset = 0.000038;
 const lng_offset = -0.000058;
-const heatmapPoints_session_name = 'heatmapPoints';
 
 export default class MapContainer extends Component {
     constructor(props) {
         super(props);
 
         this.state = {
-            devices: [],
             center: {
                 lat: 48.275939, lng: 21.469640
             },
             heatmapPoints: [],
-            connection: null,
-        }
+        };
+
+        this.probabilityHandler = this.probabilityHandler.bind(this);
     }
 
-    handleAllDevicesUpdated(service = null) {
-        if (service === null) {
-            service = new DeviceService();
+    static contextType = DevicesContext;
+
+    probabilityHandler(point) {
+        if (point.prob > 0.5) {
+
+            this.setState({
+                heatmapPoints: [...this.state.heatmapPoints, point]
+            });
+
+            if (this._googleMap !== undefined) {
+                const newPoint = { location: new google.maps.LatLng(point.lat, point.lng), weight: point.prob };
+                if (this._googleMap.heatmap !== null) {
+                    this._googleMap.heatmap.data.push(newPoint)
+                }
+            }
         }
-        service.getall().then(result => {
-            this.setState({ devices: result });
-        }).catch(ex => {
-            console.log(ex);
-        });
     }
 
     componentDidMount() {
-        const service = new DeviceService();
-        this.handleAllDevicesUpdated(service);
-
-        const newConnection = new HubConnectionBuilder()
-            .withUrl(hub_url)
-            .withAutomaticReconnect()
-            .build();
-
-        this.setState({ connection: newConnection });
-
-        newConnection.start()
-            .then(result => {
-                console.log('Hub Connected!');
-
-                newConnection.on(probability_method_name, (id, date, prob) => {
-                    //console.log(probability_method_name + " recieved: [id: " + id + ", date: " + date + ", prob: " + prob + "]");
-                    if (prob > 0.5) {
-                        var device = this.state.devices.filter(function (x) { return x.id === id })[0]
-                        var newPoint = { lat: device.coordinates.latitude, lng: device.coordinates.longitude };
-                        this.setState({
-                            heatmapPoints: [...this.state.heatmapPoints, newPoint]
-                        });
-
-                        if (this._googleMap !== undefined) {
-                            const point = { location: new google.maps.LatLng(newPoint.lat, newPoint.lng), weight: prob };
-                            this._googleMap.heatmap.data.push(point)
-                        }
-                    }
-                });
-
-                newConnection.on(update_all_method_name, () => {
-                    this.handleAllDevicesUpdated(service);
-                });
-
-                newConnection.on(update_method_name, (id) => {
-                    service.getdevice(id).then(result => {
-                        var index = this.state.devices.findIndex((d => d.id === id));
-                        const newDevices = [...this.state.devices];
-                        newDevices[index] = result;
-                        this.setState({ devices: newDevices });
-                    }).catch(ex => console.log("Device update failed.", ex));
-                })
-            }).catch(e => console.log('Hub Connection failed: ', e));
+        this.context.addHandler(C.probability_method_name, this.probabilityHandler);
+        this.setState({ heatmapPoints: [...this.context.heatmapPoints] });
     }
 
     componentWillUnmount() {
-        if (this.state.connection) {
-            this.state.connection.off(probability_method_name);
-            this.state.connection.off(update_all_method_name);
-            this.state.connection.off(update_method_name);
-            console.log('Hub Disconnected!');
-        }
+        this.context.removeHandler(C.probability_method_name, this.probabilityHandler);
     }
 
     render() {
@@ -112,7 +68,7 @@ export default class MapContainer extends Component {
             mapTypeId: 'satellite'
         }
 
-        const Markers = this.state.devices.map((device, index) => (
+        const Markers = this.context.devices.map((device, index) => (
             <DeviceMarker
                 key={device.id}
                 lat={device.coordinates.latitude + lat_offset}
@@ -122,7 +78,7 @@ export default class MapContainer extends Component {
         ));
 
         return (
-            <div style={{ height: '93.5vh', width: '100%' }}>
+            <div style={{ height: '93vh', width: '100%' }}>
                 <GoogleMapReact
                     bootstrapURLKeys={{
                         key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"],
diff --git a/Birdmap.API/ClientApp/src/contexts/DevicesContext.js b/Birdmap.API/ClientApp/src/contexts/DevicesContext.js
index 10ad1e9..9c390ae 100644
--- a/Birdmap.API/ClientApp/src/contexts/DevicesContext.js
+++ b/Birdmap.API/ClientApp/src/contexts/DevicesContext.js
@@ -5,4 +5,5 @@ export default React.createContext({
     heatmapPoints: [],
 
     addHandler: (_, __) => { },
+    removeHandler: (_, __) => { },
 });
\ No newline at end of file
diff --git a/Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js b/Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js
index 7f7d47d..e2e618a 100644
--- a/Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js
+++ b/Birdmap.API/ClientApp/src/contexts/DevicesContextProvider.js
@@ -12,7 +12,7 @@ export default class DevicesContextProvider extends Component {
 
         const handlers = {};
         for (var property in C) {
-            handlers[property] = [];
+            handlers[C[property]] = [];
         };
 
         this.state = {
@@ -24,16 +24,18 @@ export default class DevicesContextProvider extends Component {
     }
 
     addHandler = (methodName, handler) => {
-        const updatedHandlers = [...this.state.handlers];
+        const updatedHandlers = this.state.handlers;
         updatedHandlers[methodName].push(handler);
+        //console.log("Added '" + methodName + "' handler.");
         this.setState({ handlers: updatedHandlers });
     }
 
     removeHandler = (methodName, handler) => {
-        const updatedHandlers = [...this.state.handlers];
+        const updatedHandlers = this.state.handlers;
         var index = updatedHandlers[methodName].findIndex((h => h === handler));
-        if (index > 0) {
-            delete updatedHandlers[index];
+        if (index > -1) {
+            updatedHandlers[methodName].splice(index, 1);
+            //console.log("Removed '" + methodName + "' handler.");
         }
         this.setState({ handlers: updatedHandlers });
     }
@@ -90,7 +92,7 @@ export default class DevicesContextProvider extends Component {
                     service.getdevice(id).then(result => {
                         const updatedDevices = [...this.state.devices];
                         var index = updatedDevices.findIndex((d => d.id == id));
-                        if (index > 0) {
+                        if (index > -1) {
                             updatedDevices[index] = result;
                         }
                         else {
@@ -119,7 +121,8 @@ export default class DevicesContextProvider extends Component {
                     devices: this.state.devices,
                     heatmapPoints: this.state.heatmapPoints,
 
-                    addHandler: this.addHandler
+                    addHandler: this.addHandler,
+                    removeHandler: this.removeHandler,
                 }}
             >
                 {this.props.children}
