Merge branch 'Last_touches' into 'master'

final touches 2.0

See merge request !7

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()

components/Header.tsx

-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

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>

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,7 +40,7 @@ export const PokemonsContainer = () => {
        }
     }
 
-    useEffect(() => {
+    useEffect(() => { // pagination
         setSkip(0)
         setLimit(15)
     }, [searchText, typeText, capturedState])