add ranking

public/data/statistics.json

@@ -0,0 +1 @@
+[{"pos":1,"username":"Stefan_M","liter":50400},{"pos":2,"username":"birdseye-adventure","liter":17750},{"pos":3,"username":"Steff","liter":9690},{"pos":4,"username":"l_s***","liter":6750},{"pos":5,"username":"Hildegarten Leipzig","liter":5800},{"pos":6,"username":"Sascha","liter":5200},{"pos":7,"username":"ren***","liter":4329},{"pos":8,"username":"AnToxi","liter":3470},{"pos":9,"username":"ant***","liter":2135},{"pos":10,"username":"Eurydike","liter":2131},{"pos":11,"username":2022,"liter":1875},{"pos":12,"username":"DANIELA","liter":1830},{"pos":13,"username":"Falk","liter":1735},{"pos":14,"username":"anni","liter":1560},{"pos":15,"username":"Nils","liter":1330},{"pos":16,"username":"ptk***","liter":1325},{"pos":17,"username":"Jonas.gießt","liter":1243},{"pos":18,"username":"WateringGirl","liter":1185},{"pos":19,"username":"naumann","liter":1180},{"pos":20,"username":"Marek","liter":1120},{"pos":21,"username":"Susa-gießt","liter":1040},{"pos":22,"username":"maj***","liter":1000},{"pos":23,"username":"janina","liter":962},{"pos":24,"username":"m.r***","liter":950},{"pos":24,"username":"Ostbüro Leipzig","liter":950},{"pos":26,"username":"Rapha gießt","liter":910},{"pos":27,"username":"Claudia K.","liter":840},{"pos":28,"username":"vol***","liter":740},{"pos":29,"username":"dan***","liter":645},{"pos":30,"username":"sophia","liter":635},{"pos":31,"username":"Mr D","liter":583},{"pos":32,"username":"tan***","liter":540},{"pos":33,"username":"kaw***","liter":485},{"pos":34,"username":"neb***","liter":480},{"pos":35,"username":"wla***","liter":445},{"pos":36,"username":"Elmar","liter":440},{"pos":37,"username":"Wandertour","liter":430},{"pos":38,"username":"Patrick","liter":420},{"pos":39,"username":"ruc***","liter":400},{"pos":40,"username":"hel***","liter":380},{"pos":40,"username":"Ralf, BUND Leipzig","liter":380},{"pos":42,"username":"ks-***","liter":298},{"pos":43,"username":"der***","liter":285},{"pos":44,"username":"elk***","liter":255},{"pos":45,"username":"man***","liter":250},{"pos":46,"username":"bur***","liter":240},{"pos":46,"username":"fel***","liter":240},{"pos":48,"username":"ell***","liter":235},{"pos":48,"username":"tom***","liter":235},{"pos":50,"username":"Flojo","liter":220},{"pos":51,"username":"Kroetlaender • Team Stadtstromer","liter":200},{"pos":51,"username":"Mario • Team Stadtstromer","liter":200},{"pos":51,"username":"Peppert","liter":200},{"pos":51,"username":"que***","liter":200},{"pos":51,"username":"w.p***","liter":200},{"pos":56,"username":"h_v***","liter":190},{"pos":57,"username":"beg***","liter":180},{"pos":57,"username":"ma_gi","liter":180},{"pos":57,"username":"mur***","liter":180},{"pos":60,"username":"Aquano","liter":175},{"pos":61,"username":"kri***","liter":170},{"pos":61,"username":"wne***","liter":170},{"pos":63,"username":"moh***","liter":160},{"pos":64,"username":"buchele cc","liter":150},{"pos":65,"username":"Denis","liter":140},{"pos":66,"username":"JU2306","liter":130},{"pos":66,"username":"mar***","liter":130},{"pos":66,"username":"Mero","liter":130},{"pos":66,"username":"mvi***","liter":130},{"pos":70,"username":"anonym","liter":127},{"pos":71,"username":"konunc","liter":125},{"pos":72,"username":"cla***","liter":121},{"pos":73,"username":"M&A","liter":110},{"pos":74,"username":"VogelK","liter":96},{"pos":75,"username":"66r***","liter":90},{"pos":76,"username":"Anna","liter":80},{"pos":76,"username":"kar***","liter":80},{"pos":76,"username":"lia***","liter":80},{"pos":76,"username":"Rüdiger","liter":80},{"pos":80,"username":"kat***","liter":70},{"pos":81,"username":"fel***","liter":60},{"pos":81,"username":"Für Luisa","liter":60},{"pos":81,"username":"jet***","liter":60},{"pos":81,"username":"kar***","liter":60},{"pos":81,"username":"klaus108","liter":60},{"pos":86,"username":"jul***","liter":53},{"pos":87,"username":"k-k***","liter":50},{"pos":87,"username":"tge***","liter":50},{"pos":89,"username":"amy***","liter":45},{"pos":89,"username":"LIS Green Team","liter":45},{"pos":91,"username":"Gigi","liter":40},{"pos":92,"username":"kaSch","liter":30},{"pos":92,"username":"Roman","liter":30},{"pos":92,"username":"war***","liter":30},{"pos":95,"username":"Robátko","liter":27},{"pos":96,"username":"Angela","liter":20},{"pos":96,"username":"bas***","liter":20},{"pos":96,"username":"Ben10","liter":20},{"pos":96,"username":"bor***","liter":20},{"pos":96,"username":"Brokkoli","liter":20},{"pos":96,"username":"Dirk","liter":20},{"pos":96,"username":"dre***","liter":20},{"pos":103,"username":"SR","liter":17},{"pos":104,"username":"lenam","liter":10},{"pos":104,"username":"mai***","liter":10},{"pos":104,"username":"ren***","liter":10},{"pos":104,"username":"syl***","liter":10},{"pos":108,"username":"hal***","liter":5},{"pos":109,"username":"Alejandro","liter":1}]

src/components/Icons.tsx

@@ -6,6 +6,7 @@ const iconInfo = '/images/icon-info.svg';
 const iconSubscribe = '/images/icon-subscribe.svg';
 const iconZoom = '/images/icon-zoom.svg';
 const iconTrees = '/images/icon-trees.svg';
+const iconLeaderboard = '/images/leaderboard.jpg';
 
 const IconWrapper = styled.div`
   height: auto;
@@ -49,6 +50,8 @@ const Icon: React.FC<{ iconType: string; height?: number }> = ({
         return iconSubscribe;
       case 'trees':
         return iconTrees;
+      case 'leaderboard':
+        return iconLeaderboard;
       default:
         return '';
     }

src/components/Nav/index.tsx

@@ -6,6 +6,7 @@ import AccountCircle from '@material-ui/icons/AccountCircleOutlined';
 import SearchIcon from '@material-ui/icons/Search';
 import EventNoteIcon from '@material-ui/icons/EventNote';
 import SquareButton from '../SquareButton';
+import Icon from '../Icons';
 
 interface StyledProps {
   active?: boolean;
@@ -45,6 +46,7 @@ const navConfig = [
   { path: '/about', title: 'Info', icon: <InfoIcon /> },
   { path: '/profile', title: 'Profil', icon: <AccountCircle /> },
   { path: '/events', title: 'Gießevents', icon: <EventNoteIcon /> },
+  { path: '/statistics', title: 'Gießstatistiken', icon: <div style={{marginLeft: 23}}><Icon iconType={'leaderboard'} height={32} /></div> },
 ];
 
 const Nav: FC<{

src/components/Sidebar/SidebarStatistics/index.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import SidebarTitle from '../SidebarTitle/';
+import SmallParagraph from '../../SmallParagraph';
+import { useStatisticsJson } from '../../../utils/hooks/useStatisticsJson';
+
+const Wrapper = styled.div`
+  z-index: 3;
+  margin: 0 0 20px;
+`;
+
+const SidebarStatistics: FC = () => {
+  const { data: statisticsJson } = useStatisticsJson();
+
+  return (
+    <Wrapper>
+      <SidebarTitle>Top-Gießende 2024</SidebarTitle>
+      {(statisticsJson || []).map(user => (
+        <SmallParagraph>{((user.pos < 10) ? '00' : ((user.pos < 100) ? '0' : '')) + user.pos}. {user.username} ({user.liter} Liter)</SmallParagraph>
+      ))}
+    </Wrapper>
+  );
+};
+
+export default SidebarStatistics;

src/components/Sidebar/index.tsx

@@ -8,19 +8,21 @@ import SidebarEvents from './SidebarEvents';
 import SidebarTree from './SidebarTree';
 import SidebarWaterSource from './SidebarWaterSource';
 import SidebarEvent from './SidebarEvent';
+import SidebarStatistics from './SidebarStatistics';
 import SidebarWatering from './SidebarWatering';
 import SidebarWrapper from './SidbarWrapper';
 
 const Sidebar: React.FC = () => (
   <Route
-    path={['/about', '/search', '/profile', '/events', '/tree/:treeId', '/watersource/:watersourceId', '/event/:eventId', '/watering/:wateringId']}
+    path={['/about', '/search', '/profile', '/events', '/statistics', '/tree/:treeId', '/watersource/:watersourceId', '/event/:eventId', '/watering/:wateringId']}
     render={({ match }) => {
       return (
         <SidebarWrapper isVisible={!!match}>
           <Switch>
             <Route path='/about' component={SidebarAbout} />
             <Route path='/search' component={SidebarSearch} />
             <Route path='/events' component={SidebarEvents} />
+            <Route path='/statistics' component={SidebarStatistics} />
             <Route path='/tree/:treeId' component={SidebarTree} />
             <Route path='/watersource/:watersourceId' component={SidebarWaterSource} />
             <Route path='/event/:eventId' component={SidebarEvent} />

src/utils/hooks/useStatisticsJson.ts

@@ -0,0 +1,23 @@
+import { QueryFunction, useQuery } from 'react-query';
+import { UserPosition, loadStatisticsData } from '../requests/loadStatisticsData';
+
+const loadData: QueryFunction = async (): Promise<UserPosition[]> => {
+  return await loadStatisticsData();
+};
+
+export const useStatisticsJson = (): {
+  data: UserPosition[] | null;
+  error: Error | null;
+} => {
+  const dataParams = 'statistics-json';
+  const { data, error } = useQuery<unknown, Error, UserPosition[]>(
+    dataParams,
+    loadData,
+    { staleTime: Infinity }
+  );
+
+  return {
+    data: data || null,
+    error: error || null,
+  };
+};

src/utils/requests/loadStatisticsData.ts

@@ -0,0 +1,13 @@
+import { requests } from '../requestUtil';
+
+export interface UserPosition {
+  pos: number;
+  username: string;
+  liter: number;
+}
+
+export const loadStatisticsData = async (): Promise<UserPosition[]> => {
+  return await requests<[]>(
+    '/data/statistics.json'
+  );
+};