Refs #4 : Frontend: Present latest sensor values vertically to fit mo…

…bile screens; read them from apartments API

frontend/src/components/SensorValueCard/index.js

@@ -11,25 +11,18 @@ const SensorValueCard = ({
   refreshing
 }) => (
   <div className="service-card">
-    <div className="service-card__header">
-      <span className="body-text">{title}</span>
-      <img className="service-card__header__icon" src={icon} alt={title} />
-    </div>
-
     {!refreshing ? (
       <div>
-        <span className="large-number">
+        <img className="service-card__header__icon" src={icon} alt={title} />
+        <span className="large-number" style={{ margin: '0 4px 0 8px' }}>
           {value}
           <span className="number">{unit}</span>
         </span>
+        <span className="small-body"> {lastUpdated}</span>
       </div>
     ) : (
       <CircularProgress className="service-card__spinner" />
     )}
-
-    <div className="small-body">
-      {!refreshing ? `Updated ${lastUpdated}` : 'Refreshing'}
-    </div>
   </div>
 );
 

frontend/src/components/SensorValueCard/sensorvaluecard.styles.css

@@ -1,14 +1,11 @@
 .service-card {
-  height: 100px;
-  width: 140px;
   box-shadow: 0 2px 5px 0px var(--lightGrey);
   border-radius: 3px;
-  margin-right: 15px;
-  flex: 0 0 auto;
   background-color: white;
-  padding: 10px;
+  padding: 0 10px;
   border: 1px solid var(--lightGrey);
   text-align: left;
+  margin-bottom: 10px;
 }
 
 .service-card__header {

frontend/src/containers/Home/home.styles.css

@@ -9,20 +9,7 @@
 }
 
 .home-page__cards-container {
-  display: flex;
-  width: 95%;
-  text-align: center;
-  padding: 0 0 15px 20px;
-
-  overflow-x: auto;
-  flex-wrap: nowrap;
-
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  -webkit-overflow-scrolling: touch;
-}
-
-.home-page__cards-container::-webkit-scrollbar {
-  display: none;
+  padding: 0 20px;
 }
 
 @media screen and (min-device-width: 750px) {

frontend/src/containers/Home/index.js

@@ -77,7 +77,7 @@ class HomePage extends Component {
 
   fetchSensorValues = async () => {
     try {
-      const sensorValues = await API.getApartmentSensors();
+      const sensorValues = await API.getSensorValues();
 
       this.setState({ sensorValues });
     } catch (e) {

frontend/src/containers/Sensors/index.js

@@ -14,7 +14,7 @@ class SensorsPage extends Component {
 
   async componentWillMount() {
     try {
-      const sensors = await API.getApartmentSensors();
+      const sensors = await API.getSensorValues();
 
       this.setState({ sensors });
     } catch (e) {

frontend/src/services/Api.js

@@ -5,6 +5,8 @@ import LocalStorageKeys from '../config/LocalStorageKeys';
 const URL = 'http://127.0.0.1:8000/api/';
 
 class Api {
+  cache = {};
+
   constructor(baseUrl) {
     this.api = axios.create({
       baseURL: baseUrl,
@@ -38,7 +40,7 @@ class Api {
 
   async login(username, password) {
     try {
-      const res = await this.api.post('login', {
+      const res = await this.api.post('login/', {
         username,
         password
       });
@@ -54,27 +56,26 @@ class Api {
   }
 
   async getApartment() {
-    const res = await this.api.get('apartments');
-    if (!res.length) throw new Error('No apartment registered to you.');
-    return res[0];
+    if (!this.cache.apartment) {
+      const res = await this.api.get('apartments/');
+      if (!res.length) throw new Error('No apartment registered to you.');
+      this.cache.apartment = res[0]; // eslint-disable-line
+    }
+    return this.cache.apartment;
   }
 
   async getAvailableServices() {
-    return this.api.get('available-services');
+    return this.api.get('available-services/');
   }
 
   async getSubscribedServices() {
-    try {
-      const res = await this.api.get('subscriptions');
-      localStorage.setItem(
-        LocalStorageKeys.SUBSCRIBED_SERVICES,
-        JSON.stringify(res)
-      );
+    const res = await this.api.get('subscriptions/');
+    localStorage.setItem(
+      LocalStorageKeys.SUBSCRIBED_SERVICES,
+      JSON.stringify(res)
+    );
 
-      return res;
-    } catch (e) {
-      throw e;
-    }
+    return res;
   }
 
   addSubscribedService(id) {
@@ -84,51 +85,41 @@ class Api {
   }
 
   deleteSubscribedService(id) {
-    return this.api.delete(`subscriptions/${id}`);
+    return this.api.delete(`subscriptions/${id}/`);
   }
 
-  async getApartmentSensors() {
-    try {
-      const res = await this.api.get('apartmentsensors');
-
-      return _.reduce(
-        res,
-        (sensors, a) => {
-          const s = _.map(
-            a.apartment_sensor_values,
-            ({
-              description,
-              uri,
-              ui_type: uiType,
-              value,
-              updated_at: updatedAt
-            }) => ({
-              id: `${a.id}-${description.substr(0, 5)}`,
-              name: a.sensor.description,
-              identifier: a.identifier,
+  async getSensorValues() {
+    const apartment = await this.getApartment();
+    return _.flatten(
+      apartment.apartment_sensors.map(apsen =>
+        _.filter(apsen.attributes, 'ui_type').map(
+          ({
+            description,
+            uri,
+            ui_type: uiType,
+            value,
+            updated_at: updatedAt
+          }) => ({
+              id: `${apsen.id}-${description.substr(0, 5)}`,
+              name: apsen.sensor.description,
+              identifier: apsen.identifier,
               uri,
               description,
               uiType,
               value,
               updatedAt
             })
-          );
-
-          return _.concat(sensors, s);
-        },
-        []
-      );
-    } catch (e) {
-      throw e;
-    }
+        )
+      )
+    );
   }
 
   revokeApartment() {
     const currentUser = JSON.parse(
       localStorage.getItem(LocalStorageKeys.CURRENT_USER)
     );
     const ID = currentUser && currentUser.id;
-    if (ID) return this.api.delete(`users/${ID}`);
+    if (ID) return this.api.delete(`users/${ID}/`);
 
     throw new Error('User not logged in!');
   }