Merge branch 'master' of gitlab.com:MrFry/qmining-page

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-react"]
+}

.eslintrc.js

@@ -1,11 +1,22 @@
 module.exports = {
   env: {
     browser: true,
-    es6: true,
+    es2021: true,
-    node: true,
   },
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
-  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  parserOptions: {
+    sourceType: 'module',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:@next/next/recommended',
+  ],
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',

package.json

@@ -13,15 +13,18 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "babel-eslint": "^10.1.0",
+    "@babel/eslint-parser": "^7.5.4",
-    "eslint-plugin-react": "^7.21.5",
+    "@next/eslint-plugin-next": "^13.2.4",
-    "linkify-string": "^3.0.4",
+    "eslint-plugin-react": "^7.32.2",
-    "next": "^10.0.3",
+    "linkify-string": "^4.1.0",
-    "react": "^16.13.0",
+    "next": "^13.2.3",
-    "react-dom": "^16.13.0",
+    "react": "^18.2.0",
-    "react-query": "^3.34.16",
+    "react-dom": "^18.2.0",
-    "react-snowfall": "^1.0.2",
+    "react-query": "^3.39.3",
-    "socket.io-client": "^4.1.2",
+    "react-snowfall": "^1.2.1",
-    "unfetch": "^4.1.0"
+    "socket.io-client": "^4.6.1"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.18.6"
   }
 }

src/components/QuestionSearchResult.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import Questions from './Questions.js'
+import Questions from './Questions'
 
 import constants from '../constants.json'
 

src/components/Questions.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 
-import Question from './Question.js'
+import Question from './Question'
 
 import styles from './Questions.module.css'
 

src/components/Subject.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 
-import Question from './Question.js'
+import Question from './Question'
 
 class Subject extends PureComponent {
   render() {

src/components/comments.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
-import ReactButton from './reactButton.js'
+import ReactButton from './reactButton'
-import Modal from './modal.js'
+import Modal from './modal'
 import Link from 'next/link'
 
 import styles from './comments.module.css'
@@ -63,10 +63,12 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
             >
               {displayed ? '[-]' : '[+]'}
             </div>
-            <Link href={`/chat?user=${user}`}>
+            <Link
-              <a title={`Chat #${user}-el`} className={'userId'}>
+              href={`/chat?user=${user}`}
+              title={`Chat #${user}-el`}
+              className={'userId'}>
               User #{user}
-              </a>
+
             </Link>
           </div>
           <div className={styles.commentDate} title={dateObj.toLocaleString()}>
@@ -140,7 +142,7 @@ function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
           })}
       </div>
     </div>
-  )
+  );
 }
 
 function countComments(comments) {

src/components/dbSelector.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import Modal from './modal.js'
+import Modal from './modal'
 import constants from '../constants.json'
 
 import styles from './dbSelector.module.css'

src/components/forum.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react'
-import fetch from 'unfetch'
 
 import LoadingIndicator from '../components/LoadingIndicator'
 import Sleep from '../components/sleep'

src/components/layout.jsx

@@ -5,10 +5,10 @@ import dynamic from 'next/dynamic'
 
 const Snowfall = dynamic(() => import('react-snowfall'), { ssr: false })
 
-import LogoutIcon from './logoutIcon.js'
+import LogoutIcon from './logoutIcon'
-import Modal from './modal.js'
+import Modal from './modal'
 import constants from '../constants.json'
-import BB from './b.js'
+import BB from './b'
 
 import styles from './layout.module.css'
 import tabs from '../data/tabs.json'
@@ -67,37 +67,36 @@ function TopBar({
   unreads,
   userId,
 }) {
-  return (
+  return <>
-    <>
     <MenuIcon setSidebarOpen={setSidebarOpen} sidebarOpen={sidebarOpen} />
     <Link href="/">
-        <a>
+
       <img
         src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
         alt="FryLabs"
       />
-        </a>
+
     </Link>
     <div className={styles.topBarLinks}>
       {Object.keys(topBarLinks).map((key) => {
         const item = topBarLinks[key]
 
         return (
-            <Link key={key} href={item.href}>
+          (<Link
-              <a
+            key={key}
+            href={item.href}
             onClick={closeSideBar}
-                className={href.includes(key) ? styles.active : undefined}
+            className={href.includes(key) ? styles.active : undefined}>
-              >
+
             {item.text}
-              </a>
+
-            </Link>
+          </Link>)
-          )
+        );
       })}
     </div>
     <div className={'seperator'} />
     <UserStatus onClick={closeSideBar} unreads={unreads} userId={userId} />
-    </>
+  </>;
-  )
 }
 
 function SideBar({ sidebarOpen, closeSideBar, href, setDonateShowing }) {
@@ -111,16 +110,17 @@ function SideBar({ sidebarOpen, closeSideBar, href, setDonateShowing }) {
           }
 
           return (
-            <Link href={item.href} key={key}>
+            (<Link
-              <a
+              href={item.href}
+              key={key}
               onClick={closeSideBar}
               className={href.includes(key) ? styles.active : undefined}
-                id={item.id || undefined}
+              id={item.id || undefined}>
-              >
+
               {item.text}
-              </a>
+
-            </Link>
+            </Link>)
-          )
+          );
         })}
         <a
           onClick={() => {
@@ -132,7 +132,7 @@ function SideBar({ sidebarOpen, closeSideBar, href, setDonateShowing }) {
         </a>
       </div>
     </>
-  ) : null
+  ) : null;
 }
 
 function Donate() {
@@ -183,15 +183,15 @@ function UserStatus({ userId, unreads, onClick }) {
       <div className={'uid'} title="User ID">
         UID: {userId || '...'}
       </div>
-      <Link href="/chat">
+      <Link
-        <a
+        href="/chat"
         onClick={onClick}
         title={`Chat${unreadCount ? ' (' + unreadCount + ' új üzenet)' : ''}`}
-          className={styles.unreadNotification}
+        className={styles.unreadNotification}>
-        >
+
         <span>💬</span>
         {unreadCount ? <div>{unreadCount}</div> : null}
-        </a>
+
       </Link>
 
       <div
@@ -215,7 +215,7 @@ function UserStatus({ userId, unreads, onClick }) {
         <LogoutIcon size={28} />
       </div>
     </div>
-  )
+  );
 }
 
 function MenuIcon({ setSidebarOpen, sidebarOpen }) {

src/components/layout.module.css

@@ -223,7 +223,7 @@
 }
 
 .unreadNotification > span {
-  top: 8px;
+  top: 4px;
   right: -8px;
   display: inline-block;
   position: relative;

src/components/newsEntry.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import ReactButton from './reactButton.js'
+import ReactButton from './reactButton'
-import Comments from './comments.js'
+import Comments from './comments'
 import Link from 'next/link'
 
 import constants from '../constants.json'
@@ -92,10 +92,12 @@ export default function NewsEntry({
             {title}
           </div>
           <div className={styles.userinfo}>
-            <Link href={`/chat?user=${user}`}>
+            <Link
-              <a title={`Chat #${user}-el`} className={'userId'}>
+              href={`/chat?user=${user}`}
+              title={`Chat #${user}-el`}
+              className={'userId'}>
               User #{user}
-              </a>
+
             </Link>
             <div className={styles.newsDate} title={dateObj.toLocaleString()}>
               @
@@ -143,5 +145,5 @@ export default function NewsEntry({
         />
       </div>
     </div>
-  )
+  );
 }

src/components/reactButton.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 
-import Tooltip from './tooltip.js'
+import Tooltip from './tooltip'
 
 import styles from './reactButton.module.css'
 import reactions from '../data/reactions.json'

src/components/todoStuff/todoBoard.jsx

@@ -1,18 +1,12 @@
 import React from 'react'
 
-import TodoCard from './todoCard.js'
+import TodoCard from './todoCard'
 
 import styles from './todoBoard.module.css'
 
 export default function TodoBoard(props) {
-  const {
+  const { columns, cards, userId, categories, onCardClick, selectedGroup } =
-    columns,
+    props
-    cards,
-    userId,
-    categories,
-    onCardClick,
-    selectedGroup,
-  } = props
 
   const clickableTypes = Object.keys(columns).reduce((acc, key) => {
     const col = columns[key]

src/components/todoStuff/todoTable.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import TodoRow from './todoRow.js'
+import TodoRow from './todoRow'
 
 import styles from './todoTable.module.css'
 

src/components/todoStuff/todos.jsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react'
 
-import LoadingIndicator from '../LoadingIndicator.js'
+import LoadingIndicator from '../LoadingIndicator'
-import TodoBoard from './todoBoard.js'
+import TodoBoard from './todoBoard'
-import TodoTable from './todoTable.js'
+import TodoTable from './todoTable'
-import TodoSidebar from './todoSidebar.js'
+import TodoSidebar from './todoSidebar'
-import Modal from '../modal.js'
+import Modal from '../modal'
 
 import styles from './todo.module.css'
 import constants from '../../constants.json'

src/pages/404.jsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 export default function Custom404() {
   return (
     <center>

src/pages/_document.jsx

@@ -11,7 +11,7 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head />
-        <body bgcolor="#222226">
+        <body style={{ backgroundColor: '#222226' }}>
           <Main />
           <NextScript />
         </body>

src/pages/allQuestions.jsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react'
 
 import Header from '../components/header'
-import LoadingIndicator from '../components/LoadingIndicator.js'
+import LoadingIndicator from '../components/LoadingIndicator'
-import QuestionSearchResult from '../components/QuestionSearchResult.js'
+import QuestionSearchResult from '../components/QuestionSearchResult'
-import Subject from '../components/Subject.js'
+import Subject from '../components/Subject'
-import SubjectSelector from '../components/SubjectSelector.js'
+import SubjectSelector from '../components/SubjectSelector'
 import ExternalLinkIcon from '../components/externalLinkIcon'
 import SearchBar from '../components/searchBar'
 

src/pages/contact.jsx

@@ -45,7 +45,7 @@ export default function Contact({ globalState, setGlobalState }) {
         <div className={'subtitle'}>Chat</div>
         <div className={styles.text}>
           <Link href="/chat?user=1">
-            <a>Weboldal chat-jén keresztül beszélgetés admin-nal</a>
+            Weboldal chat-jén keresztül beszélgetés admin-nal
           </Link>
           <br />
           Valós idejű chat, képeket és fájlokat is lehet küldeni.
@@ -94,5 +94,5 @@ export default function Contact({ globalState, setGlobalState }) {
         )}
       </div>
     </div>
-  )
+  );
 }

src/pages/faq.jsx

@@ -92,7 +92,7 @@ function FAQSection() {
           <br />
           Több infó a{' '}
           <Link href="/faq?tab=risk">
-            <a>kockázatok résznél</a>
+            kockázatok résznél
           </Link>
           .
         </li>
@@ -108,12 +108,11 @@ function FAQSection() {
         </li>
       </ul>
     </div>
-  )
+  );
 }
 
 function RiskSection() {
-  return (
+  return <>
-    <>
     Itt {'"én"'} alatt a szerver, weboldal és script egyedüli üzemeltetője
     értendő, az egyetlen személy, aki hozzáfér akármilyen szolgáltatással
     kapcsolatos adathoz, pl.: szerver statisztikák, szerver operációs
@@ -139,7 +138,7 @@ function RiskSection() {
         <p />
         Bizonyíték? A script, weboldal és szerver teljesen nyílt forráskódú,{' '}
         <Link href="/contribute#gitrepo">
-            <a>ezek repository-ja publikus</a>
+          ezek repository-ja publikus
         </Link>{' '}
         (contribute oldal alja), és akármikor felülvizsgálható. A script a te
         böngésződben fut, tampermonkey bővítmény menüjében megtekinthető
@@ -182,13 +181,11 @@ function RiskSection() {
         Pl.: ha a script rosszul menti le, vagy rossz kérdésre ad választ
       </li>
     </ul>
-    </>
+  </>;
-  )
 }
 
 function WebsiteSaveSection() {
-  return (
+  return <>
-    <>
     <p>
       Ha hibát találsz, kérlek jelents. Hogy a hibákat a saját gépemen
       reprodukálni tudjam, és könnyen ki bírjam javítani, sokszor jól jön, ha
@@ -220,12 +217,12 @@ function WebsiteSaveSection() {
         szoktam megnézni a neveket, nem is tudok velük mit kezdeni, és nem is
         adom ki soha. Amit beküldesz, azt csak én látom.{' '}
         <Link href="/faq?tab=risk">
-            <a>Több infó itt</a>
+          Több infó itt
         </Link>{' '}
       </li>
       <li>
         <Link href="/contact">
-            <a>Ide tudod feltölteni</a>
+          Ide tudod feltölteni
         </Link>{' '}
       </li>
     </ul>
@@ -234,8 +231,7 @@ 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>
-    </>
+  </>;
-  )
 }
 
 function ScriptSection() {
@@ -245,7 +241,7 @@ function ScriptSection() {
         <li>
           <b>Hogy kell a scriptet telepíteni, és milyen oldalakon működik? </b>
           <Link href="/script">
-            <a>Ezen az oldalon van leírva</a>
+            Ezen az oldalon van leírva
           </Link>{' '}
         </li>
         <li>
@@ -264,7 +260,7 @@ function ScriptSection() {
               Más felhasználóknak köszönhetően már valószínűleg lesznek
               megoldások a tesztjeidhez.{' '}
               <Link href="/allQuestions">
-                <a>Itt</a>
+                Itt
               </Link>{' '}
               meg tudod tekinteni, hogy vannak-e válaszok a tárgyadhoz.
             </li>
@@ -382,12 +378,11 @@ function ScriptSection() {
         </li>
       </ul>
     </div>
-  )
+  );
 }
 
 function AddSite() {
-  return (
+  return <>
-    <>
     Jelenleg az, hogy a script melyik oldalakon fut bele van égetve a script
     forráskódjába. Ez itt látható:{' '}
     <a
@@ -409,7 +404,7 @@ function AddSite() {
     <ul>
       <li>
         <Link href="/script">
-            <a>Először telepítsd a scriptet rendesen</a>
+          Először telepítsd a scriptet rendesen
         </Link>{' '}
       </li>
       <li>
@@ -449,12 +444,11 @@ function AddSite() {
         van, nem működik valami, vagy éppen működik, de alapból nincs
         hozzáadva:{' '}
         <Link href="/contact">
-            <a>írj a kapcsolat oldalon!</a>
+          írj a kapcsolat oldalon!
         </Link>
       </li>
     </ul>
-    </>
+  </>;
-  )
 }
 
 const pages = {

src/pages/memes.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import { useQuery } from 'react-query'
-import fetch from 'unfetch'
 import Head from 'next/head'
 
 import LoadingIndicator from '../components/LoadingIndicator'

src/pages/pwRequest.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react'
-import fetch from 'unfetch'
 import Link from 'next/link'
 
 import Header from '../components/header'
@@ -110,7 +109,7 @@ export default function PwRequest({ globalData, globalState, setGlobalState }) {
               ha ugyan az a felhasználó több helyen is belépve marad. A
               jelszavakról bővebben a{' '}
               <Link href="/faq?tab=pw">
-                <a>GYIK</a>
+                GYIK
               </Link>{' '}
               vonatkozó részében olvashatsz.
             </p>
@@ -192,5 +191,5 @@ export default function PwRequest({ globalData, globalState, setGlobalState }) {
         </div>
       </center>
     </div>
-  )
+  );
 }

src/pages/ranklist.jsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react'
-import fetch from 'unfetch'
 
 import Header from '../components/header'
 import LoadingIndicator from '../components/LoadingIndicator'

src/pages/script.jsx

@@ -62,7 +62,7 @@ export default function Script() {
               })}
               <li>
                 <Link href="/faq?tab=addsite">
-                  <a>új oldal hozzáadásának menete itt</a>
+                  új oldal hozzáadásának menete itt
                 </Link>
               </li>
             </ul>
@@ -103,11 +103,11 @@ export default function Script() {
             Ha be vagy jelentkezve, akkor a teszt oldalakon a megoldásokat
             kellene látnod egy felugró ablakban felül. Ha nem, akkor{' '}
             <Link href="/faq">
-              <a>GYIK</a>
+              GYIK
             </Link>
             -be olvass bele, vagy{' '}
             <Link href="/contact">
-              <a>írj üzenetet mi nem működik</a>
+              írj üzenetet mi nem működik
             </Link>
           </li>
         </ol>
@@ -144,7 +144,7 @@ export default function Script() {
         <ul>
           <li>
             <Link href="/allQuestions">
-              <a>Itt elérhető online az összes kérdés</a>
+              Itt elérhető online az összes kérdés
             </Link>{' '}
             ha esetleg a script valamiért nem működne.
           </li>
@@ -161,5 +161,5 @@ export default function Script() {
         </ul>
       </div>
     </div>
-  )
+  );
 }

src/pages/thanks.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import styles from './thanks.module.css'
 import constants from '../constants.json'
 import Head from 'next/head'

src/pages/userfiles.jsx

@@ -476,19 +476,19 @@ export default function UserFiles({
                               Törlés
                             </div>
                           ) : (
-                            <Link href={`/chat?user=${user}`}>
+                            <Link
-                              <a
+                              href={`/chat?user=${user}`}
                               title={`Chat #${user}-el`}
                               onClick={(e) => {
                                 e.stopPropagation()
                               }}
-                                className={'userId'}
+                              className={'userId'}>
-                              >{`#${user}`}</a>
+                              {`#${user}`}
                             </Link>
                           ))}
                       </div>
                     </div>
-                  )
+                  );
                 })}
               </>
             ) : (
@@ -513,7 +513,7 @@ export default function UserFiles({
           <LoadingIndicator />
         )}
       </div>
-    )
+    );
   }
 
   return (
@@ -536,7 +536,7 @@ export default function UserFiles({
           </b>{' '}
           Ha valami nem idevalót látsz, azt a{' '}
           <Link href="/contact">
-            <a>Kapcsolat</a>
+            Kapcsolat
           </Link>{' '}
           oldalon jelezd kérlek. Tudatos károkozásért ban jár.
         </div>
@@ -602,5 +602,5 @@ export default function UserFiles({
         </Modal>
       )}
     </div>
-  )
+  );
 }