Finished pagination

App.tsx

@@ -2,13 +2,10 @@ import React from 'react';
 import { SafeAreaView, SafeAreaViewBase, 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

@@ -2,13 +2,14 @@ import { Select } from '@mui/material';
 import React, { useEffect } from 'react';
 import { Image, Text, StyleSheet, View, TouchableOpacity } 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)
 
@@ -128,6 +129,7 @@ const styles = StyleSheet.create ({
         width: 300
     }
 })
+
 export default Header
 
 function typeFilter(arg0: () => void, typeFilter: any) {

components/PokemonCard.tsx

@@ -161,5 +161,4 @@ const styles = StyleSheet.create({
   }
 });
 
-
 export default PokemonCard
\ No newline at end of file

containers/SearchBar.tsx → components/SearchBar.tsx

@@ -5,6 +5,7 @@ import { searchState } from "../atoms/atoms";
 
 export const SearchBar = () => {
 
+
     
     const [searchText, setSearchText] = useRecoilState(searchState)
 

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 { Alert, Image, Button, NativeSyntheticEvent, NativeTouchEvent, ScrollView, 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 = () => {
@@ -15,8 +14,7 @@ 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, {
@@ -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
+    }
 
 });
 

[Amund Skuggevik Foss]

/1h