posting user score

src/components/NavBar/index.tsx

@@ -20,7 +20,7 @@ export function NavBar(){
  </div>
  </Link>
 
- <Link href="/ranking">
+ <Link href="/leaderboard">
  <div className={selectedPage === 'ranking'? styles.selected : ''} onClick={()=>setSelectedPage('ranking')}>
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http:https://www.w3.org/2000/svg">
  <g>

src/context/AuthContext.tsx

@@ -9,7 +9,6 @@ type UserProps = {
  id: string;
  name: string;
  avatar: string;
- screenName?: string
 }
 
 type AuthContextProps = {
@@ -24,7 +23,6 @@ function AuthContextProvider({children}:ReactChildren){
 
  async function signInWithGithub(){
  try {
- //const auth = getAuth();
  const provider = new GithubAuthProvider();
  const { user } = await signInWithPopup(auth,provider);
 

src/context/ChallengeContext.tsx

@@ -1,7 +1,6 @@
 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';
 
@@ -35,31 +34,30 @@ type ChallengeContextProps = {
  completeChallenge: ()=>void;
 }
 
+type FirestoreUserProps = Record<string,number>;
+
 const ChallengeContext = createContext({} as ChallengeContextProps);
 
 function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
- const [level, setLevel] = useState(rest.level?? 1);
- const [currentXP, setCurrentXP] = useState(rest.currentXP?? 0);
- const [challengesCompleted, setChallengesCompleted] = useState(rest.challengesCompleted?? 0);
+ const [level, setLevel] = useState(1);
+ const [currentXP, setCurrentXP] = useState(0);
+ const [challengesCompleted, setChallengesCompleted] = useState(0);
  const [currentChallenge, setCurrentChallenge] = useState<ChallengeProps>(null);
  const [ isLevelUpModalOpen, setIsLevelUpModalOpen ] = useState(false);
- const experienceToNextLevel = Math.pow((level + 1) * 4, 2)
  const { user } = useAuth();
+ const experienceToNextLevel = Math.pow((level + 1) * 4, 2);
+
+ const [isFirstLoad, setIsFirstLoad] = useState(true);
 
  useEffect(() => {
  Notification.requestPermission();
  }, [])
 
  useEffect(() => {
- Cookies.set('level', String(level),{sameSite:'strict'});
- Cookies.set('currentXP', String(currentXP),{sameSite:'strict'});
- Cookies.set('challengesCompleted', String(challengesCompleted),{sameSite:'strict'});
-
- }, [level, currentXP, challengesCompleted])
-
- useEffect(() => {
+ if(isFirstLoad){
+ return;
+ }
  (async()=>{
-
  if(user){
  try {
  const userData = {
@@ -70,41 +68,58 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
  experience: currentXP
  }
  const docRef = doc(database,'leaderboard',user.id);
- const docSnap = await setDoc(docRef, userData);
-
- } catch (error) {
- console.error(error);
- }
- }
+ await setDoc(docRef, userData);
+ console.log('posting');
+ } 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 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);
+
+ if(result.exists()){
+ const userScore:FirestoreUserProps = result.data();
+ setLevel(userScore.level);
+ setCurrentXP(userScore.experience);
+ setChallengesCompleted(userScore.challengesCompleted);
+ console.log('fetching');
+ }
+ setIsFirstLoad(false);
  }
+
  })();
- }, [user])
+ }, [user]);
+
+ useEffect(() => {
+ if(user) return;
+
+ const storage:FirestoreUserProps = JSON.parse(localStorage.getItem('userScore'));
+ setLevel(storage.level);
+ setCurrentXP(storage.currentXP);
+ setChallengesCompleted(storage.challengesCompleted);
+
+ }, []);
+
+ useEffect(() => {
+ if(user) return;
+
+ localStorage.setItem('userScore',JSON.stringify({
+ level,
+ currentXP,
+ challengesCompleted
+ }));
+
+ }, [level, currentXP, challengesCompleted])
 
  function levelUp(){
  setLevel(prev=>(prev+1));
  setIsLevelUpModalOpen(true);
  }
 
-
  function startNewChallenge(){
  const randomIndex = Math.floor(Math.random() * challenges.length);
  const _currentChallenge = challenges[randomIndex];
@@ -119,13 +134,11 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
  }
  }
 
-
  function resetChallenge(){
  setCurrentChallenge(null);
 
  }
 
-
  function completeChallenge(){
  if(!currentChallenge){
  return;

src/context/CountdownContext.tsx

@@ -20,7 +20,7 @@ const CountdownContext = createContext({} as CountdownContextProviderProps);
 function CountdownContextProvider({children}:Record<string,ReactNode>){
 
  const { startNewChallenge } = useChallenge();
- const [ time, setTime ] = useState(0.5 * 60);
+ const [ time, setTime ] = useState(25 * 60);
  const [ isActive, setIsActive ] = useState(false);
  const [ hasFinish, setHasFinish ] = useState(false);
  const [ initialTime, setInitialTime ] = useState(time);

src/pages/index.tsx

@@ -1,60 +1,30 @@
-import { useEffect } from 'react';
-import { GetServerSideProps } from 'next';
 import ExperienceBar from '../components/ExperienceBar';
 import Profile from '../components/Profile';
 import CompletedChallenges from '../components/CompletedChallenges';
 import Countdown from '../components/Countdown';
 import ChallengeBox from '../components/ChallengeBox';
 import Head from 'next/head';
-import useChallenge from '../hooks/useChallenge';
 import styles from '../styles/pages/Home.module.scss';
 
-type HomeProps = {
- level: number;
- currentXP: number;
- challengesCompleted: number;
-} 
-
-export default function Home({level,currentXP, challengesCompleted}:HomeProps) {
- const { setLevel, setCurrentXP, setChallengesCompleted} = useChallenge();
- useEffect(() => {
- setLevel(level)
- setCurrentXP(currentXP)
- setChallengesCompleted(challengesCompleted)
-
- }, [level,currentXP,challengesCompleted])
 
+export default function Home() {
  return (
- <>
- <div className={styles.container}>
- <Head>
- <title>Home | Moveit</title>
- </Head>
+ <div className={styles.container}>
+ <Head>
+ <title>Home | MoveIt</title>
+ </Head>
 
- <ExperienceBar />
- <section>
- <div>
- <Profile />
- <CompletedChallenges />
- <Countdown />
- </div>
- <div>
- <ChallengeBox />
- </div>
- </section>
- </div>
- </>
+ <ExperienceBar />
+ <section>
+ <div>
+ <Profile />
+ <CompletedChallenges />
+ <Countdown />
+ </div>
+ <div>
+ <ChallengeBox />
+ </div>
+ </section>
+ </div>
  )
-}
-
-export const getServerSideProps:GetServerSideProps = async ({req}) => {
- const { level, currentXP, challengesCompleted } = req.cookies;
-
- return{
- props:{
- level: Number(level),
- currentXP: Number(currentXP),
- challengesCompleted: Number(challengesCompleted)
- }
- }
 }

src/pages/ranking/index.tsx → src/pages/leaderboard.tsx

@@ -1,10 +1,10 @@
 import { GetServerSideProps } from 'next';
-import { database, getDocs, collection } from '../../service';
+import Head from 'next/head';
+import { database, getDocs, collection, query, limit, orderBy } from '../service';
 
-import styles from './styles.module.scss'; 
+import styles from '../styles/pages/leaderboard.module.scss'; 
 
 type LeaderBoard = {
- id: string;
  name: string;
  avatar: string;
  level: number;
@@ -20,6 +20,9 @@ export default function Ranking({leaderboard}:LeaderBoardProps){
 
  return(
  <div className={styles.container}>
+ <Head>
+ <title>Leaderboard | MoveIt</title>
+ </Head>
  <h1>Leaderboard</h1>
  <table>
  <thead>
@@ -67,18 +70,19 @@ export default function Ranking({leaderboard}:LeaderBoardProps){
 
 
 export const getServerSideProps:GetServerSideProps = async()=>{
-
- let leaderboard = [];
- const query = collection(database,'leaderboard');
- const docSnap = await getDocs(query);
-
- docSnap.forEach(doc=>{
- leaderboard = [...leaderboard, doc.data()];
- })
 
- if(leaderboard.length>0){
+ const docRef = collection(database,'leaderboard');
+ const docQuery = query(docRef, orderBy('level','desc'), orderBy('experience','desc'), limit(50));
+ //const docQuery = query(docRef, orderBy('level','desc'), limit(50));
+ const result = await getDocs(docQuery);
+
+ if(!result.empty){
+ let leaderboard = [];
+ result.forEach(doc=>{
+ leaderboard = [...leaderboard, doc.data()]
+ })
  return {
- props:{
+ props: {
  leaderboard
  }
  }

src/service/index.tsx

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