auth and leadeboard

src/context/AuthContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, ReactNode, useEffect, useState } from 'react';
-import { auth, signInWithPopup, GithubAuthProvider } from '../../service';
+import { auth, signInWithPopup, GithubAuthProvider } from '../service';
 
 type ReactChildren = {
  children: ReactNode;
@@ -9,7 +9,7 @@ type UserProps = {
  id: string;
  name: string;
  avatar: string;
-
+ screenName?: string
 }
 
 type AuthContextProps = {
@@ -27,14 +27,13 @@ function AuthContextProvider({children}:ReactChildren){
  //const auth = getAuth();
  const provider = new GithubAuthProvider();
  const { user } = await signInWithPopup(auth,provider);
- console.log({user});
+
  const _user = {
  id: user.uid,
  name: user.displayName,
  avatar: user.photoURL
  }
  setUser(_user);
- console.log(_user);
 
  } catch (error) { 
  console.error(error);
@@ -44,6 +43,7 @@ function AuthContextProvider({children}:ReactChildren){
  useEffect(() => {
  const subscribe = auth.onAuthStateChanged(user=>{
  if(user){
+
  const { displayName, photoURL, uid } = user;
  const _user = {
  id: uid,

src/context/ChallengeContext.tsx

@@ -2,6 +2,8 @@ import { createContext, ReactNode, useEffect, useState } from 'react';
 import { LevelUpModal } from '../components/LevelUpModal';
 import challenges from '../../challenges.json';
 import Cookies from 'js-cookie';
+import { database, doc, getDoc, setDoc } from '../service/index';
+import { useAuth } from '../hooks/useAuth';
 
 type ReactChildrenProps = {
  children: ReactNode;
@@ -41,9 +43,9 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
  const [challengesCompleted, setChallengesCompleted] = useState(rest.challengesCompleted?? 0);
  const [currentChallenge, setCurrentChallenge] = useState<ChallengeProps>(null);
  const [ isLevelUpModalOpen, setIsLevelUpModalOpen ] = useState(false);
-
  const experienceToNextLevel = Math.pow((level + 1) * 4, 2)
-
+ const { user } = useAuth();
+
  useEffect(() => {
  Notification.requestPermission();
  }, [])
@@ -55,11 +57,54 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
 
  }, [level, currentXP, challengesCompleted])
 
+ useEffect(() => {
+ (async()=>{
+
+ if(user){
+ try {
+ const userData = {
+ name: user.name,
+ avatar: user.avatar,
+ level,
+ challengesCompleted,
+ experience: currentXP
+ }
+ const docRef = doc(database,'leaderboard',user.id);
+ const docSnap = await setDoc(docRef, userData);
+
+ } catch (error) {
+ console.error(error);
+ }
+ }
+ })();
+ }, [user, level, currentXP, challengesCompleted])
+
+ type FirestoreUserProps = Record<string,number>
+
+ type FirestoreUserProp = {
+ level: number;
+ experience: number;
+ challangesCompleted: number;
+ }
+ useEffect(() => {
+ (async()=>{
+ if(user){
+ const query = doc(database,'leaderboard',user.id)
+ const result = await getDoc(query);
+ const userScore:FirestoreUserProps = result.data();
+ setLevel(userScore.level);
+ setCurrentXP(userScore.experience);
+ setChallengesCompleted(userScore.challengesCompleted);
+ }
+ })();
+ }, [user])
+
  function levelUp(){
  setLevel(prev=>(prev+1));
  setIsLevelUpModalOpen(true);
  }
 
+
  function startNewChallenge(){
  const randomIndex = Math.floor(Math.random() * challenges.length);
  const _currentChallenge = challenges[randomIndex];
@@ -74,11 +119,13 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
  }
  }
 
+
  function resetChallenge(){
  setCurrentChallenge(null);
 
  }
 
+
  function completeChallenge(){
  if(!currentChallenge){
  return;
@@ -100,7 +147,6 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
 
  }
 
-
  return(
  <ChallengeContext.Provider value={{
  level,

src/pages/ranking/index.tsx

@@ -1,6 +1,5 @@
 import { GetServerSideProps } from 'next';
-import { database, getDoc, doc } from '../../../service';
-import { useAuth } from '../../hooks/useAuth';
+import { database, getDocs, collection } from '../../service';
 
 import styles from './styles.module.scss'; 
 
@@ -18,12 +17,10 @@ type LeaderBoardProps = {
 }
 
 export default function Ranking({leaderboard}:LeaderBoardProps){
- const { user, signInWithGithub } = useAuth();
 
  return(
  <div className={styles.container}>
  <h1>Leaderboard</h1>
- <button onClick={signInWithGithub}>Click meeee</button>
  <table>
  <thead>
  <tr>
@@ -71,19 +68,23 @@ export default function Ranking({leaderboard}:LeaderBoardProps){
 
 export const getServerSideProps:GetServerSideProps = async()=>{
 
- const docRef = doc(database,'leaderboard/lZVnG9F2Jy3Mj89rmhhI');
- const docSnap = await getDoc(docRef);
+ let leaderboard = [];
+ const query = collection(database,'leaderboard');
+ const docSnap = await getDocs(query);
 
- if (docSnap.exists()) {
- const data = docSnap.data();
- const leaderboard:LeaderBoard = data.all;
- return{
+ docSnap.forEach(doc=>{
+ leaderboard = [...leaderboard, doc.data()];
+ })
+
+ if(leaderboard.length>0){
+ return {
  props:{
  leaderboard
  }
  }
- } 
- return{
+ }
+
+ return {
  props:{
  leaderboard: null
  }

service/index.tsx → src/service/index.tsx

@@ -1,5 +1,5 @@
 import { initializeApp } from "firebase/app";
-import { getFirestore, getDocs, getDoc, doc } from 'firebase/firestore'
+import { getFirestore, getDoc,getDocs, doc, setDoc, collection } from 'firebase/firestore'
 import { getAuth, signInWithPopup, signOut, GithubAuthProvider } from 'firebase/auth';
 
 const FirebaseConfig = {
@@ -16,4 +16,4 @@ const app = initializeApp(FirebaseConfig);
 const auth = getAuth();
 const database = getFirestore();
 
-export { auth, signInWithPopup, GithubAuthProvider, signOut, database, getDocs, getDoc, doc };
+export { auth, signInWithPopup, GithubAuthProvider, signOut, database, collection, setDoc,getDocs, getDoc, doc };