Page MenuHomePhabricator
Files F3524279

D8274.diff
No OneTemporary
Actions

D8274.diff
View Options

diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -59,6 +59,7 @@
import { useSelector } from './redux/redux-utils.js';
import VisibilityHandler from './redux/visibility-handler.react.js';
import history from './router-history.js';
+import { MessageSearchStateProvider } from './search/message-search-state-provider.react.js';
import AccountSettings from './settings/account-settings.react.js';
import DangerZone from './settings/danger-zone.react.js';
import CommunityPicker from './sidebar/community-picker.react.js';
@@ -187,14 +188,16 @@
<MenuProvider>
<WagmiConfig client={wagmiClient}>
<WagmiENSCacheProvider>
- <FocusHandler />
- <VisibilityHandler />
- <DeviceIDUpdater />
- <PolicyAcknowledgmentHandler />
- <PushNotificationsHandler />
- <InviteLinkHandler />
- <InviteLinksRefresher />
- {content}
+ <MessageSearchStateProvider>
+ <FocusHandler />
+ <VisibilityHandler />
+ <DeviceIDUpdater />
+ <PolicyAcknowledgmentHandler />
+ <PushNotificationsHandler />
+ <InviteLinkHandler />
+ <InviteLinksRefresher />
+ {content}
+ </MessageSearchStateProvider>
</WagmiENSCacheProvider>
</WagmiConfig>
</MenuProvider>
diff --git a/web/modals/search/message-search-modal.css b/web/modals/search/message-search-modal.css
--- a/web/modals/search/message-search-modal.css
+++ b/web/modals/search/message-search-modal.css
@@ -1,6 +1,13 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
.content {
overflow-y: scroll;
- padding: 0 10px;
+ border-top: 2px solid var(--border-color);
+ padding: 16px 26px;
}
.content > * {
@@ -20,3 +27,13 @@
text-align: center;
margin: 20px;
}
+
+.header {
+ display: flex;
+ flex-direction: row;
+ margin: 16px;
+}
+
+.button {
+ margin: 10px 10px 10px 0;
+}
diff --git a/web/modals/search/message-search-modal.react.js b/web/modals/search/message-search-modal.react.js
--- a/web/modals/search/message-search-modal.react.js
+++ b/web/modals/search/message-search-modal.react.js
@@ -18,10 +18,13 @@
import css from './message-search-modal.css';
import { useTooltipContext } from '../../chat/tooltip-provider.js';
+import Button from '../../components/button.react.js';
import MessageResult from '../../components/message-result.react.js';
+import Search from '../../components/search.react.js';
import LoadingIndicator from '../../loading-indicator.react.js';
import { useSelector } from '../../redux/redux-utils.js';
-import SearchModal from '../search-modal.react.js';
+import { useMessageSearchContext } from '../../search/message-search-state-provider.react.js';
+import Modal from '../modal.react.js';
type ContentProps = {
+query: string,
@@ -203,25 +206,49 @@
const { threadInfo } = props;
const { popModal } = useModalContext();
- const renderModalContent = React.useCallback(
- (searchText: string) => (
- <MessageSearchModalContent threadInfo={threadInfo} query={searchText} />
- ),
- [threadInfo],
+ const { getQuery, setQuery, clearQuery } = useMessageSearchContext();
+
+ const query = React.useMemo(
+ () => getQuery(threadInfo.id),
+ [getQuery, threadInfo.id],
+ );
+
+ const [input, setInput] = React.useState(query);
+
+ const onPressSearch = React.useCallback(
+ () => setQuery(input, threadInfo.id),
+ [setQuery, input, threadInfo.id],
);
const { uiName } = useResolvedThreadInfo(threadInfo);
const searchPlaceholder = `Searching in ${uiName}`;
+ const clearQueryWrapper = React.useCallback(
+ () => clearQuery(threadInfo.id),
+ [clearQuery, threadInfo.id],
+ );
+
return (
- <SearchModal
- searchPlaceholder={searchPlaceholder}
- name="Search Message"
- onClose={popModal}
- size="large"
- >
- {renderModalContent}
- </SearchModal>
+ <Modal name="Search Message" onClose={popModal} size="large">
+ <div className={css.container}>
+ <div className={css.header}>
+ <Search
+ onChangeText={setInput}
+ searchText={input}
+ placeholder={searchPlaceholder}
+ onClearText={clearQueryWrapper}
+ />
+ <Button
+ onClick={onPressSearch}
+ variant="filled"
+ className={css.button}
+ >
+ Search
+ </Button>
+ </div>
+ <MessageSearchModalContent threadInfo={threadInfo} query={query} />
+ </div>
+ </Modal>
);
}

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 12:04 PM (17 h, 16 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2699926
Default Alt Text
D8274.diff (4 KB)

Event Timeline