helpus 앱 - 리더보드 추가 테스트

앱 출시 후 매일 조금씩 업데이트를 하고 있습니다~

현재 앱이 별다른 보상이 없는 구조라서, 보상 아닌 보상차원에서 자신의 활동 순위를 표로 만들어 봤습니다. 일명 리더보드라고 하죠.

깔끔하고 예쁩니다~^^
아직 출시판에 적용하기 전입니다.

구현하는 것은 어렵지 않습니다.

1. 리더보드 패키지 설치
   https://github.com/JoeRoddy/react-native-leaderboard

2. Helped/Got Helped/Voted 탭을 누르면 Firebase에서 사용자 데이터 정렬하여 가져오기

  // fetch data and build board data
  const fetchData = async (property) => {
    // users on firestore
    const usersRef = firebase.firestore().collection('users');
    //// get data
    // ordering and showing only top users
    const maxElem = 10;
    usersRef.orderBy(property, "desc").limit(maxElem)
    .onSnapshot(snapshot => {
      let data = [];
      // build data array
      snapshot.docs.forEach(doc => {
        data = [...data, ({
          name: doc.data().name,
          iconUrl: doc.data().avatarUrl,
          score: doc.data()[property]
        })];
      });
      console.log('[LeadersScreen|fetchData] data', data);
      // set data
      setBoardData(data);
    });
  };

1. 사용자 전체에서 앱 사용자의 순위 정보 계산하기

2. 화면에 표시하기