{"size": 3389, "ext": "js", "max_stars_repo_path": "src/components/pages/Leaderboard/RenderLeaderboard.js", "max_stars_repo_name": "BloomTech-Labs/bg-emotion-tracker-fe", "max_stars_repo_stars_event_min_datetime": "2021-05-14T16:28:03.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-27T20:41:25.000Z", "max_issues_repo_path": "src/components/pages/Leaderboard/RenderLeaderboard.js", "max_issues_repo_name": "BloomTech-Labs/bg-emotion-tracker-fe", "max_issues_repo_issues_event_min_datetime": "2021-04-13T19:05:07.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-21T21:42:45.000Z", "max_forks_repo_path": "src/components/pages/Leaderboard/RenderLeaderboard.js", "max_forks_repo_name": "Lambda-School-Labs/bg-emotion-tracker-fe", "max_forks_repo_forks_event_min_datetime": "2021-06-08T16:15:12.000Z", "max_forks_repo_forks_event_max_datetime": "2021-08-04T02:35:32.000Z"}
{"max_stars_count": 5, "max_issues_count": 15, "max_forks_count": 9, "avg_line_length": 24.5579710145, "max_line_length": 77, "alphanum_fraction": 0.53024491}
import React, { useEffect, useContext, useState } from 'react';
import { LayoutContainer } from '../../common/';
import NavBar from '../../common/NavBar';
import { Layout } from 'antd';
import { Table } from 'antd';
import NavMenu from '../../common/NavMenu';
import { AdminContext } from '../../../state/contexts';
import { getLeaderboard } from '../../../state/actions';
import { LoadingComponent } from '../../common';
import styled from 'styled-components';
import './../ReactionsTable/ReactionsTable.css';

const { Content, Sider } = Layout;

const StyledList = styled.div`
  width: 90%;
  margin: 3rem auto;
`;

const sampleTableData = {
  rows: [
    {
      member: 'Ranking',
      clubname: 'Club Name',
      reactionvalue: 'Rating',
      activities: 'Percent Change',
    },
  ],
  columns: [
    {
      title: 'Ranking',
      dataIndex: 'ranking',
      render: text => <p>{text}</p>,
      key: '1',
    },
    {
      title: 'Club Name',
      dataIndex: 'clubname',
      render: text => <p>{text}</p>,
      key: '2',
    },
    {
      title: 'Rating',
      dataIndex: 'rating',
      render: text => <p>{text}</p>,
      key: '3',
    },
    {
      title: 'Percent Change',
      dataIndex: 'change',
      render: text => <p>{text}</p>,
      key: '4',
    },
  ],
};

function RenderLeaderboard(props) {
  const context = useContext(AdminContext);
  const [tableData, setTableData] = useState(sampleTableData);

  useEffect(() => {
    reactionDataToTableData();
  }, [context]);

  function sortLeaderboard(arr) {
    var len = arr.length;
    for (var i = len - 1; i >= 0; i--) {
      for (var j = 1; j <= i; j++) {
        if (arr[j - 1].clubrating > arr[j].clubrating) {
          var temp = arr[j - 1];
          arr[j - 1] = arr[j];
          arr[j] = temp;
        }
      }
    }
    return arr;
  }

  const fetchLeaderboard = () => {
    getLeaderboard('authstate', context);
  };

  useEffect(() => {
    fetchLeaderboard();
  }, []);

  const reactionDataToTableData = () => {
    const newRows = [];
    const sortedLeaderboard = sortLeaderboard(context.leaderboard).reverse();
    for (var i = 0; i < sortedLeaderboard.length; i++) {
      sortedLeaderboard[i].ranking = i + 1;
    }
    sortedLeaderboard.forEach(el => {
      const newRow = {
        ranking: el.ranking,
        clubname: el.clubname,
        rating: el.clubrating.toFixed(3),
        change: ((el.clubrating.toFixed(3) / 1) * 100).toFixed(2) + '%',
      };
      newRows.push(newRow);
    });

    setTableData({
      ...tableData,
      rows: newRows,
    });
  };

  return (
    <LayoutContainer>
      <NavBar titleName={'Leaderboard'} backgroundColor="#293845" />
      <Layout>
        <Sider width={230} className="navSider">
          <NavMenu />
        </Sider>
        <Content>
          {context.length === 0 ? (
            <div className="loading">
              <LoadingComponent message="loading" />
            </div>
          ) : (
            <StyledList>
              <Table
                columns={tableData.columns}
                dataSource={tableData.rows}
                rowKey={'clubname'}
                size={'small'}
                pagination={{ position: ['none', 'bottomRight'] }}
              />
            </StyledList>
          )}
        </Content>
      </Layout>
    </LayoutContainer>
  );
}
export default RenderLeaderboard;
