Home page and pw request page refactor

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 />
   }
 }