Added ranklist

src/data/tabs.json

@@ -27,6 +27,10 @@
     "href": "/contribute",
     "text": "Contribute"
   },
+  "ranklist": {
+    "href": "/ranklist",
+    "text": "Ranklista"
+  },
   "feedback": {
     "href": "/feedback",
     "text": "Feedback",

src/pages/index.js

@@ -40,7 +40,6 @@ export default function Index(props) {
         return resp.json()
       })
       .then((data) => {
-        console.log(data)
         setMotd(data.motd)
         setUserSpecificMotd(data.userSpecificMotd)
       })

src/pages/ranklist.js

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react'
+import fetch from 'unfetch'
+
+import LoadingIndicator from '../components/LoadingIndicator'
+import Sleep from '../components/sleep'
+
+import styles from './ranklist.module.css'
+import constants from '../constants.json'
+
+const selectOptions = {
+  newQuestions: { name: 'Beküldött új kérdések' },
+  allQuestions: { name: 'Megoldott kérdések' },
+  count: { name: 'Megoldott tesztek' },
+}
+
+async function getListFromServer() {
+  return new Promise((resolve, reject) => {
+    console.info('Fetching data')
+    fetch(`${constants.apiUrl}ranklist`, {
+      credentials: 'include',
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((data) => {
+        resolve(data)
+      })
+      .catch((error) => {
+        reject(error)
+      })
+  })
+}
+
+function sortDataBy(data, key) {
+  return data.sort((a, b) => {
+    if (a[key] < b[key]) {
+      return 1
+    } else if (a[key] > b[key]) {
+      return -1
+    } else {
+      return 0
+    }
+  })
+}
+
+export default function RankList() {
+  const [ranklist, setRanklist] = useState(null)
+  const [selfUserId, setSelfUserId] = useState(null)
+  const [key, setKey] = useState('newQuestions')
+
+  const getList = () => {
+    setRanklist(null)
+    getListFromServer(key)
+      .then((data) => {
+        setRanklist(data.list)
+        // setSelfUserId(data.selfUserId)
+        setSelfUserId(723)
+      })
+      .catch((error) => {
+        console.error(error)
+        setRanklist(null)
+      })
+  }
+
+  useEffect(() => {
+    getList()
+  }, [])
+
+  if (!ranklist) {
+    return <LoadingIndicator />
+  }
+
+  const list = sortDataBy(ranklist, key)
+
+  return (
+    <div>
+      <div>
+        <div
+          className={styles.infoText}
+        >{`A felhasználó ID-d: #${selfUserId}`}</div>
+        <Sleep />
+        <div className={styles.table}>
+          <div className={styles.headerRow}>
+            <div>{'Rank'}</div>
+            <div>{'Felhasználó ID'}</div>
+            {Object.keys(selectOptions).map((listKey) => {
+              const val = selectOptions[listKey]
+              return (
+                <div
+                  className={`${styles.clickable} ${listKey === key &&
+                    styles.selected}`}
+                  key={listKey}
+                  onClick={() => {
+                    setKey(listKey)
+                  }}
+                >
+                  {val.name}
+                </div>
+              )
+            })}
+          </div>
+          {list.map((listItem, i) => {
+            return (
+              <div
+                className={`${styles.row} ${listItem.userId === selfUserId &&
+                  styles.selfRow}`}
+                key={i}
+              >
+                <div>{i + 1}</div>
+                <div>{'#' + listItem.userId}</div>
+                {Object.keys(selectOptions).map((listKey) => {
+                  const val = listItem[listKey]
+                  return <div key={listKey}>{val}</div>
+                })}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/ranklist.module.css

@@ -0,0 +1,67 @@
+.row,
+.headerRow {
+  display: flex;
+  padding: 3px;
+}
+
+.row:hover {
+  background-color: #333333;
+}
+
+.row div,
+.headerRow div {
+  flex: 1;
+  padding: 0px 5px;
+  text-align: center;
+}
+
+.headerRow div {
+  padding: 15px 5px;
+}
+
+.row :nth-child(1),
+.headerRow :nth-child(1) {
+  flex: 0 30px;
+}
+
+.row :nth-child(2),
+.headerRow :nth-child(2) {
+  flex: 0 100px;
+  text-align: left;
+}
+
+.table {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.table :nth-child(1) {
+  color: white;
+}
+
+.clickable:hover {
+  background-color: #666666;
+}
+
+.selfRow {
+  background-color: #9999ff;
+  color: black;
+}
+
+.selfRow:hover {
+  background-color: #9999ee;
+}
+
+.infoText {
+  text-align: center;
+  font-size: 20px;
+}
+
+.selected {
+  color: #9999ff;
+}
+
+.clickable {
+  cursor: pointer;
+}