Merge branch '(#6)Structural_changes_to_files' into 'master'

Adjusting functions and styling, deleted searchBar

See merge request !6

components/Header.tsx

+import { textAlign } from '@mui/system';
 import React, { useEffect } from 'react';
-import { Image, Text, StyleSheet, View } from "react-native";
+import { Image, Text,TextInput, StyleSheet, View } from "react-native";
 import SelectDropdown from 'react-native-select-dropdown'
-import {SearchBar} from './SearchBar'
 import {useRecoilState} from 'recoil'
-import { capturedFilterState, typeState } from "../atoms/atoms";
+import {searchState, capturedFilterState, typeState } from "../atoms/atoms";
 
 export const Header = () => {
  
-
-    const [capturedSorting, setCapturedSorting] = useRecoilState(capturedFilterState)
+    const [searchTextValue, setSearchTextValue] = useRecoilState(searchState)
+    const [capturedFiltering, setCapturedFiltering] = useRecoilState(capturedFilterState)
     const [type, setType] = useRecoilState(typeState)
 
-    const filterTypes = ["All", "Bug", "Dark", "Dragon", "Electric", "Fairy", "Fighting", "Fire", "Flying", "Ghost", "Grass", "Ground", "Ice", "Normal", "Poison", "Psychic", "Rock", "Steel", "Water"];
 
-    useEffect(() => {
-        console.log(capturedSorting)
-    }, [capturedSorting])
+    const SearchChange = (value: React.SetStateAction<string>) => {
+        setSearchTextValue(value)
+    };
+
 
-    useEffect(() => {
-        console.log(type)
-    }, [type])
   
 
-    const handleCapturedChange  = (value: React.SetStateAction<string | boolean | null>) => {
+    const filterTypes = [
+        "All",
+        "Bug",
+        "Dark", 
+        "Dragon", 
+        "Electric", 
+        "Fairy", 
+        "Fighting", 
+        "Fire", 
+        "Flying", 
+        "Ghost", 
+        "Grass", 
+        "Ground", 
+        "Ice", 
+        "Normal", 
+        "Poison", 
+        "Psychic", 
+        "Rock", 
+        "Steel", 
+        "Water"
+    ];
+    const CapturedChange  = (value: React.SetStateAction<string | boolean | null>) => {
         console.log(value)
-        if (value === "All") {
-            setCapturedSorting(null);
-        } else if (value === "Captured") {
-            setCapturedSorting(true)
+        if (value == "All") {
+            setCapturedFiltering(null);
+        } else if (value == "Captured") {
+            setCapturedFiltering(true)
         } else {
-            setCapturedSorting(false)
+            setCapturedFiltering(false)
         }
     };
 
-
-    const handleTypeChange = ( value: React.SetStateAction<string>) => {
+    const TypeChange = ( value: React.SetStateAction<string>) => {
         if (value === "All") {
             setType("");
         } else {
@@ -45,50 +62,54 @@ export const Header = () => {
     return (
             <View>
 
-{/* Image Container */}
+           
                 <View style={styles.imgContainer}>
                     <Image style = {styles.pokemonImg} source={require("../resources/pokemonLogo.png")} />
                 </View>
 
-    {/* Search, Filtering and Sorting Container */}
-    <View style={styles.filteringSortingContainer}>
-        <Text>Types</Text>
+              
+                <View style={styles.filteringContainer}>
+                    <Text style={{fontSize: 20, marginBottom: 5}}>Types</Text>
                 <SelectDropdown
                             buttonStyle={styles.DropdownFilter}
                             defaultValue={"All"}
                             data={filterTypes}
-                onSelect={(selectedItem, index) => {
-                    handleTypeChange(selectedItem)
+                            onSelect={(selectedItem) => {
+                                TypeChange(selectedItem)
                             }}
-                buttonTextAfterSelection={(selectedItem, index) => {
+                            buttonTextAfterSelection={(selectedItem) => {
                                 // text represented after item is selected
                                 return selectedItem
                             }}
-                rowTextForSelection={(item, index) => {
+                            rowTextForSelection={(item) => {
                                 // text represented for each item in dropdown
                                 return item
                             }}
 
                         />
-            <Text>Status</Text>
+                        <Text style={{fontSize: 20, marginBottom: 5}}>Status</Text>
                         <SelectDropdown
                             buttonStyle={styles.DropdownFilter}
                             defaultValue={"All"}
                             data={["All", "Captured", "Not captured"]}
-                onSelect={(selectedItem, index) => {
-                    handleCapturedChange(selectedItem)
+                            onSelect={(selectedItem) => {
+                                CapturedChange(selectedItem)
                             }}
-                buttonTextAfterSelection={(selectedItem, index) => {
-                    // text represented after item is selected
+                            buttonTextAfterSelection={(selectedItem) => {
                                 return selectedItem
                             }}
-                rowTextForSelection={(item, index) => {
-                    // text represented for each item in dropdown
+                            rowTextForSelection={(item) => {
                                 return item
                             }}
 
                         />
-             <SearchBar />
+                            <TextInput
+                    style={styles.searchBox}
+                    placeholder={"Search Pokemons"}
+                    
+                    value={searchTextValue}
+                    onChangeText={(value) => SearchChange(value)}
+                    ></TextInput>
                 </View>
 
             </View>
@@ -101,8 +122,7 @@ const styles = StyleSheet.create ({
     imgContainer: {
         flex: 1,
         alignItems: "center",
-        paddingBottom: 15,
-        paddingTop: 5
+        margin: 5
 
     },
     pokemonImg: {
@@ -113,8 +133,8 @@ const styles = StyleSheet.create ({
 
 
     },
-    filteringSortingContainer: {
-        backgroundColor: "#1E90FFFF",
+    filteringContainer: {
+        borderColor: "black",
         maxWidth: "100%",
         minWidth: "85%",
         flex: 1,
@@ -123,10 +143,22 @@ const styles = StyleSheet.create ({
     },
     DropdownFilter: {
         marginBottom: 5,
-        borderColor: "gray",
+        borderColor: "black",
         borderWidth: 0.3,
         borderRadius: 10,
         width: 300
+    },
+    searchBox: {
+        borderColor: "black",
+        width: "50%",
+        borderWidth: 0.3,
+        borderRadius: 10,
+        padding: 10,
+        marginTop: 10,
+        marginBottom: 10,
+        backgroundColor: "#FFE",
+        height: 50,
+        textAlign: 'center'
     }
 })
 

components/SearchBar.tsx

-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)
-
-    const handleSearchChange = (value: React.SetStateAction<string>) => {
-        setSearchText(value)
-    };
-
-  
-
-
-    return (
-        <TextInput
-        style={styles.searchBar}
-        placeholder={"Search Pokemons"}
-        textAlign={'center'}
-        value={searchText}
-        onChangeText={(value) => handleSearchChange(value)}
-        ></TextInput>
-    )
-
-
-}
-
-const styles = StyleSheet.create({
-    searchBar: {
-        borderColor: "gray",
-        width: "50%",
-        borderWidth: 0.3,
-        borderRadius: 10,
-        padding: 10,
-        marginTop: 10,
-        marginBottom: 10,
-        backgroundColor: "#FFE",
-        height: 50
-
-    }
-})
-
-export default SearchBar
\ No newline at end of file

containers/PokemonsContainer.tsx

@@ -14,7 +14,8 @@ export const PokemonsContainer = () => {
     const searchText = useRecoilValue(searchState)
     const typeText = useRecoilValue(typeState)
     const capturedState = useRecoilValue(capturedFilterState)
-    const limit = 14
+
+    const [limit, setLimit] = useState(15)
     const [skip, setSkip] = useState(0)
 
     const {loading, data} = useQuery(SEARCH_POKEMONS, {
@@ -30,21 +31,24 @@ export const PokemonsContainer = () => {
         }
     })
 
-    const handlePaginationButton = (newPage: string) => {
-        if(newPage === 'prev'){
-            setSkip(skip - 14)
+    const updateLabelAndSkip = (prevOrNext: string) => {
+        
+       if (prevOrNext === "next"){
+           setSkip(skip + 15)
+           
        } else {
-            setSkip(skip + 14)
+           setSkip(skip - 15)
        }
     }
 
     useEffect(() => {
         setSkip(0)
+        setLimit(15)
     }, [searchText, typeText, capturedState])
 
     if (loading){
         return (
-            <Text>LOADING..</Text>
+            <Text>Please wait..</Text>
         )
     } else if (data.searchPokemon === 0) {
         <Text>No matches for this search</Text>
@@ -59,19 +63,15 @@ export const PokemonsContainer = () => {
 
 
             <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')}
-                        />
+            {  
+            skip >= 15 &&
+            <TouchableOpacity style={styles.ButtonPrevTouch} onPress={() => updateLabelAndSkip("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')}
-                        />
+            {
+            data.searchPokemon.length >= 15 &&
+            <TouchableOpacity  style={styles.ButtonNextTouch} onPress={() => updateLabelAndSkip("next")}>
+            <Image style = {styles.nextButton} source={require('../resources/button.png')}/>
             </TouchableOpacity>}
             </View>
            
@@ -104,13 +104,13 @@ const styles = StyleSheet.create({
         height: "100%"
 
     },
-    paginationButtonNextPage: {
+    ButtonNextTouch: {
         width: 50,
         height: 50,
         color: "white"
 
     },
-    paginationButtonPrevPage: {
+    ButtonPrevTouch: {
         width: 50,
         height: 50,
         color: "white",