pending changes indication for device and component changes

src/component/ComponentCard.tsx

@@ -13,11 +13,13 @@ import {
 } from "@mui/material";
 import Grid from '@mui/material/Grid2';
 import EventBlocker from "common/EventBlocker";
+import PendingChangesIndicator from "common/PendingChangesIndicator";
 import MeasurementSummary from "component/MeasurementSummary";
-import { useComponentAPI, useSnackbar, useThemeType } from "hooks";
+import { useComponentAPI, usePendingChanges, useSnackbar, useThemeType } from "hooks";
 import InteractionsOverview from "interactions/InteractionsOverview";
 import { cloneDeep } from "lodash";
 import { Component, Device, Interaction } from "models";
+import moment from "moment";
 import { getFriendlyAddressTypeName, getHumanReadableAddress } from "pbHelpers/AddressType";
 import { controllerModeLabel } from "pbHelpers/Component";
 import {
@@ -121,6 +123,9 @@ export default function ComponentCard(props: Props) {
   const location = useLocation()
   const [sensors, setSensors] = useState<Sensor[]>([]);
   const [{ user, showErrors, as }] = useGlobalState();
+  const { pending: pendingChanges, accepted: changesAccepted } = usePendingChanges(
+    component.status.synced
+  );
 
   const updateControllerState = (checked: boolean) => {
     let updatedComponent = cloneDeep(component);
@@ -133,6 +138,8 @@ export default function ComponentCard(props: Props) {
       .update(device.id(), updatedComponent.settings, undefined, undefined, as)
       .then(() => {
         success(component.name() + "'s mode was set to " + describe);
+        updatedComponent.status.synced = false;
+        updatedComponent.status.lastUpdate = moment().toISOString();
         refreshCallback(updatedComponent);
       })
       .catch(() => {
@@ -287,19 +294,34 @@ export default function ComponentCard(props: Props) {
         className={classes.cardHeader}
         titleTypographyProps={{ variant: "subtitle1" }}
         subheader={
-          // !newStructure ? (
-          //   <MeasurementSummary
-          //     component={component}
-          //     reading={component.status.lastMeasurement}
-          //     dense
-          //   />
-          // ) : (
+          <React.Fragment>
+            {(pendingChanges || changesAccepted) && (
+              <Typography variant="caption" color="textSecondary" component="div">
+                <PendingChangesIndicator
+                  pending={pendingChanges}
+                  accepted={changesAccepted}
+                  text={
+                    changesAccepted
+                      ? "Pending change accepted"
+                      : "Pending " + moment(component.status.lastUpdate).fromNow()
+                  }
+                />
+              </Typography>
+            )}
+            {/* !newStructure ? (
+              <MeasurementSummary
+                component={component}
+                reading={component.status.lastMeasurement}
+                dense
+              />
+            ) : ( */}
             <UnitMeasurementSummary
               component={component}
               reading={UnitMeasurement.convertLastMeasurement(measurements)}
               //dense
             />
-          // )
+            {/* ) */}
+          </React.Fragment>
         }
         action={
           <EventBlocker>