diff --git a/App.tsx b/App.tsx
index 20dbe372f13db78ee1b31490b49d781ecfc1d65f..8f9f2ce12284412b5fe45497bee510ee5769edcf 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,14 +1,10 @@
import React from 'react';
-import { SafeAreaView, SafeAreaViewBase, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
import PokemonsContainer from './containers/PokemonsContainer';
import {ApolloClient, ApolloProvider, InMemoryCache} from "@apollo/client";
-import { Header } from './containers/Header';
+import { Header } from './components/Header';
import {
RecoilRoot,
- atom,
- selector,
- useRecoilState,
- useRecoilValue,
} from 'recoil';
const App = () => {
diff --git a/containers/Header.tsx b/components/Header.tsx
similarity index 91%
rename from containers/Header.tsx
rename to components/Header.tsx
index 6c0fa972e4caca86f5c8e383cf9d1c2098135c95..73e4bda1125acc7c988e66679a92eb8fd013916a 100644
--- a/containers/Header.tsx
+++ b/components/Header.tsx
@@ -1,14 +1,13 @@
-import { Select } from '@mui/material';
import React, { useEffect } from 'react';
-import { Image, Text, StyleSheet, View, TouchableOpacity } from "react-native";
+import { Image, Text, StyleSheet, View } from "react-native";
import SelectDropdown from 'react-native-select-dropdown'
-import {SearchBar} from "./SearchBar"
+import {SearchBar} from './SearchBar'
import {useRecoilState} from 'recoil'
import { capturedFilterState, typeState } from "../atoms/atoms";
-import { maxHeight, maxWidth } from '@mui/system';
export const Header = () => {
+
const [capturedSorting, setCapturedSorting] = useRecoilState(capturedFilterState)
const [type, setType] = useRecoilState(typeState)
@@ -109,7 +108,9 @@ const styles = StyleSheet.create ({
pokemonImg: {
flex: 1,
width: 250,
- height: 110
+ height: 110,
+ resizeMode: 'contain'
+
},
filteringSortingContainer: {
@@ -128,8 +129,6 @@ const styles = StyleSheet.create ({
width: 300
}
})
+
export default Header
-function typeFilter(arg0: () => void, typeFilter: any) {
- throw new Error('Function not implemented.');
-}
diff --git a/components/PokemonCard.tsx b/components/PokemonCard.tsx
index cb879a82963d8fc6841fe237e450a00da2aca9c7..8a155a63d2715087a8a689eadd5b1dfaf63f5c9e 100644
--- a/components/PokemonCard.tsx
+++ b/components/PokemonCard.tsx
@@ -30,7 +30,7 @@ const PokemonCard: React.FC<{ pokemon: Pokemon }> = ({pokemon}) => {
return ( //touchablewithoutfeedback for mer info knappen
<View style={styles.pokemon}>
<View style={styles.pokemon__name}>
- <Text>{pokemon.name}</Text>
+ <Text style = {styles.pokeman__name_text}>{pokemon.name}</Text>
</View>
{clicked &&
@@ -86,7 +86,14 @@ const styles = StyleSheet.create({
textAlign: 'center',
alignItems: 'center',
padding: 10,
+
+ },
+ pokeman__name_text: {
+ color: 'white',
+ fontWeight: 'bold',
+ fontSize: 15,
},
+
pokemon__meta: {
flex: 1,
justifyContent: 'center',
@@ -95,15 +102,17 @@ const styles = StyleSheet.create({
padding: 0,
},
pokemon__meta_text: {
- color: 'white',
backgroundColor: '#7bb7b7',
+ color: 'white',
fontWeight: 'bold',
+ fontSize: 15,
margin: 0,
paddingTop: 5,
paddingBottom: 10,
borderRadius: 5,
width: 50,
textAlign: 'center',
+
},
pokemon__image: {
padding: 15,
@@ -111,12 +120,16 @@ const styles = StyleSheet.create({
marginBottom: 10,
alignItems: 'center',
justifyContent: 'center',
+
},
pokemon__image_img: {
maxWidth: 120,
- maxHeight: 127,
- minHeight: 115,
+ maxHeight: 130,
+ minHeight: 120,
minWidth: 120,
+ aspectRatio: 1,
+ resizeMode: 'contain'
+
},
pokemon__type: {
flex: 1,
@@ -161,5 +174,4 @@ const styles = StyleSheet.create({
}
});
-
export default PokemonCard
\ No newline at end of file
diff --git a/containers/SearchBar.tsx b/components/SearchBar.tsx
similarity index 95%
rename from containers/SearchBar.tsx
rename to components/SearchBar.tsx
index 899975ecaccffedff78902c4aaf590c66ef03079..d8330af3478b11ad1a4617f8b75a351b04f8ae65 100644
--- a/containers/SearchBar.tsx
+++ b/components/SearchBar.tsx
@@ -1,10 +1,11 @@
-import React, { useEffect } from "react"
+import React from "react"
import { StyleSheet, TextInput } from "react-native";
import { useRecoilState } from "recoil";
import { searchState } from "../atoms/atoms";
export const SearchBar = () => {
+
const [searchText, setSearchText] = useRecoilState(searchState)
diff --git a/containers/PokemonsContainer.tsx b/containers/PokemonsContainer.tsx
index fba5d0ef079c824964c5744189f4a496c005f6a2..0cb57b86fe2df94b6773eb721cf524cc266fb80f 100644
--- a/containers/PokemonsContainer.tsx
+++ b/containers/PokemonsContainer.tsx
@@ -1,25 +1,23 @@
-import React, { useState } from 'react';
-import { Alert, Button, NativeSyntheticEvent, NativeTouchEvent, ScrollView, StyleSheet, Text, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import PokemonCard from '../components/PokemonCard';
import {SEARCH_POKEMONS} from '../graphql/get-pokemons';
import {useQuery} from '@apollo/react-hooks';
import {Pokemon} from "../types/types";
import { useRecoilValue } from "recoil";
import { capturedFilterState, searchState, typeState } from '../atoms/atoms';
-import { borderColor, borders } from '@mui/system';
-const PokemonsContainer = () => {
+export const PokemonsContainer = () => {
const searchText = useRecoilValue(searchState)
const typeText = useRecoilValue(typeState)
const capturedState = useRecoilValue(capturedFilterState)
-
- const [limit, setLimit] = useState(15)
+ const limit = 14
const [skip, setSkip] = useState(0)
- const {loading, error, data} = useQuery(SEARCH_POKEMONS, {
+ const {loading, data} = useQuery(SEARCH_POKEMONS, {
fetchPolicy: "no-cache",
variables: {
searchInput: {
@@ -32,10 +30,25 @@ const PokemonsContainer = () => {
}
})
+ const handlePaginationButton = (newPage: string) => {
+ if(newPage === 'prev'){
+ setSkip(skip - 14)
+ } else {
+ setSkip(skip + 14)
+ }
+ }
+
+ useEffect(() => {
+ setSkip(0)
+ }, [searchText, typeText, capturedState])
+
if (loading){
return (
<Text>LOADING..</Text>
)
+ } else if (data.searchPokemon === 0) {
+ <Text>No matches for this search</Text>
+
}
else{
return (
@@ -43,7 +56,25 @@ const PokemonsContainer = () => {
{data.searchPokemon && data.searchPokemon.map((pokemon: Pokemon) =>
<PokemonCard key={pokemon.id} pokemon={pokemon}/>)
}
-
+
+
+ <View style = {styles.paginationContainers}>
+ {skip >= 14 && data.searchPokemon.length >= 4 &&
+ <TouchableOpacity style={styles.paginationButtonPrevPage} onPress={() => handlePaginationButton("prev")}>
+ <Image
+ style = {styles.prevButton}
+ source={require('../resources/button.png')}
+ />
+ </TouchableOpacity>}
+ {data.searchPokemon.length >= 14 &&
+ <TouchableOpacity style={styles.paginationButtonNextPage} onPress={() => handlePaginationButton("next")}>
+ <Image
+ style = {styles.nextButton}
+ source={require('../resources/button.png')}
+ />
+ </TouchableOpacity>}
+ </View>
+
</View>
)
@@ -63,6 +94,38 @@ const styles = StyleSheet.create({
},
+ prevButton: {
+ width: "100%",
+ height: "100%"
+
+ },
+ nextButton: {
+ width: "100%",
+ height: "100%"
+
+ },
+ paginationButtonNextPage: {
+ width: 50,
+ height: 50,
+ color: "white"
+
+ },
+ paginationButtonPrevPage: {
+ width: 50,
+ height: 50,
+ color: "white",
+ transform: [
+ {scaleX: -1} //horizontally flip for previous button
+ ]
+ },
+ paginationContainers: {
+ flex: 1,
+ justifyContent: 'space-between',
+ flexDirection: 'row',
+ marginBottom: 15,
+ marginRight: 10,
+ marginLeft: 10
+ }
});
diff --git a/documentation_images/QR-Scan.PNG b/documentation_images/QR-Scan.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..780feec9b9cd7face6a1eb17f01190354f8ba3cd
Binary files /dev/null and b/documentation_images/QR-Scan.PNG differ
diff --git a/resources/button.png b/resources/button.png
index 6f16ee6ec71df393333bfa1efd71f1f50aacdcbe..d48e4cd0e75a1d848c180cc0901d7944e9dbf51c 100644
Binary files a/resources/button.png and b/resources/button.png differ