diff --git a/App.tsx b/App.tsx
index 4ed5edfe521924c7ccc13078c2550bf9d660c8c3..20dbe372f13db78ee1b31490b49d781ecfc1d65f 100644
--- a/App.tsx
+++ b/App.tsx
@@ -2,6 +2,14 @@ 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 {
+ RecoilRoot,
+ atom,
+ selector,
+ useRecoilState,
+ useRecoilValue,
+} from 'recoil';
const App = () => {
@@ -11,19 +19,18 @@ const App = () => {
});
return (
- <ApolloProvider client={client}>
- <SafeAreaView style={{flex:1 , backgroundColor: "#1E90FFFF"}}>
- <ScrollView>
- <View style={styles.pokemonDiv}>
- <PokemonsContainer />
- </View>
- </ScrollView>
- </SafeAreaView>
-
- </ApolloProvider>
-
-
-
+ <RecoilRoot>
+ <ApolloProvider client={client}>
+ <SafeAreaView style={{flex:1 , backgroundColor: "#1E90FFFF"}}>
+ <ScrollView>
+ <View style={styles.pokemonDiv}>
+ <Header />
+ <PokemonsContainer />
+ </View>
+ </ScrollView>
+ </SafeAreaView>
+ </ApolloProvider>
+ </RecoilRoot>
);
}
diff --git a/atoms/atoms.ts b/atoms/atoms.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3b3aaaf568db23abbe35c5f9bfb96b5d1b44d74d
--- /dev/null
+++ b/atoms/atoms.ts
@@ -0,0 +1,16 @@
+import {atom} from "recoil";
+
+export const searchState = atom({
+ key: 'searchState', // unique ID (with respect to other atoms/selectors)
+ default: '', // default value (aka initial value)
+});
+
+export const typeState = atom({
+ key: 'typeState', // unique ID (with respect to other atoms/selectors)
+ default: '', // default value (aka initial value)
+})
+
+export const capturedFilterState = atom<boolean | null>( {
+ key: 'capturedFilterState',
+ default: null
+})
\ No newline at end of file
diff --git a/containers/Header.tsx b/containers/Header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6c0fa972e4caca86f5c8e383cf9d1c2098135c95
--- /dev/null
+++ b/containers/Header.tsx
@@ -0,0 +1,135 @@
+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 {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)
+
+ 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 handleCapturedChange = (value: React.SetStateAction<string | boolean | null>) => {
+ console.log(value)
+ if (value === "All") {
+ setCapturedSorting(null);
+ } else if (value === "Captured") {
+ setCapturedSorting(true)
+ } else {
+ setCapturedSorting(false)
+ }
+ };
+
+
+ const handleTypeChange = ( value: React.SetStateAction<string>) => {
+ if (value === "All") {
+ setType("");
+ } else {
+ setType(value);
+ }
+ };
+
+ 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>
+ )
+
+}
+
+const styles = StyleSheet.create ({
+
+ imgContainer: {
+ flex: 1,
+ alignItems: "center",
+ paddingBottom: 15,
+ paddingTop: 5
+
+ },
+ pokemonImg: {
+ flex: 1,
+ width: 250,
+ height: 110
+
+ },
+ filteringSortingContainer: {
+ backgroundColor: "#1E90FFFF",
+ maxWidth: "100%",
+ minWidth: "85%",
+ flex: 1,
+ flexDirection: 'column',
+ alignItems: 'center'
+ },
+ DropdownFilter: {
+ marginBottom: 5,
+ borderColor: "gray",
+ borderWidth: 0.3,
+ borderRadius: 10,
+ width: 300
+ }
+})
+export default Header
+
+function typeFilter(arg0: () => void, typeFilter: any) {
+ throw new Error('Function not implemented.');
+}
diff --git a/containers/PokemonsContainer.tsx b/containers/PokemonsContainer.tsx
index 0bb903ff1a9920781f4e8f8419ea6a51dd837fe2..fba5d0ef079c824964c5744189f4a496c005f6a2 100644
--- a/containers/PokemonsContainer.tsx
+++ b/containers/PokemonsContainer.tsx
@@ -1,15 +1,20 @@
import React, { useState } from 'react';
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Alert, Button, NativeSyntheticEvent, NativeTouchEvent, ScrollView, StyleSheet, Text, 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 = () => {
- const searchText = ""
- const typeText = ""
- const capturedState = null
+
+ const searchText = useRecoilValue(searchState)
+ const typeText = useRecoilValue(typeState)
+ const capturedState = useRecoilValue(capturedFilterState)
const [limit, setLimit] = useState(15)
const [skip, setSkip] = useState(0)
@@ -38,6 +43,7 @@ const PokemonsContainer = () => {
{data.searchPokemon && data.searchPokemon.map((pokemon: Pokemon) =>
<PokemonCard key={pokemon.id} pokemon={pokemon}/>)
}
+
</View>
)
@@ -57,6 +63,7 @@ const styles = StyleSheet.create({
},
+
});
export default PokemonsContainer
\ No newline at end of file
diff --git a/containers/SearchBar.tsx b/containers/SearchBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..899975ecaccffedff78902c4aaf590c66ef03079
--- /dev/null
+++ b/containers/SearchBar.tsx
@@ -0,0 +1,46 @@
+import React, { useEffect } 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/img/amund ig pb.jpg b/img/amund ig pb.jpg
deleted file mode 100644
index 7f2e3a195f6a2e78111260e3e396361b1b358efb..0000000000000000000000000000000000000000
Binary files a/img/amund ig pb.jpg and /dev/null differ
diff --git a/img/kris.PNG b/img/kris.PNG
deleted file mode 100644
index 54e4df74382b32557a408e98912e34616755dd3f..0000000000000000000000000000000000000000
Binary files a/img/kris.PNG and /dev/null differ
diff --git a/package-lock.json b/package-lock.json
index 8b912776ac3a5eb9fb46b18a8949ca08b87550e2..799caabf679a41a6255aeb48954994a458d2d091 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3979,6 +3979,11 @@
"tslib": "^2.1.0"
}
},
+ "hamt_plus": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+ "integrity": "sha1-4hwlKWjH4zsg9qGwlM2FeHomVgE="
+ },
"has": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -6019,6 +6024,11 @@
"nullthrows": "^1.1.1"
}
},
+ "react-native-select-dropdown": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/react-native-select-dropdown/-/react-native-select-dropdown-1.4.0.tgz",
+ "integrity": "sha512-CeiFQ8F3lI7SAB9l/uMbGUeJmslUkyz9Vv8DHutOjO1bJpP1/Kfu9lH6QYjJ41DXFGQzT1bw8EGHe8rz/eTC/A=="
+ },
"react-native-web": {
"version": "0.17.1",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.17.1.tgz",
@@ -6089,6 +6099,14 @@
"resolve": "^1.1.6"
}
},
+ "recoil": {
+ "version": "0.5.2",
+ "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.5.2.tgz",
+ "integrity": "sha512-Edibzpu3dbUMLy6QRg73WL8dvMl9Xqhp+kU+f2sJtXxsaXvAlxU/GcnDE8HXPkprXrhHF2e6SZozptNvjNF5fw==",
+ "requires": {
+ "hamt_plus": "1.0.2"
+ }
+ },
"regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
diff --git a/package.json b/package.json
index b05c6a18bb4ca89360f18f9efcf499d90f3ef1a6..eb8c7f5d8a9b12b369455fc982745d78dc2a3b8f 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
+ "react-native-select-dropdown": "^1.4.0",
+ "recoil": "^0.5.2",
"react-native-web": "0.17.1"
},
"devDependencies": {
diff --git a/resources/button.png b/resources/button.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f16ee6ec71df393333bfa1efd71f1f50aacdcbe
Binary files /dev/null and b/resources/button.png differ
diff --git a/resources/pokemonLogo.png b/resources/pokemonLogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..3473d17d18a72b22090a0c93d84a92ede26f34ff
Binary files /dev/null and b/resources/pokemonLogo.png differ