From 15dde276f6dc0c0c368e998a3d5d258d955c83e3 Mon Sep 17 00:00:00 2001
From: mrfry <mrfry@airmail.cc>
Date: Tue, 10 Nov 2020 16:31:46 +0100
Subject: [PATCH] Ranklist improvement, added time ranges

---
 src/pages/ranklist.js         | 125 +++++++++++++++++++++++++++-------
 src/pages/ranklist.module.css |  43 +++++++-----
 2 files changed, 127 insertions(+), 41 deletions(-)

diff --git a/src/pages/ranklist.js b/src/pages/ranklist.js
index f5599b5..328e873 100644
--- a/src/pages/ranklist.js
+++ b/src/pages/ranklist.js
@@ -13,10 +13,49 @@ const selectOptions = {
   count: { name: 'Megoldott tesztek' },
 }
 
-async function getListFromServer() {
+const sinceOptions = {
+  all: {
+    name: 'All time',
+  },
+  monthly: { name: 'Havi' },
+  weekly: { name: 'Heti' },
+  daily: { name: 'Napi' },
+}
+
+function getTimeString(date) {
+  return (
+    date.getFullYear() +
+    '-' +
+    ('0' + (date.getMonth() + 1)).slice(-2) +
+    '-' +
+    ('0' + date.getDate()).slice(-2)
+  )
+}
+
+function getSinceDate(keyword) {
+  if (keyword === 'all') {
+    return null
+  }
+
+  const date = new Date()
+  if (keyword === 'daily') {
+    date.setDate(date.getDate() - 1)
+  } else if (keyword === 'weekly') {
+    date.setDate(date.getDate() - 7)
+  } else if (keyword === 'monthly') {
+    date.setDate(date.getDate() - 30)
+  }
+  return date
+}
+
+async function getListFromServer(since) {
   return new Promise((resolve, reject) => {
     console.info('Fetching data')
-    fetch(`${constants.apiUrl}ranklist`, {
+    let query = ''
+    if (since && since !== 'all') {
+      query = `?since=${getTimeString(getSinceDate(since))}`
+    }
+    fetch(`${constants.apiUrl}ranklist${query}`, {
       credentials: 'include',
       Accept: 'application/json',
       'Content-Type': 'application/json',
@@ -47,14 +86,18 @@ function sortDataBy(data, key) {
 
 export default function RankList() {
   const [ranklist, setRanklist] = useState(null)
-  const [selfUserId, setSelfUserId] = useState(null)
+  const [selfUserId, setSelfUserId] = useState('...')
   const [key, setKey] = useState('newQuestions')
+  const [since, setSince] = useState('all')
+  const [sum, setSum] = useState({})
 
   const getList = () => {
+    setSum({})
     setRanklist(null)
-    getListFromServer(key)
+    getListFromServer(since)
       .then((data) => {
         setRanklist(data.list)
+        setSum(data.sum)
         setSelfUserId(data.selfuserId)
       })
       .catch((error) => {
@@ -67,11 +110,15 @@ export default function RankList() {
     getList()
   }, [])
 
-  if (!ranklist) {
-    return <LoadingIndicator />
-  }
+  useEffect(() => {
+    getList()
+  }, [since])
 
-  const list = sortDataBy(ranklist, key)
+  const list = ranklist && sortDataBy(ranklist, key)
+
+  const updateSince = (keyword) => {
+    setSince(keyword)
+  }
 
   return (
     <div>
@@ -84,6 +131,25 @@ export default function RankList() {
           frissülnek.
         </div>
         <Sleep />
+        <div className={styles.sinceTable}>
+          <div className={styles.sinceHeaderRow}>
+            {Object.keys(sinceOptions).map((key) => {
+              const val = sinceOptions[key]
+              return (
+                <div
+                  key={key}
+                  className={`${styles.clickable} ${key === since &&
+                    styles.selected}`}
+                  onClick={() => {
+                    updateSince(key)
+                  }}
+                >
+                  {val.name}
+                </div>
+              )
+            })}
+          </div>
+        </div>
         <div className={styles.table}>
           <div className={styles.headerRow}>
             <div>{'Rank'}</div>
@@ -104,22 +170,33 @@ export default function RankList() {
               )
             })}
           </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 className={`${styles.row} ${styles.sumrow}`}>
+            <div />
+            <div>{'Összesen'}</div>
+            <div>{sum.newQuestions}</div>
+            <div>{sum.allQuestions}</div>
+            <div>{sum.count}</div>
+          </div>
+          {list ? (
+            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>
+              )
+            })
+          ) : (
+            <LoadingIndicator />
+          )}
         </div>
       </div>
     </div>
diff --git a/src/pages/ranklist.module.css b/src/pages/ranklist.module.css
index 9763c77..f2545eb 100644
--- a/src/pages/ranklist.module.css
+++ b/src/pages/ranklist.module.css
@@ -1,7 +1,20 @@
-.row,
-.headerRow {
+.table,
+.sinceTable {
   display: flex;
-  padding: 3px;
+  flex-direction: column;
+  padding: 0px 10px;
+}
+
+.table :nth-child(1),
+.sinceTable :nth-child(1) {
+  color: white;
+}
+
+.row,
+.headerRow,
+.sinceHeaderRow {
+  display: flex;
+  padding: 1px;
 }
 
 .row:hover {
@@ -9,13 +22,15 @@
 }
 
 .row div,
-.headerRow div {
+.headerRow div,
+.sinceHeaderRow div {
   flex: 1;
   padding: 0px 5px;
   text-align: center;
 }
 
-.headerRow div {
+.headerRow div,
+.sinceHeaderRow div {
   padding: 15px 5px;
 }
 
@@ -30,20 +45,14 @@
   text-align: left;
 }
 
-.table {
-  display: flex;
-  flex-direction: column;
-  padding: 10px;
-}
-
-.table :nth-child(1) {
-  color: white;
-}
-
 .clickable:hover {
   background-color: #666666;
 }
 
+.clickable {
+  cursor: pointer;
+}
+
 .selfRow {
   background-color: #9999ff;
   color: black;
@@ -67,6 +76,6 @@
   background-color: #9999ff;
 }
 
-.clickable {
-  cursor: pointer;
+.sumrow {
+  color: white;
 }