Chore: Convert sidebar/header/actions

RocketChat · May 20, 2022 · 61cc2ed · 61cc2ed
1 parent e851297
commit 61cc2ed
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 24 deletions.
diff --git a/...ient/sidebar/header/actions/CreateRoom.js → ...ent/sidebar/header/actions/CreateRoom.tsx b/...ient/sidebar/header/actions/CreateRoom.js → ...ent/sidebar/header/actions/CreateRoom.tsx
@@ -1,14 +1,14 @@
 import { Box, Sidebar, Dropdown } from '@rocket.chat/fuselage';
 import { useAtLeastOnePermission } from '@rocket.chat/ui-contexts';
-import React, { useRef } from 'react';
+import React, { useRef, FC } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useDropdownVisibility } from '../hooks/useDropdownVisibility';
 import CreateRoomList from './CreateRoomList';
 
 const CREATE_ROOM_PERMISSIONS = ['create-c', 'create-p', 'create-d', 'start-discussion', 'start-discussion-other-user'];
 
-const CreateRoom = (props) => {
+const CreateRoom: FC = (props) => {
 	const reference = useRef(null);
 	const target = useRef(null);
 	const { isVisible, toggle } = useDropdownVisibility({ reference, target });
@@ -19,13 +19,13 @@ const CreateRoom = (props) => {
 		<>
 			{showCreate && (
 				<Box ref={reference}>
-					<Sidebar.TopBar.Action {...props} icon='edit-rounded' onClick={toggle} />
+					<Sidebar.TopBar.Action {...props} icon='edit-rounded' onClick={(): void => toggle()} />
 				</Box>
 			)}
 			{isVisible &&
 				createPortal(
 					<Dropdown reference={reference} ref={target}>
-						<CreateRoomList closeList={() => toggle(false)} />
+						<CreateRoomList closeList={(): void => toggle(false)} />
 					</Dropdown>,
 					document.body,
 				)}

diff --git a/.../sidebar/header/actions/CreateRoomList.js → ...sidebar/header/actions/CreateRoomList.tsx b/.../sidebar/header/actions/CreateRoomList.js → ...sidebar/header/actions/CreateRoomList.tsx
@@ -1,7 +1,7 @@
 import { OptionTitle } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetModal, useSetting, useAtLeastOnePermission, useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { FC } from 'react';
 
 import { popover } from '../../../../app/ui-utils/client';
 import CreateDiscussion from '../../../components/CreateDiscussion';
@@ -19,23 +19,27 @@ const style = {
 	textTransform: 'uppercase',
 };
 
-const useReactModal = (Component) => {
+type CreateRoomListProps = {
+	closeList: () => void;
+};
+
+const useReactModal = (Component: FC<any>): ((e: React.MouseEvent<HTMLElement>) => void) => {
 	const setModal = useSetModal();
 
 	return useMutableCallback((e) => {
 		popover.close();
 
 		e.preventDefault();
 
-		const handleClose = () => {
+		const handleClose = (): void => {
 			setModal(null);
 		};
 
 		setModal(() => <Component onClose={handleClose} />);
 	});
 };
 
-function CreateRoomList({ closeList }) {
+const CreateRoomList: FC<CreateRoomListProps> = ({ closeList }) => {
 	const t = useTranslation();
 
 	const canCreateChannel = useAtLeastOnePermission(CREATE_CHANNEL_PERMISSIONS);
@@ -52,15 +56,15 @@ function CreateRoomList({ closeList }) {
 
 	return (
 		<>
-			<OptionTitle pb='x8' style={style}>
+			<OptionTitle pb='x8' {...({ style } as any)}>
 				{t('Create_new')}
 			</OptionTitle>
 			<ul className='rc-popover__list'>
 				{canCreateChannel && (
 					<ListItem
 						icon='hashtag'
 						text={t('Channel')}
-						action={(e) => {
+						action={(e: React.MouseEvent<HTMLElement>): void => {
 							createChannel(e);
 							closeList();
 						}}
@@ -70,7 +74,7 @@ function CreateRoomList({ closeList }) {
 					<ListItem
 						icon='team'
 						text={t('Team')}
-						action={(e) => {
+						action={(e: React.MouseEvent<HTMLElement>): void => {
 							createTeam(e);
 							closeList();
 						}}
@@ -80,7 +84,7 @@ function CreateRoomList({ closeList }) {
 					<ListItem
 						icon='balloon'
 						text={t('Direct_Messages')}
-						action={(e) => {
+						action={(e: React.MouseEvent<HTMLElement>): void => {
 							createDirectMessage(e);
 							closeList();
 						}}
@@ -90,7 +94,7 @@ function CreateRoomList({ closeList }) {
 					<ListItem
 						icon='discussion'
 						text={t('Discussion')}
-						action={(e) => {
+						action={(e: React.MouseEvent<HTMLElement>): void => {
 							createDiscussion(e);
 							closeList();
 						}}
@@ -99,6 +103,6 @@ function CreateRoomList({ closeList }) {
 			</ul>
 		</>
 	);
-}
+};
 
 export default CreateRoomList;
diff --git a/...lient/sidebar/header/actions/Directory.js → ...ient/sidebar/header/actions/Directory.tsx b/...lient/sidebar/header/actions/Directory.js → ...ient/sidebar/header/actions/Directory.tsx
@@ -1,9 +1,9 @@
 import { Sidebar } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useLayout, useRoute } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { FC } from 'react';
 
-const Directory = (props) => {
+const Directory: FC = (props) => {
 	const directoryRoute = useRoute('directory');
 	const { sidebar } = useLayout();
 	const handleDirectory = useMutableCallback(() => {

diff --git a/...eor/client/sidebar/header/actions/Home.js → ...or/client/sidebar/header/actions/Home.tsx b/...eor/client/sidebar/header/actions/Home.js → ...or/client/sidebar/header/actions/Home.tsx
@@ -1,9 +1,9 @@
 import { Sidebar } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useLayout, useRoute, useSetting } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { FC } from 'react';
 
-const Home = (props) => {
+const Home: FC = (props) => {
 	const homeRoute = useRoute('home');
 	const { sidebar } = useLayout();
 	const showHome = useSetting('Layout_Show_Home_Button');

diff --git a/...or/client/sidebar/header/actions/Login.js → ...r/client/sidebar/header/actions/Login.tsx b/...or/client/sidebar/header/actions/Login.js → ...r/client/sidebar/header/actions/Login.tsx
@@ -1,8 +1,8 @@
 import { Sidebar } from '@rocket.chat/fuselage';
 import { useSessionDispatch, useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { FC } from 'react';
 
-const Login = (props) => {
+const Login: FC = (props) => {
 	const setForceLogin = useSessionDispatch('forceLogin');
 	const t = useTranslation();
 
@@ -13,7 +13,7 @@ const Login = (props) => {
 			ghost={false}
 			icon='login'
 			title={t('Sign_in_to_start_talking')}
-			onClick={() => setForceLogin(true)}
+			onClick={(): void => setForceLogin(true)}
 		/>
 	);
 };

diff --git a/...eor/client/sidebar/header/actions/Sort.js → ...or/client/sidebar/header/actions/Sort.tsx b/...eor/client/sidebar/header/actions/Sort.js → ...or/client/sidebar/header/actions/Sort.tsx
@@ -1,19 +1,19 @@
 import { Box, Sidebar, Dropdown } from '@rocket.chat/fuselage';
-import React, { useRef } from 'react';
+import React, { FC, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import SortList from '../../../components/SortList';
 import { useDropdownVisibility } from '../hooks/useDropdownVisibility';
 
-const Sort = (props) => {
+const Sort: FC = (props) => {
 	const reference = useRef(null);
 	const target = useRef(null);
 	const { isVisible, toggle } = useDropdownVisibility({ reference, target });
 
 	return (
 		<>
 			<Box ref={reference}>
-				<Sidebar.TopBar.Action {...props} icon='sort' onClick={toggle} />
+				<Sidebar.TopBar.Action {...props} icon='sort' onClick={(): void => toggle()} />
 			</Box>
 			{isVisible &&
 				createPortal(