chore: review changes

RocketChat · Oct 18, 2024 · 85fcfd8 · 85fcfd8
1 parent 37414ad
commit 85fcfd8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 29 deletions.
diff --git a/apps/meteor/client/sidebarv2/header/SearchList.tsx b/apps/meteor/client/sidebarv2/header/SearchList.tsx
@@ -12,9 +12,9 @@ import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
 import Row from '../search/Row';
 import { useSearchItems } from './hooks/useSearchItems';
 
-type SearchListProps = { filterText: string; onEscSearch: () => void; showRecentSearch?: boolean };
+type SearchListProps = { filterText: string; onEscSearch: () => void; showRecentList?: boolean };
 
-const SearchList = ({ filterText, onEscSearch, showRecentSearch }: SearchListProps) => {
+const SearchList = ({ filterText, onEscSearch, showRecentList }: SearchListProps) => {
 	const t = useTranslation();
 
 	const boxRef = useRef<HTMLDivElement>(null);
@@ -58,13 +58,13 @@ const SearchList = ({ filterText, onEscSearch, showRecentSearch }: SearchListPro
 			flexShrink={1}
 			h='full'
 			w='full'
-			pbs={showRecentSearch ? 0 : 8}
+			pbs={showRecentList ? 0 : 8}
 			aria-live='polite'
 			aria-atomic='true'
 			aria-busy={isLoading}
 			onClick={handleClick}
 		>
-			{showRecentSearch && <SidebarV2GroupTitle title={t('Recent')} />}
+			{showRecentList && <SidebarV2GroupTitle title={t('Recent')} />}
 			<Virtuoso
 				style={{ height: '100%', width: '100%' }}
 				totalCount={items.length}

diff --git a/apps/meteor/client/sidebarv2/header/SearchSection.tsx b/apps/meteor/client/sidebarv2/header/SearchSection.tsx
@@ -56,7 +56,7 @@ const SearchSection = () => {
 	const t = useTranslation();
 	const focusManager = useFocusManager();
 	const user = useUser();
-	const [showRecentSearch, setShowRecent] = useState(false);
+	const [showRecentItems, setShowRecentItems] = useState(false);
 
 	const {
 		formState: { isDirty },
@@ -68,62 +68,50 @@ const SearchSection = () => {
 	const { filterText } = watch();
 	const { ref: filterRef, ...rest } = register('filterText');
 
+	const showRecentList = Boolean(showRecentItems && !filterText);
+
 	const inputRef = useRef<HTMLInputElement>(null);
 	const wrapperRef = useRef<HTMLDivElement>(null);
 	const mergedRefs = useMergedRefs(filterRef, inputRef);
 
 	const handleEscSearch = useCallback(() => {
 		resetField('filterText');
-		setShowRecent(false);
+		setShowRecentItems(false);
 		inputRef.current?.blur();
 	}, [resetField]);
 
 	useOutsideClick([wrapperRef], handleEscSearch);
 
-	useEffect(() => {
-		if (filterText) {
-			setShowRecent(false);
-		}
-	}, [filterText]);
-
-	useEffect(() => {
-		if (showRecentSearch) {
-			focusManager.focusNext({ accept: (node) => isRecentButton(node) });
-		}
-	}, [focusManager, showRecentSearch]);
-
 	useEffect(() => {
 		const unsubscribe = tinykeys(window, {
 			'$mod+K': (event) => {
 				event.preventDefault();
-				setShowRecent(false);
 				setFocus('filterText');
 			},
 			'$mod+P': (event) => {
 				event.preventDefault();
-				setShowRecent(false);
 				setFocus('filterText');
 			},
 			'Shift+$mod+K': (event) => {
 				event.preventDefault();
-				setShowRecent(true);
+				setShowRecentItems(true);
+				focusManager.focusNext({ accept: (node) => isRecentButton(node) });
 			},
 			'Escape': (event) => {
 				event.preventDefault();
-				setShowRecent(false);
 				handleEscSearch();
 			},
 		});
 
 		return (): void => {
 			unsubscribe();
 		};
-	}, [handleEscSearch, setFocus]);
+	}, [focusManager, handleEscSearch, setFocus]);
 
 	const placeholder = [t('Search'), shortcut].filter(Boolean).join(' ');
 
 	return (
-		<Box className={['rcx-sidebar', (isDirty || showRecentSearch) && wrapperStyle]} ref={wrapperRef} role='search'>
+		<Box className={['rcx-sidebar', (isDirty || showRecentList) && wrapperStyle]} ref={wrapperRef} role='search'>
 			<SidebarV2Section>
 				<TextInput
 					placeholder={placeholder}
@@ -140,17 +128,17 @@ const SearchSection = () => {
 							small
 							icon='clock'
 							title={t('Recent')}
-							onClick={() => setShowRecent(!showRecentSearch)}
-							pressed={showRecentSearch}
+							onClick={() => setShowRecentItems(!showRecentItems)}
+							pressed={showRecentItems}
 						/>
-						{showRecentSearch ? <IconButton icon='sort' disabled small /> : <Sort />}
+						{showRecentItems ? <IconButton icon='sort' disabled small /> : <Sort />}
 						<CreateRoom />
 					</>
 				)}
 			</SidebarV2Section>
-			{(isDirty || showRecentSearch) && (
+			{(isDirty || showRecentItems) && (
 				<FocusScope>
-					<SearchList filterText={filterText} onEscSearch={handleEscSearch} showRecentSearch={showRecentSearch} />
+					<SearchList filterText={filterText} onEscSearch={handleEscSearch} showRecentList={showRecentList} />
 				</FocusScope>
 			)}
 		</Box>