(#2) connect with backend

components/PokemonCard.tsx

-import React from 'react';
-import { StyleSheet, Image, Alert, Text, View, Button, Pressable } from 'react-native';
+import { useMutation } from '@apollo/react-hooks';
+import React, { useState } from 'react';
+import { StyleSheet, Image, Text, View, Pressable, TouchableWithoutFeedback } from 'react-native';
+import { MUTATE_POKEMON } from '../graphql/get-pokemons';
+import {Pokemon} from "../types/types";
 
-const PokemonCard = () => {
-  return (
+
+const PokemonCard: React.FC<{ pokemon: Pokemon }> = ({pokemon}) => {
+
+  const [clicked, setClicked] = useState(false);
+  const [capturedPokemons, setCapturedPokemons] = useState(pokemon.captured);
+
+  const [updateDatabase] = useMutation(MUTATE_POKEMON, {
+      variables: {
+          pokemonId: {
+              id: pokemon.id
+          }
+      }
+  })
+
+  const handleClick = () => {
+    setClicked(!clicked)
+};
+
+  const updateDatabaseFunction = () => {
+    setCapturedPokemons(!capturedPokemons)
+    updateDatabase()
+}
+
+  return ( //touchablewithoutfeedback for mer info knappen
       <View style={styles.pokemon}>
         <View style={styles.pokemon__name}>
-        <Text>Kristin Hestnes</Text>
+        <Text>{pokemon.name}</Text>
         </View>
   
-        <View style={styles.pokemon__meta}>
-        <Text style={styles.pokemon__meta_text}># 69</Text>
-  
-        </View>
-        <View style={styles.pokemon__image}>
-         <Image style={styles.pokemon__image_img} source={{uri: 'https://assets.pokemon.com/assets/cms2/img/pokedex/full/004.png'}} />
-        </View>
+        {clicked && 
+         <View style={styles.pokemon__meta}>
+         <Text style={styles.pokemon__meta_text}>#{pokemon.id}</Text>
+         </View>
+        }
+        <TouchableWithoutFeedback onPress={handleClick}>
+          <View style={styles.pokemon__image}>
+          <Image style={styles.pokemon__image_img} source={{uri: pokemon.imgUrl}} />
+          </View>
+        </TouchableWithoutFeedback>
 
+        {clicked && 
         <View style={styles.pokemon__type}>
-          <Text style={styles.pokemon__type_text}>Alcoholic</Text>
-          <Text style={styles.pokemon__type_text}>Attacker</Text>
+        {pokemon.pokemonTypes.map((t: string) => (<Text style={styles.pokemon__type_text} key={t}> {t}</Text>))}
         </View>
-
-        <View>
-          <Pressable style={styles.button} onPress={() => Alert.alert("REJECTED, NOT HOT ENOUGH!")}>
-            <Text style={{fontSize: 30, color: 'white'}}>Hit on me?</Text>
+        }
+        
+        
+        <View >
+          <Pressable style={[capturedPokemons ? styles.buttonPressed: styles.buttonNotPressed]} onPress={updateDatabaseFunction}>
+            <Text style={{fontSize: 30, color: 'white'}}>{capturedPokemons ? "Captured!" : "Catch me!"}</Text>
            </Pressable>
         </View>
         
@@ -111,7 +141,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     
   },
-  button: {
+  buttonNotPressed: {
     backgroundColor: '#17c589',
     width: "100%",
     paddingTop: 0,
@@ -120,6 +150,15 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
 
   },
+  buttonPressed: {
+    backgroundColor: '#FF6347',
+    width: "100%",
+    paddingTop: 0,
+    paddingBottom: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+
+  }
 });