import React , { useEffect , useState } from 'react' ; import Head from 'next/head' ; import { GetServerSideProps } from 'next' ; import { useSession } from 'next-auth/client' ; import { useRouter } from 'next/router' ; import { loadFirebase } from '../utils/firebase' ; import styles from '../styles/pages/Leaderboard.module.css' ; import { Sidebar } from '../components/Sidebar' ; import { Score } from '../components/Score' ; import { AppProps } from 'next/dist/next-server/lib/router/router' ; const Leaderboard = ( { toggleTheme , ... rest } ) => { const router = useRouter ( ) ; const [ session , loading ] = useSession ( ) ; const [ isRefreshing , setIsRefreshing ] = useState ( false ) ; const [ initialUsers ] = useState ( rest . pageProps . profiles ) ; const refreshData = ( ) : void => { router . replace ( router . asPath ) ; setIsRefreshing ( true ) ; } ; useEffect ( ( ) => { setIsRefreshing ( false ) ; } , [ initialUsers ] ) ; useEffect ( ( ) => { if ( ! ( session || loading ) ) { router . push ( '/login' ) ; } else { router . push ( '/leaderboard' ) ; } } , [ session , loading ] ) ; if ( session ) { return ( < > < Head > < title > Leaderboard | Move . On < /title> < /Head> < div className = "wrapper" > < Sidebar toggleTheme = { toggleTheme } /> < div className = { styles . container } > < header className = { styles . headoard } > < h2 > Leaderboard < /h2> < /header> < section className = { styles . leaderboard } > < header > < p className = { styles . title } > Posição < /p> < p className = { styles . title } > Usuário < /p> < p className = { styles . title } > Desafios < /p> < p className = { styles . title } > Experiência < /p> < /header> < Score profiles = { rest . pageProps . profiles } / > < /section> < /div> < /div> < />); } return ( < div className = "loading" > < span className = "c-loader" > < /span> < /div>); } ; export default Leaderboard ; export const getServerSideProps = async ( ) => { const firebase = loadFirebase ( ) ; const result = await new Promise ( ( resolve , reject ) => { firebase . ref ( 'profiles' ) . get ( ) . then ( snapshot => { const data = [ ] ; snapshot . forEach ( user => { data . push ( Object . assign ( { key : user . key } , user . val ( ) ) ) ; } ) ; data . filter ( ( user , idx ) : void => { const nextUser = data [ idx + 1 ] ; if ( nextUser ) { if ( user . user . email === nextUser . user . email ) { loadFirebase ( ) . ref ( 'profiles' ) . child ( nextUser . key ) . remove ( ) ; } } } ) ; resolve ( data ) ; } ) . catch ( error => { reject ( console . log ( error . stack ) ) ; } ) ; } ) ; return { props : { profiles : result } } ; } ;