From 0ea9ecb5a370e43867dab9a6ed9f5b80cee00b14 Mon Sep 17 00:00:00 2001
From: mrfry <mrfry@airmail.cc>
Date: Tue, 17 Nov 2020 12:48:05 +0100
Subject: [PATCH] Home page and pw request page refactor

---
 src/data/links.json        |   6 +-
 src/pages/addQuestion.js   | 161 +++++++++++++++++--------------------
 src/pages/feedback.js      | 158 ++++++++++++++----------------------
 src/pages/index.js         |  39 ++++++---
 src/pages/index.module.css |  38 ++++++---
 src/pages/pwRequest.js     |   1 -
 6 files changed, 191 insertions(+), 212 deletions(-)

diff --git a/src/data/links.json b/src/data/links.json
index a0e576b..2f5c064 100644
--- a/src/data/links.json
+++ b/src/data/links.json
@@ -1,14 +1,14 @@
 {
   "install": {
-    "href": "install",
+    "href": "/install",
     "text": "Install"
   },
   "allqr": {
-    "href": "allqr.txt",
+    "href": "/allqr.txt",
     "text": "Összes kérdés TXT"
   },
   "data": {
-    "href": "data.json",
+    "href": "/data.json",
     "text": "Összes kérdés JSON"
   }
 }
diff --git a/src/pages/addQuestion.js b/src/pages/addQuestion.js
index e657547..4ebdbe1 100644
--- a/src/pages/addQuestion.js
+++ b/src/pages/addQuestion.js
@@ -10,11 +10,11 @@ const getDefaultQuestion = () => {
   return {
     Q: '',
     A: '',
-    data: { type: 'simple' }
+    data: { type: 'simple' },
   }
 }
 
-export default function AddQuestion (props) {
+export default function AddQuestion(props) {
   const [form, setForm] = useState({ quiz: [getDefaultQuestion()] })
   const [subjects, setSubjects] = useState(undefined)
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -23,7 +23,7 @@ export default function AddQuestion (props) {
   useEffect(() => {
     console.info('Fetching subject names')
     fetch(`${constants.apiUrl}dataCount?detailed=true`, {
-      credentials: 'include'
+      credentials: 'include',
     })
       .then((resp) => {
         return resp.json()
@@ -43,7 +43,7 @@ export default function AddQuestion (props) {
 
     setForm({
       ...form,
-      quiz: quiz
+      quiz: quiz,
     })
   }
 
@@ -54,40 +54,37 @@ export default function AddQuestion (props) {
 
     return (
       <div className={styles.questionContainer}>
-        <div
-          className={styles.inputContainer}
-        >
+        <div className={styles.inputContainer}>
           <input
-            placeholder='Kérdés...'
-            type='text'
-            onChange={e => onChange({ ...currData, Q: e.target.value }, index)}
+            placeholder="Kérdés..."
+            type="text"
+            onChange={(e) =>
+              onChange({ ...currData, Q: e.target.value }, index)
+            }
             value={Q || ''}
             className={styles.questionInput}
           />
         </div>
-        <div
-          className={styles.inputContainer}
-        >
+        <div className={styles.inputContainer}>
           <input
-            placeholder='Válasz...'
-            type='text'
-            onChange={e => onChange({ ...currData, A: e.target.value }, index)}
+            placeholder="Válasz..."
+            type="text"
+            onChange={(e) =>
+              onChange({ ...currData, A: e.target.value }, index)
+            }
             value={A || ''}
             className={styles.questionInput}
           />
         </div>
-        <div
-          className={styles.inputContainer}
-        >
+        <div className={styles.inputContainer}>
           <input
-            type='text'
-            onChange={e => {
+            type="text"
+            onChange={(e) => {
               // TODO: handle JSON
               // try {
               //   let newData = JSON.parse(e.target.value)
               //   onChange({ ...currData, data: newData }, index)
               // } catch (e) {
-
               // }
             }}
             value={JSON.stringify(data) || ''}
@@ -112,7 +109,7 @@ export default function AddQuestion (props) {
 
     setForm({
       ...form,
-      quiz: quiz
+      quiz: quiz,
     })
   }
 
@@ -143,17 +140,18 @@ export default function AddQuestion (props) {
       method: 'POST',
       credentials: 'include',
       headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({
         ...form,
         id: cid,
         version: 'WEBSITE',
-        scriptVersion: version
-      })
+        scriptVersion: version,
+      }),
     })
-    rawResponse.json()
+    rawResponse
+      .json()
       .then((resp) => {
         if (resp.success) {
           alert('Sikeres beküldés, ' + resp.newQuestions + ' új kérdés') // eslint-disable-line
@@ -179,12 +177,12 @@ export default function AddQuestion (props) {
             <div key={i}>
               {renderQuestionInput({
                 index: i,
-                onChange
+                onChange,
               })}
             </div>
           )
         })}
-        <div className={styles.buttonContainer} >
+        <div className={styles.buttonContainer}>
           <button
             className={styles.button}
             onClick={() => {
@@ -192,32 +190,26 @@ export default function AddQuestion (props) {
               quiz.push(getDefaultQuestion())
               setForm({
                 ...form,
-                quiz: quiz
+                quiz: quiz,
               })
             }}
           >
             Új kérdés hozzáadása
           </button>
         </div>
-        {isSubmitting
-          ? <div className={styles.issubmitting}>
-              Kérdések feldolgozása folyamatban, ha sokat küldtél, akkor több perc is lehet
+        {isSubmitting ? (
+          <div className={styles.issubmitting}>
+            Kérdések feldolgozása folyamatban, ha sokat küldtél, akkor több perc
+            is lehet
           </div>
-          : <div className={styles.buttonContainer} >
-            <button
-              className={styles.button}
-              onClick={handleSubmit}
-            >
-            Kérdések beküldése
+        ) : (
+          <div className={styles.buttonContainer}>
+            <button className={styles.button} onClick={handleSubmit}>
+              Kérdések beküldése
             </button>
           </div>
-        }
-        <input
-          type='text'
-          id='cid'
-          name='cid'
-          hidden
-        />
+        )}
+        <input type="text" id="cid" name="cid" hidden />
       </div>
     )
   }
@@ -226,43 +218,47 @@ export default function AddQuestion (props) {
     // TODO: handle if new subject
     return (
       <div className={styles.subjSelectorContainer}>
-        {isNewSubj
-          ? <input
-            placeholder='Új tárgy neve...'
-            type='text'
+        {isNewSubj ? (
+          <input
+            placeholder="Új tárgy neve..."
+            type="text"
             className={styles.questionInput}
             onChange={(e) => {
               setForm({
                 ...form,
-                subj: e.target.value
+                subj: e.target.value,
               })
-            }} />
-          : <select
+            }}
+          />
+        ) : (
+          <select
             className={styles.subjSelector}
             onChange={(e) => {
               setForm({
                 ...form,
-                subj: subjects[e.target.value]
+                subj: subjects[e.target.value],
               })
-            }}>
-            <option key={-1} value={-1}>Válassz egy tárgyat...</option>
+            }}
+          >
+            <option key={-1} value={-1}>
+              Válassz egy tárgyat...
+            </option>
             {props.subjects.map((subjName, i) => {
               return (
-                <option key={i} value={i}>{subjName}</option>
+                <option key={i} value={i}>
+                  {subjName}
+                </option>
               )
             })}
-
           </select>
-
-        }
+        )}
         <span
           className={styles.newSubj}
-          onClick={() => { setIsNewSubj(!isNewSubj) }}
+          onClick={() => {
+            setIsNewSubj(!isNewSubj)
+          }}
         >
-          {isNewSubj
-            ? 'Létező tárgy ...'
-            : 'Új tárgy ...'
-          }
+          {isNewSubj ? 'Létező tárgy ...' : 'Új tárgy ...'}
         </span>
       </div>
     )
@@ -270,31 +266,28 @@ export default function AddQuestion (props) {
 
   const renderUsage = () => {
     return (
-      <ul className={styles.usage} >
+      <ul className={styles.usage}>
+        <li>Ezen az oldalon kérdéseket tudsz beküldeni manuálisan.</li>
+        <li>Ezek a kérdések ellenőrizve lesznek hogy megvannak-e már</li>
         <li>
-          Ezen az oldalon kérdéseket tudsz beküldeni manuálisan.
+          Ha több válasz van, akkor ', '-vel válaszd el őket ( "válasz1,
+          válasz2, válasz3" )
         </li>
         <li>
-          Ezek a kérdések ellenőrizve lesznek hogy megvannak-e már
+          Kérdéseknél az utolsó sor (ahol a JSON cucc van) jelenleg nem
+          módosítható, csak olyan kérdéseket lehet beküldeni, amik sima
+          kérdés-válaszok, szóval pl nincs benne kép. Ez később bővül majd
         </li>
         <li>
-          Ha több válasz van, akkor ', '-vel válaszd el őket ( "válasz1, válasz2, válasz3" )
+          Ha sok új kérdést küldsze be, akkor akár több percig is eltarthat a
+          dolog. Akárhány kérdést be lehet egyszerre küldeni, de max 10-15 az
+          ajánlott
         </li>
         <li>
-          Kérdéseknél az utolsó sor (ahol a JSON cucc van) jelenleg nem módosítható, csak olyan
-          kérdéseket lehet beküldeni, amik sima kérdés-válaszok, szóval pl nincs benne kép. Ez
-          később bővül majd
-        </li>
-        <li>
-          Ha sok új kérdést küldsze be, akkor akár több percig is eltarthat a dolog. Akárhány
-          kérdést be lehet egyszerre küldeni, de max 10-15 az ajánlott
-        </li>
-        <li>
-          Bármilyen szöveget beküldhettek, de ne tegyétek, más felhasználóknak és magatoknak lesz
-          rosz, ty!
+          Bármilyen szöveget beküldhettek, de ne tegyétek, más felhasználóknak
+          és magatoknak lesz rosz, ty!
         </li>
       </ul>
-
     )
   }
 
@@ -308,8 +301,6 @@ export default function AddQuestion (props) {
       </div>
     )
   } else {
-    return (
-      <LoadingIndicator />
-    )
+    return <LoadingIndicator />
   }
 }
diff --git a/src/pages/feedback.js b/src/pages/feedback.js
index ca474ba..f806ceb 100644
--- a/src/pages/feedback.js
+++ b/src/pages/feedback.js
@@ -10,10 +10,10 @@ const results = {
   success: 'SUCCESS',
   error: 'ERROR',
   notSent: 'NOTSENT',
-  invalid: 'INVALID'
+  invalid: 'INVALID',
 }
 
-export default function Feedback (props) {
+export default function Feedback(props) {
   const [form, setForm] = useState({})
   const [file, setFile] = useState(undefined)
   const [result, setResult] = useState(results.notSent)
@@ -22,18 +22,16 @@ export default function Feedback (props) {
   const onChange = (e) => {
     setForm({
       ...form,
-      [e.target.name]: e.target.value
+      [e.target.name]: e.target.value,
     })
   }
 
   const renderTextInputArea = (params) => {
     return (
       <div className={styles.inputArea}>
-        <div className={styles.textTitle}>
-          {params.text}
-        </div>
+        <div className={styles.textTitle}>{params.text}</div>
         <textarea
-          onChange={e => params.onChange(e)}
+          onChange={(e) => params.onChange(e)}
           value={form[params.name] || ''}
           className={styles.feedback}
           name={params.name}
@@ -45,7 +43,7 @@ export default function Feedback (props) {
   const onFileChangeHandler = (e) => {
     setForm({
       ...form,
-      file: e.target.files[0].name
+      file: e.target.files[0].name,
     })
     setFile(e.target.files[0])
   }
@@ -53,13 +51,11 @@ export default function Feedback (props) {
   const renderFileUploader = () => {
     return (
       <div className={styles.inputArea}>
-        <div className={styles.textTitle}>
-          Fájl csatolása
-        </div>
+        <div className={styles.textTitle}>Fájl csatolása</div>
         <input
           className={styles.fileInput}
-          type='file'
-          name='file'
+          type="file"
+          name="file"
           onChange={onFileChangeHandler}
         />
       </div>
@@ -83,16 +79,17 @@ export default function Feedback (props) {
       method: 'POST',
       credentials: 'include',
       headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({
         ...form,
         cid: cid,
-        version: version
-      })
+        version: version,
+      }),
     })
-    rawResponse.json()
+    rawResponse
+      .json()
       .then((resp) => {
         if (resp.success) {
           setResult(results.success)
@@ -110,15 +107,19 @@ export default function Feedback (props) {
       const formData = new FormData() // eslint-disable-line
       formData.append('file', file)
 
-      const rawFileResponse = await fetch(constants.apiUrl + 'postfeedbackfile', {
-        method: 'POST',
-        credentials: 'include',
-        headers: {
-          'Accept': 'application/json'
-        },
-        body: formData
-      })
-      rawFileResponse.json()
+      const rawFileResponse = await fetch(
+        constants.apiUrl + 'postfeedbackfile',
+        {
+          method: 'POST',
+          credentials: 'include',
+          headers: {
+            Accept: 'application/json',
+          },
+          body: formData,
+        }
+      )
+      rawFileResponse
+        .json()
         .then((resp) => {
           if (resp.success) {
             setFileResult(results.success)
@@ -136,23 +137,11 @@ export default function Feedback (props) {
 
   const renderResult = () => {
     if (results === result.success) {
-      return (
-        <div>
-          sucess
-        </div>
-      )
+      return <div>sucess</div>
     } else if (results === result.error) {
-      return (
-        <div>
-          error
-        </div>
-      )
+      return <div>error</div>
     } else if (results === result.invalid) {
-      return (
-        <div>
-          invalid
-        </div>
-      )
+      return <div>invalid</div>
     } else {
       return null
     }
@@ -161,57 +150,52 @@ export default function Feedback (props) {
   // action={constants.apiUrl + 'badtestsender'} encType='multipart/form-data' method='post'
   const renderForm = (props) => {
     return (
-      <div className={styles.feedback} >
-        {props.noDesc
-          ? <div className={styles.errorMsg}>
-                Mező kitöltése kötelező!
-          </div>
-          : null}
+      <div className={styles.feedback}>
+        {props.noDesc ? (
+          <div className={styles.errorMsg}>Mező kitöltése kötelező!</div>
+        ) : null}
         {renderTextInputArea({
           text: 'Rövid leírás',
           name: 'description',
-          onChange: onChange
+          onChange: onChange,
         })}
         <div className={styles.desc}>
-          Főoldalon lesz rá válasz (ha kell rá válasz)
+          Főoldalon lesz rá válasz MOTD-ben, amit csak te látsz (ha kell rá
+          válasz)
         </div>
-        <div className={styles.buttonContainer} >
-          <button
-            className={styles.button}
-            onClick={handleSubmit}
-          >
-          Küldés
+        <div className={styles.buttonContainer}>
+          <button className={styles.button} onClick={handleSubmit}>
+            Küldés
           </button>
         </div>
         <hr />
         <div className={styles.desc}>
-          Az alábbi mezők kitöltése opcionális, de hiba leírásnál nagyon sokat tud segíteni! <b>
-          Legnagyobb segítség ha azt a kérdés oldalt és a hozzátartozó eredmények oldalt ahol nem
-          helyesen működnek a dolgok Ctrl+S -el lemented, és egy zip-ben feltöltöd a .html
-          fájlt!</b> Így egyszerűen reprodukálni tudom a hibát. TY!
+          Az alábbi mezők kitöltése opcionális, de hiba leírásnál nagyon sokat
+          tud segíteni!{' '}
+          <b>
+            Legnagyobb segítség ha azt a kérdés oldalt és a hozzátartozó
+            eredmények oldalt ahol nem helyesen működnek a dolgok Ctrl+S -el
+            lemented, és egy zip-ben feltöltöd a .html fájlt!
+          </b>{' '}
+          Így egyszerűen reprodukálni tudom a hibát. TY!
         </div>
         {renderTextInputArea({
           text: 'Lépések amikkel előáll a hiba',
           name: 'steps',
-          onChange: onChange
+          onChange: onChange,
         })}
         {renderTextInputArea({
           text: 'Elvárt működés',
           name: 'expected',
-          onChange: onChange
+          onChange: onChange,
         })}
         {renderTextInputArea({
           text: 'Ami történik helyette',
           name: 'current',
-          onChange: onChange
+          onChange: onChange,
         })}
         {renderFileUploader()}
-        <input
-          type='text'
-          id='cid'
-          name='cid'
-          hidden
-        />
+        <input type="text" id="cid" name="cid" hidden />
         {renderResult()}
       </div>
     )
@@ -220,32 +204,18 @@ export default function Feedback (props) {
   const renderStuff = () => {
     if (result === results.notSent && fileResult === results.notSent) {
       console.log('both not sent')
-      return (
-        <div className={styles.textTitle}>
-          {renderForm({})}
-        </div>
-      )
+      return <div className={styles.textTitle}>{renderForm({})}</div>
     } else if (result === results.invalid) {
       console.log('result is invalid')
       return (
-        <div className={styles.textTitle}>
-          {renderForm({ noDesc: true })}
-        </div>
+        <div className={styles.textTitle}>{renderForm({ noDesc: true })}</div>
       )
     } else if (result === results.success && !file) {
       console.log('text sucess, no file')
-      return (
-        <div className={styles.textTitle}>
-          Visszajelzés elküldve c:
-        </div>
-      )
+      return <div className={styles.textTitle}>Visszajelzés elküldve c:</div>
     } else if (result === results.error && fileResult === results.success) {
       console.log('file sucess only')
-      return (
-        <div className={styles.textTitle}>
-          Hiba küldés közben :c
-        </div>
-      )
+      return <div className={styles.textTitle}>Hiba küldés közben :c</div>
     } else if (result === results.success && fileResult === results.error) {
       console.log('text sucess only')
       return (
@@ -255,23 +225,15 @@ export default function Feedback (props) {
       )
     } else if (result === results.success && fileResult === results.success) {
       console.log('both sucess')
-      return (
-        <div className={styles.textTitle}>
-          Visszajelzés elküldve c:
-        </div>
-      )
+      return <div className={styles.textTitle}>Visszajelzés elküldve c:</div>
     } else {
-      return (
-        <div className={styles.textTitle}>
-          Bit of a fuckup here
-        </div>
-      )
+      return <div className={styles.textTitle}>Bit of a fuckup here</div>
     }
   }
 
   return (
     <div>
-      <Button text='IRC chat' href='/irc' />
+      <Button text="IRC chat" href="/irc" />
       <p />
       <hr />
       <p />
diff --git a/src/pages/index.js b/src/pages/index.js
index 7a5ca97..6228cf3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -11,7 +11,7 @@ import styles from './index.module.css'
 import links from '../data/links.json'
 import constants from '../constants.json'
 
-export default function Index(props) {
+export default function Index({ router }) {
   const [motd, setMotd] = useState('loading...')
   const [userSpecificMotd, setUserSpecificMotd] = useState('loading...')
   const [news, setNews] = useState(null)
@@ -100,7 +100,14 @@ export default function Index(props) {
         })
         .reverse()
 
-      return <div className={styles.questionscontainer}>{questions}</div>
+      return (
+        <div>
+          <div className={styles.title}>News</div>
+          <hr />
+          <hr />
+          <div className={styles.questionscontainer}>{questions}</div>
+        </div>
+      )
     } else {
       return <LoadingIndicator />
     }
@@ -109,7 +116,9 @@ export default function Index(props) {
   const renderMotd = () => {
     return (
       <div>
-        <div className={styles.motdHeader}>MOTD:</div>
+        <div className={styles.title}>MOTD</div>
+        <hr />
+        <hr />
         <div
           className={styles.motd}
           dangerouslySetInnerHTML={{ __html: motd }}
@@ -134,20 +143,26 @@ export default function Index(props) {
 
   return (
     <div>
-      {renderMotd()}
-      {userSpecificMotd && renderUserSpecificMotd()}
-      <center>
+      <div className={styles.buttonContainer}>
         {Object.keys(links).map((key) => {
           let link = links[key]
           return (
-            <span className="link" key={key}>
-              <a href={link.href}>
-                <div className={styles.button}>{link.text}</div>
-              </a>
-            </span>
+            <div
+              className={styles.button}
+              key={key}
+              onClick={() => {
+                router.push(link.href)
+              }}
+            >
+              {link.text}
+            </div>
           )
         })}
-      </center>
+      </div>
+      <hr />
+      {renderMotd()}
+      {userSpecificMotd && renderUserSpecificMotd()}
+      <hr />
       <Sleep />
       {renderNews()}
     </div>
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 855c8a0..c8902cb 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,18 +1,24 @@
-.button {
-  background-color: #9999ff;
-  border: none;
-  color: white;
-  padding: 15px 32px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 5px;
+.buttonContainer {
+  display: flex;
 }
 
-.motdHeader {
+.button {
+  flex: 1;
+  color: white;
+  background-color: #303030;
+  margin: 2px;
+  padding: 15px 32px;
   text-align: center;
-  font-size: 24px;
+  font-size: 16px;
+  cursor: pointer;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.button:hover {
+  background-color: #555;
 }
 
 .motd {
@@ -35,6 +41,12 @@
   color: #fff;
 }
 
+.title {
+  color: #9999ff;
+  font-size: 30px;
+  text-align: center;
+}
+
 .newsTitle {
   font-size: 28px;
   color: var(--text-color);
@@ -42,7 +54,7 @@
 }
 
 .question {
-  font-weight: "bold";
+  font-weight: 'bold';
   font-size: 16px;
   color: #fff;
   margin: 0px 5px;
diff --git a/src/pages/pwRequest.js b/src/pages/pwRequest.js
index f833615..0f4eb28 100644
--- a/src/pages/pwRequest.js
+++ b/src/pages/pwRequest.js
@@ -25,7 +25,6 @@ export default function PwRequest(props) {
         return resp.json()
       })
       .then((data) => {
-        console.log(data)
         setRemaining(data.avaiblePWS)
         setCreateDate(data.userCreated)
         setRequestedPWS(data.requestedPWS)