Add room sync button

dash-app · May 15, 2021 · 79eb29b · 79eb29b
1 parent 02431c9
commit 79eb29b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git a/frontend/dash-home/src/components/basements/Basement.tsx b/frontend/dash-home/src/components/basements/Basement.tsx
@@ -34,7 +34,7 @@ const Basement: React.FC<Props> = props => {
     <ThemeContext.Consumer>
       {({ theme }) => (
         <RoomContext.Consumer>
-          {(roomResult) => {
+          {({roomResult, fetchRoom}) => {
             return (
               <>
                 <Navigation menuHandler={() => setShowMenu(true)} />

diff --git a/frontend/dash-home/src/components/basements/RoomProvider.tsx b/frontend/dash-home/src/components/basements/RoomProvider.tsx
@@ -1,34 +1,37 @@
-import * as React from 'react';
+import React from 'react';
 import { useEffect, useState } from 'react';
-import { fetchRoom, RoomResult } from '../../remote-go/Room';
+import { fetchRoom as fetch, RoomResult } from '../../remote-go/Room';
 
 interface Props {
   children: React.ReactNode,
 }
 
-export const RoomContext = React.createContext<RoomResult | undefined>(undefined);
+interface Context {
+  roomResult?: RoomResult,
+  fetchRoom: any,
+}
 
-export const RoomProvider: React.FC<Props> = props => {
-  const [roomResult, setRoom] = useState<RoomResult | undefined>(undefined);
+// export const RoomContext = React.createContext<RoomResult | undefined>(undefined);
+export const RoomContext = React.createContext<Context>({
+  roomResult: undefined,
+  fetchRoom: () => {},
+})
 
-  const fetch = React.useCallback(() => {
+export const RoomProvider: React.FC<Props> = props => {
+  const fetchRoom = () => {
     console.debug(`:: Update room...`);
-    if (!roomResult) {
-      fetchRoom(setRoom);
-    }
-    if (roomResult?.error) {
-      console.error(roomResult.error);
-    }
-  }, [roomResult]);
+    fetch(setRoom);
+  }
 
+  const [roomResult, setRoom] = useState<RoomResult | undefined>(undefined);
   useEffect(() => {
-    fetch();
-  }, [roomResult, fetch]);
+    fetchRoom();
+  }, []);
 
   console.debug(`:: Rendering > RoomProvider...`)
 
   return (
-    <RoomContext.Provider value={roomResult}>
+    <RoomContext.Provider value={{ roomResult, fetchRoom }}>
       {props.children}
     </RoomContext.Provider>
   )

diff --git a/frontend/dash-home/src/components/navbar/Navigation.tsx b/frontend/dash-home/src/components/navbar/Navigation.tsx
@@ -8,6 +8,7 @@ import styled from 'styled-components';
 import { ThemeContext } from '../themes/ThemeProvider';
 import { Span } from '../atoms/Core';
 import { RoomContext } from '../basements/RoomProvider';
+import { SUCCESS } from '../../remote-go/Status';
 
 interface Props {
   menuHandler: any,
@@ -18,7 +19,8 @@ interface ThemeProps {
 }
 
 const Navigation: React.FC<Props> = props => {
-  const room = React.useContext(RoomContext)?.room;
+  const roomContext = React.useContext(RoomContext);
+  const roomResult = roomContext.roomResult;
   const theme = React.useContext(ThemeContext).theme;
 
   return (
@@ -32,19 +34,19 @@ const Navigation: React.FC<Props> = props => {
         <Title>
           <FontAwesomeIcon icon={["fas", "home"]} />
           <span style={{ margin: "0.5em" }}>
-            <span>{room && room.name}</span>
+            <span>{roomResult?.room && roomResult.room.name}</span>
             {/* TODO: Add house name */}
             {/* <span style={{ fontSize: "0.5em" }}> // Bedroom</span> */}
           </span>
         </Title>
         <RoomStatus theme={theme}>
           <StatusBox>
             <FontAwesomeIcon icon={["fas", "thermometer-three-quarters"]} />
-            <StatusText>{room ? room.ambient.temp.toFixed(1) : "--"}<span style={{ marginLeft: "0.2rem", fontSize: "1rem" }}>℃</span></StatusText>
+            <StatusText>{roomResult?.room ? roomResult?.room.ambient.temp.toFixed(1) : "--.-"}<span style={{ marginLeft: "0.2rem", fontSize: "1rem" }}>℃</span></StatusText>
           </StatusBox>
           <StatusBox>
             <FontAwesomeIcon icon={["fas", "tint"]} />
-            <StatusText>{room ? room.ambient.humid.toFixed(0) : "--"}<span style={{ marginLeft: "0.2rem", fontSize: "1rem" }}>%</span></StatusText>
+            <StatusText>{roomResult?.room ? roomResult?.room.ambient.humid.toFixed(0) : "--"}<span style={{ marginLeft: "0.2rem", fontSize: "1rem" }}>%</span></StatusText>
           </StatusBox>
         </RoomStatus>
       </div>
@@ -63,6 +65,9 @@ const Navigation: React.FC<Props> = props => {
             <FontAwesomeIcon icon={["fas", "ellipsis-v"]} style={{ marginRight: "1rem" }} />
             <span>MENU</span>
           </Button>
+          <Button onClick={() => { roomContext.fetchRoom() }} disabled={roomContext.roomResult?.status !== SUCCESS}>
+            <FontAwesomeIcon icon={["fas", "sync"]} />
+          </Button>
         </Nav>
       </Navbar.Collapse>
     </CustomNavbar>