diff --git a/p4/.expo/packager-info.json b/p4/.expo/packager-info.json
index b845fd86777065b0f6c325e280b8213b5ab09b2a..75745a137afc82b6f6b7b8a5ca6f448f8780c5f0 100644
--- a/p4/.expo/packager-info.json
+++ b/p4/.expo/packager-info.json
@@ -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
}
diff --git a/p4/.expo/settings.json b/p4/.expo/settings.json
index f1deb62d9eda2a6b92cd15effb978f4ac720e9d3..67f622963b83517a9a1e4ecf6a472e69bc8f1b6e 100644
--- a/p4/.expo/settings.json
+++ b/p4/.expo/settings.json
@@ -3,6 +3,6 @@
"lanType": "ip",
"dev": true,
"minify": false,
- "urlRandomness": "5v-9za",
+ "urlRandomness": "8h-zc8",
"https": false
}
diff --git a/p4/App.js b/p4/App.js
index 7cbef75208efcf219299ac5dfb87b31bd0912676..7dbc1df45df261fc41a45b22b7e47d1fe3305c81 100644
--- a/p4/App.js
+++ b/p4/App.js
@@ -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 (
{/*{instructions}*/}
-
+
+
+
);
diff --git a/p4/package-lock.json b/p4/package-lock.json
index 012aedb47f6a4d8271521598a5eaff5600577af9..8ae9e6c144bdac1209c29a5373b4faed3ac303fd 100644
--- a/p4/package-lock.json
+++ b/p4/package-lock.json
@@ -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"
+ }
}
}
}
diff --git a/p4/package.json b/p4/package.json
index d553a6f6f574514b802b8febb2d5520edeb958f1..c71163043be67395994d8e3876e7a8e7f76c195d 100644
--- a/p4/package.json
+++ b/p4/package.json
@@ -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",
diff --git a/p4/src/components/Content.js b/p4/src/components/Content.js
index 63a592369b75254c10e35defd2f162e2e37fe43a..473d1a4184084326cbdc470ecb5bd88b57b6175a 100644
--- a/p4/src/components/Content.js
+++ b/p4/src/components/Content.js
@@ -1,87 +1,122 @@
-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 Loading ... ;
+ if (error) return {error} ;
+
+ const productElements = data.products.products.map(product => (
+
+
+
+ ));
- 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(
-
- {
- genreFilter(filterAlbums(stateAlbums)).map((l,i) =>(
- setOverlayState()}
- />
- ))
- }
-