From 34f83abef242864fd07e58e91010d4bdd413b4aa Mon Sep 17 00:00:00 2001 From: amundsf <amundsf@stud.ntnu.no> Date: Sun, 21 Nov 2021 23:25:24 +0100 Subject: [PATCH] final touches 2.0 --- App.tsx | 6 ++---- components/Header.tsx | 15 +++++---------- components/PokemonCard.tsx | 8 ++++---- containers/PokemonsContainer.tsx | 9 ++++----- 4 files changed, 15 insertions(+), 23 deletions(-) diff --git a/App.tsx b/App.tsx index 8f9f2ce..0d20f55 100644 --- a/App.tsx +++ b/App.tsx @@ -3,12 +3,10 @@ import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native'; import PokemonsContainer from './containers/PokemonsContainer'; import {ApolloClient, ApolloProvider, InMemoryCache} from "@apollo/client"; import { Header } from './components/Header'; -import { - RecoilRoot, -} from 'recoil'; +import { RecoilRoot } from 'recoil'; const App = () => { - + // where the database is located at const client = new ApolloClient({ uri: 'http://it2810-14.idi.ntnu.no:4000/graphql', cache: new InMemoryCache() diff --git a/components/Header.tsx b/components/Header.tsx index 80e43e5..d196ebc 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,5 +1,4 @@ -import { textAlign } from '@mui/system'; -import React, { useEffect } from 'react'; +import React from 'react'; import { Image, Text,TextInput, StyleSheet, View } from "react-native"; import SelectDropdown from 'react-native-select-dropdown' import {useRecoilState} from 'recoil' @@ -7,6 +6,7 @@ import {searchState, capturedFilterState, typeState } from "../atoms/atoms"; export const Header = () => { + // hooks states init const [searchTextValue, setSearchTextValue] = useRecoilState(searchState) const [capturedFiltering, setCapturedFiltering] = useRecoilState(capturedFilterState) const [type, setType] = useRecoilState(typeState) @@ -18,7 +18,7 @@ export const Header = () => { - + // all types of pokemons on the app const filterTypes = [ "All", "Bug", @@ -61,13 +61,9 @@ export const Header = () => { return ( <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 @@ -78,14 +74,13 @@ export const Header = () => { TypeChange(selectedItem) }} buttonTextAfterSelection={(selectedItem) => { - // text represented after item is selected + // text after selection return selectedItem }} rowTextForSelection={(item) => { - // text represented for each item in dropdown + // text for each item return item }} - /> <Text style={{fontSize: 20, marginBottom: 5}}>Status</Text> <SelectDropdown diff --git a/components/PokemonCard.tsx b/components/PokemonCard.tsx index 8a155a6..e72398e 100644 --- a/components/PokemonCard.tsx +++ b/components/PokemonCard.tsx @@ -18,7 +18,7 @@ const PokemonCard: React.FC<{ pokemon: Pokemon }> = ({pokemon}) => { } }) - const handleClick = () => { + const handleClick = () => { // When user clicks on capture/captured! setClicked(!clicked) }; @@ -27,13 +27,13 @@ const PokemonCard: React.FC<{ pokemon: Pokemon }> = ({pokemon}) => { updateDatabase() } - return ( //touchablewithoutfeedback for mer info knappen + return ( <View style={styles.pokemon}> <View style={styles.pokemon__name}> <Text style = {styles.pokeman__name_text}>{pokemon.name}</Text> </View> - {clicked && + {clicked && // if button is clicked show more info <View style={styles.pokemon__meta}> <Text style={styles.pokemon__meta_text}>#{pokemon.id}</Text> </View> @@ -44,7 +44,7 @@ const PokemonCard: React.FC<{ pokemon: Pokemon }> = ({pokemon}) => { </View> </TouchableWithoutFeedback> - {clicked && + {clicked && //if button clicked change button appearance <View style={styles.pokemon__type}> {pokemon.pokemonTypes.map((t: string) => (<Text style={styles.pokemon__type_text} key={t}> {t}</Text>))} </View> diff --git a/containers/PokemonsContainer.tsx b/containers/PokemonsContainer.tsx index 47ae1c4..03ff2ac 100644 --- a/containers/PokemonsContainer.tsx +++ b/containers/PokemonsContainer.tsx @@ -10,11 +10,10 @@ import { capturedFilterState, searchState, typeState } from '../atoms/atoms'; export const PokemonsContainer = () => { - + // hooks state init const searchText = useRecoilValue(searchState) const typeText = useRecoilValue(typeState) const capturedState = useRecoilValue(capturedFilterState) - const [limit, setLimit] = useState(15) const [skip, setSkip] = useState(0) @@ -31,7 +30,7 @@ export const PokemonsContainer = () => { } }) - const updateLabelAndSkip = (prevOrNext: string) => { + const updateLabelAndSkip = (prevOrNext: string) => { // pagination if (prevOrNext === "next"){ setSkip(skip + 15) @@ -41,11 +40,11 @@ export const PokemonsContainer = () => { } } - useEffect(() => { + useEffect(() => { // pagination setSkip(0) setLimit(15) }, [searchText, typeText, capturedState]) - + if (loading){ return ( <Text>Please wait..</Text> -- GitLab