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 ( - - - - - - - - - - - - - + + + + + +
+ + + + + + ); } 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( { + 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) => { + console.log(value) + if (value === "All") { + setCapturedSorting(null); + } else if (value === "Captured") { + setCapturedSorting(true) + } else { + setCapturedSorting(false) + } + }; + + + const handleTypeChange = ( value: React.SetStateAction) => { + if (value === "All") { + setType(""); + } else { + setType(value); + } + }; + + return ( + + +{/* Image Container */} + + + + + {/* Search, Filtering and Sorting Container */} + + Types + { + 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 + }} + + /> + Status + { + 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 + }} + + /> + + + + + ) + +} + +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) => ) } + ) @@ -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) => { + setSearchText(value) + }; + + + + + return ( + handleSearchChange(value)} + > + ) + + +} + +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