Commit d5dc6fb7 authored by Adrian's avatar Adrian

Merged master into DetailDev

parents 2b0dfbf6 462d9fde
......@@ -2,8 +2,8 @@
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": 19001,
"packagerPid": 19012,
"expoServerNgrokUrl": "https://av-4mb.anonymous.p4.exp.direct",
"packagerNgrokUrl": "https://packager.av-4mb.anonymous.p4.exp.direct",
"ngrokPid": 7112
"packagerPid": 21696,
"expoServerNgrokUrl": "https://eg-zjk.anonymous.p4.exp.direct",
"packagerNgrokUrl": "https://packager.eg-zjk.anonymous.p4.exp.direct",
"ngrokPid": 9704
}
......@@ -3,6 +3,6 @@
"lanType": "ip",
"dev": true,
"minify": false,
"urlRandomness": "av-4mb",
"urlRandomness": "eg-zjk",
"https": false
}
......@@ -7,6 +7,7 @@ import allReducer from "./src/reducers";
import { Provider } from "react-redux";
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks'
import SideMenu from './src/components/SideMenu';
const client = new ApolloClient({
uri: 'http://it2810-26.idi.ntnu.no:4000'
......@@ -30,8 +31,9 @@ export default class App extends Component {
<Provider store={ store }>
<ApolloProvider client={ client }>
<Top/>
<Body/>
</ApolloProvider>
<SideMenu/>
<Body/>
</ApolloProvider>
</Provider>
</View>
);
......
This diff is collapsed.
......@@ -13,18 +13,25 @@
"expo": "^35.0.0",
"graphql": "^14.5.8",
"graphql-tag": "^2.10.1",
"native-base": "^2.13.8",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "0.59.10",
"react-native-drawer": "^2.5.1",
"react-native-dropdown-menu": "^2.0.0",
"react-native-elements": "^1.2.7",
"react-native-gesture-handler": "~1.4.1",
"react-native-picker": "^4.3.7",
"react-native-picker-select": "^6.3.3",
"react-native-reanimated": "~1.3.0",
"react-native-screens": "1.0.0-alpha.23",
"react-native-shapes": "^0.1.0",
"react-native-simple-radio-button": "^2.7.4",
"react-native-unimodules": "0.6.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-redux": "^7.1.1",
"redux": "^4.0.4"
},
......
......@@ -58,12 +58,19 @@ export const defaultPage = () => {
export const isOverlayVisible = () => {
return{
type : 'VISIBLE',
}
type : 'VISIBLE'
}
}
export const toggleSideMenu = () => {
return{
type : 'SIDEMENU',
type : 'SIDEMENU'
}
}
export const sortingCategory = (a) => {
return {
type : 'SORT',
payload : a
}
}
\ No newline at end of file
......@@ -3,19 +3,17 @@ import React from 'react';
import { Text, StyleSheet, ScrollView, Image } from 'react-native';
import Search from './Search';
import Content from './Content'
import Filtering from './Filtering'
import SideMenuComp from './SideMenu'
import Sorting from './Sorting';
//import Content from '../Content/Content.js';
//import Wordcloud from '../Wordcloud/Wordcloud.js';
const Body = () => {
return(
<ScrollView>
<ScrollView style={{height:"90%"}}>
<Search/>
<Sorting/>
<Content/>
<Filtering/>
</ScrollView>
);
}
......
import React from "react";
import { Text, StyleSheet, ScrollView, Image, View, Button } 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";
......@@ -18,9 +25,15 @@ const GET_PRODUCTS = gql`
$sort: String
$search: String
$filters: FilterInputObject
$skip:Int
$skip: Int
) {
products(limit: $limit, sort: $sort, search: $search, filters: $filters, skip:$skip) {
products(
limit: $limit
sort: $sort
search: $search
filters: $filters
skip: $skip
) {
products {
name
price
......@@ -40,46 +53,61 @@ const GET_PRODUCTS = gql`
const Content = () => {
const dispatch = useDispatch();
const stateSearch = useSelector(state => state.search);
const stateGenre = useSelector(state => state.filter);
const stateType = useSelector(state => state.filter);
const stateSort = useSelector(state => state.sortingCategory);
const statePage = useSelector(state => state.page);
function checkStateTypeEmpty() {
let isStateTypeEmpty = stateType == "";
return isStateTypeEmpty ? {} : { filterType: stateType };
}
const { loading, error, data, fetchMore } = useQuery(GET_PRODUCTS, {
variables: { limit: 15, search: stateSearch, sort: "-volume"}
variables: {
limit: 15,
search: stateSearch,
sort: stateSort,
filters: checkStateTypeEmpty()
}
});
if (loading) return <Text> Loading ... </Text>;
if (error) return <Text> {error} </Text>;
if (loading) return <Text>Loading ...</Text>;
if (error) return <Text>{error}</Text>;
const { products } = data.products;
const handleLoadMore = () => {
dispatch(nextPage());
fetchMore({variables : {
skip: products.length
},
updateQuery:(previousResult, {fetchMoreResult}) => {
if(!fetchMoreResult) return previousResult;
fetchMore({
variables: {
skip: products.length
},
updateQuery: (previousResult, { fetchMoreResult }) => {
if (!fetchMoreResult) return previousResult;
return {
products:{
products : [...previousResult.products.products, ...fetchMoreResult.products.products],
products: {
products: [
...previousResult.products.products,
...fetchMoreResult.products.products
],
totalCound: previousResult.products.totalCount,
__typename: "ProductsResult"
}
}
};
}
})
}
});
};
const productElements = products.map(product => (
<View key={product.id} style={{ display: "flex" }}>
<ListItem
<ListItem
key={product.id}
leftAvatar={{ source: { uri: product.img } } }
leftAvatar={{ source: { uri: product.img } }}
title={product.name}
subtitle={product.price + " kr"}
bottomDivider
chevron
onPress={() => setOverlayState(product)}
/>
</View>
</View>
));
function setOverlayState(d) {
......@@ -88,23 +116,24 @@ const Content = () => {
}
function showMoreButton() {
if(products.length === 15 + (15*statePage)){
return (<Button
if (products.length === 15 + 15 * statePage) {
return (
<Button
color="#5085a5"
title="Load more"
onPress={() => handleLoadMore()}
/>)
/>
);
}
}
return (
<ScrollView>
<View>
{productElements}
{showMoreButton()}
<Details />
</ScrollView>
</View>
);
};
export default Content;
......@@ -5,6 +5,7 @@ import { useDispatch } from "react-redux";
import { isOverlayVisible } from "../actions";
import {Text, View, Image, StyleSheet} from 'react-native'
const Details = () => {
......
import React from 'react';
import { View } from 'react-native';
import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';
import React from "react";
import { View } from "react-native";
import RadioForm, {
RadioButton,
RadioButtonInput,
RadioButtonLabel
} from "react-native-simple-radio-button";
import { useDispatch } from "react-redux";
import { filter } from "../actions";
import { useSelector } from "react-redux";
import { toggleSideMenu } from "../actions";
const genres = [
{label: "All", value: ""},
{label: "Jazz", value: "All"},
{label: "Blues", value: "Blues"},
{label: "Pop", value: "Pop"},
{label: "Rock", value: "Rock"},
{label: "Funk/Soul", value: "Funk/Soul"},
{label: "Electronic", value: "Electronic"},
{label: "Classical", value: "Classical"},
{label: "Reggae", value: "Reggae"},
{label: "Hip Hop", value: "Hip Hop"},
{label: "Folk", value: "Folk"}
]
{ label: "All", value: "" },
{ label: "Akevitt", value: "Akevitt" },
{ label: "Bitter", value: "Bitter" },
{ label: "Druebrennevin", value: "Druebrennevin" },
{ label: "Gin", value: "Gin" },
{ label: "Hvitvin", value: "Hvitvin" },
{ label: "Likør", value: "Likør" },
{ label: "Portvin", value: "Portvin" },
{ label: "Rødvin", value: "Rødvin" },
{ label: "Vodka", value: "Vodka" },
{ label: "Whisky", value: "Whisky" }
];
const Filtering = () => {
const stateType = useSelector(state => state.filter);
const dispatch = useDispatch();
const dispatch = useDispatch();
function updateFilter(e) {
dispatch(filter(e));
}
function updateFilter(e) {
dispatch(filter(e));
}
return(
<View>
<RadioForm
radio_props={genres}
initial={0}
onPress={(value) => updateFilter(value)}
/>
</View>
)
}
function onButtonPress(v) {
updateFilter(v);
dispatch(toggleSideMenu());
}
export default Filtering;
\ No newline at end of file
return (
<View>
<RadioForm radio_props={genres} onPress={value => onButtonPress(value)} />
</View>
);
};
export default Filtering;
import { SideMenu, List, ListItem } from 'react-native-elements';
//import { SideMenu, List, ListItem } from 'react-native-elements';
import { useSelector } from "react-redux";
import Filtering from './Filtering'
import React from 'react';
import { View, Text } from 'react-native';
import { Overlay } from 'react-native-elements';
import Filtering from "./Filtering";
import React from "react";
import { View, Text } from "react-native";
import { toggleSideMenu } from "../actions";
const SideMenuComp = () => {
const stateSideMenu = useSelector(state => state.sideMenu);
import { useDispatch } from "react-redux";
import {
createDrawerNavigator,
createAppContainer,
DrawerItems,
SafeAreaView
} from "react-navigation";
import { sideMenu } from "../actions";
return(
<SideMenu
isOpen={false}
menu={stateSideMenu}
>
</SideMenu>
)
}
const SideMenu = () => {
const dispatch = useDispatch();
const stateSideMenu = useSelector(state => state.sideMenu);
export default SideMenuComp;
\ No newline at end of file
return (
<Overlay
isVisible={stateSideMenu}
onBackdropPress={() => dispatch(toggleSideMenu())}
>
<Filtering />
</Overlay>
);
};
export default SideMenu;
import React from 'react';
import {StyleSheet} from 'react-native';
// import DropdownMenu from 'react-native-dropdown-menu';
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { sortingCategory } from "../actions";
import { Chevron } from 'react-native-shapes';
import RNPickerSelect, { defaultStyles } from 'react-native-picker-select';
import { Ionicons } from '@expo/vector-icons';
import { graphqlSync } from 'graphql';
const Sorting = () => {
const dispatch = useDispatch();
const placeholder = {
label: 'Sorter...',
value: null,
color: '#9EA0A4',
};
const sortingAlternatives = [
{
label: 'Navn',
value: 'name',
},
{
label: 'Pris - Stigende',
value: 'price',
},
{
label: 'Pris - Synkende',
value: '-price',
},
{
label: 'Alkoholprosent - Stigende',
value: 'alcohol',
},
{
label: 'Alkoholprosent - Synkende',
value: '-alcohol',
},
{
label: 'Volum - Stigende',
value: 'volume',
},
{
label: 'Volum - Synkende',
value: '-volume',
},
];
const pickerSelectStyles = StyleSheet.create({
inputIOS: {
fontSize: 16,
paddingVertical: 12,
paddingHorizontal: 10,
backgroundColor:'gray',
color: 'black',
paddingRight: 30, // to ensure the text is never behind the icon
},
inputAndroid: {
fontSize: 16,
paddingHorizontal: 10,
paddingVertical: 8,
backgroundColor:'gray',
borderBottomColor: 'gray',
color: 'black',
paddingRight: 30, // to ensure the text is never behind the icon
},
});
return(
// <RNPickerSelect
// onValueChange={(value) => dispatch(sortingCategory(value))}
// items={sortingAlternatives}
// />
<RNPickerSelect
placeholder={placeholder}
items={sortingAlternatives}
onValueChange={(value) => dispatch(sortingCategory(value))}
style={{
...pickerSelectStyles,
iconContainer: {
top: 20,
right: 12,
},
}}
// value={this.state.favSport3}
useNativeAndroidPickerStyle={false}
//textInputProps={{ underlineColorAndroid: 'cyan' }}
Icon={() => {return <Chevron size={1.5} color="black" />;
}}
/>
)
// https://www.npmjs.com/package/react-native-picker-select
}
export default Sorting;
import React from 'react';
import { View, Text, StyleSheet} from 'react-native';
import {Header} from 'react-native-elements';
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { Header } from "react-native-elements";
import { useDispatch } from "react-redux";
import { toggleSideMenu } from "../actions";
const Top = () =>{
const Top = () => {
const dispatch = useDispatch();
onHamburgerClick = () => {
dispatch(toggleSideMenu());
};
const dispatch = useDispatch();
return(
<Header
leftComponent={{ icon: 'menu', color: '#fff'}}
centerComponent={{ text: 'Drinks', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
backgroundColor= '#31708e'
return (
<Header
leftComponent={{
icon: "menu",
color: "#fff",
onPress: () => onHamburgerClick()
}}
centerComponent={{ text: "Drinks", style: { color: "#fff" } }}
backgroundColor="#31708e"
/>
);
}
);
};
export default Top;
\ No newline at end of file
export default Top;
......@@ -7,6 +7,7 @@ import detailsReducer from './details';
import toggleSideMenu from './toggleSideMenu';
import pageReducer from './page';
import isOverlayVisibleReducer from './isOverlayVisible'
import sortingReducer from './sort'
import {combineReducers} from 'redux';
......@@ -18,7 +19,8 @@ const allReducers = combineReducers({
details : detailsReducer,
page : pageReducer,
overlay : isOverlayVisibleReducer,
sideMenu : toggleSideMenu
sideMenu : toggleSideMenu,
sortingCategory : sortingReducer
})
export default allReducers;
......
const sortingReducer = (state = 'name', action) => {
switch(action.type){
case 'SORT':
state = action.payload;
return state;
default:
return state;
}
}
export default sortingReducer;
\ 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