Page MenuHomePhabricator
Differential D6722

[Android] Reference Tools by CMake project
ClosedPublic
Actions

Authored by • jon on Feb 13 2023, 11:38 AM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Mar 20, 12:53 AM
Unknown Object (File)
Sun, Mar 16, 4:45 AM
Unknown Object (File)
Mon, Mar 10, 10:13 PM
Unknown Object (File)
Mon, Mar 10, 10:13 PM
Unknown Object (File)
Mon, Mar 10, 10:13 PM
Unknown Object (File)
Mon, Mar 10, 10:09 PM
Unknown Object (File)
Mon, Mar 10, 10:09 PM
Unknown Object (File)
Mon, Mar 10, 10:08 PM
View All Files
Subscribers
ashoat
tomek

Details

Reviewers
atul
• max
varun
Commits
rCOMM6f883b5879f0: [Android] Reference Tools by CMake project
Summary

CommonCpp/Tools is used by every other native project,
as a proof-of-concept, try to incorporate the code as a separate
library.

https://linear.app/comm/issue/ENG-3003

Depends on D6721

Test Plan

Android build gate passes

Local dev workflow also works.
This tests that the library was correctly installed and loaded by Android:

# start keyserver and native yarn dev processes
(cd keyserver && yarn dev &)
(cd native && yarn dev &)

cd native && yarn react-native run-android

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

• jon created this revision.Feb 13 2023, 11:38 AM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptFeb 13 2023, 11:38 AM
Harbormaster returned this revision to the author for changes because remote builds failed.Feb 13 2023, 11:40 AM
Harbormaster failed remote builds in B16458: Diff 22501!
• jon updated this revision to Diff 22504.Feb 13 2023, 12:12 PM

Rebase on linting fixes

Harbormaster completed remote builds in B16460: Diff 22504.Feb 13 2023, 12:27 PM
• jon requested review of this revision.Feb 13 2023, 12:27 PM
ashoat added a comment.Feb 13 2023, 4:05 PM

This is a lot of boilerplate for each "library". Why do we need this? What does it achieve exactly? What's wrong with just compiling all of our code as a monolith, versus separating each folder into its own library?

My instinct is that we should keep the monolith until we have a reason for breaking it up, as it's clear from the amount of boilerplate here that it will be a lot to maintain. Just creating a new folder becomes a scary affair, with a bunch of ossified knowledge about magic incantations that needs to be hidden in some Notion file somewhere...

• jon added a comment.Feb 13 2023, 5:45 PM

A lot of these questions would better suited for the person who created the original structure of cpp/CommonCpp. The CMake structure largely just inherits the structure of the directories as there's a similar separation of concern.

This is a lot of boilerplate for each "library".

Yep, but it's also structure; and current best practice for CMake. Also being explicit about what is expected by the project, as well as what the project will produce.

Why do we need this?

Because our CMake hygiene is terrible, and it enables a lot of scenarios which might be beneficial (e.g. unit tests). The question is similar to "why do we need to organize code into separate files and methods". For structure and to manage complexity.

What does it achieve exactly?

It's the first step of allowing Tools to know how to build itself. So we can reference it at a higher level than I'm going to glob all over your files.

What's wrong with just compiling all of our code as a monolith

Technically, nothing. But if that was the case, we should have just a single directory native/cpp/ which contains all of our C++ code. Which I'm not actually opposed to, it would be better than our current over-structured CommonCpp

But not compiling as a single monolith does some benefits:

  • Compile times (took me 200-400s to build to this diff with gradle primed, ~30-60s to build the diff with comm-modules-native being referenced
  • Unit tests per project (which I understand is not a priority, but also wasn't an option previously)
  • Build failures are easier to remedy as the scope is smaller

My instinct is that we should keep the monolith until we have a reason for breaking it up, as it's clear from the amount of boilerplate here that it will be a lot to maintain. Just creating a new folder becomes a scary affair, with a bunch of ossified knowledge about magic incantations that needs to be hidden in some Notion file somewhere...

Trying to augment the current build is also a scary affair. CMake is pretty boilerplate heavy and personally I'm not a fan, but it's what everyone uses for C/C++ now.

with a bunch of ossified knowledge about magic incantations that needs to be hidden in some Notion file somewhere...

I tried to make the CMake as readible as possible, just kind of set up for failure since CMake is has a lot of legacy issues which will continue to make it a very opaque tool. If you're concerned about the structure of the CMake, it just reflects the complexity of the our current C++ codebase.

atul accepted this revision.Feb 14 2023, 10:35 AM
atul added inline comments.
native/android/app/build.gradle
404

Hm, is this just removing a space character? Confused why Phabricator is highlighting the line in yellow and saying:

"Moved from line 404"

This revision is now accepted and ready to land.Feb 14 2023, 10:35 AM
• jon marked an inline comment as done.Feb 14 2023, 10:42 AM
• jon added inline comments.
native/android/app/build.gradle
404

I believe that's how it's represented in git.

• jon marked an inline comment as done.Feb 14 2023, 10:44 AM
ashoat added a comment.Feb 15 2023, 7:16 AM

Happy to land this now, but let's discuss tomorrow RE ways to reduce JNI boilerplate for devs

• jon planned changes to this revision.Feb 16 2023, 10:39 AM

Going to go back to the drawing boards for this. We should really be separating out the JNI code so that it's part of the existing comm_jni_module (e.g. native/android/app/CMakeLists.txt), and the code held in native/cpp/CommonCpp can just contain non-JNI C++ code. This would allow for us to avoid doing the System.loadLibrary() call, needing to make a shared library, and linking against numerous libraries (e.g. fbjni).

Related issue: https://linear.app/comm/issue/ENG-2996

• jon updated this revision to Diff 22852.Feb 21 2023, 6:50 AM

Keep JNI code as part of comm_jni_module

This revision is now accepted and ready to land.Feb 21 2023, 6:50 AM
Harbormaster completed remote builds in B16699: Diff 22852.Feb 21 2023, 7:05 AM
• jon requested review of this revision.Feb 21 2023, 10:21 AM

going to ask for another review, as this has significantly changes since it was accepted

atul accepted this revision.Feb 27 2023, 7:26 AM
This revision is now accepted and ready to land.Feb 27 2023, 7:26 AM
• jon updated this revision to Diff 23722.Mar 14 2023, 9:31 AM

Rebase on master

atul accepted this revision.Mar 14 2023, 9:32 AM
Harbormaster completed remote builds in B17321: Diff 23722.Mar 14 2023, 9:50 AM
Closed by commit rCOMM6f883b5879f0: [Android] Reference Tools by CMake project (authored by • jon). · Explain WhyMar 20 2023, 7:45 AM
This revision was automatically updated to reflect the committed changes.
• jon added a commit: rCOMM6f883b5879f0: [Android] Reference Tools by CMake project.

Revision Contents
Changeset List

PathSize
native/
android/
app/
18 lines
6 lines
src/
main/
java/
app/
comm/
android/
1 line
cpp/
CommonCpp/
Tools/
9 lines

Diff 22504

View Options

native/android/app/CMakeLists.txt

Show All 20 Lines
type ContentProps = { type ContentProps = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
function MessageSearchModal(props: ContentProps): React.Node { function MessageSearchModal(props: ContentProps): React.Node {
const { threadInfo } = props; const { threadInfo } = props;
const [lastID, setLastID] = React.useState(); const {
const [searchResults, setSearchResults] = React.useState([]); getQuery,
const [endReached, setEndReached] = React.useState(false); setQuery,
clearQuery,
getSearchResults,
appendSearchResult,
getEndReached,
setEndReached,
} = useMessageSearchContext();
const { getQuery, setQuery, clearQuery } = useMessageSearchContext(); const loading = React.useRef(false);
const query = React.useMemo( const searchResults = React.useMemo(
() => getQuery(threadInfo.id), () => getSearchResults(threadInfo.id),
[getQuery, threadInfo.id], [getSearchResults, threadInfo.id],
); );
const appendSearchResults = React.useCallback( const endReached = React.useMemo(
() => getEndReached(threadInfo.id),
[getEndReached, threadInfo.id],
);
const appendResults = React.useCallback(
(newMessages: $ReadOnlyArray<RawMessageInfo>, end: boolean) => { (newMessages: $ReadOnlyArray<RawMessageInfo>, end: boolean) => {
setSearchResults(oldMessages => [...oldMessages, ...newMessages]); appendSearchResult(newMessages, threadInfo.id);
setEndReached(end); if (end) {
setEndReached(threadInfo.id);
}
loading.current = false;
}, },
[], [appendSearchResult, setEndReached, threadInfo.id],
); );
React.useEffect(() => {
setSearchResults([]);
setLastID(undefined);
setEndReached(false);
}, [query]);
const searchMessages = useSearchMessages(); const searchMessages = useSearchMessages();
React.useEffect( const [input, setInput] = React.useState(getQuery(threadInfo.id));
() => searchMessages(query, threadInfo.id, appendSearchResults, lastID),
[appendSearchResults, lastID, query, searchMessages, threadInfo.id],
);
const modifiedItems = useParseSearchResults(threadInfo, searchResults);
const renderItem = React.useCallback( const onPressSearch = React.useCallback(() => {
item => ( setQuery(input, threadInfo.id);
<MessageResult loading.current = true;
key={item.messageInfo.id} searchMessages(
item={item} getQuery(threadInfo.id),
threadInfo={threadInfo} threadInfo.id,
scrollable={false} appendResults,
/> undefined,
),
[threadInfo],
); );
}, [setQuery, input, searchMessages, getQuery, threadInfo.id, appendResults]);
const messages = React.useMemo( const onKeyDown = React.useCallback(
() => modifiedItems.map(item => renderItem(item)), event => {
[modifiedItems, renderItem], if (event.key === 'Enter') {
onPressSearch();
}
},
[onPressSearch],
); );
const messageContainer = React.useRef(null); const modifiedItems = useParseSearchResults(threadInfo, searchResults);
const { clearTooltip } = useTooltipContext();
const messageContainer = React.useRef(null);
const messageContainerRef = (msgContainer: ?HTMLDivElement) => { const messageContainerRef = (msgContainer: ?HTMLDivElement) => {
messageContainer.current = msgContainer; messageContainer.current = msgContainer;
messageContainer.current?.addEventListener('scroll', onScroll);
}; };
const { clearTooltip } = useTooltipContext();
const possiblyLoadMoreMessages = React.useCallback(() => { const possiblyLoadMoreMessages = React.useCallback(() => {
if (!messageContainer.current) { if (!messageContainer.current) {
return; return;
} }
const loaderTopOffset = 32; const loaderTopOffset = 32;
const { scrollTop, scrollHeight, clientHeight } = messageContainer.current; const { scrollTop, scrollHeight, clientHeight } = messageContainer.current;
if ( if (
endReached || endReached ||
loading.current ||
Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight
) { ) {
return; return;
} }
setLastID(modifiedItems ? oldestMessageID(modifiedItems) : undefined); loading.current = true;
}, [endReached, modifiedItems]); const lastID = modifiedItems ? oldestMessageID(modifiedItems) : undefined;
searchMessages(
getQuery(threadInfo.id),
threadInfo.id,
appendResults,
lastID,
);
}, [
appendResults,
endReached,
getQuery,
modifiedItems,
searchMessages,
threadInfo.id,
]);
const onScroll = React.useCallback(() => { const onScroll = React.useCallback(() => {
if (!messageContainer.current) {
return;
}
clearTooltip(); clearTooltip();
possiblyLoadMoreMessages(); possiblyLoadMoreMessages();
}, [clearTooltip, possiblyLoadMoreMessages]); }, [clearTooltip, possiblyLoadMoreMessages]);
const renderItem = React.useCallback(
item => (
<MessageResult
key={item.messageInfo.id}
item={item}
threadInfo={threadInfo}
scrollable={false}
/>
),
[threadInfo],
);
const messages = React.useMemo(
() => modifiedItems.map(item => renderItem(item)),
[modifiedItems, renderItem],
);
const footer = React.useMemo(() => { const footer = React.useMemo(() => {
if (query === '') { if (getQuery(threadInfo.id) === '') {
return ( return (
<div className={css.footer}>Your search results will appear here</div> <div className={css.footer}>Your search results will appear here</div>
); );
} }
if (!endReached) { if (!endReached) {
return ( return (
<div key="search-loader" className={css.loading}> <div key="search-loader" className={css.loading}>
<LoadingIndicator status="loading" size="medium" color="white" /> <LoadingIndicator status="loading" size="medium" color="white" />
</div> </div>
); );
} }
if (modifiedItems.length > 0) { if (modifiedItems.length > 0) {
return <div className={css.footer}>End of results</div>; return <div className={css.footer}>End of results</div>;
} }
return ( return (
<div className={css.footer}> <div className={css.footer}>
No results. Please try using different keywords to refine your search No results. Please try using different keywords to refine your search
</div> </div>
); );
}, [query, endReached, modifiedItems.length]); }, [getQuery, threadInfo.id, endReached, modifiedItems.length]);
const [input, setInput] = React.useState(query);
const onPressSearch = React.useCallback( const { uiName } = useResolvedThreadInfo(threadInfo);
() => setQuery(input, threadInfo.id), const searchPlaceholder = `Searching in ${uiName}`;
[setQuery, input, threadInfo.id], const { popModal } = useModalContext();
);
const clearQueryWrapper = React.useCallback( const clearQueryWrapper = React.useCallback(
() => clearQuery(threadInfo.id), () => clearQuery(threadInfo.id),
[clearQuery, threadInfo.id], [clearQuery, threadInfo.id],
); );
const onKeyDown = React.useCallback(
event => {
if (event.key === 'Enter') {
onPressSearch();
}
},
[onPressSearch],
);
const { uiName } = useResolvedThreadInfo(threadInfo);
const searchPlaceholder = `Searching in ${uiName}`;
const { popModal } = useModalContext();
return ( return (
<Modal name="Search Message" onClose={popModal} size="large"> <Modal name="Search Message" onClose={popModal} size="large">
<div className={css.container}> <div className={css.container}>
<div className={css.header}> <div className={css.header}>
<Search <Search
onChangeText={setInput} onChangeText={setInput}
searchText={input} searchText={input}
placeholder={searchPlaceholder} placeholder={searchPlaceholder}
onClearText={clearQueryWrapper} onClearText={clearQueryWrapper}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
/> />
<Button <Button
onClick={onPressSearch} onClick={onPressSearch}
variant="filled" variant="filled"
className={css.button} className={css.button}
> >
Search Search
</Button> </Button>
</div> </div>
<div className={css.content} ref={messageContainerRef}> <div
className={css.content}
ref={messageContainerRef}
onScroll={onScroll}
>
{messages} {messages}
{footer} {footer}
</div> </div>
</div> </div>
</Modal> </Modal>
); );
} }
Show All 10 Lines
View Options

native/android/app/build.gradle

Show All 20 Lines
type ContentProps = { type ContentProps = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
function MessageSearchModal(props: ContentProps): React.Node { function MessageSearchModal(props: ContentProps): React.Node {
const { threadInfo } = props; const { threadInfo } = props;
const [lastID, setLastID] = React.useState(); const {
const [searchResults, setSearchResults] = React.useState([]); getQuery,
const [endReached, setEndReached] = React.useState(false); setQuery,
clearQuery,
getSearchResults,
appendSearchResult,
getEndReached,
setEndReached,
} = useMessageSearchContext();
const { getQuery, setQuery, clearQuery } = useMessageSearchContext(); const loading = React.useRef(false);
const query = React.useMemo( const searchResults = React.useMemo(
() => getQuery(threadInfo.id), () => getSearchResults(threadInfo.id),
[getQuery, threadInfo.id], [getSearchResults, threadInfo.id],
); );
const appendSearchResults = React.useCallback( const endReached = React.useMemo(
() => getEndReached(threadInfo.id),
[getEndReached, threadInfo.id],
);
const appendResults = React.useCallback(
(newMessages: $ReadOnlyArray<RawMessageInfo>, end: boolean) => { (newMessages: $ReadOnlyArray<RawMessageInfo>, end: boolean) => {
setSearchResults(oldMessages => [...oldMessages, ...newMessages]); appendSearchResult(newMessages, threadInfo.id);
setEndReached(end); if (end) {
setEndReached(threadInfo.id);
}
loading.current = false;
}, },
[], [appendSearchResult, setEndReached, threadInfo.id],
); );
React.useEffect(() => {
setSearchResults([]);
setLastID(undefined);
setEndReached(false);
}, [query]);
const searchMessages = useSearchMessages(); const searchMessages = useSearchMessages();
React.useEffect( const [input, setInput] = React.useState(getQuery(threadInfo.id));
() => searchMessages(query, threadInfo.id, appendSearchResults, lastID),
[appendSearchResults, lastID, query, searchMessages, threadInfo.id],
);
const modifiedItems = useParseSearchResults(threadInfo, searchResults);
const renderItem = React.useCallback( const onPressSearch = React.useCallback(() => {
item => ( setQuery(input, threadInfo.id);
<MessageResult loading.current = true;
key={item.messageInfo.id} searchMessages(
item={item} getQuery(threadInfo.id),
threadInfo={threadInfo} threadInfo.id,
scrollable={false} appendResults,
/> undefined,
),
[threadInfo],
); );
}, [setQuery, input, searchMessages, getQuery, threadInfo.id, appendResults]);
const messages = React.useMemo( const onKeyDown = React.useCallback(
() => modifiedItems.map(item => renderItem(item)), event => {
[modifiedItems, renderItem], if (event.key === 'Enter') {
onPressSearch();
}
},
[onPressSearch],
); );
const messageContainer = React.useRef(null); const modifiedItems = useParseSearchResults(threadInfo, searchResults);
const { clearTooltip } = useTooltipContext();
const messageContainer = React.useRef(null);
const messageContainerRef = (msgContainer: ?HTMLDivElement) => { const messageContainerRef = (msgContainer: ?HTMLDivElement) => {
messageContainer.current = msgContainer; messageContainer.current = msgContainer;
messageContainer.current?.addEventListener('scroll', onScroll);
}; };
const { clearTooltip } = useTooltipContext();
const possiblyLoadMoreMessages = React.useCallback(() => { const possiblyLoadMoreMessages = React.useCallback(() => {
if (!messageContainer.current) { if (!messageContainer.current) {
return; return;
} }
const loaderTopOffset = 32; const loaderTopOffset = 32;
const { scrollTop, scrollHeight, clientHeight } = messageContainer.current; const { scrollTop, scrollHeight, clientHeight } = messageContainer.current;
if ( if (
endReached || endReached ||
loading.current ||
Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight
) { ) {
return; return;
} }
setLastID(modifiedItems ? oldestMessageID(modifiedItems) : undefined); loading.current = true;
}, [endReached, modifiedItems]); const lastID = modifiedItems ? oldestMessageID(modifiedItems) : undefined;
searchMessages(
getQuery(threadInfo.id),
threadInfo.id,
appendResults,
lastID,
);
}, [
appendResults,
endReached,
getQuery,
modifiedItems,
searchMessages,
threadInfo.id,
]);
const onScroll = React.useCallback(() => { const onScroll = React.useCallback(() => {
if (!messageContainer.current) {
return;
}
clearTooltip(); clearTooltip();
possiblyLoadMoreMessages(); possiblyLoadMoreMessages();
}, [clearTooltip, possiblyLoadMoreMessages]); }, [clearTooltip, possiblyLoadMoreMessages]);
const renderItem = React.useCallback(
item => (
<MessageResult
key={item.messageInfo.id}
item={item}
threadInfo={threadInfo}
scrollable={false}
/>
),
[threadInfo],
);
const messages = React.useMemo(
() => modifiedItems.map(item => renderItem(item)),
[modifiedItems, renderItem],
);
const footer = React.useMemo(() => { const footer = React.useMemo(() => {
if (query === '') { if (getQuery(threadInfo.id) === '') {
return ( return (
<div className={css.footer}>Your search results will appear here</div> <div className={css.footer}>Your search results will appear here</div>
); );
} }
if (!endReached) { if (!endReached) {
return ( return (
<div key="search-loader" className={css.loading}> <div key="search-loader" className={css.loading}>
<LoadingIndicator status="loading" size="medium" color="white" /> <LoadingIndicator status="loading" size="medium" color="white" />
</div> </div>
); );
} }
if (modifiedItems.length > 0) { if (modifiedItems.length > 0) {
return <div className={css.footer}>End of results</div>; return <div className={css.footer}>End of results</div>;
} }
return ( return (
<div className={css.footer}> <div className={css.footer}>
No results. Please try using different keywords to refine your search No results. Please try using different keywords to refine your search
</div> </div>
); );
}, [query, endReached, modifiedItems.length]); }, [getQuery, threadInfo.id, endReached, modifiedItems.length]);
const [input, setInput] = React.useState(query);
const onPressSearch = React.useCallback( const { uiName } = useResolvedThreadInfo(threadInfo);
() => setQuery(input, threadInfo.id), const searchPlaceholder = `Searching in ${uiName}`;
[setQuery, input, threadInfo.id], const { popModal } = useModalContext();
);
const clearQueryWrapper = React.useCallback( const clearQueryWrapper = React.useCallback(
() => clearQuery(threadInfo.id), () => clearQuery(threadInfo.id),
[clearQuery, threadInfo.id], [clearQuery, threadInfo.id],
); );
const onKeyDown = React.useCallback(
event => {
if (event.key === 'Enter') {
onPressSearch();
}
},
[onPressSearch],
);
const { uiName } = useResolvedThreadInfo(threadInfo);
const searchPlaceholder = `Searching in ${uiName}`;
const { popModal } = useModalContext();
return ( return (
<Modal name="Search Message" onClose={popModal} size="large"> <Modal name="Search Message" onClose={popModal} size="large">
<div className={css.container}> <div className={css.container}>
<div className={css.header}> <div className={css.header}>
<Search <Search
onChangeText={setInput} onChangeText={setInput}
searchText={input} searchText={input}
placeholder={searchPlaceholder} placeholder={searchPlaceholder}
onClearText={clearQueryWrapper} onClearText={clearQueryWrapper}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
/> />
<Button <Button
onClick={onPressSearch} onClick={onPressSearch}
variant="filled" variant="filled"
className={css.button} className={css.button}
> >
Search Search
</Button> </Button>
</div> </div>
<div className={css.content} ref={messageContainerRef}> <div
className={css.content}
ref={messageContainerRef}
onScroll={onScroll}
>
{messages} {messages}
{footer} {footer}
</div> </div>
</div> </div>
</Modal> </Modal>
); );
} }
Show All 10 Lines
View Options

native/android/app/src/main/java/app/comm/android/MainApplication.java

Show All 20 Lines
type ContentProps = { type ContentProps = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
function MessageSearchModal(props: ContentProps): React.Node { function MessageSearchModal(props: ContentProps): React.Node {
const { threadInfo } = props; const { threadInfo } = props;
const [lastID, setLastID] = React.useState(); const {
const [searchResults, setSearchResults] = React.useState([]); getQuery,
const [endReached, setEndReached] = React.useState(false); setQuery,
clearQuery,
getSearchResults,
appendSearchResult,
getEndReached,
setEndReached,
} = useMessageSearchContext();
const { getQuery, setQuery, clearQuery } = useMessageSearchContext(); const loading = React.useRef(false);
const query = React.useMemo( const searchResults = React.useMemo(
() => getQuery(threadInfo.id), () => getSearchResults(threadInfo.id),
[getQuery, threadInfo.id], [getSearchResults, threadInfo.id],
); );
const appendSearchResults = React.useCallback( const endReached = React.useMemo(
() => getEndReached(threadInfo.id),
[getEndReached, threadInfo.id],
);
const appendResults = React.useCallback(
(newMessages: $ReadOnlyArray<RawMessageInfo>, end: boolean) => { (newMessages: $ReadOnlyArray<RawMessageInfo>, end: boolean) => {
setSearchResults(oldMessages => [...oldMessages, ...newMessages]); appendSearchResult(newMessages, threadInfo.id);
setEndReached(end); if (end) {
setEndReached(threadInfo.id);
}
loading.current = false;
}, },
[], [appendSearchResult, setEndReached, threadInfo.id],
); );
React.useEffect(() => {
setSearchResults([]);
setLastID(undefined);
setEndReached(false);
}, [query]);
const searchMessages = useSearchMessages(); const searchMessages = useSearchMessages();
React.useEffect( const [input, setInput] = React.useState(getQuery(threadInfo.id));
() => searchMessages(query, threadInfo.id, appendSearchResults, lastID),
[appendSearchResults, lastID, query, searchMessages, threadInfo.id],
);
const modifiedItems = useParseSearchResults(threadInfo, searchResults);
const renderItem = React.useCallback( const onPressSearch = React.useCallback(() => {
item => ( setQuery(input, threadInfo.id);
<MessageResult loading.current = true;
key={item.messageInfo.id} searchMessages(
item={item} getQuery(threadInfo.id),
threadInfo={threadInfo} threadInfo.id,
scrollable={false} appendResults,
/> undefined,
),
[threadInfo],
); );
}, [setQuery, input, searchMessages, getQuery, threadInfo.id, appendResults]);
const messages = React.useMemo( const onKeyDown = React.useCallback(
() => modifiedItems.map(item => renderItem(item)), event => {
[modifiedItems, renderItem], if (event.key === 'Enter') {
onPressSearch();
}
},
[onPressSearch],
); );
const messageContainer = React.useRef(null); const modifiedItems = useParseSearchResults(threadInfo, searchResults);
const { clearTooltip } = useTooltipContext();
const messageContainer = React.useRef(null);
const messageContainerRef = (msgContainer: ?HTMLDivElement) => { const messageContainerRef = (msgContainer: ?HTMLDivElement) => {
messageContainer.current = msgContainer; messageContainer.current = msgContainer;
messageContainer.current?.addEventListener('scroll', onScroll);
}; };
const { clearTooltip } = useTooltipContext();
const possiblyLoadMoreMessages = React.useCallback(() => { const possiblyLoadMoreMessages = React.useCallback(() => {
if (!messageContainer.current) { if (!messageContainer.current) {
return; return;
} }
const loaderTopOffset = 32; const loaderTopOffset = 32;
const { scrollTop, scrollHeight, clientHeight } = messageContainer.current; const { scrollTop, scrollHeight, clientHeight } = messageContainer.current;
if ( if (
endReached || endReached ||
loading.current ||
Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight
) { ) {
return; return;
} }
setLastID(modifiedItems ? oldestMessageID(modifiedItems) : undefined); loading.current = true;
}, [endReached, modifiedItems]); const lastID = modifiedItems ? oldestMessageID(modifiedItems) : undefined;
searchMessages(
getQuery(threadInfo.id),
threadInfo.id,
appendResults,
lastID,
);
}, [
appendResults,
endReached,
getQuery,
modifiedItems,
searchMessages,
threadInfo.id,
]);
const onScroll = React.useCallback(() => { const onScroll = React.useCallback(() => {
if (!messageContainer.current) {
return;
}
clearTooltip(); clearTooltip();
possiblyLoadMoreMessages(); possiblyLoadMoreMessages();
}, [clearTooltip, possiblyLoadMoreMessages]); }, [clearTooltip, possiblyLoadMoreMessages]);
const renderItem = React.useCallback(
item => (
<MessageResult
key={item.messageInfo.id}
item={item}
threadInfo={threadInfo}
scrollable={false}
/>
),
[threadInfo],
);
const messages = React.useMemo(
() => modifiedItems.map(item => renderItem(item)),
[modifiedItems, renderItem],
);
const footer = React.useMemo(() => { const footer = React.useMemo(() => {
if (query === '') { if (getQuery(threadInfo.id) === '') {
return ( return (
<div className={css.footer}>Your search results will appear here</div> <div className={css.footer}>Your search results will appear here</div>
); );
} }
if (!endReached) { if (!endReached) {
return ( return (
<div key="search-loader" className={css.loading}> <div key="search-loader" className={css.loading}>
<LoadingIndicator status="loading" size="medium" color="white" /> <LoadingIndicator status="loading" size="medium" color="white" />
</div> </div>
); );
} }
if (modifiedItems.length > 0) { if (modifiedItems.length > 0) {
return <div className={css.footer}>End of results</div>; return <div className={css.footer}>End of results</div>;
} }
return ( return (
<div className={css.footer}> <div className={css.footer}>
No results. Please try using different keywords to refine your search No results. Please try using different keywords to refine your search
</div> </div>
); );
}, [query, endReached, modifiedItems.length]); }, [getQuery, threadInfo.id, endReached, modifiedItems.length]);
const [input, setInput] = React.useState(query);
const onPressSearch = React.useCallback( const { uiName } = useResolvedThreadInfo(threadInfo);
() => setQuery(input, threadInfo.id), const searchPlaceholder = `Searching in ${uiName}`;
[setQuery, input, threadInfo.id], const { popModal } = useModalContext();
);
const clearQueryWrapper = React.useCallback( const clearQueryWrapper = React.useCallback(
() => clearQuery(threadInfo.id), () => clearQuery(threadInfo.id),
[clearQuery, threadInfo.id], [clearQuery, threadInfo.id],
); );
const onKeyDown = React.useCallback(
event => {
if (event.key === 'Enter') {
onPressSearch();
}
},
[onPressSearch],
);
const { uiName } = useResolvedThreadInfo(threadInfo);
const searchPlaceholder = `Searching in ${uiName}`;
const { popModal } = useModalContext();
return ( return (
<Modal name="Search Message" onClose={popModal} size="large"> <Modal name="Search Message" onClose={popModal} size="large">
<div className={css.container}> <div className={css.container}>
<div className={css.header}> <div className={css.header}>
<Search <Search
onChangeText={setInput} onChangeText={setInput}
searchText={input} searchText={input}
placeholder={searchPlaceholder} placeholder={searchPlaceholder}
onClearText={clearQueryWrapper} onClearText={clearQueryWrapper}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
/> />
<Button <Button
onClick={onPressSearch} onClick={onPressSearch}
variant="filled" variant="filled"
className={css.button} className={css.button}
> >
Search Search
</Button> </Button>
</div> </div>
<div className={css.content} ref={messageContainerRef}> <div
className={css.content}
ref={messageContainerRef}
onScroll={onScroll}
>
{messages} {messages}
{footer} {footer}
</div> </div>
</div> </div>
</Modal> </Modal>
); );
} }
Show All 10 Lines
View Options

native/cpp/CommonCpp/Tools/CMakeLists.txt

Show All 20 Lines
type ContentProps = { type ContentProps = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
function MessageSearchModal(props: ContentProps): React.Node { function MessageSearchModal(props: ContentProps): React.Node {
const { threadInfo } = props; const { threadInfo } = props;
const [lastID, setLastID] = React.useState(); const {
const [searchResults, setSearchResults] = React.useState([]); getQuery,
const [endReached, setEndReached] = React.useState(false); setQuery,
clearQuery,
getSearchResults,
appendSearchResult,
getEndReached,
setEndReached,
} = useMessageSearchContext();
const { getQuery, setQuery, clearQuery } = useMessageSearchContext(); const loading = React.useRef(false);
const query = React.useMemo( const searchResults = React.useMemo(
() => getQuery(threadInfo.id), () => getSearchResults(threadInfo.id),
[getQuery, threadInfo.id], [getSearchResults, threadInfo.id],
); );
const appendSearchResults = React.useCallback( const endReached = React.useMemo(
() => getEndReached(threadInfo.id),
[getEndReached, threadInfo.id],
);
const appendResults = React.useCallback(
(newMessages: $ReadOnlyArray<RawMessageInfo>, end: boolean) => { (newMessages: $ReadOnlyArray<RawMessageInfo>, end: boolean) => {
setSearchResults(oldMessages => [...oldMessages, ...newMessages]); appendSearchResult(newMessages, threadInfo.id);
setEndReached(end); if (end) {
setEndReached(threadInfo.id);
}
loading.current = false;
}, },
[], [appendSearchResult, setEndReached, threadInfo.id],
); );
React.useEffect(() => {
setSearchResults([]);
setLastID(undefined);
setEndReached(false);
}, [query]);
const searchMessages = useSearchMessages(); const searchMessages = useSearchMessages();
React.useEffect( const [input, setInput] = React.useState(getQuery(threadInfo.id));
() => searchMessages(query, threadInfo.id, appendSearchResults, lastID),
[appendSearchResults, lastID, query, searchMessages, threadInfo.id],
);
const modifiedItems = useParseSearchResults(threadInfo, searchResults);
const renderItem = React.useCallback( const onPressSearch = React.useCallback(() => {
item => ( setQuery(input, threadInfo.id);
<MessageResult loading.current = true;
key={item.messageInfo.id} searchMessages(
item={item} getQuery(threadInfo.id),
threadInfo={threadInfo} threadInfo.id,
scrollable={false} appendResults,
/> undefined,
),
[threadInfo],
); );
}, [setQuery, input, searchMessages, getQuery, threadInfo.id, appendResults]);
const messages = React.useMemo( const onKeyDown = React.useCallback(
() => modifiedItems.map(item => renderItem(item)), event => {
[modifiedItems, renderItem], if (event.key === 'Enter') {
onPressSearch();
}
},
[onPressSearch],
); );
const messageContainer = React.useRef(null); const modifiedItems = useParseSearchResults(threadInfo, searchResults);
const { clearTooltip } = useTooltipContext();
const messageContainer = React.useRef(null);
const messageContainerRef = (msgContainer: ?HTMLDivElement) => { const messageContainerRef = (msgContainer: ?HTMLDivElement) => {
messageContainer.current = msgContainer; messageContainer.current = msgContainer;
messageContainer.current?.addEventListener('scroll', onScroll);
}; };
const { clearTooltip } = useTooltipContext();
const possiblyLoadMoreMessages = React.useCallback(() => { const possiblyLoadMoreMessages = React.useCallback(() => {
if (!messageContainer.current) { if (!messageContainer.current) {
return; return;
} }
const loaderTopOffset = 32; const loaderTopOffset = 32;
const { scrollTop, scrollHeight, clientHeight } = messageContainer.current; const { scrollTop, scrollHeight, clientHeight } = messageContainer.current;
if ( if (
endReached || endReached ||
loading.current ||
Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight Math.abs(scrollTop) + clientHeight + loaderTopOffset < scrollHeight
) { ) {
return; return;
} }
setLastID(modifiedItems ? oldestMessageID(modifiedItems) : undefined); loading.current = true;
}, [endReached, modifiedItems]); const lastID = modifiedItems ? oldestMessageID(modifiedItems) : undefined;
searchMessages(
getQuery(threadInfo.id),
threadInfo.id,
appendResults,
lastID,
);
}, [
appendResults,
endReached,
getQuery,
modifiedItems,
searchMessages,
threadInfo.id,
]);
const onScroll = React.useCallback(() => { const onScroll = React.useCallback(() => {
if (!messageContainer.current) {
return;
}
clearTooltip(); clearTooltip();
possiblyLoadMoreMessages(); possiblyLoadMoreMessages();
}, [clearTooltip, possiblyLoadMoreMessages]); }, [clearTooltip, possiblyLoadMoreMessages]);
const renderItem = React.useCallback(
item => (
<MessageResult
key={item.messageInfo.id}
item={item}
threadInfo={threadInfo}
scrollable={false}
/>
),
[threadInfo],
);
const messages = React.useMemo(
() => modifiedItems.map(item => renderItem(item)),
[modifiedItems, renderItem],
);
const footer = React.useMemo(() => { const footer = React.useMemo(() => {
if (query === '') { if (getQuery(threadInfo.id) === '') {
return ( return (
<div className={css.footer}>Your search results will appear here</div> <div className={css.footer}>Your search results will appear here</div>
); );
} }
if (!endReached) { if (!endReached) {
return ( return (
<div key="search-loader" className={css.loading}> <div key="search-loader" className={css.loading}>
<LoadingIndicator status="loading" size="medium" color="white" /> <LoadingIndicator status="loading" size="medium" color="white" />
</div> </div>
); );
} }
if (modifiedItems.length > 0) { if (modifiedItems.length > 0) {
return <div className={css.footer}>End of results</div>; return <div className={css.footer}>End of results</div>;
} }
return ( return (
<div className={css.footer}> <div className={css.footer}>
No results. Please try using different keywords to refine your search No results. Please try using different keywords to refine your search
</div> </div>
); );
}, [query, endReached, modifiedItems.length]); }, [getQuery, threadInfo.id, endReached, modifiedItems.length]);
const [input, setInput] = React.useState(query);
const onPressSearch = React.useCallback( const { uiName } = useResolvedThreadInfo(threadInfo);
() => setQuery(input, threadInfo.id), const searchPlaceholder = `Searching in ${uiName}`;
[setQuery, input, threadInfo.id], const { popModal } = useModalContext();
);
const clearQueryWrapper = React.useCallback( const clearQueryWrapper = React.useCallback(
() => clearQuery(threadInfo.id), () => clearQuery(threadInfo.id),
[clearQuery, threadInfo.id], [clearQuery, threadInfo.id],
); );
const onKeyDown = React.useCallback(
event => {
if (event.key === 'Enter') {
onPressSearch();
}
},
[onPressSearch],
);
const { uiName } = useResolvedThreadInfo(threadInfo);
const searchPlaceholder = `Searching in ${uiName}`;
const { popModal } = useModalContext();
return ( return (
<Modal name="Search Message" onClose={popModal} size="large"> <Modal name="Search Message" onClose={popModal} size="large">
<div className={css.container}> <div className={css.container}>
<div className={css.header}> <div className={css.header}>
<Search <Search
onChangeText={setInput} onChangeText={setInput}
searchText={input} searchText={input}
placeholder={searchPlaceholder} placeholder={searchPlaceholder}
onClearText={clearQueryWrapper} onClearText={clearQueryWrapper}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
/> />
<Button <Button
onClick={onPressSearch} onClick={onPressSearch}
variant="filled" variant="filled"
className={css.button} className={css.button}
> >
Search Search
</Button> </Button>
</div> </div>
<div className={css.content} ref={messageContainerRef}> <div
className={css.content}
ref={messageContainerRef}
onScroll={onScroll}
>
{messages} {messages}
{footer} {footer}
</div> </div>
</div> </div>
</Modal> </Modal>
); );
} }
Show All 10 Lines