Commit 6e195ee8 authored by Halvor Horge's avatar Halvor Horge

#4 We can now display information from the backend in the front end

parent f07f031e
......@@ -2,8 +2,8 @@
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": 19001,
"packagerPid": 2212,
"expoServerNgrokUrl": "https://5v-9za.anonymous.p4.exp.direct",
"packagerNgrokUrl": "https://packager.5v-9za.anonymous.p4.exp.direct",
"ngrokPid": 1260
"packagerPid": 11012,
"expoServerNgrokUrl": "https://8h-zc8.hhorge.p4.exp.direct",
"packagerNgrokUrl": "https://packager.8h-zc8.hhorge.p4.exp.direct",
"ngrokPid": 8404
}
......@@ -3,6 +3,6 @@
"lanType": "ip",
"dev": true,
"minify": false,
"urlRandomness": "5v-9za",
"urlRandomness": "8h-zc8",
"https": false
}
......@@ -5,7 +5,12 @@ import Top from './src/components/Top'
import { createStore } from "redux";
import allReducer from "./src/reducers";
import { Provider } from "react-redux";
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks'
const client = new ApolloClient({
uri: 'http://it2810-26.idi.ntnu.no:4000'
})
const store = createStore(
allReducer,
......@@ -22,9 +27,11 @@ export default class App extends Component {
return (
<View>
{/*<Text style={styles.instructions}>{instructions}</Text>*/}
<Provider store={store}>
<Provider store={ store }>
<ApolloProvider client={ client }>
<Top/>
<Body/>
</ApolloProvider>
</Provider>
</View>
);
......
......@@ -2,6 +2,26 @@
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"@apollo/react-common": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@apollo/react-common/-/react-common-3.1.3.tgz",
"integrity": "sha512-Q7ZjDOeqjJf/AOGxUMdGxKF+JVClRXrYBGVq+SuVFqANRpd68MxtVV2OjCWavsFAN0eqYnRqRUrl7vtUCiJqeg==",
"requires": {
"ts-invariant": "^0.4.4",
"tslib": "^1.10.0"
}
},
"@apollo/react-hooks": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@apollo/react-hooks/-/react-hooks-3.1.3.tgz",
"integrity": "sha512-reIRO9xKdfi+B4gT/o/hnXuopUnm7WED/ru8VQydPw+C/KG/05Ssg1ZdxFKHa3oxwiTUIDnevtccIH35POanbA==",
"requires": {
"@apollo/react-common": "^3.1.3",
"@wry/equality": "^0.1.9",
"ts-invariant": "^0.4.4",
"tslib": "^1.10.0"
}
},
"@babel/code-frame": {
"version": "7.5.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
......@@ -1346,6 +1366,11 @@
"@types/lodash": "*"
}
},
"@types/node": {
"version": "12.12.7",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.7.tgz",
"integrity": "sha512-E6Zn0rffhgd130zbCbAr/JdXfXkoOUFAKNs/rF8qnafSJ8KYaA/j3oz7dcwal+lYjLA7xvdd5J4wdYpCTlP8+w=="
},
"@types/prop-types": {
"version": "15.7.3",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
......@@ -1414,6 +1439,11 @@
"integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==",
"dev": true
},
"@types/zen-observable": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.0.tgz",
"integrity": "sha512-te5lMAWii1uEJ4FwLjzdlbw3+n0FZNOvFXHxQDKeT0dilh7HOzdMzV2TrJVUzq8ep7J4Na8OUYPRLSQkJHAlrg=="
},
"@unimodules/core": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@unimodules/core/-/core-4.0.0.tgz",
......@@ -1432,6 +1462,23 @@
"prop-types": "^15.6.1"
}
},
"@wry/context": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/@wry/context/-/context-0.4.4.tgz",
"integrity": "sha512-LrKVLove/zw6h2Md/KZyWxIkFM6AoyKp71OqpH9Hiip1csjPVoD3tPxlbQUNxEnHENks3UGgNpSBCAfq9KWuag==",
"requires": {
"@types/node": ">=6",
"tslib": "^1.9.3"
}
},
"@wry/equality": {
"version": "0.1.9",
"resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.9.tgz",
"integrity": "sha512-mB6ceGjpMGz1ZTza8HYnrPGos2mC6So4NhS1PtZ8s4Qt0K7fBiIGhpSxUbQmhwcSWE3no+bYxmI2OL6KuXYmoQ==",
"requires": {
"tslib": "^1.9.3"
}
},
"abab": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.2.tgz",
......@@ -1563,6 +1610,110 @@
"normalize-path": "^2.1.1"
}
},
"apollo-boost": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/apollo-boost/-/apollo-boost-0.4.4.tgz",
"integrity": "sha512-ASngBvazmp9xNxXfJ2InAzfDwz65o4lswlEPrWoN35scXmCz8Nz4k3CboUXbrcN/G0IExkRf/W7o9Rg0cjEBqg==",
"requires": {
"apollo-cache": "^1.3.2",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link": "^1.0.6",
"apollo-link-error": "^1.0.3",
"apollo-link-http": "^1.3.1",
"graphql-tag": "^2.4.2",
"ts-invariant": "^0.4.0",
"tslib": "^1.9.3"
}
},
"apollo-cache": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.3.2.tgz",
"integrity": "sha512-+KA685AV5ETEJfjZuviRTEImGA11uNBp/MJGnaCvkgr+BYRrGLruVKBv6WvyFod27WEB2sp7SsG8cNBKANhGLg==",
"requires": {
"apollo-utilities": "^1.3.2",
"tslib": "^1.9.3"
}
},
"apollo-cache-inmemory": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.3.tgz",
"integrity": "sha512-S4B/zQNSuYc0M/1Wq8dJDTIO9yRgU0ZwDGnmlqxGGmFombOZb9mLjylewSfQKmjNpciZ7iUIBbJ0mHlPJTzdXg==",
"requires": {
"apollo-cache": "^1.3.2",
"apollo-utilities": "^1.3.2",
"optimism": "^0.10.0",
"ts-invariant": "^0.4.0",
"tslib": "^1.9.3"
}
},
"apollo-client": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.4.tgz",
"integrity": "sha512-oWOwEOxQ9neHHVZrQhHDbI6bIibp9SHgxaLRVPoGvOFy7OH5XUykZE7hBQAVxq99tQjBzgytaZffQkeWo1B4VQ==",
"requires": {
"@types/zen-observable": "^0.8.0",
"apollo-cache": "1.3.2",
"apollo-link": "^1.0.0",
"apollo-utilities": "1.3.2",
"symbol-observable": "^1.0.2",
"ts-invariant": "^0.4.0",
"tslib": "^1.9.3",
"zen-observable": "^0.8.0"
}
},
"apollo-link": {
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.13.tgz",
"integrity": "sha512-+iBMcYeevMm1JpYgwDEIDt/y0BB7VWyvlm/7x+TIPNLHCTCMgcEgDuW5kH86iQZWo0I7mNwQiTOz+/3ShPFmBw==",
"requires": {
"apollo-utilities": "^1.3.0",
"ts-invariant": "^0.4.0",
"tslib": "^1.9.3",
"zen-observable-ts": "^0.8.20"
}
},
"apollo-link-error": {
"version": "1.1.12",
"resolved": "https://registry.npmjs.org/apollo-link-error/-/apollo-link-error-1.1.12.tgz",
"integrity": "sha512-psNmHyuy3valGikt/XHJfe0pKJnRX19tLLs6P6EHRxg+6q6JMXNVLYPaQBkL0FkwdTCB0cbFJAGRYCBviG8TDA==",
"requires": {
"apollo-link": "^1.2.13",
"apollo-link-http-common": "^0.2.15",
"tslib": "^1.9.3"
}
},
"apollo-link-http": {
"version": "1.5.16",
"resolved": "https://registry.npmjs.org/apollo-link-http/-/apollo-link-http-1.5.16.tgz",
"integrity": "sha512-IA3xA/OcrOzINRZEECI6IdhRp/Twom5X5L9jMehfzEo2AXdeRwAMlH5LuvTZHgKD8V1MBnXdM6YXawXkTDSmJw==",
"requires": {
"apollo-link": "^1.2.13",
"apollo-link-http-common": "^0.2.15",
"tslib": "^1.9.3"
}
},
"apollo-link-http-common": {
"version": "0.2.15",
"resolved": "https://registry.npmjs.org/apollo-link-http-common/-/apollo-link-http-common-0.2.15.tgz",
"integrity": "sha512-+Heey4S2IPsPyTf8Ag3PugUupASJMW894iVps6hXbvwtg1aHSNMXUYO5VG7iRHkPzqpuzT4HMBanCTXPjtGzxg==",
"requires": {
"apollo-link": "^1.2.13",
"ts-invariant": "^0.4.0",
"tslib": "^1.9.3"
}
},
"apollo-utilities": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.2.tgz",
"integrity": "sha512-JWNHj8XChz7S4OZghV6yc9FNnzEXj285QYp/nLNh943iObycI5GTDO3NGR9Dth12LRrSFMeDOConPfPln+WGfg==",
"requires": {
"@wry/equality": "^0.1.2",
"fast-json-stable-stringify": "^2.0.0",
"ts-invariant": "^0.4.0",
"tslib": "^1.9.3"
}
},
"are-we-there-yet": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
......@@ -3233,8 +3384,7 @@
"fast-json-stable-stringify": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
"integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
"dev": true
"integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
},
"fast-levenshtein": {
"version": "2.0.6",
......@@ -4101,6 +4251,19 @@
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
"integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
},
"graphql": {
"version": "14.5.8",
"resolved": "https://registry.npmjs.org/graphql/-/graphql-14.5.8.tgz",
"integrity": "sha512-MMwmi0zlVLQKLdGiMfWkgQD7dY/TUKt4L+zgJ/aR0Howebod3aNgP5JkgvAULiR2HPVZaP2VEElqtdidHweLkg==",
"requires": {
"iterall": "^1.2.2"
}
},
"graphql-tag": {
"version": "2.10.1",
"resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.10.1.tgz",
"integrity": "sha512-jApXqWBzNXQ8jYa/HLkZJaVw9jgwNqZkywa2zfFn16Iv1Zb7ELNHkJaXHR7Quvd5SIGsy6Ny7SUKATgnu05uEg=="
},
"growly": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
......@@ -4690,6 +4853,11 @@
"handlebars": "^4.1.2"
}
},
"iterall": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/iterall/-/iterall-1.2.2.tgz",
"integrity": "sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA=="
},
"jest": {
"version": "24.9.0",
"resolved": "https://registry.npmjs.org/jest/-/jest-24.9.0.tgz",
......@@ -7023,6 +7191,14 @@
"object-assign": "^4.0.1"
}
},
"optimism": {
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/optimism/-/optimism-0.10.3.tgz",
"integrity": "sha512-9A5pqGoQk49H6Vhjb9kPgAeeECfUDF6aIICbMDL23kDLStBn1MWk3YvcZ4xWF9CsSf6XEgvRLkXy4xof/56vVw==",
"requires": {
"@wry/context": "^0.4.0"
}
},
"optimist": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
......@@ -9169,6 +9345,19 @@
"punycode": "^2.1.0"
}
},
"ts-invariant": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
"integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
"requires": {
"tslib": "^1.9.3"
}
},
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
},
"tunnel-agent": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
......@@ -9666,6 +9855,20 @@
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
}
}
},
"zen-observable": {
"version": "0.8.14",
"resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.14.tgz",
"integrity": "sha512-kQz39uonEjEESwh+qCi83kcC3rZJGh4mrZW7xjkSQYXkq//JZHTtKo+6yuVloTgMtzsIWOJrjIrKvk/dqm0L5g=="
},
"zen-observable-ts": {
"version": "0.8.20",
"resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.20.tgz",
"integrity": "sha512-2rkjiPALhOtRaDX6pWyNqK1fnP5KkJJybYebopNSn6wDG1lxBoFs2+nwwXKoA6glHIrtwrfBBy6da0stkKtTAA==",
"requires": {
"tslib": "^1.9.3",
"zen-observable": "^0.8.0"
}
}
}
}
......@@ -8,7 +8,11 @@
"test": "jest"
},
"dependencies": {
"@apollo/react-hooks": "^3.1.3",
"apollo-boost": "^0.4.4",
"expo": "^35.0.0",
"graphql": "^14.5.8",
"graphql-tag": "^2.10.1",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "0.59.10",
......
import React from 'react';
import { Text, StyleSheet, ScrollView, Image } from 'react-native';
import Search from './Search';
import { ListItem } from 'react-native-elements';
import React from "react";
import { Text, StyleSheet, ScrollView, Image, View } from "react-native";
import Search from "./Search";
import { ListItem } from "react-native-elements";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { details, nextPage, prevPage } from "../actions";
import Details from "./Details"
import Details from "./Details";
import { isOverlayVisible } from "../actions";
import { gql } from "apollo-boost";
import { useQuery } from "@apollo/react-hooks";
import Elements from "./Elements";
const GET_PRODUCTS = gql`
query Products(
$limit: Int
$sort: String
$search: String
$filters: FilterInputObject
) {
products(limit: $limit, sort: $sort, search: $search, filters: $filters) {
products {
name
price
img
id
alcohol
volume
type
}
}
}
`;
const Content = () => {
const dispatch = useDispatch();
const stateAlbums = useSelector(state => state.albums);
const stateSearch = useSelector(state => state.search);
const stateGenre = useSelector(state => state.filter);
function filterAlbums(Albums) {
let filteredAlbums = [];
for (let a in Albums) {
if (
Albums[a]["Album"]
.toLowerCase()
.indexOf(stateSearch.toLowerCase()) !== -1
) {
filteredAlbums.push(Albums[a]);
} else if (
Albums[a]["Artist"]
.toLowerCase()
.indexOf(stateSearch.toLowerCase()) !== -1
) {
filteredAlbums.push(Albums[a]);
} else if (
Albums[a]["Year"]
.toLowerCase()
.indexOf(stateSearch.toLowerCase()) !== -1
) {
filteredAlbums.push(Albums[a]);
}
}
return filteredAlbums;
}
const dispatch = useDispatch();
const stateAlbums = useSelector(state => state.albums);
const stateSearch = useSelector(state => state.search);
const stateGenre = useSelector(state => state.filter);
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"]
});
}
}
return f;
}
const { loading, error, data } = useQuery(GET_PRODUCTS, {
variables: { limit: 10, search: stateSearch, sort: "-price", filters:{filterType:"Vodka"}}
});
if (loading) return <Text> Loading ... </Text>;
if (error) return <Text> {error} </Text>;
const productElements = data.products.products.map(product => (
<View key={product.id} style={{ display: "flex" }}>
<Elements
name={product.name}
img={product.img}
price={product.price}
alcohol={product.alcohol}
volume={product.volume}
type={product.type}
/>
</View>
));
function setDetailState(album) {
dispatch(details(album));
function filterAlbums(Albums) {
let filteredAlbums = [];
for (let a in Albums) {
if (
Albums[a]["Album"].toLowerCase().indexOf(stateSearch.toLowerCase()) !==
-1
) {
filteredAlbums.push(Albums[a]);
} else if (
Albums[a]["Artist"].toLowerCase().indexOf(stateSearch.toLowerCase()) !==
-1
) {
filteredAlbums.push(Albums[a]);
} else if (
Albums[a]["Year"].toLowerCase().indexOf(stateSearch.toLowerCase()) !==
-1
) {
filteredAlbums.push(Albums[a]);
}
}
return filteredAlbums;
}
function setOverlayState(){
dispatch(isOverlayVisible());
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"]
});
}
}
return f;
}
return(
<ScrollView>
{
genreFilter(filterAlbums(stateAlbums)).map((l,i) =>(
<ListItem
key={i}
title={l.title}
subtitle={l.subtitle}
bottomDivider
chevron
onPress={() => setOverlayState()}
/>
))
}
<Details/>
</ScrollView>
);
}
function setDetailState(album) {
dispatch(details(album));
}
export default Content;
function setOverlayState() {
dispatch(isOverlayVisible());
}
return (
<ScrollView>
{productElements}
{genreFilter(filterAlbums(stateAlbums)).map((l, i) => (
<ListItem
key={i}
title={l.title}
subtitle={l.subtitle}
bottomDivider
chevron
onPress={() => setOverlayState()}
/>
))}
<Details />
</ScrollView>
);
};
export default Content;
import React from 'react'
import {Text, View, Image} from 'react-native'
export default function Elements({name, img, price, alcohol, volume, type}) {
return (
<View style={{borderWidth:1, borderColor:'black', margin:10, alignItems:'center'}}>
<Image style={{resizeMode: "contain", height: 200, width:100, justifyContent:'center'}} source={{uri: img}}/>
<Text>Name: {name}</Text>
<Text>Price: {price},-</Text>
<Text>Alcohol: {alcohol}%.</Text>
<Text>Volume: {volume}</Text>
<Text>Type: {type}</Text>
</View>
)
}
\ 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