diff --git a/components/Header.tsx b/components/Header.tsx
index 73e4bda1125acc7c988e66679a92eb8fd013916a..80e43e5e3a055acb4f6106356be686fd24ef6751 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,40 +1,57 @@
+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])
- useEffect(() => {
- console.log(type)
- }, [type])
+ const SearchChange = (value: React.SetStateAction<string>) => {
+ setSearchTextValue(value)
+ };
- 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 {
@@ -43,55 +60,59 @@ 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>
- <SelectDropdown
- buttonStyle={styles.DropdownFilter}
- defaultValue={"All"}
- data={filterTypes}
- onSelect={(selectedItem, index) => {
- handleTypeChange(selectedItem)
- }}
- buttonTextAfterSelection={(selectedItem, index) => {
- // text represented after item is selected
- return selectedItem
- }}
- rowTextForSelection={(item, index) => {
- // text represented for each item in dropdown
- return item
- }}
-
- />
- <Text>Status</Text>
- <SelectDropdown
- buttonStyle={styles.DropdownFilter}
- defaultValue={"All"}
- data={["All", "Captured", "Not captured"]}
- onSelect={(selectedItem, index) => {
- handleCapturedChange(selectedItem)
- }}
- buttonTextAfterSelection={(selectedItem, index) => {
- // text represented after item is selected
- return selectedItem
- }}
- rowTextForSelection={(item, index) => {
- // text represented for each item in dropdown
- return item
- }}
-
- />
- <SearchBar />
- </View>
-
-</View>
+ <View>
+
+
+ <View style={styles.imgContainer}>
+ <Image style = {styles.pokemonImg} source={require("../resources/pokemonLogo.png")} />
+ </View>
+
+
+ <View style={styles.filteringContainer}>
+ <Text style={{fontSize: 20, marginBottom: 5}}>Types</Text>
+ <SelectDropdown
+ buttonStyle={styles.DropdownFilter}
+ defaultValue={"All"}
+ data={filterTypes}
+ onSelect={(selectedItem) => {
+ TypeChange(selectedItem)
+ }}
+ buttonTextAfterSelection={(selectedItem) => {
+ // text represented after item is selected
+ return selectedItem
+ }}
+ rowTextForSelection={(item) => {
+ // text represented for each item in dropdown
+ return item
+ }}
+
+ />
+ <Text style={{fontSize: 20, marginBottom: 5}}>Status</Text>
+ <SelectDropdown
+ buttonStyle={styles.DropdownFilter}
+ defaultValue={"All"}
+ data={["All", "Captured", "Not captured"]}
+ onSelect={(selectedItem) => {
+ CapturedChange(selectedItem)
+ }}
+ buttonTextAfterSelection={(selectedItem) => {
+ return selectedItem
+ }}
+ rowTextForSelection={(item) => {
+ return item
+ }}
+
+ />
+ <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'
}
})
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
deleted file mode 100644
index d8330af3478b11ad1a4617f8b75a351b04f8ae65..0000000000000000000000000000000000000000
--- a/components/SearchBar.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-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
diff --git a/containers/PokemonsContainer.tsx b/containers/PokemonsContainer.tsx
index 0cb57b86fe2df94b6773eb721cf524cc266fb80f..47ae1c48a5716bef6c688b9a669f805e6288c078 100644
--- a/containers/PokemonsContainer.tsx
+++ b/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)
- } else {
- setSkip(skip + 14)
- }
+ const updateLabelAndSkip = (prevOrNext: string) => {
+
+ if (prevOrNext === "next"){
+ setSkip(skip + 15)
+
+ } else {
+ 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",