diff --git a/src/components/pages/discover/search.js b/src/components/pages/discover/search.js index 5c380cb..f617c95 100644 --- a/src/components/pages/discover/search.js +++ b/src/components/pages/discover/search.js @@ -125,7 +125,7 @@ const SearchJsx = ({navigation}) => { ); @@ -133,7 +133,7 @@ const SearchJsx = ({navigation}) => { ); @@ -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 + ? + No results! + + : children; + const AccountListJsx = (props) => { return ( - - <> - { - props.data.map(item => { - return ( - - - { item.acct } - - - { item.display_name } - - - ); - }) - } - - <> - { props.data.length == props.offset - ? - - - Show more? - - - - : <> - } - - + + + <> + { + props.results.map(item => { + return ( + + + { item.acct } + + + { item.display_name } + + + ); + }) + } + + <> + { props.results.length == props.offset + ? + + + Show more? + + + + : <> + } + + + ); }; const HashtagListJsx = (props) => { return ( - - <> - { - props.data.map((item, i) => { - return ( - - - #{ item.name } - - - ); - }) - } - - <> - { props.data.length == props.offset - ? - - - Show more? - - - - :<> - } - - + + + <> + { + props.results.map((item, i) => { + return ( + + + #{ item.name } + + + ); + }) + } + + <> + { props.results.length == props.offset + ? + + + Show more? + + + + :<> + } + + + ); } const SCREEN_WIDTH = Dimensions.get("window").width; +const SCREEN_HEIGHT = Dimensions.get("window").height; const styles = { form: { container: { @@ -306,44 +319,59 @@ const styles = { backgroundColor: "white", padding: 20, }, + input: { flexGrow: 1, padding: 10, fontSize: 17, color: "#888" }, + submit: { padding: 20, } }, + label: { padding: 10, fontSize: 15, }, + searchList: { padding: 0 }, + searchResultContainer: { display: "flex", flexDirection: "row", padding: 5, paddingLeft: 20, }, + + noResultsContainer: { + paddingTop: SCREEN_HEIGHT / 4, + alignItems: "center", + }, + queried: { display: "flex", justifyContent: "center", }, + username: { fontWeight: "bold" }, displayName: { color: "#888" }, + thumbnail: { width: 50, height: 50, borderRadius: 25, marginRight: 10, }, + showMore: { container: { justifyContent: "center", alignItems: "center" }, + button: { borderWidth: 1, borderColor: "#888",