nat
/
resin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add 'no results' message to search.js. Closes #37

This commit is contained in:
Nat 2022-03-31 06:04:10 -07:00
parent 1aebc9f770
commit d0e8e0e64b
1 changed files with 97 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
src/components/pages/discover/search.js
View File

@ -125,7 +125,7 @@ const SearchJsx = ({navigation}) => {
<AccountListJsx <AccountListJsx
callback = { navCallbackFactory(navigation, "ViewProfile") } callback = { navCallbackFactory(navigation, "ViewProfile") }
onShowMore = { _handleShowMoreAccounts } onShowMore = { _handleShowMoreAccounts }
data = { state.results.accounts } results = { state.results.accounts }
offset = { state.accountOffset } /> offset = { state.accountOffset } />
); );
@ -133,7 +133,7 @@ const SearchJsx = ({navigation}) => {
<HashtagListJsx <HashtagListJsx
callback = { navCallbackFactory(navigation, "ViewHashtag") } callback = { navCallbackFactory(navigation, "ViewHashtag") }
onShowMore = { _handleShowMoreHashtags } onShowMore = { _handleShowMoreHashtags }
data = { state.results.hashtags } results = { state.results.hashtags }
offset = { state.hashtagOffset } /> offset = { state.hashtagOffset } />
); );
@ -220,84 +220,97 @@ const SearchItemJsx = (props) => {
); );
}; };
// Display message noting when no results turned up. This component wraps
// AccountListJsx and HashtagListJsx.
const SearchListContainerJsx = ({ results, children }) => results.length == 0
? <View style = { styles.noResultsContainer }>
<Text>No results!</Text>
</View>
: children;
const AccountListJsx = (props) => { const AccountListJsx = (props) => {
return ( return (
<View style = { styles.searchList }> <SearchListContainerJsx results = { props.results }>
<> <View style = { styles.searchList }>
{ <>
props.data.map(item => { {
return ( props.results.map(item => {
<SearchItemJsx return (
key = { item.id } <SearchItemJsx
thumbnail = { { uri: item.avatar } } key = { item.id }
callback = { props.callback } thumbnail = { { uri: item.avatar } }
navParams = { { profile: item } }> callback = { props.callback }
<Text style = { styles.username }> navParams = { { profile: item } }>
{ item.acct } <Text style = { styles.username }>
</Text> { item.acct }
<Text style = { styles.displayName }> </Text>
{ item.display_name } <Text style = { styles.displayName }>
</Text> { item.display_name }
</SearchItemJsx> </Text>
); </SearchItemJsx>
}) );
} })
</> }
<> </>
{ props.data.length == props.offset <>
? <View style = { styles.showMore.container }> { props.results.length == props.offset
<TouchableOpacity ? <View style = { styles.showMore.container }>
onPress = { props.onShowMore }> <TouchableOpacity
<View style = { styles.showMore.button }> onPress = { props.onShowMore }>
<Text>Show more?</Text> <View style = { styles.showMore.button }>
</View> <Text>Show more?</Text>
</TouchableOpacity> </View>
</View> </TouchableOpacity>
: <></> </View>
} : <></>
</> }
</View> </>
</View>
</SearchListContainerJsx>
); );
}; };
const HashtagListJsx = (props) => { const HashtagListJsx = (props) => {
return ( return (
<View style = { styles.searchList }> <SearchListContainerJsx results = { props.results }>
<> <View style = { styles.searchList }>
{ <>
props.data.map((item, i) => { {
return ( props.results.map((item, i) => {
<SearchItemJsx return (
key = { i } <SearchItemJsx
thumbnail = { require("assets/hashtag.png") } key = { i }
callback = { props.callback } thumbnail = { require("assets/hashtag.png") }
navParams = { { tag: item } }> callback = { props.callback }
<Text style = { styles.username }> navParams = { { tag: item } }>
#{ item.name } <Text style = { styles.username }>
</Text> #{ item.name }
</SearchItemJsx> </Text>
); </SearchItemJsx>
}) );
} })
</> }
<> </>
{ props.data.length == props.offset <>
? <View style = { styles.showMore.container }> { props.results.length == props.offset
<TouchableOpacity ? <View style = { styles.showMore.container }>
onPress = { props.onShowMore }> <TouchableOpacity
<View style = { styles.showMore.button }> onPress = { props.onShowMore }>
<Text>Show more?</Text> <View style = { styles.showMore.button }>
</View> <Text>Show more?</Text>
</TouchableOpacity> </View>
</View> </TouchableOpacity>
:<></> </View>
} :<></>
</> }
</View> </>
</View>
</SearchListContainerJsx>
); );
} }
const SCREEN_WIDTH = Dimensions.get("window").width; const SCREEN_WIDTH = Dimensions.get("window").width;
const SCREEN_HEIGHT = Dimensions.get("window").height;
const styles = { const styles = {
form: { form: {
container: { container: {
@ -306,44 +319,59 @@ const styles = {
backgroundColor: "white", backgroundColor: "white",
padding: 20, padding: 20,
}, },
input: { input: {
flexGrow: 1, flexGrow: 1,
padding: 10, padding: 10,
fontSize: 17, fontSize: 17,
color: "#888" color: "#888"
}, },
submit: { submit: {
padding: 20, padding: 20,
} }
}, },
label: { label: {
padding: 10, padding: 10,
fontSize: 15, fontSize: 15,
}, },
searchList: { padding: 0 }, searchList: { padding: 0 },
searchResultContainer: { searchResultContainer: {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
padding: 5, padding: 5,
paddingLeft: 20, paddingLeft: 20,
}, },
noResultsContainer: {
paddingTop: SCREEN_HEIGHT / 4,
alignItems: "center",
},
queried: { queried: {
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
}, },
username: { fontWeight: "bold" }, username: { fontWeight: "bold" },
displayName: { color: "#888" }, displayName: { color: "#888" },
thumbnail: { thumbnail: {
width: 50, width: 50,
height: 50, height: 50,
borderRadius: 25, borderRadius: 25,
marginRight: 10, marginRight: 10,
}, },
showMore: { showMore: {
container: { container: {
justifyContent: "center", justifyContent: "center",
alignItems: "center" alignItems: "center"
}, },
button: { button: {
borderWidth: 1, borderWidth: 1,
borderColor: "#888", borderColor: "#888",