refactors, dynamic constants (lol)

constants.js

@@ -0,0 +1,16 @@
+// eslint-disable-next-line no-undef
+const useLocalhost = process && process.env.NODE_ENV === 'development'
+
+const constants = {
+  siteUrl: !useLocalhost ? 'http://frylabs.net/' : 'http://localhost:8080/',
+  apiUrl: !useLocalhost
+    ? 'http://frylabs.net/api/'
+    : 'http://localhost:8080/api/',
+  chatUrl: !useLocalhost ? 'http://frylabs.net/' : 'http://localhost:8080/',
+  mobileWindowWidth: 700,
+  maxQuestionsToRender: 250,
+  imageExts: ['gif', 'png', 'jpeg', 'jpg'],
+  videoExts: ['mp4', 'mkv', 'webm'],
+}
+
+export default constants

src/components/QuestionSearchResult.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Questions from './Questions'
 
-import constants from '../constants.json'
+import constants from '../constants'
 
 const countReducer = (acc, subj) => {
   return acc + subj.Questions.length

src/components/b.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import constants from '../constants.json'
+import constants from '../constants'
 
 const soundCount = 7
 function GetRandom(min, max) {

src/components/composer.jsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import Modal from './modal'
 
 import styles from './composer.module.css'
-import constants from '../constants.json'
+import constants from '../constants'
 
 export default function Composer({ onSubmit, allowFile, fileOnly }) {
   const [editorShowing, setEditorShowing] = useState(false)

src/components/dbSelector.jsx

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

src/components/feedbackArea.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
 import styles from './feedbackArea.module.css'
-import constants from '../constants.json'
+import constants from '../constants'
 
 function FileUploader({ onChange }) {
   return (

src/components/forum.jsx

@@ -8,7 +8,7 @@ import Header from '../components/header'
 import Modal from '../components/modal'
 
 import styles from './forum.module.css'
-import constants from '../constants.json'
+import constants from '../constants'
 
 const forumPostPerPage = 5
 

src/components/layout.jsx

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

src/components/newsEntry.jsx

@@ -4,7 +4,7 @@ import ReactButton from './reactButton'
 import Comments from './comments'
 import Link from 'next/link'
 
-import constants from '../constants.json'
+import constants from '../constants'
 
 import styles from './newsEntry.module.css'
 
@@ -95,9 +95,9 @@ export default function NewsEntry({
             <Link
               href={`/chat?user=${user}`}
               title={`Chat #${user}-el`}
-              className={'userId'}>
+              className={'userId'}
+            >
               User #{user}
-
             </Link>
             <div className={styles.newsDate} title={dateObj.toLocaleString()}>
               @
@@ -145,5 +145,5 @@ export default function NewsEntry({
         />
       </div>
     </div>
-  );
+  )
 }

src/components/sleep.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import constants from '../constants.json'
+import constants from '../constants'
 
 export default function Sleep() {
   const hours = new Date().getHours()

src/constants.js

@@ -0,0 +1,15 @@
+// eslint-disable-next-line no-undef
+const useLocalhost = process && process.env.NODE_ENV === 'development'
+
+const constants = {
+  siteUrl: !useLocalhost ? 'http://frylabs.net/' : 'http://localhost:8080/',
+  apiUrl: !useLocalhost
+    ? 'http://frylabs.net/api/'
+    : 'http://localhost:8080/api/',
+  chatUrl: !useLocalhost ? 'http://frylabs.net/' : 'http://localhost:8080/',
+  mobileWindowWidth: 700,
+  maxQuestionsToRender: 250,
+  imageExts: ['gif', 'png', 'jpeg', 'jpg'],
+  videoExts: ['mp4', 'mkv', 'webm'],
+}
+export default constants

src/constants.json

@@ -1,8 +0,0 @@
-{
-  "siteUrl": "http://localhost:8080/",
-  "apiUrl": "http://localhost:8080/",
-  "mobileWindowWidth": 700,
-  "maxQuestionsToRender": 250,
-  "imageExts": ["gif", "png", "jpeg", "jpg"],
-  "videoExts": ["mp4", "mkv", "webm"]
-}

src/pages/_app.jsx

@@ -5,7 +5,7 @@ import Head from 'next/head'
 import Layout from '../components/layout'
 
 import '../defaultStyles.css'
-import constants from '../constants.json'
+import constants from '../constants'
 
 export const queryClient = new QueryClient({
   defaultOptions: {

src/pages/allQuestions.jsx

@@ -10,7 +10,7 @@ import SearchBar from '../components/searchBar'
 
 import styles from './allQuestions.module.css'
 
-import constants from '../constants.json'
+import constants from '../constants'
 
 const countReducer = (acc, subj) => {
   return acc + subj.Questions.length

src/pages/chat.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import io from 'socket.io-client'
 import linkifyString from 'linkify-string'
 
-import constants from '../constants.json'
+import constants from '../constants'
 import LoadingIndicator from '../components/LoadingIndicator'
 import { queryClient } from '../pages/_app'
 import Header from '../components/header'
@@ -202,7 +202,7 @@ export default class Chat extends React.Component {
       return
     }
     // https://socket.io/docs/v4/handling-cors/#Configuration
-    const socket = io(`${constants.apiUrl}`, {
+    const socket = io(`${constants.chatUrl}`, {
       withCredentials: true,
       extraHeaders: {
         'qmining-chat': 'qmining-chat',

src/pages/contact.jsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 
 import Header from '../components/header'
 import FeedbackArea from '../components/feedbackArea'
-import constants from '../constants.json'
+import constants from '../constants'
 import LoadingIndicator from '../components/LoadingIndicator'
 
 import styles from './contact.module.css'
@@ -62,13 +62,10 @@ export default function Contact({ globalState, setGlobalState }) {
       <div className={styles.container}>
         {contacts ? (
           <>
-            <div>
-              <div className={'subtitle'}>Alternatív módok</div>
             <div className={styles.text}>
-                TODO: remove this Az alábbi módokat is nyugodtan használhatod, a
-                nevedet, e-mail címedet, illetve semmilyen egyéb adatot nem adok
-                ki harmadik fél számára. (egyedül én fogom látni)
-              </div>
+              Figyelem! A szerver üzemeltetőjének kontaktját a
+              <Link href="/p2pinfo">{'"P2P infó"'}</Link>
+              részlegen találod!
             </div>
             <div className={styles.contactsContainer}>
               {Object.keys(contacts).map((key) => {
@@ -78,8 +75,7 @@ export default function Contact({ globalState, setGlobalState }) {
                     <div>{description}</div>
                     {href ? (
                       <a target="blank" rel="noreferrer" href={href}>
-                        {' '}
-                        {value}{' '}
+                        {value}
                       </a>
                     ) : (
                       <div>{value}</div>

src/pages/faq.jsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 
 import Header from '../components/header'
 
-import constants from '../constants.json'
+import constants from '../constants'
 import styles from './faq.module.css'
 
 function PasswordSection() {
@@ -90,11 +90,7 @@ function FAQSection() {
           (így nicknevek sem kellenek), és még IP cím sincs sehol letárolva
           szerver oldalon.
           <br />
-          Több infó a{' '}
-          <Link href="/faq?tab=risk">
-            kockázatok résznél
-          </Link>
-          .
+          Több infó a <Link href="/faq?tab=risk">kockázatok résznél</Link>.
         </li>
         <li>
           <b>Ki és miért csinálja ezt a weboldalt?</b>
@@ -108,11 +104,12 @@ 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
@@ -181,11 +178,13 @@ 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
@@ -216,14 +215,10 @@ function WebsiteSaveSection() {
           nevedre, majd (csak a neved, ne a sort) töröld ki, és mentsd el. Nem
           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">
-          Több infó itt
-        </Link>{' '}
+          <Link href="/faq?tab=risk">Több infó itt</Link>{' '}
         </li>
         <li>
-        <Link href="/contact">
-          Ide tudod feltölteni
-        </Link>{' '}
+          <Link href="/contact">Ide tudod feltölteni</Link>{' '}
         </li>
       </ul>
       <p>
@@ -231,7 +226,8 @@ 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() {
@@ -240,9 +236,7 @@ function ScriptSection() {
       <ul>
         <li>
           <b>Hogy kell a scriptet telepíteni, és milyen oldalakon működik? </b>
-          <Link href="/script">
-            Ezen az oldalon van leírva
-          </Link>{' '}
+          <Link href="/script">Ezen az oldalon van leírva</Link>{' '}
         </li>
         <li>
           <b>Hogyan működik a script?</b>
@@ -258,10 +252,7 @@ function ScriptSection() {
             </li>
             <li>
               Más felhasználóknak köszönhetően már valószínűleg lesznek
-              megoldások a tesztjeidhez.{' '}
-              <Link href="/allQuestions">
-                Itt
-              </Link>{' '}
+              megoldások a tesztjeidhez. <Link href="/allQuestions">Itt</Link>{' '}
               meg tudod tekinteni, hogy vannak-e válaszok a tárgyadhoz.
             </li>
             <li>
@@ -378,11 +369,12 @@ 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
@@ -403,9 +395,7 @@ function AddSite() {
       Egyetem moodle oldalának hozzáadása a scripthez kézzel:
       <ul>
         <li>
-        <Link href="/script">
-          Először telepítsd a scriptet rendesen
-        </Link>{' '}
+          <Link href="/script">Először telepítsd a scriptet rendesen</Link>{' '}
         </li>
         <li>
           Böngészőben nyisd meg a Tampermonkey bővítményt <br />
@@ -442,13 +432,11 @@ function AddSite() {
           Ha a tesztek közben mégsem megy, akkor ellenőrizd, hogy a beírt moodle
           cím egyezik-e a teszt közbenivel. Ha kell egy kis segítség, kérdésed
           van, nem működik valami, vagy éppen működik, de alapból nincs
-        hozzáadva:{' '}
-        <Link href="/contact">
-          írj a kapcsolat oldalon!
-        </Link>
+          hozzáadva: <Link href="/contact">írj a kapcsolat oldalon!</Link>
         </li>
       </ul>
-  </>;
+    </>
+  )
 }
 
 const pages = {

src/pages/memes.jsx

@@ -9,7 +9,7 @@ import Composer from '../components/composer'
 import Modal from '../components/modal'
 
 import styles from './memes.module.css'
-import constants from '../constants.json'
+import constants from '../constants'
 
 const forumPostPerPage = 5
 const frontpageForumName = 'memes'

src/pages/p2pinfo.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
 
 import Header from '../components/header'
-import constants from '../constants.json'
+import constants from '../constants'
 import LoadingIndicator from '../components/LoadingIndicator'
 
 import styles from './p2pinfo.module.css'
@@ -36,15 +36,15 @@ const infos = [
     key: 'questionCount',
     type: 'number',
   },
+  {
+    title: 'Script version',
+    key: 'scriptVersion',
+  },
   {
     title: 'Szerver build time',
     key: 'serverBuildTime',
     type: 'date',
   },
-  {
-    title: 'Script version',
-    key: 'scriptVersion',
-  },
   {
     title: 'Weboldal build time',
     key: 'qminingPageBuildTime',
@@ -116,10 +116,17 @@ export default function P2PInfo({ globalState, setGlobalState }) {
       </div>
       <div className={styles.container}>
         <Header title={'P2P infó'} />
-        A weboldal peer to peer (p2p) megoldást implementál, így több szerverrel
-        együtt tud működni, és a más szerveren hozzáadott adatokat időközönként
-        elkéri, és hozzáadja a helyileg tárolt adatokhoz. Vagy valami ilyesmi
-        TODO: normális duma
+        <div style={{ textAlign: 'center' }}>
+          A weboldal peer to peer (p2p) megoldást implementál, folyamatosan
+          megosztja az új kérdéseket a lent megadott regisztrált szerverekkel,
+          és hozzáadja a kapott új kérdéseket a helyi adatbázishoz.
+          <p />
+          Ha az egyik szerver kiesne, a script a megadott szerverek közül
+          választ egy újat. A felhasználók is szinkronizálva vannak, így a
+          jelenlegi jelszavaddal bármelyik másik oldalra be tudsz lépni
+          <p />A szervert akár te is hostolhatod, érdeklődj a lentebb megadott
+          kontakton
+        </div>
         <hr />
         <div className={styles.title}>Szerver P2P információja:</div>
         <br />
@@ -166,6 +173,11 @@ export default function P2PInfo({ globalState, setGlobalState }) {
             </div>
           )
         })}
+        {p2pInfo.myPeers.length === 0 && (
+          <div className={styles.peerContainer}>
+            Ennél a szervernél jelenleg nincs peer regisztrálva
+          </div>
+        )}
       </div>
     </>
   )

src/pages/pwRequest.jsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import Header from '../components/header'
 
 import styles from './pwRequest.module.css'
-import constants from '../constants.json'
+import constants from '../constants'
 
 function fetchAvailablePWS() {
   return new Promise((resolve) => {
@@ -107,10 +107,7 @@ export default function PwRequest({ globalData, globalState, setGlobalState }) {
               Minden felhasználó egyedi jelszót kap. Ne használjatok többen egy
               jelszót, mert egy idő után -biztonsági okokból- kidob a rendszer,
               ha ugyan az a felhasználó több helyen is belépve marad. A
-              jelszavakról bővebben a{' '}
-              <Link href="/faq?tab=pw">
-                GYIK
-              </Link>{' '}
+              jelszavakról bővebben a <Link href="/faq?tab=pw">GYIK</Link>{' '}
               vonatkozó részében olvashatsz.
             </p>
           </div>
@@ -191,5 +188,5 @@ export default function PwRequest({ globalData, globalState, setGlobalState }) {
         </div>
       </center>
     </div>
-  );
+  )
 }

src/pages/ranklist.jsx

@@ -4,7 +4,7 @@ import Header from '../components/header'
 import LoadingIndicator from '../components/LoadingIndicator'
 
 import styles from './ranklist.module.css'
-import constants from '../constants.json'
+import constants from '../constants'
 
 const selectOptions = {
   newQuestions: { name: 'Beküldött új kérdések' },

src/pages/script.jsx

@@ -4,7 +4,7 @@ import { useQuery } from 'react-query'
 import Header from '../components/header'
 import Link from 'next/link'
 
-import constants from '../constants.json'
+import constants from '../constants'
 import ExternalLinkIcon from '../components/externalLinkIcon'
 
 import styles from './script.module.css'
@@ -102,13 +102,9 @@ export default function Script() {
           <li>
             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">
-              GYIK
-            </Link>
+            <Link href="/faq">GYIK</Link>
             -be olvass bele, vagy{' '}
-            <Link href="/contact">
-              írj üzenetet mi nem működik
-            </Link>
+            <Link href="/contact">írj üzenetet mi nem működik</Link>
           </li>
         </ol>
         <b>Példa felugró ablakokra:</b>
@@ -161,5 +157,5 @@ export default function Script() {
         </ul>
       </div>
     </div>
-  );
+  )
 }

src/pages/thanks.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styles from './thanks.module.css'
-import constants from '../constants.json'
+import constants from '../constants'
 import Head from 'next/head'
 
 export default function Thanks() {

src/pages/userfiles.jsx

@@ -8,7 +8,7 @@ import UpDownVote from '../components/upDownVote'
 import Header from '../components/header'
 
 import styles from './userfiles.module.css'
-import constants from '../constants.json'
+import constants from '../constants'
 
 function vote(to, item) {
   return new Promise((resolve, reject) => {
@@ -382,7 +382,11 @@ export default function UserFiles({
           <div className={`${styles.tableContainer} ${styles.rows}`}>
             {currDir && (
               <div
-                style={{ height: 40, justifyContent: "center", display: "flex" }}
+                style={{
+                  height: 40,
+                  justifyContent: 'center',
+                  display: 'flex',
+                }}
                 onClick={() => {
                   goBack()
                 }}
@@ -482,13 +486,14 @@ export default function UserFiles({
                               onClick={(e) => {
                                 e.stopPropagation()
                               }}
-                              className={'userId'}>
+                              className={'userId'}
+                            >
                               {`#${user}`}
                             </Link>
                           ))}
                       </div>
                     </div>
-                  );
+                  )
                 })}
               </>
             ) : (
@@ -513,7 +518,7 @@ export default function UserFiles({
           <LoadingIndicator />
         )}
       </div>
-    );
+    )
   }
 
   return (
@@ -535,10 +540,8 @@ export default function UserFiles({
             vállalás nincs.
           </b>{' '}
           Ha valami nem idevalót látsz, azt a{' '}
-          <Link href="/contact">
-            Kapcsolat
-          </Link>{' '}
-          oldalon jelezd kérlek. Tudatos károkozásért ban jár.
+          <Link href="/contact">Kapcsolat</Link> oldalon jelezd kérlek. Tudatos
+          károkozásért ban jár.
         </div>
       )}
       <hr />
@@ -602,5 +605,5 @@ export default function UserFiles({
         </Modal>
       )}
     </div>
-  );
+  )
 }

src/pages/validation.jsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react'
 import Header from '../components/header'
 
 import styles from './validation.module.css'
-import constants from '../constants.json'
+import constants from '../constants'
 
 function fetchValidation() {
   return new Promise((resolve) => {
@@ -37,8 +37,7 @@ export default function Validation() {
       <center>
         <div className={styles.descrip}>
           Különböző okokból kellhet, hogy bizonyítsd hogy az oldalhoz van
-          hozzáférésed. Ebben az esetben ezzel a tokennel tudod: TODO: normális
-          duma
+          hozzáférésed. Ebben az esetben ezzel a tokennel tudod:
         </div>
         {token && <div className={styles.tokenContainer}>{token}</div>}
       </center>