[전기차 충전소 찾기 앱/ReactNative] 즐겨찾기 화면

 

 

 

import { View, Text, ActivityIndicator } from 'react-native';
import React from 'react';

export default function FavoriteScreen() {
  return (
    <View>
      <View
        style={{
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <ActivityIndicator size={'large'} color="#4ECB71" />
        <Text>로딩...</Text>
      </View>
    </View>
  );
}

 

 

PlaceListView와 같이 파이어스토어에서 데이터를 가져온다.

export default function FavoriteScreen() {
  const { user } = useUser();
  const [favList, setFavList] = useState([]);

  useEffect(() => {
    user && getFav();
  }, [user]);

  const getFav = async (del = false) => {
    setFavList([]);

    const q = query(
      collection(db, 'favor-place'),
      where('email', '==', user.primaryEmailAddress.emailAddress)
    );
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
      setFavList((prev) => [...prev, doc.data()]);
    });
  };

  const isFav = (place) => {
    const result = favList.find((item) => item.id == place.id);
    return result ? true : false;
  };

 

 

아래쪽에 FlatList로 즐겨찾기 충전소를 세로로 표시하기.

      <FlatList
        data={favList}
        pagingEnabled
        renderItem={({ item, index }) => (
          <View key={index}>
            <PlaceItem place={item} isFav={isFav(item)} markedFav={() => getFav()} />
          </View>
        )}
      />
    </View>
  );
}

 

제목 추가

  return (

    <View>

      <Text style={{ textAlign: 'center', marginTop: 25, fontSize: 20 }}>내 즐겨찾기 충전소</Text>

      {!favList && (