Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Began working on Search functionality #2

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
[FEAT]: Added search bar in Search screen
[CHORE]: Added packagelock.json to .gitignore
rdrnt committed Feb 24, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit db1b06985da63465a21ac7c99e640d9950839ad7
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -37,6 +37,7 @@ node_modules/
npm-debug.log
yarn-error.log
yarn.lock
package-lock.json

# BUCK
buck-out/
44 changes: 32 additions & 12 deletions app/screens/Search.js
Original file line number Diff line number Diff line change
@@ -8,8 +8,10 @@ import {
View,
ScrollView
} from 'react-native';
import SearchBar from 'react-native-search-bar'

import { searchPost } from '../helpers/api';
import { searchPost , getItems} from '../helpers/api';
import {posts} from '../reducers/items';

export default class Search extends React.Component {
constructor(props) {
@@ -18,26 +20,44 @@ export default class Search extends React.Component {
this.state = {
searchResults: [],
};

this.onSearchTextChanged = this.onSearchTextChanged.bind(this);
}

componentDidMount() {
searchPost({}, 'dog').then(responseJson => {
onSearchTextChanged(searchBarText) {
// There's no point in us searching for nothing
// If they don't have anything in the search box, dont bother showing previous search results
// Of course this can always be changed, I don't know if thats proper functionality :p
if (searchBarText.length !== 0) {
searchPost({}, searchBarText).then(responseJson => {
this.setState({
searchResults: responseJson.hits,
});
});
} else if (searchBarText.length === 0) {
this.setState({
searchResults: responseJson.hits,
searchResults: [],
});
});
}
}

render() {
const { searchResults } = this.state;
return (
<ScrollView style={styles.searchContainer}>
<View>
{searchResults.map(result => (
<Text key={result.title}>{result.title}</Text>
))}
</View>
</ScrollView>
<View style={commonStyles.flex}>
<SearchBar
ref='SearchBar'
placeholder='Search'
onChangeText={this.onSearchTextChanged}
/>
<ScrollView style={styles.searchContainer}>
<View>
{searchResults.map(result => (
<Text key={result.title}>{result.title}</Text>
))}
</View>
</ScrollView>
</View>
);
}
}
Loading