From 9f400af73b3ebb60f4e5180ad6a9a3d6828c9deb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BF=BD=E5=A6=82=E5=AF=84?= Date: Mon, 28 Mar 2022 06:18:37 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20refactor=20isH?= =?UTF-8?q?osted=20&&=20type=20clean=20up=20(#3290)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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/actions/index.ts | 4 +-- app/components/Authenticated.tsx | 2 +- app/components/CommandBar.tsx | 4 +-- app/components/ContextMenu/MenuItem.tsx | 5 ++-- app/components/ContextMenu/index.tsx | 9 ++++--- app/components/DocumentMeta.tsx | 7 +++-- app/components/ErrorBoundary.tsx | 3 ++- app/components/LocaleTime.tsx | 7 +++-- app/components/Notice.tsx | 3 +-- app/components/NoticeAlert.tsx | 10 +++---- app/components/PageTitle.tsx | 2 +- app/components/Popover.tsx | 5 ++-- app/components/Scene.tsx | 7 +++-- app/components/Sidebar/App.tsx | 4 +-- app/components/Sidebar/Settings.tsx | 4 +-- app/components/Sidebar/Sidebar.tsx | 4 +-- .../Sidebar/components/DocumentLink.tsx | 3 +-- app/components/Sidebar/components/Header.tsx | 5 ++-- app/components/Sidebar/components/NavLink.tsx | 2 +- .../Sidebar/components/SidebarButton.tsx | 6 ++--- app/components/SocketProvider.tsx | 18 +++++-------- app/components/Subheading.tsx | 3 +-- app/components/Tab.tsx | 7 ++--- app/components/Tabs.tsx | 2 +- app/components/Theme.tsx | 8 ++---- app/editor/components/CommandMenu.tsx | 4 +-- app/editor/components/SelectionToolbar.tsx | 3 +-- app/editor/components/Tooltip.tsx | 3 +-- app/hooks/useAuthorizedSettingsConfig.ts | 3 +-- app/index.tsx | 2 +- app/menus/AccountMenu.tsx | 10 +++---- app/menus/OrganizationMenu.tsx | 10 +++---- app/scenes/Collection/DropToImport.tsx | 10 ++++--- app/scenes/Document/components/HideSidebar.ts | 1 - .../Document/components/MarkAsViewed.ts | 1 - .../Document/components/PublicBreadcrumb.tsx | 5 ++-- .../Document/components/ShareButton.tsx | 3 +-- .../Document/components/SocketPresence.ts | 1 - app/scenes/Login/index.tsx | 5 ++-- app/scenes/Settings/Details.tsx | 3 ++- app/scenes/Settings/Notifications.tsx | 5 ++-- .../Settings/components/ImageUpload.tsx | 1 - app/stores/AuthStore.ts | 8 +++--- app/stores/BaseStore.ts | 8 +++--- app/stores/CollectionGroupMembershipsStore.ts | 4 +-- app/stores/CollectionsStore.ts | 4 +-- app/stores/DocumentsStore.ts | 26 +++++++++---------- app/stores/GroupMembershipsStore.ts | 6 ++--- app/stores/GroupsStore.ts | 2 +- app/stores/MembershipsStore.ts | 4 +-- app/stores/PinsStore.ts | 2 +- app/stores/RevisionsStore.ts | 2 +- app/stores/SharesStore.ts | 4 +-- app/stores/StarsStore.ts | 2 +- app/stores/ToastsStore.ts | 2 +- app/stores/UsersStore.ts | 6 ++--- app/utils/ApiClient.ts | 3 +-- app/utils/isHosted.ts | 5 ++++ 58 files changed, 131 insertions(+), 161 deletions(-) create mode 100644 app/utils/isHosted.ts diff --git a/app/actions/index.ts b/app/actions/index.ts index b1b25bd04..6985dc934 100644 --- a/app/actions/index.ts +++ b/app/actions/index.ts @@ -101,9 +101,7 @@ export function actionToKBar( keywords: action.keywords ?? "", shortcut: action.shortcut || [], icon: resolvedIcon, - perform: action.perform - ? () => action.perform && action.perform(context) - : undefined, + perform: action.perform ? () => action?.perform?.(context) : undefined, }, // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call. ].concat(children.map((child) => ({ ...child, parent: action.id }))); diff --git a/app/components/Authenticated.tsx b/app/components/Authenticated.tsx index 225791c66..976063b50 100644 --- a/app/components/Authenticated.tsx +++ b/app/components/Authenticated.tsx @@ -15,7 +15,7 @@ type Props = { const Authenticated = ({ children }: Props) => { const { auth } = useStores(); const { i18n } = useTranslation(); - const language = auth.user && auth.user.language; + const language = auth.user?.language; // Watching for language changes here as this is the earliest point we have // the user available and means we can start loading translations faster diff --git a/app/components/CommandBar.tsx b/app/components/CommandBar.tsx index 3f63e4caa..5f4efc16d 100644 --- a/app/components/CommandBar.tsx +++ b/app/components/CommandBar.tsx @@ -67,7 +67,7 @@ function CommandBar() { ); } -function KBarPortal({ children }: { children: React.ReactNode }) { +const KBarPortal: React.FC = ({ children }) => { const { showing } = useKBar((state) => ({ showing: state.visualState !== "hidden", })); @@ -77,7 +77,7 @@ function KBarPortal({ children }: { children: React.ReactNode }) { } return {children}; -} +}; const Hint = styled(Text)` display: flex; diff --git a/app/components/ContextMenu/MenuItem.tsx b/app/components/ContextMenu/MenuItem.tsx index c1354f798..cf033e3f1 100644 --- a/app/components/ContextMenu/MenuItem.tsx +++ b/app/components/ContextMenu/MenuItem.tsx @@ -8,7 +8,6 @@ import MenuIconWrapper from "../MenuIconWrapper"; type Props = { onClick?: (arg0: React.SyntheticEvent) => void | Promise; - children?: React.ReactNode; selected?: boolean; disabled?: boolean; dangerous?: boolean; @@ -21,7 +20,7 @@ type Props = { icon?: React.ReactElement; }; -const MenuItem = ({ +const MenuItem: React.FC = ({ onClick, children, selected, @@ -30,7 +29,7 @@ const MenuItem = ({ hide, icon, ...rest -}: Props) => { +}) => { const handleClick = React.useCallback( (ev) => { if (onClick) { diff --git a/app/components/ContextMenu/index.tsx b/app/components/ContextMenu/index.tsx index 735b4069f..893c638ea 100644 --- a/app/components/ContextMenu/index.tsx +++ b/app/components/ContextMenu/index.tsx @@ -38,19 +38,18 @@ type Props = { visible?: boolean; placement?: Placement; animating?: boolean; - children: React.ReactNode; unstable_disclosureRef?: React.RefObject; onOpen?: () => void; onClose?: () => void; hide?: () => void; }; -export default function ContextMenu({ +const ContextMenu: React.FC = ({ children, onOpen, onClose, ...rest -}: Props) { +}) => { const previousVisible = usePrevious(rest.visible); const maxHeight = useMenuHeight(rest.visible, rest.unstable_disclosureRef); const backgroundRef = React.useRef(null); @@ -137,7 +136,9 @@ export default function ContextMenu({ )} ); -} +}; + +export default ContextMenu; export const Backdrop = styled.div` animation: ${fadeIn} 200ms ease-in-out; diff --git a/app/components/DocumentMeta.tsx b/app/components/DocumentMeta.tsx index c97570555..719f296b1 100644 --- a/app/components/DocumentMeta.tsx +++ b/app/components/DocumentMeta.tsx @@ -35,11 +35,10 @@ type Props = { showLastViewed?: boolean; showParentDocuments?: boolean; document: Document; - children?: React.ReactNode; to?: string; }; -function DocumentMeta({ +const DocumentMeta: React.FC = ({ showPublished, showCollection, showLastViewed, @@ -48,7 +47,7 @@ function DocumentMeta({ children, to, ...rest -}: Props) { +}) => { const { t } = useTranslation(); const { collections } = useStores(); const user = useCurrentUser(); @@ -172,6 +171,6 @@ function DocumentMeta({ {children} ); -} +}; export default observer(DocumentMeta); diff --git a/app/components/ErrorBoundary.tsx b/app/components/ErrorBoundary.tsx index 1698bed47..83749e0f3 100644 --- a/app/components/ErrorBoundary.tsx +++ b/app/components/ErrorBoundary.tsx @@ -10,6 +10,7 @@ import CenteredContent from "~/components/CenteredContent"; import PageTitle from "~/components/PageTitle"; import Text from "~/components/Text"; import env from "~/env"; +import isHosted from "~/utils/isHosted"; type Props = WithTranslation & { reloadOnChunkMissing?: boolean; @@ -61,7 +62,7 @@ class ErrorBoundary extends React.Component { if (this.error) { const error = this.error; - const isReported = !!env.SENTRY_DSN && env.DEPLOYMENT === "hosted"; + const isReported = !!env.SENTRY_DSN && isHosted; const isChunkError = this.error.message.match(/chunk/); if (isChunkError) { diff --git a/app/components/LocaleTime.tsx b/app/components/LocaleTime.tsx index a437828c8..b94785554 100644 --- a/app/components/LocaleTime.tsx +++ b/app/components/LocaleTime.tsx @@ -22,7 +22,6 @@ function eachMinute(fn: () => void) { type Props = { dateTime: string; - children?: React.ReactNode; tooltipDelay?: number; addSuffix?: boolean; shorten?: boolean; @@ -30,7 +29,7 @@ type Props = { format?: string; }; -function LocaleTime({ +const LocaleTime: React.FC = ({ addSuffix, children, dateTime, @@ -38,7 +37,7 @@ function LocaleTime({ format, relative, tooltipDelay, -}: Props) { +}) => { const userLocale = useUserLocale(); const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars const callback = React.useRef<() => void>(); @@ -86,6 +85,6 @@ function LocaleTime({ ); -} +}; export default LocaleTime; diff --git a/app/components/Notice.tsx b/app/components/Notice.tsx index 8fff91d67..fe6fd10c3 100644 --- a/app/components/Notice.tsx +++ b/app/components/Notice.tsx @@ -4,12 +4,11 @@ import Flex from "./Flex"; import Text from "./Text"; type Props = { - children: React.ReactNode; icon?: JSX.Element; description?: JSX.Element; }; -const Notice = ({ children, icon, description }: Props) => { +const Notice: React.FC = ({ children, icon, description }) => { return ( diff --git a/app/components/NoticeAlert.tsx b/app/components/NoticeAlert.tsx index 16e0a2b4c..c2d55d574 100644 --- a/app/components/NoticeAlert.tsx +++ b/app/components/NoticeAlert.tsx @@ -1,11 +1,7 @@ import * as React from "react"; import Notice from "~/components/Notice"; -export default function AlertNotice({ - children, -}: { - children: React.ReactNode; -}) { +const AlertNotice: React.FC = ({ children }) => { return ( ); -} +}; + +export default AlertNotice; diff --git a/app/components/PageTitle.tsx b/app/components/PageTitle.tsx index b4aaacaa0..f2c7f777b 100644 --- a/app/components/PageTitle.tsx +++ b/app/components/PageTitle.tsx @@ -16,7 +16,7 @@ const PageTitle = ({ title, favicon }: Props) => { return ( - {team && team.name ? `${title} - ${team.name}` : `${title} - Outline`} + {team?.name ? `${title} - ${team.name}` : `${title} - Outline`} {favicon ? ( diff --git a/app/components/Popover.tsx b/app/components/Popover.tsx index 1cbc27ad7..2f45b9913 100644 --- a/app/components/Popover.tsx +++ b/app/components/Popover.tsx @@ -7,12 +7,11 @@ import useMobile from "~/hooks/useMobile"; import { fadeAndScaleIn } from "~/styles/animations"; type Props = { - children: React.ReactNode; tabIndex?: number; width?: number; }; -function Popover({ children, width = 380, ...rest }: Props) { +const Popover: React.FC = ({ children, width = 380, ...rest }) => { const isMobile = useMobile(); if (isMobile) { @@ -28,7 +27,7 @@ function Popover({ children, width = 380, ...rest }: Props) { {children} ); -} +}; const Contents = styled.div<{ $width?: number }>` animation: ${fadeAndScaleIn} 200ms ease; diff --git a/app/components/Scene.tsx b/app/components/Scene.tsx index 73b3f0722..3d28a21e1 100644 --- a/app/components/Scene.tsx +++ b/app/components/Scene.tsx @@ -8,13 +8,12 @@ type Props = { icon?: React.ReactNode; title?: React.ReactNode; textTitle?: string; - children: React.ReactNode; breadcrumb?: React.ReactNode; actions?: React.ReactNode; centered?: boolean; }; -function Scene({ +const Scene: React.FC = ({ title, icon, textTitle, @@ -22,7 +21,7 @@ function Scene({ breadcrumb, children, centered, -}: Props) { +}) => { return ( @@ -47,7 +46,7 @@ function Scene({ )} ); -} +}; const FillWidth = styled.div` width: 100%; diff --git a/app/components/Sidebar/App.tsx b/app/components/Sidebar/App.tsx index fc5ea7b4d..8d0b6106e 100644 --- a/app/components/Sidebar/App.tsx +++ b/app/components/Sidebar/App.tsx @@ -25,7 +25,7 @@ import ArchiveLink from "./components/ArchiveLink"; import Collections from "./components/Collections"; import Section from "./components/Section"; import SidebarAction from "./components/SidebarAction"; -import SidebarButton from "./components/SidebarButton"; +import SidebarButton, { SidebarButtonProps } from "./components/SidebarButton"; import SidebarLink from "./components/SidebarLink"; import Starred from "./components/Starred"; import TrashLink from "./components/TrashLink"; @@ -55,7 +55,7 @@ function AppSidebar() { {dndArea && ( - {(props) => ( + {(props: SidebarButtonProps) => ( ( {user && ( - {(props) => ( + {(props: SidebarButtonProps) => ( - collection && collection.pathToDocument(node.id).map((entry) => entry.id), + () => collection?.pathToDocument(node.id).map((entry) => entry.id), [collection, node] ); diff --git a/app/components/Sidebar/components/Header.tsx b/app/components/Sidebar/components/Header.tsx index 32f361610..e779b3b46 100644 --- a/app/components/Sidebar/components/Header.tsx +++ b/app/components/Sidebar/components/Header.tsx @@ -5,10 +5,9 @@ import styled from "styled-components"; type Props = { onClick?: React.MouseEventHandler; expanded?: boolean; - children: React.ReactNode; }; -export function Header({ onClick, expanded, children }: Props) { +export const Header: React.FC = ({ onClick, expanded, children }) => { return (

); -} +}; const Button = styled.button` display: inline-flex; diff --git a/app/components/Sidebar/components/NavLink.tsx b/app/components/Sidebar/components/NavLink.tsx index 7ba8010ec..2295e4c66 100644 --- a/app/components/Sidebar/components/NavLink.tsx +++ b/app/components/Sidebar/components/NavLink.tsx @@ -70,7 +70,7 @@ const NavLink = ({ const { pathname: path } = toLocation; // Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202 - const escapedPath = path && path.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1"); + const escapedPath = path?.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1"); const match = escapedPath ? matchPath(currentLocation.pathname, { path: escapedPath, diff --git a/app/components/Sidebar/components/SidebarButton.tsx b/app/components/Sidebar/components/SidebarButton.tsx index fc3378f98..a23e0e87c 100644 --- a/app/components/Sidebar/components/SidebarButton.tsx +++ b/app/components/Sidebar/components/SidebarButton.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import styled from "styled-components"; import Flex from "~/components/Flex"; -type Props = { +export type SidebarButtonProps = { title: React.ReactNode; image: React.ReactNode; minHeight?: number; @@ -13,7 +13,7 @@ type Props = { onClick: React.MouseEventHandler; }; -const SidebarButton = React.forwardRef( +const SidebarButton = React.forwardRef( ( { showDisclosure, @@ -22,7 +22,7 @@ const SidebarButton = React.forwardRef( title, minHeight = 0, ...rest - }: Props, + }: SidebarButtonProps, ref ) => ( { @@ -46,7 +44,7 @@ class SocketProvider extends React.Component { } checkConnection = () => { - if (this.socket && this.socket.disconnected && getPageVisible()) { + if (this.socket?.disconnected && getPageVisible()) { // null-ifying this reference is important, do not remove. Without it // references to old sockets are potentially held in context this.socket.close(); @@ -102,10 +100,9 @@ class SocketProvider extends React.Component { // connection may have failed (caused by proxy, firewall, browser, ...) this.socket.on("reconnect_attempt", () => { if (this.socket) { - this.socket.io.opts.transports = - auth.team && auth.team.domain - ? ["websocket"] - : ["websocket", "polling"]; + this.socket.io.opts.transports = auth?.team?.domain + ? ["websocket"] + : ["websocket", "polling"]; } }); @@ -210,10 +207,7 @@ class SocketProvider extends React.Component { // if we already have the latest version (it was us that performed // the change) then we don't need to update anything either. - if ( - collection && - collection.updatedAt === collectionDescriptor.updatedAt - ) { + if (collection?.updatedAt === collectionDescriptor.updatedAt) { continue; } diff --git a/app/components/Subheading.tsx b/app/components/Subheading.tsx index 85bd5e767..d165fc6f8 100644 --- a/app/components/Subheading.tsx +++ b/app/components/Subheading.tsx @@ -2,7 +2,6 @@ import * as React from "react"; import styled from "styled-components"; type Props = { - children: React.ReactNode; sticky?: boolean; }; @@ -34,7 +33,7 @@ const Background = styled.div<{ sticky?: boolean }>` z-index: 1; `; -const Subheading = ({ children, sticky, ...rest }: Props) => { +const Subheading: React.FC = ({ children, sticky, ...rest }) => { return (

diff --git a/app/components/Tab.tsx b/app/components/Tab.tsx index 8f8dac6f8..4d12f6a49 100644 --- a/app/components/Tab.tsx +++ b/app/components/Tab.tsx @@ -9,7 +9,6 @@ type Props = Omit< > & { to: string; exact?: boolean; - children: React.ReactNode; }; const TabLink = styled(NavLinkWithChildrenFunc)` @@ -45,7 +44,7 @@ const transition = { damping: 30, }; -export default function Tab({ children, ...rest }: Props) { +const Tab: React.FC = ({ children, ...rest }) => { const theme = useTheme(); const activeStyle = { color: theme.textSecondary, @@ -67,4 +66,6 @@ export default function Tab({ children, ...rest }: Props) { )} ); -} +}; + +export default Tab; diff --git a/app/components/Tabs.tsx b/app/components/Tabs.tsx index 0805d12d6..e4939e58e 100644 --- a/app/components/Tabs.tsx +++ b/app/components/Tabs.tsx @@ -56,7 +56,7 @@ export const Separator = styled.span` margin-top: 6px; `; -const Tabs = ({ children }: { children: React.ReactNode }) => { +const Tabs: React.FC = ({ children }) => { const ref = React.useRef(); const [shadowVisible, setShadow] = React.useState(false); const { width } = useWindowSize(); diff --git a/app/components/Theme.tsx b/app/components/Theme.tsx index eb85af31b..c434e1ee5 100644 --- a/app/components/Theme.tsx +++ b/app/components/Theme.tsx @@ -6,11 +6,7 @@ import useMediaQuery from "~/hooks/useMediaQuery"; import useStores from "~/hooks/useStores"; import GlobalStyles from "~/styles/globals"; -type Props = { - children: React.ReactNode; -}; - -function Theme({ children }: Props) { +const Theme: React.FC = ({ children }) => { const { ui } = useStores(); const resolvedTheme = ui.resolvedTheme === "dark" ? dark : light; const resolvedMobileTheme = @@ -37,6 +33,6 @@ function Theme({ children }: Props) { ); -} +}; export default observer(Theme); diff --git a/app/editor/components/CommandMenu.tsx b/app/editor/components/CommandMenu.tsx index 0d87a0b89..2ace5b25e 100644 --- a/app/editor/components/CommandMenu.tsx +++ b/app/editor/components/CommandMenu.tsx @@ -139,7 +139,7 @@ class CommandMenu extends React.Component, State> { this.setState({ selectedIndex: Math.max( 0, - prev && prev.name === "separator" ? prevIndex - 1 : prevIndex + prev?.name === "separator" ? prevIndex - 1 : prevIndex ), }); } else { @@ -162,7 +162,7 @@ class CommandMenu extends React.Component, State> { this.setState({ selectedIndex: Math.min( - next && next.name === "separator" ? nextIndex + 1 : nextIndex, + next?.name === "separator" ? nextIndex + 1 : nextIndex, total ), }); diff --git a/app/editor/components/SelectionToolbar.tsx b/app/editor/components/SelectionToolbar.tsx index f71f14a09..55e1ec598 100644 --- a/app/editor/components/SelectionToolbar.tsx +++ b/app/editor/components/SelectionToolbar.tsx @@ -191,8 +191,7 @@ export default class SelectionToolbar extends React.Component { const isTableSelection = colIndex !== undefined && rowIndex !== undefined; const link = isMarkActive(state.schema.marks.link)(state); const range = getMarkRange(selection.$from, state.schema.marks.link); - const isImageSelection = - selection.node && selection.node.type.name === "image"; + const isImageSelection = selection.node?.type?.name === "image"; let isTextSelection = false; let items: MenuItem[] = []; diff --git a/app/editor/components/Tooltip.tsx b/app/editor/components/Tooltip.tsx index 6dc9fc308..670a8eabe 100644 --- a/app/editor/components/Tooltip.tsx +++ b/app/editor/components/Tooltip.tsx @@ -3,11 +3,10 @@ import styled from "styled-components"; import Tooltip from "~/components/Tooltip"; type Props = { - children: React.ReactNode; tooltip?: string; }; -const WrappedTooltip = ({ children, tooltip }: Props) => ( +const WrappedTooltip: React.FC = ({ children, tooltip }) => ( {children} diff --git a/app/hooks/useAuthorizedSettingsConfig.ts b/app/hooks/useAuthorizedSettingsConfig.ts index fe96f5648..016af6ff9 100644 --- a/app/hooks/useAuthorizedSettingsConfig.ts +++ b/app/hooks/useAuthorizedSettingsConfig.ts @@ -29,6 +29,7 @@ import Zapier from "~/scenes/Settings/Zapier"; import SlackIcon from "~/components/SlackIcon"; import ZapierIcon from "~/components/ZapierIcon"; import env from "~/env"; +import isHosted from "~/utils/isHosted"; import useCurrentTeam from "./useCurrentTeam"; import usePolicy from "./usePolicy"; @@ -61,8 +62,6 @@ type ConfigType = { [key in SettingsPage]: ConfigItem; }; -const isHosted = env.DEPLOYMENT === "hosted"; - const useAuthorizedSettingsConfig = () => { const team = useCurrentTeam(); const can = usePolicy(team.id); diff --git a/app/index.tsx b/app/index.tsx index cdf525f26..9a65d2d40 100644 --- a/app/index.tsx +++ b/app/index.tsx @@ -37,7 +37,7 @@ if ("serviceWorker" in window.navigator) { } ); - if (maybePromise && maybePromise.then) { + if (maybePromise?.then) { maybePromise .then((registration) => { console.log("SW registered: ", registration); diff --git a/app/menus/AccountMenu.tsx b/app/menus/AccountMenu.tsx index 2c6eb30c9..1c63b5aa3 100644 --- a/app/menus/AccountMenu.tsx +++ b/app/menus/AccountMenu.tsx @@ -18,11 +18,7 @@ import usePrevious from "~/hooks/usePrevious"; import useStores from "~/hooks/useStores"; import separator from "~/menus/separator"; -type Props = { - children: (props: any) => React.ReactNode; -}; - -function AccountMenu(props: Props) { +const AccountMenu: React.FC = ({ children }) => { const menu = useMenuState({ placement: "bottom-end", modal: true, @@ -55,12 +51,12 @@ function AccountMenu(props: Props) { return ( <> - {props.children} + {children}