Added PeripheralsCards on dashboard

api/extensions/users-permissions/controllers/Auth.js

@@ -26,7 +26,7 @@ const formatError = error => [
 module.exports = {
 
   /**
-   * Registers the user in Strapi and the authenticates with the AstroPlant Core API.
+   * Registers the user in Strapi and authenticates with the AstroPlant Core API.
    */
   async register(ctx) {
     const advanced = await strapi

components/cards/DashboardLinkCard.js

@@ -29,6 +29,7 @@ const IconHolder = styled(Icon)`
 
 const Title = styled.h3`
   margin: 0 0 0 1rem;
+  color: ${props => props.theme.primary};
 
   transition: color 0.2s ease-out;
 
@@ -51,7 +52,7 @@ export default function DashboardLinkCard({ href, icon, title, description }) {
     <WrapInLink href={href}>
       <Container animateOnHover>
         <TitleRow>
-          <IconHolder size={48} color={"light"}>
+          <IconHolder size={48} color={"primary"}>
             {icon}
           </IconHolder>
           <Title>{title}</Title>

components/cards/KitCard.js

@@ -1,13 +1,15 @@
 import React from "react";
 import styled from "styled-components";
+import Theme from "../../styles/theme";
+import Button from "../Button";
 import InProgress from "../InProgress";
 import Card from "./Card";
+import PeripheralCard from "./PeripheralCard";
 
 const Container = styled(Card)`
   flex-flow: column;
   align-items: center;
   justify-content: center;
-
   text-align: center;
 `;
 
@@ -20,21 +22,53 @@ const Details = styled.p`
   }
 `;
 
+const TopContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-bottom: 1.5rem;
+`;
+
+const PeripheralCardsContainer = styled.div`
+  align-self: flex-start;
+  display: grid;
+  gap: 1.5rem;
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr) );
+`;
+
 export default function KitCard(props) {
+
+  if (props.kit) {
+    return (
+      <Container {...props}>
+
+        <TopContainer>
+          <h3>{props.kit.name}</h3>
+          <Button color={"secondary"} inverted label="Open dashboard" />
+        </TopContainer>
+
+        <PeripheralCardsContainer>
+          {props.kit.config?.peripherals?.map(peripheral => {
+            peripheral.measures = props.kit.measures?.measures?.filter(measure => measure.peripheralId === peripheral.id);
+            return peripheral.details.expectedQuantityTypes?.map(quantityType => {
+              return <PeripheralCard key={peripheral.id} color={Theme.dark} peripheral={peripheral} expectedQuantityType={quantityType} />
+            })
+          })}
+        </PeripheralCardsContainer>
+
+      </Container>
+    )
+  }
+
   return (
     <Container {...props}>
       <InProgress title="Kit Dashboards" />
       <Details>
-        We're currently working on a new version of Kit Dashboards. For now you
-        can use the{" "}
-        <a
-          href="http://astroplant-alpha.surge.sh/home"
-          target="_blank"
-          rel="noopener"
-        >
-          current tools
-        </a>{" "}
-        to access and edit your kits. To learn more about the new features
+        You don't have a kit yet.{" "}
+        To learn more about the kits
         please{" "}
         <a href="http://astroplant.slack.com/" target="_blank" rel="noopener">
           join our Slack

components/cards/PeripheralCard.js

@@ -0,0 +1,75 @@
+import styled from "styled-components";
+import propTypes from "prop-types";
+import Theme from "../../styles/theme";
+import moment from "moment";
+
+const Container = styled.div`
+    background: ${props => props.theme.dark};
+    padding: 1rem 1.5rem;
+    border-radius: ${props => props.theme.radiusMin};
+    display: flex;
+    flex-direction: column;
+`
+
+const ValueUnitContainer = styled.div`
+    display: flex;
+    align-items: center;
+    align-self: center;
+`
+
+const Value = styled.h1`
+    color: ${props => props.theme.primary};
+    margin-right: 1rem;
+`
+
+const Type = styled.h4`
+    align-self: flex-start;
+    margin-bottom: 1.5rem;
+`
+
+const Unit = styled.h3`
+    font-weight: 400;
+`
+
+const PerifName = styled.p`
+    margin-bottom: 1.5rem;
+`
+
+const TimeSince = styled.p`
+    font-style: italic;
+    align-self: flex-end;
+`
+
+export default function PeripheralCard(props) {
+
+    const { peripheral } = props;
+    const quantityType = peripheral.details.quantityTypes.find(quantityType => quantityType.id === props.expectedQuantityType);
+    const measurement = peripheral.measures.find(measurement => measurement.quantityTypeId === props.expectedQuantityType);
+    if (!measurement) return null;
+
+    return (
+        <Container {...props}>
+            <Type>{quantityType?.physicalQuantity || "-"}</Type>
+
+            <ValueUnitContainer>
+                <Value>{(measurement.values.average.toFixed(2)) || "-"}</Value>
+                <Unit>{quantityType.physicalUnitSymbol}</Unit>
+            </ValueUnitContainer>
+
+            <PerifName>{peripheral.name}</PerifName>
+
+            <TimeSince>{moment(measurement.datetimeEnd).fromNow()}</TimeSince>
+        </Container>
+    )
+}
+
+PeripheralCard.propTypes = {
+    color: propTypes.string,
+    expectedQuantityType: propTypes.number.isRequired,
+    peripheral: propTypes.object.isRequired
+};
+
+PeripheralCard.defaultProps = {
+    color: Theme.greyDark,
+    peripheral: {}
+};

package.json

@@ -15,6 +15,7 @@
     "formik": "^2.1.7",
     "jwt-decode": "^2.2.0",
     "leaflet": "^1.6.0",
+    "moment": "^2.29.1",
     "next": "9.5.4",
     "react": "16.13.1",
     "react-cookie": "^4.0.3",

pages/index.js

@@ -11,6 +11,7 @@ import NewsIcon from "../public/icons/campaign.svg";
 import HelpIcon from "../public/icons/help.svg";
 import LibraryIcon from "../public/icons/library.svg";
 import SlackIcon from "../public/icons/slack.svg";
+import { getFullKit, getKitMeasures, getUserDetails, getUserMemberships } from "../services/data-api";
 import Breaks from "../utils/breakpoints";
 
 const WelcomeMessage = styled.h1`
@@ -73,12 +74,27 @@ function Home({ mainKit }) {
   );
 }
 
-export async function getServerSideProps() {
-  let mainKit = {};
+export async function getServerSideProps(ctx) {
+  let mainKit = null;
+  const user = getLoggedUser(ctx.req.headers.cookie);
+
+  let completeUser = null;
+  let memberships = null;
+
+  if (user) {
+    completeUser = await getUserDetails(user.username);
+    memberships = await getUserMemberships(user.username);
+
+    if (Array.isArray(memberships) && memberships[0]?.kit) {
+      const kit = await getFullKit(memberships[0].kit.serial);
+      kit.measures = await getKitMeasures(memberships[0].kit.serial, {});
+      mainKit = kit;
+    }
+  }
 
   return {
     props: {
-      mainKit: mainKit || null,
+      mainKit: mainKit,
     },
   };
 }

providers/Auth.js

@@ -14,7 +14,7 @@ const AuthContext = React.createContext({
   user: {},
   isLogged: false,
   isLoading: true,
-  setLogged: () => {},
+  setLogged: () => { },
 });
 
 // Provider passing the AuthContext to the app
@@ -115,7 +115,7 @@ export function getLoggedUser(httpCookies) {
 
     if (httpCookies) {
       const stringUser = getCookieFromHttp(httpCookies, "user");
-      user = JSON.parse(stringUser);
+      user = JSON.parse(stringUser || "{}");
     }
 
     return user;