fix: show no results text when search finds nothing

ts/components/leftpane/LeftPane.tsx

@@ -1,9 +1,7 @@
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { SectionType } from '../../state/ducks/section';
-import { getLeftPaneConversationIds } from '../../state/selectors/conversations';
+import { getFocusedSection } from '../../state/selectors/section';
-import { getHasSearchResults } from '../../state/selectors/search';
-import { getFocusedSection, getLeftOverlayMode } from '../../state/selectors/section';
 import { SessionToastContainer } from '../SessionToastContainer';
 import { CallInFullScreenContainer } from '../calling/CallInFullScreenContainer';
 import { DraggableCallContainer } from '../calling/DraggableCallContainer';
@@ -18,25 +16,11 @@ const StyledLeftPane = styled.div`
   width: ${leftPaneListWidth}px;
 `;
 
-const InnerLeftPaneMessageSection = () => {
-  const hasSearchResults = useSelector(getHasSearchResults);
-  const conversationIds = useSelector(getLeftPaneConversationIds);
-  const leftOverlayMode = useSelector(getLeftOverlayMode);
-
-  return (
-    <LeftPaneMessageSection
-      hasSearchResults={hasSearchResults}
-      conversationIds={conversationIds}
-      leftOverlayMode={leftOverlayMode}
-    />
-  );
-};
-
 const LeftPaneSection = () => {
   const focusedSection = useSelector(getFocusedSection);
 
   if (focusedSection === SectionType.Message) {
-    return <InnerLeftPaneMessageSection />;
+    return <LeftPaneMessageSection />;
   }
 
   if (focusedSection === SectionType.Settings) {

ts/components/leftpane/LeftPaneMessageSection.tsx

@@ -1,3 +1,4 @@
+import { isEmpty } from 'lodash';
 import { useSelector } from 'react-redux';
 import { AutoSizer, List, ListRowProps } from 'react-virtualized';
 import styled from 'styled-components';
@@ -5,7 +6,9 @@ import { SearchResults } from '../search/SearchResults';
 import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
 import { MessageRequestsBanner } from './MessageRequestsBanner';
 
-import { LeftOverlayMode, setLeftOverlayMode } from '../../state/ducks/section';
+import { setLeftOverlayMode } from '../../state/ducks/section';
+import { getLeftPaneConversationIds } from '../../state/selectors/conversations';
+import { getSearchTerm } from '../../state/selectors/search';
 import { getLeftOverlayMode } from '../../state/selectors/section';
 import { assertUnreachable } from '../../types/sqlSharedTypes';
 import { SessionSearchInput } from '../SessionSearchInput';
@@ -18,12 +21,6 @@ import { OverlayMessage } from './overlay/OverlayMessage';
 import { OverlayMessageRequest } from './overlay/OverlayMessageRequest';
 import { OverlayChooseAction } from './overlay/choose-action/OverlayChooseAction';
 
-export interface Props {
-  conversationIds?: Array<string>;
-  hasSearchResults: boolean;
-  leftOverlayMode: LeftOverlayMode | undefined;
-}
-
 const StyledLeftPaneContent = styled.div`
   display: flex;
   flex-direction: column;
@@ -66,8 +63,10 @@ const ClosableOverlay = () => {
   }
 };
 
-export const LeftPaneMessageSection = (props: Props) => {
+export const LeftPaneMessageSection = () => {
-  const { conversationIds, hasSearchResults, leftOverlayMode } = props;
+  const conversationIds = useSelector(getLeftPaneConversationIds);
+  const leftOverlayMode = useSelector(getLeftOverlayMode);
+  const searchTerm = useSelector(getSearchTerm);
 
   const renderRow = ({ index, key, style }: ListRowProps): JSX.Element | null => {
     // assume conversations that have been marked unapproved should be filtered out by selector.
@@ -84,7 +83,7 @@ export const LeftPaneMessageSection = (props: Props) => {
   };
 
   const renderList = () => {
-    if (hasSearchResults) {
+    if (!isEmpty(searchTerm)) {
       return <SearchResults />;
     }
 

ts/components/search/SearchResults.tsx

@@ -35,8 +35,8 @@ const SearchResultsContainer = styled.div`
   width: -webkit-fill-available;
 `;
 const NoResults = styled.div`
-  margin-top: 27px;
   width: 100%;
+  padding: var(--margins-xl) var(--margins-sm) 0;
   text-align: center;
 `;
 

ts/state/selectors/search.ts

@@ -75,9 +75,6 @@ export type SearchResultsMergedListItem =
 
 export const getSearchResultsList = createSelector([getSearchResults], searchState => {
   const { contactsAndConversations, messages } = searchState;
-  window.log.debug(
-    `WIP: [getSearchResultsList] contactsAndConversations ${JSON.stringify(contactsAndConversations)}`
-  );
   const builtList: Array<SearchResultsMergedListItem> = [];
 
   if (contactsAndConversations.length) {