Reaction sorting, minor style and usability fixes

src/components/feedbackArea.js

@@ -6,7 +6,7 @@ import constants from '../constants.json'
 function FileUploader({ onChange }) {
   return (
     <div className={styles.inputArea}>
-      <div className={styles.textTitle}>Fájl csatolása</div>
+      <div>Fájl csatolása (Több fájlt ZIP-be tömörítve lehet egyszerre)</div>
       <input
         className={styles.fileInput}
         type="file"

src/components/feedbackArea.module.css

@@ -15,7 +15,15 @@
 }
 
 .inputArea {
-  display: block;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.inputArea > * {
+  padding: 5px 0px;
 }
 
 .fileContainer {

src/components/reactButton.js

@@ -25,26 +25,32 @@ function ExistingReacts({ existingReacts, onClick, uid }) {
     <div className={styles.reactionContainer}>
       <div className={styles.react_bttn}>Reakció</div>
       {existingReacts &&
-        Object.keys(existingReacts).map((key) => {
+        Object.keys(existingReacts)
-          const currReact = existingReacts[key]
+          .sort((akey, bkey) => {
-          const react = reactions[key]
+            const a = existingReacts[akey]
-          if (!react) {
+            const b = existingReacts[bkey]
-            return null
+            return a.length < b.length
-          }
+          })
-          return (
+          .map((key) => {
-            <div
+            const currReact = existingReacts[key]
-              title={`'${key}': ${currReact.join(', ')}`}
+            const react = reactions[key]
-              className={`${currReact.includes(uid) && styles.reacted}`}
+            if (!react) {
-              key={key}
+              return null
-              onClick={(e) => {
+            }
-                e.stopPropagation()
+            return (
-                onClick(key, currReact.includes(uid))
+              <div
-              }}
+                title={`'${key}': ${currReact.join(', ')}`}
-            >
+                className={`${currReact.includes(uid) && styles.reacted}`}
-              {react.emoji} {currReact.length}
+                key={key}
-            </div>
+                onClick={(e) => {
-          )
+                  e.stopPropagation()
-        })}
+                  onClick(key, currReact.includes(uid))
+                }}
+              >
+                {react.emoji} {currReact.length}
+              </div>
+            )
+          })}
     </div>
   )
 }

src/components/sleep.js

@@ -1,6 +1,7 @@
+import React from 'react'
 import constants from '../constants.json'
 
-export default function Sleep(props) {
+export default function Sleep() {
   const hours = new Date().getHours()
   if (hours < 4 || hours > 23) {
     return (

src/defaultStyles.css

@@ -43,7 +43,7 @@ textarea {
   border-radius: 3px;
 }
 
-input {
+input[type='text'] {
   color: var(--text-color);
   background-color: var(--background-color);
   border: 0px solid #444;

src/pages/allQuestions.js

@@ -5,7 +5,6 @@ import LoadingIndicator from '../components/LoadingIndicator.js'
 import QuestionSearchResult from '../components/QuestionSearchResult.js'
 import Subject from '../components/Subject.js'
 import SubjectSelector from '../components/SubjectSelector.js'
-import Sleep from '../components/sleep'
 import ExternalLinkIcon from '../components/externalLinkIcon'
 import SearchBar from '../components/searchBar'
 
@@ -133,7 +132,6 @@ export default function AllQuestions({ router }) {
           <div className={'pageHeader'}>
             <h1>Kérdések és tárgyak</h1>
           </div>
-          <Sleep />
           <div className={'description'}>
             Ezen az oldalon tudsz manuálisan keresni a kérdések és a tárgyak
             között, vagy ellenőrizni, hogy egy adott tárgy szerepel-e a kérdés-

src/pages/contact.js

@@ -5,8 +5,6 @@ import FeedbackArea from '../components/feedbackArea'
 import constants from '../constants.json'
 import LoadingIndicator from '../components/LoadingIndicator'
 
-import Sleep from '../components/sleep'
-
 import styles from './contact.module.css'
 
 export default function Contact() {
@@ -37,9 +35,6 @@ export default function Contact() {
       <div className={'pageHeader'}>
         <h1>Kapcsolat</h1>
       </div>
-      <br />
-      <Sleep />
-      <br />
       <div>
         <div className={'subtitle'}>Üzenet küldése</div>
         <div className={styles.text}>

src/pages/contribute.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import Head from 'next/head'
 
-import Sleep from '../components/sleep'
 import Todos from '../components/todoStuff/todos'
 import FeedbackArea from '../components/feedbackArea'
 import Modal from '../components/modal'
@@ -21,7 +20,6 @@ export default function contribute() {
       <div className={'pageHeader'}>
         <h1>Teendők</h1>
       </div>
-      <Sleep />
       <div className={'description'}>
         <p>
           Ezen az oldalon új ötleteket adhatsz hozzá megvalósításra a teendők

src/pages/faq.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
 
-import Sleep from '../components/sleep'
 import Head from 'next/head'
 
 function PasswordSection() {
@@ -56,7 +55,6 @@ function PasswordSection() {
           </li>
         </ul>
       </div>
-      <hr />
     </>
   )
 }
@@ -99,7 +97,6 @@ function FAQSection() {
           </li>
         </ul>
       </div>
-      <hr />
     </>
   )
 }
@@ -144,7 +141,6 @@ function RiskSection() {
           Pl.: ha a script rosszul menti le, vagy rossz kérdésre ad választ
         </li>
       </ul>
-      <hr />
     </>
   )
 }
@@ -175,7 +171,6 @@ function WebsiteSaveSection() {
         hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd
         azt az oldalt amin hibával találkozol.
       </p>
-      <hr />
     </>
   )
 }
@@ -185,8 +180,8 @@ function ScriptReinstallSection() {
     <>
       <p>
         Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a
-        weboldalról. A greasyforkos telepítési lehetőség meg fog szűnni, így ha
+        weboldalról. A greasyforkos telepítési lehetőség megszűnt, így ha onnan
-        onnan telepítetted, akkor nem lesznek frissítések elérhetők (amik nagyon
+        telepítetted, akkor nem lesznek frissítések elérhetők (amik nagyon
         fontosak (de tényleg)). Ezért a következő rövid manővert kellene
         végrehajtani, hogy minden zökkenőmentesen menjen:
       </p>
@@ -218,7 +213,6 @@ function ScriptReinstallSection() {
       </ul>
       Ezzel semmi adat nem vész el, régi jelszó ugyanolyan jó marad (csak ne
       felejtsd azt el)
-      <hr />
     </>
   )
 }
@@ -299,7 +293,10 @@ const pages = {
   faq: { name: 'GYIK', component: FAQSection },
   pw: { name: 'Jelszavak', component: PasswordSection },
   risk: { name: 'Kockázatok', component: RiskSection },
-  websitedl: { name: 'Weboldal letöltése', component: WebsiteSaveSection },
+  websitedl: {
+    name: 'Teszt közbeni hiba jelentése',
+    component: WebsiteSaveSection,
+  },
   reinstall: {
     name: 'Script újratelepítése',
     component: ScriptReinstallSection,
@@ -335,9 +332,6 @@ export default function FAQ({ router }) {
       <div className={'pageHeader'}>
         <h1>Gyakran Ismételt Kérdések</h1>
       </div>
-      <br />
-      <Sleep />
-      <br />
       <div className={'buttonContainer'}>
         {Object.keys(pages).map((key) => {
           const page = pages[key]
@@ -354,9 +348,9 @@ export default function FAQ({ router }) {
           )
         })}
       </div>
+      <hr />
       {renderCurrPage(currPage)}
-
+      <hr />
-      <p className={'endofpage'} />
     </div>
   )
 }

src/pages/pwRequest.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
 import fetch from 'unfetch'
 import Head from 'next/head'
 import Link from 'next/link'
-import Sleep from '../components/sleep'
 
 import styles from './pwRequest.module.css'
 import constants from '../constants.json'
@@ -90,7 +89,6 @@ export default function PwRequest({ globalData }) {
         <h1>Jelszó generálás</h1>
       </div>
       <center>
-        <Sleep />
         <div id="form">
           <div className={styles.text}>
             <p className={styles.descrip}>

src/pages/ranklist.js

@@ -3,7 +3,6 @@ import fetch from 'unfetch'
 import Head from 'next/head'
 
 import LoadingIndicator from '../components/LoadingIndicator'
-import Sleep from '../components/sleep'
 
 import styles from './ranklist.module.css'
 import constants from '../constants.json'
@@ -114,12 +113,9 @@ export default function RankList({ globalData }) {
     getList()
   }, [])
 
-  useEffect(
+  useEffect(() => {
-    () => {
+    getList()
-      getList()
+  }, [since])
-    },
-    [since]
-  )
 
   const list =
     ranklist &&
@@ -156,7 +152,6 @@ export default function RankList({ globalData }) {
               frissülnek.
             </p>
           </div>
-          <Sleep />
           <div className={'selectContainer'}>
             <div>Megjelenítés: </div>
             <select
@@ -235,8 +230,9 @@ export default function RankList({ globalData }) {
               {list.map((listItem, i) => {
                 return (
                   <div
-                    className={`${styles.row} ${listItem.userId ===
+                    className={`${styles.row} ${
-                      selfUserId && styles.selfRow}`}
+                      listItem.userId === selfUserId && styles.selfRow
+                    }`}
                     key={i}
                   >
                     <div>{listItem.rank + 1}</div>

src/pages/script.js

@@ -1,6 +1,5 @@
 import React from 'react'
 
-import Sleep from '../components/sleep'
 import Head from 'next/head'
 
 import ExternalLinkIcon from '../components/externalLinkIcon'
@@ -28,7 +27,6 @@ export default function Script() {
           <ExternalLinkIcon size={15} />
         </a>
       </div>
-      <Sleep />
       {renderManual()}
     </div>
   )

src/pages/userfiles.js

@@ -190,7 +190,6 @@ export default function UserFiles({ router, globalData }) {
   const [addingNew, setAddingNew] = useState()
   const [newSubjName, setNewSubjName] = useState()
   const [file, setFile] = useState()
-  const [usageShowing, setUsageShowing] = useState(false)
   const [searchTerm, setSearchTerm] = useState()
   const [uploading, setUploading] = useState(false)
   const [votingDisabled, setVotingDisabled] = useState(false)
@@ -429,37 +428,22 @@ export default function UserFiles({ router, globalData }) {
         <h1>Tanulás segédanyagok</h1>
       </div>
       {!currDir && (
-        <div
+        <div className={styles.description}>
-          onClick={() => {
-            setUsageShowing(true)
-          }}
-          className={styles.description}
-        >
           Itt lehet megosztani mindenféle tanulást segítő doksit (kidolgozott
-          tételektől puskáig mindent).{' '}
+          tételektől puskáig mindent).
-          <b>Használati útmutatóért és egyéb infókért kattints ide!</b>
+          <br />
+          Ez gyakorlatilag egy fájl böngésző, a tárgyak a mappák, és azon belül
+          lehet fájlokat feltölteni.
+          <br />A feltöltött fájlok ellenőrizve vannak, hogy ide valóak-e, de{' '}
+          <b>
+            hibás információért, vírusokért és hasonlókért semmi felelősség
+            vállalás nincs.
+          </b>{' '}
+          Ha valami nem idevalót látsz, azt a Kapcsolat oldalon jelezd kérlek.
+          Tudatos károkozásért ban jár.
         </div>
       )}
-      {usageShowing && (
+      <hr />
-        <Modal
-          closeClick={() => {
-            setUsageShowing(false)
-          }}
-        >
-          <div className={styles.text}>
-            Ez gyakorlatilag egy fájl böngésző, a tárgyak a mappák, és azon
-            belül lehet fájlokat feltölteni.
-            <p />A feltöltött fájlok ellenőrizve vannak, hogy ide valóak-e, de{' '}
-            <b>
-              hibás információért, vírusokért és hasonlókért semmi felelősség
-              vállalás nincs.
-            </b>{' '}
-            Ha valami nem idevalót látsz, azt a Kapcsolat oldalon jelezd kérlek.
-            Tudatos károkozásért ban jár.
-            <p />
-          </div>
-        </Modal>
-      )}
       {renderDirList(dirs)}
       {addingNew && (
         <Modal

src/pages/userfiles.module.css

@@ -98,10 +98,7 @@
   cursor: pointer;
 }
 
-.text {
+.description > b {
-}
-
-.text > b {
   color: red;
 }