pw request refactor

src/pages/pwRequest.js

@@ -7,41 +7,23 @@ import Sleep from '../components/sleep'
 import styles from './pwRequest.module.css'
 import constants from '../constants.json'
 
-export default function PwRequest() {
-  const [result, setResult] = useState([])
-  const [remaining, setRemaining] = useState('...')
-  const [requestedPWS, setRequestedPWS] = useState('...')
-  const [createDate, setCreateDate] = useState('...')
-
-  const [addPwPerDay, setAddPwPerDay] = useState('...')
-  const [daysAfterUserGetsPWs, setDaysAfterUserGetsPWs] = useState('...')
-  const [maxPWCount, setMaxPWCount] = useState('...')
-  const [addPWCount, setAddPWCount] = useState('...')
-  const [dayDiff, setDayDiff] = useState('...')
-
-  useEffect(() => {
-    console.info('Fetching avaible pws')
+function fetchAvailablePWS() {
+  return new Promise((resolve) => {
     fetch(`${constants.apiUrl}avaiblePWS`, {
       credentials: 'include',
     })
       .then((resp) => {
         return resp.json()
       })
-      .then((data) => {
-        setRemaining(data.avaiblePWS)
-        setCreateDate(data.userCreated)
-        setRequestedPWS(data.requestedPWS)
-
-        setAddPwPerDay(data.addPWPerDay)
-        setAddPWCount(data.addPWCount)
-        setDaysAfterUserGetsPWs(data.daysAfterUserGetsPWs)
-        setMaxPWCount(data.maxPWCount)
-        setDayDiff(data.dayDiff)
+      .then((res) => {
+        resolve(res)
       })
-  }, [])
+  })
+}
 
-  const handleSubmit = async () => {
-    const rawResponse = await fetch(constants.apiUrl + 'getpw', {
+function requestPw() {
+  return new Promise((resolve) => {
+    fetch(constants.apiUrl + 'getpw', {
       method: 'POST',
       credentials: 'include',
       headers: {
@@ -50,33 +32,47 @@ export default function PwRequest() {
       },
       body: JSON.stringify({}),
     })
-    try {
-      rawResponse
-        .json()
-        .then((resp) => {
-          if (resp.result === 'success') {
-            setResult([...result, resp.pw])
-            setRemaining(resp.remaining)
-            setRequestedPWS(resp.requestedPWS)
-          } else if (resp.result === 'nouser') {
-            setResult(['Nem vagy bejelentkezve!']) // this should never happpen
-          } else {
-            setResult([
-              ...result,
-              'Jelszó kérési lehetőségeid elfogytak, nézz vissza később',
-            ])
-            setRemaining(0)
-          }
+      .then((res) => {
+        return res.json()
       })
-        .catch((e) => {
-          setResult([...result, 'Szerver oldali hiba! :('])
-          console.error(e)
+      .then((res) => {
+        resolve(res)
       })
-    } catch (e) {
-      setResult([...result, 'Szerver oldali hiba! :('])
-      console.error(e)
-    }
-  }
+  })
+}
+
+export default function PwRequest({ globalData }) {
+  const userId = globalData.userId || '...'
+  const [result, setResult] = useState([])
+  const [data, setData] = useState({
+    userCreated: '...',
+    availablePWS: '...',
+    requestedPWS: '...',
+    maxPWCount: '...',
+    daysAfterUserGetsPWs: '...',
+    addPWPerDay: '...',
+    addPWCount: '...',
+    dayDiff: '...',
+    userCount: '...',
+  })
+
+  const {
+    userCreated,
+    availablePWS,
+    requestedPWS,
+    maxPWCount,
+    daysAfterUserGetsPWs,
+    addPWPerDay,
+    addPWCount,
+    dayDiff,
+    userCount,
+  } = data
+
+  useEffect(() => {
+    fetchAvailablePWS().then((data) => {
+      setData(data)
+    })
+  }, [])
 
   return (
     // TODO: a generált jelszó modal-on való megjelenítésének kivitelezése.
@@ -93,16 +89,9 @@ export default function PwRequest() {
       <div id="form">
         <div className={styles.text}>
           <p className={styles.descrip}>
-            Ezen az oldalon lehetőséged van lekérni jelszavakat, hogy új
-            felhasználókat hívhass meg az oldalra, vagy elfelejtett jelszavadat
-            pótold, amennyiben még be vagy jelentkezve a régivel. (Konkrét
-            elfelejtett jelszó funkció még nincsen)
-            <br />
-            Minden felhasználó saját és különböző jelszót kap. Inkább generálj
-            egyet és add oda másnak, mint hogy közösen használjatok egyet, mert
-            egyszerre, egy felhasználó csak egy helyen, egy eszközön lehet
-            belépve, mindenhol máshol automatikusan kijelentkeztetésre kerül. A
-            jelszavakról bővebben a{' '}
+            Minden felhasználó egyedi jelszót kap. Ne használjatok többen egy
+            jelszót, mert egy idő után kidob a rendszer. A jelszavakról bővebben
+            a jelszavakról bővebben a{' '}
             <Link href="/faq">
               <a>GYIK</a>
             </Link>
@@ -110,41 +99,70 @@ export default function PwRequest() {
           </p>
         </div>
         <div className={styles.text}>
-          Az új felhasználóknak
-          <span>{' ' + daysAfterUserGetsPWs + ' '}</span>
-          napot kell várniuk, míg jelszó generálási lehetőséget kapnak.
-          <br />
-          Egy felhasználó egyszerre, egymás után
+          Jelszó kérési lehetőségeit minden
+          <span>{' ' + addPWPerDay + '. '}</span>
+          nap a következő logika alapján növekednek:
+          <ul>
+            <li>
+              Ha a felhasználói fiókod fiatalabb mint
+              <span>{' ' + daysAfterUserGetsPWs + '. '}</span>
+              nap, akkor nem kapsz új lehetőséget.
+            </li>
+            <li>
+              Ha több mint
               <span>{' ' + maxPWCount + ' '}</span>
-          jelszót generálhat. Összességében korlátlan mennyiségben kérhetők le
-          jelszavak, de
-          <span>{' ' + maxPWCount + ' '}</span>db után el kell telnie{' '}
-          <span>{' ' + addPwPerDay + ' '}</span> napnak, hogy ismét jelszót
-          generálhass.
-          <br />
-          Ebből eddig
+              jelszó kérési lehetőséged van, akkor nem nő ezek száma.
+            </li>
+            <li>
+              Ha az előző kettő nem zárja ki, akkor jelszó kérési lehetőségeid
+              <span>{' ' + addPWCount + ' '}</span>
+              darabbal növekednek.
+            </li>
+          </ul>
+          Eddig
           <span>{' ' + requestedPWS + ' '}</span>
-          lehetőséget használtál fel, tehát még{' '}
-          <span>{remaining - requestedPWS}</span> db jelszót kérhetsz le,
-          mielőtt elérnéd a <span>{' ' + maxPWCount + ' '}</span> darabos
-          kvótát.<br />
-          <br /> A jelenleg bejelentkezett felhasználó létrehozva:
-          <span>{' ' + dayDiff}</span> napja,<span>{' ' + createDate}</span>
-          -kor.
-          <br />
+          jelszót kértél. Jelenleg
+          <span>{' ' + (availablePWS - requestedPWS) + ' '}</span>
+          db jelszót kérhetsz.
+          <br />A jelenleg bejelentkezett felhasználó (
+          <span>{' #' + userId + ' '}</span>)<span>{' ' + dayDiff + ' '}</span>
+          napos,{' '}
+          <span>
+            {userCreated ? new Date(userCreated).toLocaleString() : '...'}
+          </span>
+          -kor lett létrehozva.
           <br />
+          Az oldalnak eddig
+          <span>{' ' + userCount + ' '}</span>
+          felhasználója van
         </div>
         <center>
           <div className={`buttonContainer ${styles.pwButton}`}>
-            <div onClick={handleSubmit}>Jelszó kérése</div>
+            <div
+              onClick={() => {
+                requestPw().then((res) => {
+                  setData(res)
+                  if (res.success) {
+                    setResult([...result, res.pw])
+                  } else {
+                    setResult([
+                      ...result,
+                      'Jelszó kérési lehetőségeid elfogytak, nézz vissza később',
+                    ])
+                  }
+                })
+              }}
+            >
+              Jelszó kérése
+            </div>
           </div>
         </center>
         {result ? (
           <div className={styles.pwContainer}>
-            {result.map((r, i) => {
+            {result.map((res, i) => {
               return (
                 <div key={i} className={styles.pw}>
-                  {i + 1}.: {r}
+                  {i + 1}.: {res}
                 </div>
               )
             })}

src/pages/pwRequest.module.css

@@ -1,5 +1,4 @@
 .text {
-  text-align: center;
   font-size: 18px;
   color: white;
   padding: 10px;