salvando e carregando favoritos no armazenamento interno

proffy-mobile/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@expo-google-fonts/archivo": "^0.1.0",
     "@expo-google-fonts/poppins": "^0.1.0",
+    "@react-native-community/async-storage": "~1.11.0",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "^5.8.0",
     "@react-navigation/native": "^5.7.3",

proffy-mobile/src/components/TeacherItem/index.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { View, Image, Text, Linking } from 'react-native';
 import { RectButton } from 'react-native-gesture-handler';
+import AsyncStorage from '@react-native-community/async-storage';
 
 import styles from './styles';
 import heartOutlineIcon from '../../assets/images/icons/heart-outline.png'
@@ -18,15 +19,37 @@ export interface Teacher {
 }
 
 interface TeacherItemProps {
-  teacher: Teacher
+  teacher: Teacher,
+  favorited: boolean
 }
 
-const TeacherItem: React.FC<TeacherItemProps> = ({ teacher }) => {
+const TeacherItem: React.FC<TeacherItemProps> = ({ teacher, favorited }) => {
+  const [isFavorited, setIsFavorited] = useState(favorited)
+
   function handleLinkToWhatsapp() {
     // para abrir o app do whatsapp
     Linking.openURL(`whatsapp://send?phone=55${teacher.whatsapp}`)
   }
 
+  async function handleToggleFavorite() {
+    if (isFavorited) {
+      // remover dos favoritos
+    } else {
+      // add aos favoritos
+      const favorites = await AsyncStorage.getItem('favorites')
+
+      let favoritesArray = []
+
+      if (favorites) {
+        favoritesArray = JSON.parse(favorites)
+      }
+      favoritesArray.push(teacher)
+
+      setIsFavorited(true)
+      await AsyncStorage.setItem('favorites', JSON.stringify(favoritesArray))
+    }
+  }
+
   return (
     <View style={styles.container}>
       <View style={styles.profile}>
@@ -51,9 +74,15 @@ const TeacherItem: React.FC<TeacherItemProps> = ({ teacher }) => {
         </Text>
 
         <View style={styles.buttonsContainer}>
-          <RectButton style={[styles.favoriteButton, styles.favorited]}>
-            {/* <Image source={heartOutlineIcon}/> */}
-            <Image source={unfavoriteIcon} />
+          <RectButton
+            onPress={handleToggleFavorite}
+            style={[
+              styles.favoriteButton,
+              isFavorited ? styles.favorited : {}]}>
+            {isFavorited
+              ? <Image source={unfavoriteIcon} />
+              : <Image source={heartOutlineIcon} />}
+
           </RectButton>
           <RectButton onPress={handleLinkToWhatsapp} style={styles.contactButton}>
             <Image source={whatsappIcon} />

proffy-mobile/src/pages/TeacherList/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { View, ScrollView, Text, TextInput } from 'react-native'
 
 import styles from './styles'
@@ -7,16 +7,33 @@ import TeacherItem, { Teacher } from '../../components/TeacherItem'
 import { BorderlessButton, RectButton } from 'react-native-gesture-handler'
 import { Feather } from '@expo/vector-icons';
 import api from '../../services/api'
+import AsyncStorage from '@react-native-community/async-storage'
 
 function TeacherList() {
   const [teachers, setTeachers] = useState([])
+  const [favorites, setFavorites] = useState<number[]>([])
   // Para exibir ou nao o formulario de filtro
   const [isFiltersVisible, setIsFiltersVisible] = useState(false)
 
   const [subject, setSubject] = useState('')
   const [week_day, setWeekDay] = useState('')
   const [time, setTime] = useState('')
 
+  // capturando todos os professoar que o usuario ja favoritou
+  useEffect(() => {
+    AsyncStorage.getItem('favorites').then(response => {
+      if (response) {
+        // capturando a resposta com os favoritos, convertendo em objeto e salvando
+        const favoritedTeachers = JSON.parse(response)
+        // Array com os ids dos professores favoritados
+        const favoritedTeachersIds = favoritedTeachers.map((teacher: Teacher) => {
+          return teacher.id
+        })
+        setFavorites(favoritedTeachersIds)
+      }
+    })
+  }, [])
+
   function handleToggleFiltersVisible() {
     setIsFiltersVisible(!isFiltersVisible)
   }
@@ -59,7 +76,7 @@ function TeacherList() {
             />
 
             {/* Dois inputs um ao lado do oturo */}
-            {/* TODO Usar select para o dia da semana (picker) */}
+            {/* TODO Usar select para o dia da semana para não uasr um numero (picker) */}
             <View style={styles.inputGroup}>
               <View style={styles.inputBlock}>
                 <Text style={styles.label}>Dia da semana</Text>
@@ -105,7 +122,14 @@ function TeacherList() {
       >
         {/* Exibindo a lista de professores */}
         {teachers.map((teacher: Teacher) => {
-          return <TeacherItem key={teacher.id} teacher={teacher} />
+          return (
+            <TeacherItem
+              key={teacher.id}
+              teacher={teacher}
+              favorited={favorites.includes(teacher.id)}
+            />
+          )
+
         })}
 
       </ScrollView>

proffy-mobile/yarn.lock

@@ -1122,6 +1122,13 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
+"@react-native-community/async-storage@~1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/async-storage/-/async-storage-1.11.0.tgz#bf81b8813080846f150c67f531987c429b442166"
+  integrity sha512-Pq9LlmvtCEKAGdkyrgTcRxNh2fnHFykEj2qnRYijOl1pDIl2MkD5IxaXu5eOL0wgOtAl4U//ff4z40Td6XR5rw==
+  dependencies:
+    deep-assign "^3.0.0"
+
 "@react-native-community/cli-debugger-ui@^4.9.0":
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.9.0.tgz#4177764ba69243c97aa26829d59d9501acb2bd71"