1+ import React , { useState , useEffect , useRef } from 'react'
2+ import axios from "axios" ;
3+ import Style from './MutechLeaderBoard.module.css'
4+ import Navbar from '../../Components/Navbar/Navbar'
5+ const MutechLeaderBoard = ( ) => {
6+ const API = "https://opensheet.elk.sh/"
7+ const [ data , setData ] = useState ( [ ] )
8+ const fetchOnce = useRef ( false )
9+ const spreadsheetId = 'https://docs.google.com/spreadsheets/d/1gAX7dGO5KFAOiPQfoo8vb22RbwtmjZ4Y1tslcULkrXE/edit#gid=564307130'
10+ const sheet = "CommitBox"
11+ const now = new Date ( )
12+ const month = now . getMonth ( )
13+ const today = now . getDate ( )
14+ const [ scoreBoard , setScoreBoard ] = useState ( { } )
15+ useEffect ( ( ) => {
16+ if ( spreadsheetId . length >= 83 && ! fetchOnce . current ) {
17+ try {
18+ axios . get ( `${ API + spreadsheetId . split ( "/" ) [ 5 ] } ${ sheet } )
19+ . then ( res => res . data )
20+ . then ( result => {
21+ setData ( result )
22+ } )
23+ }
24+ catch ( err ) {
25+ console . error ( err )
26+ }
27+ }
28+ } , [ ] )
29+ useEffect ( ( ) => {
30+ if ( fetchOnce . current && data . length > 0 ) {
31+ const PeopleScoreBoard = { }
32+ const people = [ ]
33+ for ( let work of data ) {
34+ // eslint-disable-next-line array-callback-return
35+ Object . keys ( work ) . slice ( 1 , ) . map ( ( key , index ) => {
36+ if ( ! people . includes ( key ) ) {
37+ if ( key !== "undefined" ) {
38+ people . push ( key )
39+ PeopleScoreBoard [ key ] = { name : key , score : 0 , streak : 0 , longestStreak : 0 , overallStreak : 0 }
40+ }
41+ }
42+ } )
43+ const da = new Date ( work . Date )
44+ if ( da . getMonth ( ) === month && da . getDate ( ) < today ) {
45+ for ( let person of people ) {
46+ if ( work [ person ] !== null && work [ person ] !== undefined ) {
47+ if ( work [ person ] . toLowerCase ( ) . includes ( 'done' ) ) {
48+ let x = work [ person ] . split ( '\n' ) , score = 10
49+ PeopleScoreBoard [ person ] . streak += 1
50+ PeopleScoreBoard [ person ] . score += x . length * score + ( PeopleScoreBoard [ person ] . streak <= 5 ? ( PeopleScoreBoard [ person ] . streak - 1 ) * score : 50 )
51+ }
52+ else {
53+ PeopleScoreBoard [ person ] . streak = 0
54+ }
55+ }
56+ }
57+ }
58+ for ( let person of people ) {
59+ if ( work [ person ] !== null && work [ person ] !== undefined ) {
60+ PeopleScoreBoard [ person ] . overallStreak += 1
61+ setLongestStreak ( PeopleScoreBoard , person )
62+ }
63+ else {
64+ setLongestStreak ( PeopleScoreBoard , person )
65+ PeopleScoreBoard [ person ] . overallStreak = 0
66+ }
67+ }
68+ }
69+ sortScore ( PeopleScoreBoard )
70+ }
71+ fetchOnce . current = true
72+ // eslint-disable-next-line react-hooks/exhaustive-deps
73+ } , [ data ] )
74+ function sortScore ( PeopleScoreBoard ) {
75+ const scoreSet = Object . values ( PeopleScoreBoard )
76+ const scoreBoard = scoreSet . sort ( ( a , b ) => {
77+ if ( a . streak === b . streak )
78+ return b . score - a . score
79+ return b . streak - a . streak
80+ } )
81+ setScoreBoard ( scoreBoard )
82+ }
83+ function setLongestStreak ( PeopleScoreBoard , person ) {
84+ if ( PeopleScoreBoard [ person ] . overallStreak > PeopleScoreBoard [ person ] . longestStreak )
85+ PeopleScoreBoard [ person ] . longestStreak = PeopleScoreBoard [ person ] . overallStreak
86+ }
87+ return (
88+ < >
89+ < Navbar />
90+ < div className = { Style . container } >
91+
92+ < div className = { Style . table } >
93+ < h1 className = { Style . h1 } > µTech Commit Leaderboard</ h1 >
94+
95+ < h1 className = { Style . h1 } > { now . toLocaleString ( 'en-US' , { month : 'long' } ) } { now . toLocaleString ( 'en-US' , { year : 'numeric' } ) } </ h1 >
96+
97+ < table className = { Style . tableContainer } >
98+ < thead >
99+ < tr >
100+ < th > Rank</ th >
101+ < th > Name</ th >
102+ < th > Monthly Score</ th >
103+ < th > Monthly Streak</ th >
104+ < th > Overall Streak</ th >
105+ </ tr >
106+ </ thead >
107+ < tbody >
108+ { Object . values ( scoreBoard ) . map ( ( score , index ) => {
109+ return (
110+ < tr key = { index } >
111+ < td > { index + 1 } </ td >
112+ < td > { score . name } </ td >
113+ < td > { score . score } </ td >
114+ < td > { score . streak } </ td >
115+ < td > < div className = { Style . clear } > { score . longestStreak } </ div > </ td >
116+ </ tr >
117+ )
118+ } ) }
119+ </ tbody >
120+ </ table >
121+ </ div >
122+ </ div >
123+ </ >
124+ )
125+ }
126+
127+ export default MutechLeaderBoard
0 commit comments