diff --git a/frontend/dash-home/src/components/basements/Basement.tsx b/frontend/dash-home/src/components/basements/Basement.tsx index f3fa26d..3c461df 100644 --- 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 => { {({ theme }) => ( - {(roomResult) => { + {({roomResult, fetchRoom}) => { return ( <> setShowMenu(true)} /> diff --git a/frontend/dash-home/src/components/basements/RoomProvider.tsx b/frontend/dash-home/src/components/basements/RoomProvider.tsx index 18f9339..6bf933a 100644 --- 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(undefined); +interface Context { + roomResult?: RoomResult, + fetchRoom: any, +} -export const RoomProvider: React.FC = props => { - const [roomResult, setRoom] = useState(undefined); +// export const RoomContext = React.createContext(undefined); +export const RoomContext = React.createContext({ + roomResult: undefined, + fetchRoom: () => {}, +}) - const fetch = React.useCallback(() => { +export const RoomProvider: React.FC = 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(undefined); useEffect(() => { - fetch(); - }, [roomResult, fetch]); + fetchRoom(); + }, []); console.debug(`:: Rendering > RoomProvider...`) return ( - + {props.children} ) diff --git a/frontend/dash-home/src/components/navbar/Navigation.tsx b/frontend/dash-home/src/components/navbar/Navigation.tsx index 86fdeac..7c10d1e 100644 --- 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 => { - const room = React.useContext(RoomContext)?.room; + const roomContext = React.useContext(RoomContext); + const roomResult = roomContext.roomResult; const theme = React.useContext(ThemeContext).theme; return ( @@ -32,7 +34,7 @@ const Navigation: React.FC = props => { <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> @@ -40,11 +42,11 @@ const Navigation: React.FC<Props> = props => { <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>