Search unsplash

README.md

@@ -11,13 +11,14 @@ This project from mobile software development class.
 - [ ] Multiplatform
   - [x] Android
   - [ ] iOS
-- [ ] Find background image
+- [x] Find background image
 
 ### Final presentation
 - [ ] Files CRUD
 - [ ] Slide layout
   - [ ] Corners
 - [ ] Change background image
+  - [ ] Show indicator when image is loading
 - [ ] Add slide
 - [ ] Slide editing
   - [ ] Mobile (small screen) UI for text input

components/App/view.js

@@ -7,11 +7,13 @@ import React, {
 import FileList from '../FileList';
 import BackStack from '../BackStack';
 import Editor from '../Editor';
+import ImagePicker from '../ImagePicker';
 
 export default class App extends Component {
 	static routes = {
 		FileList: FileList,
 		Editor: Editor,
+		ImagePicker: ImagePicker,
 	};
 
 	componentDidMount(){

components/Editor/view.js

@@ -90,10 +90,10 @@ export default class Editor extends Component {
 
 	_onActionSelected = (pos) => {
 		switch(pos){
-		case 3:
-			// this.props.navigator.push({name: 'ImagePicker', index: this.props.index + 1, file: data});
+		case 2:
+			this.props.navigator.push({name: 'ImagePicker', index: this.props.index + 1});
 			break;
-		case 4:
+		case 3:
 			this.setState({preview: true});
 			break;
 		}

components/ImagePicker/package.json

@@ -0,0 +1,5 @@
+{
+	"name": "imagepicker",
+	"private": true,
+	"main": "view.js"
+}

components/ImagePicker/view.js

@@ -0,0 +1,115 @@
+import React, {
+	Component,
+	StyleSheet,
+	TextInput,
+	Text,
+	View,
+	Image,
+	ScrollView,
+	TouchableHighlight
+} from 'react-native';
+import GridView from 'react-native-grid-view';
+import Unsplash from '../unsplash';
+
+var styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	gallery: {
+		width: 200,
+		height: 200,
+		padding: 5,
+	},
+	search: {
+		elevation: 5,
+	},
+	scroll: {
+		backgroundColor: '#424242',
+	},
+	credit: {
+		color: '#ffffff',
+		textShadowColor: '#222222',
+		textShadowOffset: {height: 1, width: 0},
+		fontSize: 8
+	},
+});
+
+export default class ImagePicker extends Component {
+	state = {
+		query: '',
+		images: [],
+		end: false,
+		page: 1,
+	};
+	loading = false;
+
+	render(){
+		return (
+			<View style={styles.container}>
+				<TextInput
+					style={styles.search}
+					value={this.state.query}
+					onChangeText={this.onQueryChange}
+					onSubmitEditing={this.onSearch}
+					placeholder="Search Unsplash. Use comma to separate terms" />
+				<GridView
+					style={styles.scroll}
+					items={this.state.images}
+					itemsPerRow={3}
+					renderItem={this.renderItem}
+					onEndReached={this.state.end ? null : this.loadMore}
+					/>
+			</View>
+		);
+	}
+
+	renderItem = (item) => {
+		return (
+			<TouchableHighlight onPress={() => {this.onSelect(item)}} key={item.id} underlayColor={item.color}>
+				<Image 
+					style={[styles.gallery, {
+						backgroundColor: item.color
+					}]}
+					source={{uri: item.urls.small}}>
+					<Text style={styles.credit}>{item.user.name}</Text>
+				</Image>
+			</TouchableHighlight>
+		);
+	};
+
+	onQueryChange = (val) => {
+		this.setState({
+			query: val
+		});
+	};
+
+	onSearch = () => {
+		Unsplash.search(this.state.query).then((results) => {
+			this.setState({
+				images: results,
+				end: results.length < Unsplash.per_page,
+				page: 1
+			});
+		});
+	};
+
+	loadMore = () => {
+		if(this.state.end || this.loading){
+			return;
+		}
+		this.loading = true;
+
+		Unsplash.search(this.state.query, this.state.page + 1).then((results) => {
+			this.setState({
+				images: this.state.images.concat(results),
+				end: results.length < Unsplash.per_page,
+				page: this.state.page + 1
+			});
+			this.loading = false;
+		});
+	};
+
+	onSelect(item){
+		console.log(item);
+	}
+}

components/unsplash.js

@@ -0,0 +1,11 @@
+export default class Unsplash{
+	static id = 'c4f04786a1a83f70796a2121c2021f427e8807e31fb5d8b6d32846c41a9b89a7';
+	static endpoint = 'https://api.unsplash.com/';
+	static per_page = 21;
+
+	static search(query, page=1){
+		query = encodeURIComponent(query);
+		return fetch(`${Unsplash.endpoint}photos/search?client_id=${Unsplash.id}&page=${page}&per_page=${Unsplash.per_page}&query=${query}`)
+			.then((res) => res.json())
+	}
+}

package.json

@@ -6,8 +6,9 @@
     "start": "node node_modules/react-native/local-cli/cli.js start"
   },
   "dependencies": {
+    "react": "^0.14.7",
     "react-native": "^0.22.2",
-    "react-native-orientation": "^1.14.0",
-    "react": "^0.14.7"
+    "react-native-grid-view": "^0.3.7",
+    "react-native-orientation": "^1.14.0"
   }
-}
+}