Page MenuHomePhorge
Files F32099159

D4061.1765011745.diff
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

D4061.1765011745.diff
View Options

diff --git a/lib/hooks/search-sidebars.js b/lib/hooks/search-sidebars.js
--- a/lib/hooks/search-sidebars.js
+++ b/lib/hooks/search-sidebars.js
@@ -12,14 +12,13 @@
function useSearchSidebars(
threadInfo: ThreadInfo,
text: string,
- setTextSearchText: SetState<string>,
+ setSearchText?: SetState<string>,
): {
+listData: $ReadOnlyArray<SidebarInfo>,
+setSearchState: SetState<$ReadOnlySet<string>>,
+onChangeSearchText: (
text: SyntheticEvent<HTMLInputElement> | string,
) => mixed,
- +clearQuery: (event: SyntheticEvent<HTMLAnchorElement>) => void,
} {
const [searchState, setSearchState] = React.useState(new Set<string>());
@@ -63,32 +62,23 @@
}
setSearchState(new Set(searchIndex.getSearchResults(onChangeText)));
- setTextSearchText(onChangeText);
+ setSearchText?.(onChangeText);
},
- [searchIndex, setSearchState, setTextSearchText],
- );
-
- const clearQuery = React.useCallback(
- (event: SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- setSearchState(new Set());
- setTextSearchText('');
- },
- [setSearchState, setTextSearchText],
+ [searchIndex, setSearchState, setSearchText],
);
React.useEffect(() => {
setSearchState(new Set(searchIndex.getSearchResults(text)));
- }, [searchIndex, setSearchState, text]);
+ setSearchText?.(text);
+ }, [searchIndex, setSearchState, setSearchText, text]);
return React.useMemo(
() => ({
listData,
setSearchState,
onChangeSearchText,
- clearQuery,
}),
- [listData, setSearchState, onChangeSearchText, clearQuery],
+ [listData, setSearchState, onChangeSearchText],
);
}
diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -1,7 +1,5 @@
// @flow
-import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import * as React from 'react';
@@ -10,78 +8,62 @@
import chatThreadListCSS from '../../chat/chat-thread-list.css';
import SidebarItem from '../../chat/sidebar-item.react';
-import globalCSS from '../../style.css';
-import { MagnifyingGlass } from '../../vectors.react';
-import Input from '../input.react';
import { useModalContext } from '../modal-provider.react';
-import Modal from '../modal.react';
+import SearchModal from '../search-modal.react';
type Props = {
+threadInfo: ThreadInfo,
};
+type SidebarModalContentProps = {
+ +threadInfo: ThreadInfo,
+ +onClose: () => void,
+ +searchText: string,
+};
+
+function SidebarModalContent(props: SidebarModalContentProps): React.Node {
+ const { threadInfo, searchText } = props;
+ const { popModal } = useModalContext();
+ const { listData } = useSearchSidebars(threadInfo, searchText);
+
+ return listData.map(item => (
+ <div
+ className={classNames(
+ chatThreadListCSS.thread,
+ chatThreadListCSS.sidebar,
+ )}
+ key={item.threadInfo.id}
+ onClick={popModal}
+ >
+ <SidebarItem sidebarInfo={item} />
+ </div>
+ ));
+}
+
function SidebarListModal(props: Props): React.Node {
- const { threadInfo } = props;
- const [searchText, setSearchText] = React.useState('');
- const { listData, onChangeSearchText, clearQuery } = useSearchSidebars(
- threadInfo,
- searchText,
- setSearchText,
- );
const { popModal } = useModalContext();
+ const { threadInfo } = props;
- const sidebars = React.useMemo(
- () =>
- listData.map(item => (
- <div
- className={classNames(
- chatThreadListCSS.thread,
- chatThreadListCSS.sidebar,
- )}
- key={item.threadInfo.id}
- onClick={popModal}
- >
- <SidebarItem sidebarInfo={item} />
- </div>
- )),
- [popModal, listData],
+ const searchSidebarModalContent = React.useCallback(
+ (searchSidebarText: string) => (
+ <SidebarModalContent
+ onClose={popModal}
+ threadInfo={threadInfo}
+ searchText={searchSidebarText}
+ />
+ ),
+ [popModal, threadInfo],
);
- let clearQueryButton = null;
- if (searchText) {
- clearQueryButton = (
- <a href="#" onClick={clearQuery}>
- <FontAwesomeIcon
- icon={faTimesCircle}
- className={chatThreadListCSS.clearQuery}
- />
- </a>
- );
- }
-
return (
- <Modal name="Sidebars" onClose={popModal}>
- <div
- className={classNames(
- globalCSS['modal-body'],
- globalCSS['resized-modal-body'],
- )}
- >
- <div>
- <div className={chatThreadListCSS.search}>
- <MagnifyingGlass className={chatThreadListCSS.searchVector} />
- <Input
- type="text"
- placeholder="Search sidebars"
- value={searchText}
- onChange={onChangeSearchText}
- />
- {clearQueryButton}
- </div>
- </div>
- <ul className={chatThreadListCSS.list}>{sidebars}</ul>
- </div>
- </Modal>
+ <SearchModal
+ name="Sidebars"
+ onClose={popModal}
+ size="fit-content"
+ searchPlaceholder="Search sidebars"
+ >
+ {searchSidebarModalContent}
+ </SearchModal>
);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 6, 9:02 AM (11 h, 11 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5834996
Default Alt Text
D4061.1765011745.diff (5 KB)

Event Timeline