Merge branch '(#5)Add_design_and_comments' into 'master'

(#5)add design and comments

See merge request !5

App.tsx

 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 = () => {

containers/Header.tsx → components/Header.tsx

-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.');
-}

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

containers/SearchBar.tsx → components/SearchBar.tsx

-import React, { useEffect } from "react"
+import React from "react"
 import { StyleSheet, TextInput } from "react-native";
 import { useRecoilState } from "recoil";
 import { searchState } from "../atoms/atoms";
@@ -6,6 +6,7 @@ import { searchState } from "../atoms/atoms";
 export const SearchBar = () => {
 
 
+    
     const [searchText, setSearchText] = useRecoilState(searchState)
 
     const handleSearchChange = (value: React.SetStateAction<string>) => {

containers/PokemonsContainer.tsx

-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 (
@@ -44,6 +57,24 @@ const PokemonsContainer = () => {
                 <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
+    }
 
 });