static with revalidate

src/components/Profile/index.tsx

@@ -12,7 +12,7 @@ export default function Profile(){
 
  return(
  <div className={styles.profileContainer}>
- <img src={user? user.avatar: 'icons/avatar.svg'} alt={user? user.name: name? name:'Player 404'} />
+ <img src={user? user.avatar: name? `https://avatars.dicebear.com/api/human/${name}.svg`:'icons/avatar.svg'} alt={user? user.name: name? name:'Player 404'} />
  <div>
  <strong>{user? user.name: name? name:'Player 404'}</strong>
  <p>

src/context/ChallengeContext.tsx

@@ -1,8 +1,13 @@
+// React
 import { createContext, ReactNode, useEffect, useState } from 'react';
+// Components
 import { LevelUpModal } from '../components/LevelUpModal';
-import challenges from '../../challenges.json';
-import { database, doc, getDoc, setDoc } from '../service/index';
+// Hooks
 import { useAuth } from '../hooks/useAuth';
+// Database
+import { database, doc, getDoc, setDoc } from '../service/index';
+// JSON
+import challenges from '../../challenges.json';
 
 type ReactChildrenProps = {
  children: ReactNode;
@@ -67,17 +72,18 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
  }
  (async()=>{
  if(user){
+ const userData = {
+ name: user.name,
+ avatar: user.avatar,
+ level,
+ challengesCompleted,
+ experience: currentXP
+ }
  try {
- const userData = {
- name: user.name,
- avatar: user.avatar,
- level,
- challengesCompleted,
- experience: currentXP
- }
  const docRef = doc(database,'leaderboard',user.id);
  await setDoc(docRef, userData);
  console.log('posting');
+
  } catch (error) {console.error(error)}
  } 
  })();
@@ -107,8 +113,6 @@ function ChallengeContextProvider({children, ...rest}:ReactChildrenProps){
  // Usuário não atenticado, toda informação é guardada no localStorage
  useEffect(() => {
  if(user) return;
-
-
  const storage:LocalStorageProps = JSON.parse(localStorage.getItem('userScore'));
  if(!storage) return;
  setName(storage.name);

src/pages/index.tsx

@@ -5,9 +5,10 @@ import Countdown from '../components/Countdown';
 import ChallengeBox from '../components/ChallengeBox';
 import Head from 'next/head';
 import { NavBar } from '../components/NavBar';
-import styles from '../styles/pages/Home.module.scss';
 import { useEffect } from 'react';
 import { useAuth } from '../hooks/useAuth';
+import { GetStaticProps } from 'next';
+import styles from '../styles/pages/Home.module.scss';
 
 
 export default function Home() {

src/pages/leaderboard.tsx

@@ -1,11 +1,16 @@
+// React
+import { useEffect } from 'react';
+// Next
+import { GetStaticProps } from 'next';
 import Head from 'next/head';
-import { GetServerSideProps } from 'next';
+// Components
 import { NavBar } from '../components/NavBar';
+// Hooks
+import { useAuth } from '../hooks/useAuth';
+// Database
 import { database, getDocs, collection, query, limit, orderBy } from '../service';
-
+// Style
 import styles from '../styles/pages/leaderboard.module.scss'; 
-import { useEffect } from 'react';
-import { useAuth } from '../hooks/useAuth';
 
 type LeaderBoard = {
  name: string;
@@ -82,6 +87,34 @@ export default function Ranking({leaderboard}:LeaderBoardProps){
 
 
 
+export const getStaticProps:GetStaticProps = async()=>{
+
+ 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: {
+ leaderboard
+ },
+ revalidate: 10
+ }
+ }
+
+ return {
+ props:{
+ leaderboard: null
+ },
+ revalidate: 10
+ }
+}
+/* 
 export const getServerSideProps:GetServerSideProps = async()=>{
  
  const docRef = collection(database,'leaderboard');
@@ -106,4 +139,4 @@ export const getServerSideProps:GetServerSideProps = async()=>{
  leaderboard: null
  }
  }
-}
+} */

src/pages/login.tsx

@@ -1,7 +1,7 @@
-import { useAuth } from '../hooks/useAuth';
-import { useRouter } from 'next/dist/client/router';
 import { FormEvent, useEffect } from 'react';
 import Head from 'next/head';
+import { useRouter } from 'next/dist/client/router';
+import { useAuth } from '../hooks/useAuth';
 import styles from '../styles/pages/login.module.scss';