refactor: ♻️ refactor isHosted && type clean up (#3290)

* refactor: ♻️ refactor isHosted && type clean up

Change-Id: I4dfbad8a07607432801de78920ce42bf81e46498

* refactor: ♻️ code clean up

Change-Id: I8f487a33d332a2acaff84397a97371b56ace28a1

* feat: 💄 lint

Change-Id: I776b1a5e249bdb542f8e6da7cb2277821cf91094

* feat: ✨ ci type

Change-Id: I486dde7bf60321238e9a394c40ad8cdb8bfc54c8

* feat: some code sugession

Change-Id: I4761d057344b95a98e99068d312a42292977875b

app/components/ContextMenu/MenuItem.tsx

@@ -8,7 +8,6 @@ import MenuIconWrapper from "../MenuIconWrapper";
 
 type Props = {
   onClick?: (arg0: React.SyntheticEvent) => void | Promise<void>;
-  children?: React.ReactNode;
   selected?: boolean;
   disabled?: boolean;
   dangerous?: boolean;
@@ -21,7 +20,7 @@ type Props = {
   icon?: React.ReactElement;
 };
 
-const MenuItem = ({
+const MenuItem: React.FC<Props> = ({
   onClick,
   children,
   selected,
@@ -30,7 +29,7 @@ const MenuItem = ({
   hide,
   icon,
   ...rest
-}: Props) => {
+}) => {
   const handleClick = React.useCallback(
     (ev) => {
       if (onClick) {

app/components/ContextMenu/index.tsx

@@ -38,19 +38,18 @@ type Props = {
   visible?: boolean;
   placement?: Placement;
   animating?: boolean;
-  children: React.ReactNode;
   unstable_disclosureRef?: React.RefObject<HTMLElement | null>;
   onOpen?: () => void;
   onClose?: () => void;
   hide?: () => void;
 };
 
-export default function ContextMenu({
+const ContextMenu: React.FC<Props> = ({
   children,
   onOpen,
   onClose,
   ...rest
-}: Props) {
+}) => {
   const previousVisible = usePrevious(rest.visible);
   const maxHeight = useMenuHeight(rest.visible, rest.unstable_disclosureRef);
   const backgroundRef = React.useRef<HTMLDivElement>(null);
@@ -137,7 +136,9 @@ export default function ContextMenu({
       )}
     </>
   );
-}
+};
+
+export default ContextMenu;
 
 export const Backdrop = styled.div`
   animation: ${fadeIn} 200ms ease-in-out;