Home assistant connecting state

frontend/src/Components/Cards/Base.tsx

@@ -332,10 +332,12 @@ function Base(props: BaseProps): ReactElement {
  </Grid>
  </Grid>
  {props.card.type === 'entity' &&
- (props.hassAuth && props.hassConfig && props.hassEntities ? (
- <Entity {...props} handleHassToggle={handleHassToggle} />
- ) : (
+ (props.hassConnection === -2 ? (
  <Message type="error" text="Home Assistant not connected" />
+ ) : props.hassConnection === -1 ? (
+ <Message text="Connecting to Home Assistant.." />
+ ) : (
+ <Entity {...props} handleHassToggle={handleHassToggle} />
  ))}
  {props.card.type === 'iframe' && <Frame {...props} />}
  {props.card.type === 'image' && <Image {...props} />}

frontend/src/Components/Drawer/Drawer.tsx

@@ -17,7 +17,7 @@ import Typography from '@material-ui/core/Typography';
 import MenuIcon from '@material-ui/icons/Menu';
 
 import { ConfigurationProps } from '../Configuration/Config';
-import { Editing } from '../Types/Types';
+import { Editing, ProgressState } from '../Types/Types';
 import { MainProps } from '../Main';
 import HomeAssistantLogin from '../HomeAssistant/HomeAssistantLogin';
 import Items, { DrawerItem, MenuItem } from './Items';
@@ -102,7 +102,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 interface ResponsiveDrawerProps extends MainProps {
  config: ConfigurationProps;
  editing: Editing;
- hassConnected: boolean;
+ hassConnection: ProgressState;
  mouseMoved: boolean;
  userInitials: string;
  handleHassLogin: (url: string) => void;
@@ -194,7 +194,7 @@ function ResponsiveDrawer(props: ResponsiveDrawerProps): ReactElement {
  <div className={'fill'} />
  <Divider />
  <List>
- {!props.hassConnected && (
+ {props.hassConnection === -2 && (
  <HomeAssistantLogin
  iconOnly={
  props.config.general.drawer_type === 'persistent_icons_only' ||

frontend/src/Components/HomeAssistant/HomeAssistant.tsx

@@ -16,12 +16,14 @@ import {
  subscribeEntities,
 } from 'home-assistant-js-websocket';
 
+import { ProgressState } from '../Types/Types';
+
 interface HomeAssistantProps {
+ connection: ProgressState;
  url: string;
- login: boolean;
- setConnected: (connected: boolean) => void;
  setAuth: (auth: Auth) => void;
  setConfig: (config: HassConfig) => void;
+ setConnection: (connected: ProgressState) => void;
  setEntities: (entities: HassEntities) => void;
 }
 
@@ -34,6 +36,7 @@ export interface HomeAssistantEntityProps {
 export interface HomeAssistantChangeProps {
  hassAuth?: Auth;
  hassConfig?: HassConfig;
+ hassConnection?: ProgressState;
  hassEntities?: HassEntities;
  handleHassChange?: (
  domain: string,
@@ -187,7 +190,6 @@ function HomeAssistant(props: HomeAssistantProps): null {
  throw err;
  }
  }
- props.setConnected(true);
  connection.removeEventListener('ready', eventHandler);
  connection.addEventListener('ready', eventHandler);
  props.setAuth(auth);
@@ -196,13 +198,15 @@ function HomeAssistant(props: HomeAssistantProps): null {
  getUser(connection).then((user: HassUser) => {
  console.log('Logged into Home Assistant as', user.name);
  });
+ props.setConnection(2);
  })();
  }, [props, updateConfig, updateEntites]);
 
  useEffect(() => {
- if (connection || !props.url || (!props.login && !loadTokens())) return;
+ if (connection || !props.url || props.connection === -2 || !loadTokens())
+ return;
  connectToHASS();
- }, [props.login, props.url, connectToHASS]);
+ }, [props.connection, props.url, connectToHASS]);
 
  return null;
 }

frontend/src/Components/Main.tsx

@@ -10,7 +10,7 @@ import Slide from '@material-ui/core/Slide';
 import { CommandType } from './Utils/Command';
 import { ConfigurationProps, ThemeProps } from './Configuration/Config';
 import { parseTokens } from './HomeAssistant/Utils/Auth';
-import { Page, Editing } from './Types/Types';
+import { Page, Editing, ProgressState } from './Types/Types';
 import clone from '../utils/clone';
 import Configuration from './Configuration/Configuration';
 import Drawer from './Drawer/Drawer';
@@ -67,9 +67,8 @@ export interface MainProps {
 function Main(props: MainProps): ReactElement {
  const [hassAuth, setHassAuth] = useState<Auth>();
  const [hassConfig, setHassConfig] = useState<HassConfig>();
- const [hassConnected, setHassConnected] = useState<boolean>(false);
+ const [hassConnection, setHassConnection] = useState<ProgressState>(-2);
  const [hassEntities, setHassEntities] = useState<HassEntities>();
- const [hassLogin, setHassLogin] = useState<boolean>(false);
  const [hassUrl, setHassUrl] = useState<string>();
  const [spaceTaken, setSpaceTaken] = useState<number>(0);
  const [editing, setEditing] = useState<Editing>(0);
@@ -79,13 +78,14 @@ function Main(props: MainProps): ReactElement {
  }, []);
 
  useEffect(() => {
- if (!hassConnected) {
+ if (hassConnection === -2) {
  const haUrl = localStorage.getItem('hass_url');
  if (haUrl) {
  setHassUrl(haUrl);
+ setHassConnection(-1);
  }
  }
- }, [hassConnected]);
+ }, [hassConnection]);
 
  function handleUpdateConfig(path: (string | number)[], data?: unknown): void {
  if (process.env.NODE_ENV === 'development')
@@ -126,9 +126,8 @@ function Main(props: MainProps): ReactElement {
  }
 
  async function handleHassLogin(url: string): Promise<void> {
- console.log('handleHassLogin:', url);
  setHassUrl(url);
- setHassLogin(true);
+ setHassConnection(-1);
  }
 
  function handleBackupConfig(): void {
@@ -206,7 +205,7 @@ function Main(props: MainProps): ReactElement {
  <Drawer
  {...props}
  editing={editing}
- hassConnected={hassConnected}
+ hassConnection={hassConnection}
  mouseMoved={props.mouseMoved}
  userInitials={userInitials}
  handleHassLogin={handleHassLogin}
@@ -236,11 +235,11 @@ function Main(props: MainProps): ReactElement {
  style={{ marginLeft: spaceTaken }}>
  {hassUrl && (
  <HomeAssistant
+ connection={hassConnection}
  url={hassUrl}
- login={hassLogin}
  setAuth={setHassAuth}
  setConfig={setHassConfig}
- setConnected={setHassConnected}
+ setConnection={setHassConnection}
  setEntities={setHassEntities}
  />
  )}
@@ -264,6 +263,7 @@ function Main(props: MainProps): ReactElement {
  editing={editing}
  hassAuth={hassAuth}
  hassConfig={hassConfig}
+ hassConnection={hassConnection}
  hassEntities={hassEntities}
  mouseMoved={props.mouseMoved}
  handleHassChange={handleHassChange}

frontend/src/Components/Types/Types.tsx

@@ -1,6 +1,12 @@
 export type Page = 'Overview' | 'Configuration';
 export type Editing = 0 | 1 | 2;
 
+// -2 - Unloaded
+// -1 - Loading
+// 1 - Loaded
+// 2 - Error
+export type ProgressState = -2 | -1 | 1 | 2;
+
 export interface Option {
  label: string;
  value: string;

frontend/src/Components/Utils/Message.tsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles(() => ({
 }));
 
 interface MessageProps {
- type: '' | 'info' | 'warning' | 'error';
+ type?: 'info' | 'warning' | 'error';
  text: string;
  padding?: string | number;
 }
@@ -41,7 +41,7 @@ function Message(props: MessageProps): ReactElement {
  return (
  <Paper
  className={classes.root}
- variant="outlined"
+ elevation={0}
  style={{
  backgroundColor: color,
  padding: props.padding ? props.padding : theme.spacing(1),