useDevice hook

[gmartenscb]

I would like to request a useDevice hook.
Currently there is already a useLowDevices hook but that serves a completely different purpose.

The reason I am requesting this, is because I've built my own custom "update card"; whether an update is available or not.
From that card, I open a modal where I display detailed information, such as current and latest versions.
For the header actions, I would like to have the "view device" action in there, similar to what you have in the ModalByDomain.
However, I have to recreate the hook that you create in there, in order to use it.

So while typing, I think the request should be two fold, and perhaps this issue should be split up;

1. Create a useDevice hook.
2. Allow using "default" header actions in the base modal.

---

Something along the lines of this, but then it would also need some Props that can be passed along to the message.
And the correlating story for Storybook etc..

import type { EntityRegistryEntry } from '@hakit/core';
import { useHass } from '@hakit/core';
import { useEffect, useState } from 'react';

const useDevice = (entityId: string) => {
  const [device, setDevice] = useState<EntityRegistryEntry | null>(null);

  const { useStore } = useHass();
  const connection = useStore((state) => state.connection);

  useEffect(() => {
    const getDevice = async () => {
      if (!connection) {
        return;
      }

      const response = await connection.sendMessagePromise<EntityRegistryEntry>({
        type: 'config/entity_registry/get',
        entity_id: entityId,
      });

      setDevice(response);
    };

    void getDevice();
  }, [connection, entityId]);

  return device;
};

export default useDevice;

[shannonhochkins]

Good shout, will be in the next release!

[shannonhochkins]

I'm not sure what you're referring to by the header actions though - however I've refactored the Modal to use the useDevice hook internally now and have exposed it in the package for the next release

[gmartenscb]

I'm not sure what you're referring to by the header actions though - ...

Given the following code:

const Separator = styled.div`
  height: 30px;
  width: 1px;
  background-color: var(--ha-S400);
`;

return (
    <ErrorBoundary {...fallback({ prefix: 'UpdateCard' })}>
      <Modal
        id={useId()}
        open={open}
        onClose={() => setOpen(false)}
        title={
          entity.attributes.title || entity.attributes.friendly_name || `Update for ${entityId}`
        }
        headerActions={() => (
          <>
            {device && device.device_id && (
              <FabCard
                title="Open Device"
                tooltipPlacement="left"
                icon="mdi:cog"
                size={30}
                onClick={openDevice}
              />
            )}
            {device && device.device_id && <Separator />}
          </>
        )}
      >
        <Column fullWidth fullHeight gap="1rem">
          <Row fullWidth>
		  // ...

I want to include my own modal, with my own content.
However, I do want to show the "Go to device" header action.
In order to achieve this at the moment, I currently still have to re-create my own useDevice hook.
Then I have to copy paste over the FabCard that you already defined within the ModalForEntityDomain.
And I have to re-create the Separator to achieve consistency in styling.

Basically, what I am saying is: I want the header (actions) of ModalForEntityDomain but want to supply my own content.
So perhaps it might be possible to make the header actions more easily accessible and re-usable.
Or, perhaps, we can open up the ModalForEntityDomain to receive children.

[gmartenscb]

however I've refactored the Modal to use the useDevice hook internally now and have exposed it in the package for the next release

This is locally I assume? Or am I missing a branch / PR somewhere?
Otherwise I can also open up a PR and throw something together.
Even though my story writing (Storybook) isn't the quickest yet.. 😅

[shannonhochkins]

Yes sorry, it's not deployed yet!

Gotcha, I'll have a think about the Modal changes you're after and see how we can achieve something more dynamic!

I am off for the day now but will most likely release this early tomorrow!

[shannonhochkins]

FYI - I've changed the ModalByEntityDomain to accept the headerActions, as well as a placement option to decide where they should be rendered, I also included a prop to hide the default components that are rendered so you can provide an entity as a prop, and still have the default header bar actions render, and also include your own, so instead of Modal, use ModalByEntityDomain and provide the entity you want to render the default actions.