WIP: Feature/dashboard updates

src/actions/dashboard.js

@@ -0,0 +1,147 @@
+import {getAllUsers, retrieveAllAvailableFirmware, retrieveAllBounties} from "../blockchain/contracts";
+import {containsIgnoreCase} from "./search";
+import {getUserDevices} from "./profile";
+export const DASHBOARD_DATA = 'DASHBOARD_DATA';
+
+
+function updateDashboardData(payload) {
+	return {
+		type: DASHBOARD_DATA,
+		payload
+	};
+}
+
+// TODO must consider where to store, and how to calculate, last months values as compared to this ones for various fields
+
+/**
+ * High-level function for triggering the Dashboard data retrival.
+ * @param currentUserAddress
+ * @returns {function(*): Promise<void>}
+ */
+export function retrieveDashboardData(currentUserAddress) {
+	return async (dispatch) => {
+
+		let firmwareResults = await retrieveAllAvailableFirmware();
+		let userFirmware = (firmwareResults).filter(fw => isUserFirmware(currentUserAddress, fw));
+		// search users on user reputation blockchain for user inclusion
+		let userAddresses = await getAllUsers();
+		// search bounties on the bounty blockchain for bounty inclusion
+		let bountyResults = await  retrieveAllBounties();
+		let userBounties = (bountyResults).filter(b => isUserBounty(currentUserAddress, b));
+
+		// getting user devices from local storage
+		let userDevices = await getUserDevices();
+
+
+		// retrieve data values
+		let communityData = communityContributions(firmwareResults, userAddresses, bountyResults);
+		let bountiesData  = bountiesClaimed       (userBounties);
+		let firmwareData  = firmwareStats         (userFirmware)
+		let deviceData    = deviceStats           (userDevices)
+
+		// trigger the reducer data update
+		dispatch(updateDashboardData({community: communityData,
+																	bounties: bountiesData,
+										              firmware: firmwareData,
+																	devices: deviceData
+																 }))
+
+	}
+}
+/**
+ *
+ * @returns {function(*): Promise<{totalFirmware: number, totalBounties: number, userAmount: number}>}
+ */
+function communityContributions(firmwares, users, bounties) {
+
+	// amount of users; total bounties; total firmware
+	return {
+		userAmount           : users.length,
+		totalBounties        : bounties.length,
+		totalFirmware        : firmwares.length,
+		monthlyContributions : 0
+	}
+}
+
+/**
+ *
+ * @param userBounties
+ * @returns {{overallClaimed: number, amountSubmitted: number, monthlyClaims: number}}
+ */
+function bountiesClaimed(userBounties) {
+
+	let claimedBounties = userBounties.filter(b => isBountyClaimed(true, b));
+	let claimedPercent = 100 * (claimedBounties.length / userBounties.length);
+	// TODO check above works with rounding as a percentage
+
+	// Amount Submitted; Overall Claimed; Monthly Claims
+	return {
+		amountSubmitted : userBounties.length,
+		overallClaimed  : claimedPercent,
+		monthlyClaims   : 0
+	}
+}
+
+/**
+ *
+ * @param userFirmwares
+ * @returns {{firmwareAmount: number, overallDownloads: number, monthlyDownloads: number}}
+ */
+function firmwareStats(userFirmwares) {
+
+	// TODO replace this firmware downloads value (consider using FirmwareWithThumbs) -- look for Michael
+	let firmwareDownloads = 0;
+
+	// Amount Submitted; Overall Claimed; Monthly Claims
+	return {
+		firmwareAmount   : userFirmwares.length,
+		overallDownloads : firmwareDownloads,
+		monthlyDownloads : 0
+	}
+}
+
+/**
+ * Retrieves the device statistics for display in the dashboard.
+ * @param devices - list of {Device} objects
+ * @returns {{deviceDetails: {onMap: number, totalDevices: number}, inactive: {number: number, percent: number}, active: {number: number, percent: number}, unknown: {number: number, percent: number}}}
+ */
+function deviceStats(devices) {
+	// TODO retrieve the values around the device status for each
+	// (likely have to get Michael to provide class (and method to produce) to wrap the device in status + location
+	let numberOfDevices = devices.length;
+
+	let activeDevices       = 12;  //: TODO Michael
+	let inactiveDevices     = 14;  //: TODO Michael
+	let numberOfDeviceOnMap = 15;  //: TODO Michael
+	let unknownDevices      = (numberOfDevices-activeDevices-inactiveDevices);
+
+	let activeDevicesPercentage   = 100 * (activeDevices   / numberOfDevices)
+	let inactiveDevicesPercentage = 100 * (inactiveDevices / numberOfDevices)
+	let unknownDevicesPercentage  = 100 * (unknownDevices  / numberOfDevices)
+
+	return {
+		active:        {number: activeDevices       , percent     : activeDevicesPercentage},
+		unknown:       {number: unknownDevices      , percent     : unknownDevicesPercentage},
+		inactive:      {number: inactiveDevices     , percent     : inactiveDevicesPercentage},
+		deviceDetails: {onMap : numberOfDeviceOnMap , totalDevices: numberOfDevices}
+	}
+}
+
+function isUserBounty(term, bounty) {
+	return containsIgnoreCase(bounty.bountySetter, term);
+}
+
+function isBountyClaimed(term, bounty) {
+	// TODO replace with some kind of claimed flag (see Michael for getting this setup) -- Michael!!!! :L
+	return containsIgnoreCase(bounty.block_num, term);
+}
+
+/**
+ * Return true if the users firmware contains the developers name
+ * @param term
+ * @param firmware
+ * @returns {boolean}
+ */
+function isUserFirmware(term, firmware) {
+	return containsIgnoreCase(firmware.developer, term);
+}

src/actions/profile.js

@@ -61,6 +61,23 @@ export function initUserDevices() {
 
 }
 
+/**
+ * Reads available user devices from the browser cache
+ */
+export function getUserDevices() {
+  return async (dispatch) => {
+    let devices = [];
+    if (localStorage[deviceLocalStorageKey]) {
+      try{
+        devices = JSON.parse(localStorage['devices']);
+      } catch (e) {
+        devices = [];
+      }
+    }
+    return devices;
+  }
+}
+
 /**
  * Add to the device list.
  * TODO implement UI binding and functionality

src/actions/search.js

@@ -31,7 +31,7 @@ function searchFailure(payload) {
   };
 }
 
-function containsIgnoreCase(string, term) {
+export function containsIgnoreCase(string, term) {
   if (string == null || term == null) {
     return false;
   }

src/actions/user.js

@@ -4,6 +4,7 @@ import Box from "3box";
 import {setProfilePassword, setUserProfile} from "./profile";
 import { setBounties, setFirmware } from './model';
 import { getPG } from '../filecoin/client';
+import {retrieveDashboardData} from "./dashboard";
 
 export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
 export const LOGIN_FAILURE = 'LOGIN_FAILURE';
@@ -120,6 +121,7 @@ export function enableUserEthereum() {
             let userPassword = await space.private.get('password');
             dispatch(setProfilePassword({userPassword: userPassword}));
             dispatch(setUserProfile({userAddress: ethereumAddress}));
+            dispatch(retrieveDashboardData(ethereumAddress))
 
             // Accounts now exposed
             dispatch(ethereumAuthSuccess({

src/pages/dashboard/Dashboard.js

@@ -3,6 +3,7 @@ import React from 'react';
 import s from './Dashboard.module.scss';
 import DeviceRow from "./components/DeviceRow";
 import TableRow from "./components/TableRow";
+import {connect} from "react-redux";
 
 
 class Dashboard extends React.Component {
@@ -12,18 +13,33 @@ class Dashboard extends React.Component {
   }
 
   render() {
+    const {
+      devicesStats,
+      communityStats,
+      firmwareStats,
+      bountiesStats,
+    } = this.props;
+
+    console.log('Dashboard', this.props)
     return (
       <div className={s.root}>
         <h1 className="page-title">Dashboard &nbsp;
           <small>
             <small>Hub Overview</small>
           </small>
         </h1>
-        <DeviceRow/>
-        <TableRow/>
+        <DeviceRow devicesStats={devicesStats}/>
+        <TableRow communityStats={communityStats} firmwareStats={firmwareStats} bountiesStats={bountiesStats}/>
       </div>
     );
   }
 }
 
-export default Dashboard;
+const mapStateToProps = state => ({
+  communityStats: state.dashboard.community,
+  bountiesStats: state.dashboard.bounties,
+  firmwareStats: state.dashboard.firmware,
+  devicesStats: state.dashboard.devices
+});
+
+export default connect(mapStateToProps)(Dashboard);

src/pages/dashboard/components/DeviceComponents/StatusLines/StatusLines.js

@@ -16,38 +16,40 @@ class StatusLines extends React.Component {
 
 
   render() {
+    const deviceStats = this.props.devicesStats;
+
     return (
       <div>
         <div className="row progress-stats">
           <div className="col-md-9 col-12">
             <p className="description deemphasize mb-xs text-white">Active</p>
-            <Progress color="success" value="0" className="bg-custom-dark progress-xs"/>
+            <Progress color="success" value={deviceStats.active.activeDevices} className="bg-custom-dark progress-xs"/>
           </div>
           <div className="col-md-3 col-12 text-center">
                           <span className="status rounded rounded-lg bg-default text-light">
-                            <small><AnimateNumber value={0}/>%</small>
+                            <small><AnimateNumber value={deviceStats.active.percentage}/>%</small>
                           </span>
           </div>
         </div>
         <div className="row progress-stats">
           <div className="col-md-9 col-12">
             <p className="description deemphasize mb-xs text-white">Unknown</p>
-            <Progress color="warning" value="0" className="bg-custom-dark progress-xs"/>
+            <Progress color="warning" value={deviceStats.unknown.unknownDevices} className="bg-custom-dark progress-xs"/>
           </div>
           <div className="col-md-3 col-12 text-center">
                           <span className="status rounded rounded-lg bg-default text-light">
-                            <small><AnimateNumber value={0}/>%</small>
+                            <small><AnimateNumber value={deviceStats.unknown.percentage}/>%</small>
                           </span>
           </div>
         </div>
         <div className="row progress-stats">
           <div className="col-md-9 col-12">
             <p className="description deemphasize mb-xs text-white">Inactive</p>
-            <Progress color="danger" value="0" className="bg-custom-dark progress-xs"/>
+            <Progress color="danger" value={deviceStats.unknown.unknownDevices} className="bg-custom-dark progress-xs"/>
           </div>
           <div className="col-md-3 col-12 text-center">
                           <span className="status rounded rounded-lg bg-default text-light">
-                            <small><AnimateNumber value={0}/>%</small>
+                            <small><AnimateNumber value={deviceStats.unknown.percent}/>%</small>
                           </span>
           </div>
         </div>

src/pages/dashboard/components/DeviceRow.js

@@ -13,7 +13,14 @@ import StatusLines from "./DeviceComponents/StatusLines/StatusLines";
 
 class DeviceRow extends React.Component {
 
+  constructor(props) {
+    super(props);
+  }
+
   render() {
+    // TODO this object can then be used to replace the 0 values where appropriate
+    //  - should have the same fields as the return value from the function deviceStats in src/actions/dashboard.js
+    const deviceStats = this.props.devicesStats;
     return (
         <Row>
           <Col lg={7}>
@@ -38,12 +45,12 @@ class DeviceRow extends React.Component {
               <div style={{paddingBottom: '13px', marginTop: '-4px' }}>
                 <small style={{color: '#797A8A', fontSize: '9pt'}}>Amount of devices which are active, unknown or inactive on the map.</small>
               </div>
-              <StatusLines/>
+              <StatusLines devicesStats={deviceStats}/>
               <h6 className="fw-semi-bold mt">Map Distribution</h6>
               <p>Tracking: <strong>Active</strong></p>
               <p>
                 <span className="circle bg-default text-white"><i className="glyphicon glyphicon-cog" style={{marginBottom:"0px"}}/></span>
-                &nbsp; 0 device added, 0 devices total
+                &nbsp; {deviceStats.deviceDetails.onMap} device added, {deviceStats.deviceDetails.totalDevices} devices total
               </p>
               <div className="input-group mt">
                 <input type="text" className="form-control bg-custom-dark border-0" placeholder="Search Map" />
@@ -53,7 +60,6 @@ class DeviceRow extends React.Component {
                   </button>
                 </span>
               </div>
-
             </Widget>
           </Col>
         </Row>

src/pages/dashboard/components/TableRow.js

@@ -12,6 +12,13 @@ class TableRow extends React.Component {
   }
 
   render() {
+
+    const {
+      communityStats,
+      firmwareStats,
+      bountiesStats,
+    } = this.props;
+
     return (
       <Row>
         <Col lg={4} xs={12}>
@@ -26,15 +33,15 @@ class TableRow extends React.Component {
             <div className="stats-row">
               <div className="stat-item">
                 <h6 className="name">Amount of Users</h6>
-                <p className="value">0</p>
+                <p className="value">{communityStats.userAmount}</p>
               </div>
               <div className="stat-item">
                 <h6 className="name">Total Bounties</h6>
-                <p className="value">0</p>
+                <p className="value">{communityStats.totalBounties}</p>
               </div>
               <div className="stat-item">
                 <h6 className="name">Total Firmware</h6>
-                <p className="value">0</p>
+                <p className="value">{communityStats.totalFirmware}</p>
               </div>
             </div>
             <Progress color="bg-primary" value="0" className="bg-custom-dark progress-xs" />
@@ -58,15 +65,15 @@ class TableRow extends React.Component {
             <div className="stats-row">
               <div className="stat-item">
                 <h6 className="name">Amount Submitted</h6>
-                <p className="value">0</p>
+                <p className="value">{bountiesStats.amountSubmitted}</p>
               </div>
               <div className="stat-item">
                 <h6 className="name">Overall Claimed</h6>
-                <p className="value">0%</p>
+                <p className="value">{bountiesStats.overallClaimed}%</p>
               </div>
               <div className="stat-item">
                 <h6 className="name">Monthly Claims</h6>
-                <p className="value">0</p>
+                <p className="value">{bountiesStats.monthlyClaims}</p>
               </div>
             </div>
             <Progress color="success" value="0" className="bg-custom-dark progress-xs" />
@@ -93,15 +100,15 @@ class TableRow extends React.Component {
             <div className="stats-row">
               <div className="stat-item">
                 <h6 className="name">My Firmware</h6>
-                <p className="value">0</p>
+                <p className="value">{firmwareStats.firmwareAmount}</p>
               </div>
               <div className="stat-item">
                 <h6 className="name">Overall Downloads</h6>
-                <p className="value">0</p>
+                <p className="value">{firmwareStats.overallDownloads}</p>
               </div>
               <div className="stat-item">
                 <h6 className="name">Monthly Downloads</h6>
-                <p className="value">0</p>
+                <p className="value">{firmwareStats.monthlyDownloads}</p>
               </div>
             </div>
             <Progress color="danger" value="0" className="bg-custom-dark progress-xs" />