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

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
 }

p4/.expo/settings.json

@@ -3,6 +3,6 @@
   "lanType": "ip",
   "dev": true,
   "minify": false,
-  "urlRandomness": "5v-9za",
+  "urlRandomness": "8h-zc8",
   "https": false
 }

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 (
       <View>
         {/*<Text style={styles.instructions}>{instructions}</Text>*/}
-        <Provider store={store}>
+        <Provider store={ store }>
+          <ApolloProvider client={ client }>
             <Top/>
            <Body/>
+           </ApolloProvider>
         </Provider>
       </View>
     );

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",

p4/src/components/Content.js

-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;

p4/src/components/Elements.js

+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