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>
);
......
This diff is collapsed.
......@@ -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