reenable KPI/Leaderboard

src/components/KPI/Leaderboard.tsx

@@ -51,8 +51,11 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-const Leaderboard = (props: { tokenomics: Tokenomics }) => {
-  const { tokenomics, leaderboard } = props;
+const Leaderboard = (props: {
+  leaderboard: LeaderboardMember[];
+  tokenomics: Tokenomics;
+}) => {
+  const { kpi, tokenomics, leaderboard } = props;
   const price = tokenomics ? tokenomics.price : 30 / 1000000;
   const classes = useStyles();
   if (!leaderboard.length) return <Loading target="data" />;
@@ -60,7 +63,7 @@ const Leaderboard = (props: { tokenomics: Tokenomics }) => {
   return (
     <Grid className={classes.root} item lg={12}>
       <Typography variant="h2" className="mb-3">
-        KPI Grading
+        Top 20
       </Typography>
 
       {leaderboard ? (
@@ -100,6 +103,10 @@ const Leaderboard = (props: { tokenomics: Tokenomics }) => {
         <div />
       )}
 
+      <Typography variant="h3" className="my-3">
+        Grading
+      </Typography>
+
       {kpi.map((round: Kpi) => (
         <Accordion className={classes.acc} key={round.kpi}>
           <AccordionSummary

src/components/KPI/index.tsx

@@ -13,14 +13,17 @@ const baseUrl = `https://joystreamstats.live/static`;
 class KPI extends Component {
   constructor(props: { tokenomics: Tokenomics }) {
     super(props);
-    this.state = { round: null, rounds: [], leaderboard: [] };
+    this.state = { round: null, rounds: [], leaderboard: [], grading: [] };
     this.fetchKpi = this.fetchKpi.bind(this);
     this.fetchLeaderboard = this.fetchLeaderboard.bind(this);
     this.toggleShowLeaderboard = this.toggleShowLeaderboard.bind(this);
   }
   componentDidMount() {
+    this.loadData();
+  }
+  loadData() {
     this.fetchKpi();
-    //this.fetchLeaderboard()
+    this.fetchLeaderboard();
   }
   fetchKpi() {
     axios
@@ -37,9 +40,13 @@ class KPI extends Component {
       .catch((e) => console.error(`Failed to fetch KPI data.`, e));
   }
   fetchLeaderboard() {
+    axios
+      .get(`${baseUrl}/kpi-grading.json`)
+      .then(({ data }) => this.setState({ grading: data }))
+      .catch((e) => console.error(`Failed to fetch KPI grading data.`, e));
     axios
       .get(`${baseUrl}/leaderboard.json`)
-      .then((res) => this.setState({ leaderboard: res.data }))
+      .then(({ data }) => this.setState({ leaderboard: data }))
       .catch((e) => console.error(`Failed to fetch Leadboard data.`, e));
   }
 
@@ -54,7 +61,7 @@ class KPI extends Component {
   }
 
   render() {
-    const { round, rounds, leaderboard, showLeaderboard } = this.state;
+    const { round, rounds, grading, leaderboard, showLeaderboard } = this.state;
     if (!round) return <Loading target="KPI" />;
     return (
       <div className="m-3 p-2 text-light">
@@ -96,6 +103,7 @@ class KPI extends Component {
 
         {showLeaderboard ? (
           <Leaderboard
+            kpi={grading}
             leaderboard={leaderboard}
             tokenomics={this.props.tokenomics}
           />