Commit 2b0dfbf6 authored by Adrian's avatar Adrian

#8 Added functionality for fetching more data, added a button, and fixed som colors

parent 698eb748
......@@ -2,8 +2,8 @@
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": 19001,
"packagerPid": 15960,
"packagerPid": 19012,
"expoServerNgrokUrl": "https://av-4mb.anonymous.p4.exp.direct",
"packagerNgrokUrl": "https://packager.av-4mb.anonymous.p4.exp.direct",
"ngrokPid": 6856
"ngrokPid": 7112
}
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>p4</name>
<comment>Project android created by Buildship.</comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
</natures>
</projectDescription>
connection.project.dir=
eclipse.preferences.version=1
<?xml version="1.0" encoding="UTF-8"?>
<classpath>
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-9/"/>
<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
<classpathentry kind="output" path="bin/default"/>
</classpath>
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>app</name>
<comment>Project app created by Buildship.</comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>org.eclipse.jdt.core.javabuilder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>org.eclipse.jdt.core.javanature</nature>
<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
</natures>
</projectDescription>
connection.project.dir=..
eclipse.preferences.version=1
package com.p4.generated;
import java.util.Arrays;
import java.util.List;
import org.unimodules.core.interfaces.Package;
public class BasePackageList {
public List<Package> getPackageList() {
return Arrays.<Package>asList(
new expo.modules.constants.ConstantsPackage(),
new expo.modules.filesystem.FileSystemPackage(),
new expo.modules.font.FontLoaderPackage(),
new expo.modules.keepawake.KeepAwakePackage(),
new expo.modules.lineargradient.LinearGradientPackage(),
new expo.modules.location.LocationPackage(),
new expo.modules.permissions.PermissionsPackage(),
new expo.modules.sqlite.SQLitePackage(),
new expo.modules.webbrowser.WebBrowserPackage()
);
}
}
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { name as Drinks } from './app.json';
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(Drinks, () => App);
import React from "react";
import { Text, StyleSheet, ScrollView, Image, View } from "react-native";
import { Text, StyleSheet, ScrollView, Image, View, Button } from "react-native";
import Search from "./Search";
import { ListItem } from "react-native-elements";
import { useSelector } from "react-redux";
......@@ -10,6 +10,7 @@ import { isOverlayVisible } from "../actions";
import { gql } from "apollo-boost";
import { useQuery } from "@apollo/react-hooks";
import Elements from "./Elements";
import { FlatList } from "react-native-gesture-handler";
const GET_PRODUCTS = gql`
query Products(
......@@ -17,8 +18,9 @@ const GET_PRODUCTS = gql`
$sort: String
$search: String
$filters: FilterInputObject
$skip:Int
) {
products(limit: $limit, sort: $sort, search: $search, filters: $filters) {
products(limit: $limit, sort: $sort, search: $search, filters: $filters, skip:$skip) {
products {
name
price
......@@ -39,52 +41,70 @@ const Content = () => {
const dispatch = useDispatch();
const stateSearch = useSelector(state => state.search);
const stateGenre = useSelector(state => state.filter);
const statePage = useSelector(state => state.page);
const { loading, error, data } = useQuery(GET_PRODUCTS, {
variables: { limit: 15, search: stateSearch, sort: "-price"}
const { loading, error, data, fetchMore } = useQuery(GET_PRODUCTS, {
variables: { limit: 15, search: stateSearch, sort: "-volume"}
});
if (loading) return <Text> Loading ... </Text>;
if (error) return <Text> {error} </Text>;
const { products } = data.products;
const productElements = data.products.products.map(product => (
<View key={product.id} style={{ display: "flex" }}>
<ListItem
key={product.id}
leftAvatar={{ source: { uri: product.img } } }
title={product.name}
subtitle={product.price + " kr"}
bottomDivider
chevron
onPress={() => setOverlayState(product)}
/>
</View>
));
function genreFilter(albums) {
let f = [];
for (let a in albums) {
if (albums[a]["Genre"] === stateGenre || stateGenre === "") {
f.push({
title: albums[a]["Album"],
subtitle: albums[a]["Artist"]
});
const handleLoadMore = () => {
dispatch(nextPage());
fetchMore({variables : {
skip: products.length
},
updateQuery:(previousResult, {fetchMoreResult}) => {
if(!fetchMoreResult) return previousResult;
return {
products:{
products : [...previousResult.products.products, ...fetchMoreResult.products.products],
totalCound: previousResult.products.totalCount,
__typename: "ProductsResult"
}
}
}
}
return f;
})
}
const productElements = products.map(product => (
<View key={product.id} style={{ display: "flex" }}>
<ListItem
key={product.id}
leftAvatar={{ source: { uri: product.img } } }
title={product.name}
subtitle={product.price + " kr"}
bottomDivider
chevron
onPress={() => setOverlayState(product)}
/>
</View>
));
function setOverlayState(d) {
dispatch(isOverlayVisible());
dispatch(details(d));
}
function showMoreButton() {
if(products.length === 15 + (15*statePage)){
return (<Button
color="#5085a5"
title="Load more"
onPress={() => handleLoadMore()}
/>)
}
}
return (
<ScrollView>
{productElements}
{showMoreButton()}
<Details />
</ScrollView>
);
};
export default Content;
......@@ -18,8 +18,15 @@ const Search = () => {
placeholder="Type Here..."
onChangeText={e => updateSearch(e)}
value={stateSearch}
containerStyle={{backgroundColor:"#5085a5"}}
inputContainerStyle={{backgroundColor:"#31708e"}}
inputStyle={{color:'#fff'}}
placeholderTextColor={{color:'#f0f'}}
leftIconContainerStyle={{color:'#f0f'}}
/>
);
}
export default Search;
......@@ -9,29 +9,16 @@ const Top = () =>{
const dispatch = useDispatch();
return(
<Header style={styles.container}
<Header
leftComponent={{ icon: 'menu', color: '#fff'}}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
centerComponent={{ text: 'Drinks', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
backgroundColor= '#31708e'
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#008CBA',
},
Title: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color:'white',
},
});
export default Top;
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment