Added ranklist

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>
+  )
+}