Añadido support para varias peticiones (no funcional)

Eurielec · Feb 6, 2023 · 86864fe · 86864fe · Kraslo · Feb 6, 2023
1 parent 2582e98
commit 86864fe
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 50 deletions.
diff --git a/components/Destinatario.js b/components/Destinatario.js
@@ -5,8 +5,8 @@ function Destinatario(props) {
     //const [personType, setPersonType] = useState("student");
     //const [fullname, setFullname] = useState("");
     //const [instagram, setInstagram] = useState("");
-    const [group, setGroup] = useState("");
-    const [degree, setDegree] = useState("telecomunications");
+    //const [group, setGroup] = useState("");
+    //const [degree, setDegree] = useState("telecomunications");
     //const [findHint, setFindHint] = useState("");
 
     return (
@@ -19,7 +19,7 @@ function Destinatario(props) {
             name="person-type"
             id="type"
             className="selector"
-            onChange={e => props.setPersonType(e.target.value)}
+            onChange={e => props.personType = e.target.value}
             value={props.personType}
           >
               <option key={1} value="student">
@@ -41,9 +41,9 @@ function Destinatario(props) {
         <input
           className='text-input'
           type="text"
-          placeholder={props.personType === "student" ? "Santiago Muñoz-Chapuli Díaz-Mero" : "Grajal"}
+          placeholder={props.personType === "student" ? "Jaime Vicente Conde" : "Villagrá"}
           value={props.fullname}
-          onChange={e => props.setFullname(e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, ""))}
+          onChange={e => props.fullname = e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "")}
         />
         { props.personType !== "student" ? (
           <>
@@ -54,7 +54,7 @@ function Destinatario(props) {
           type="text"
           placeholder={"C-407.2"}
           value={props.findHint}
-          onChange={e => props.setFindHint(e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, ""))}
+          onChange={e => props.findHint = e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "")}
         />
           </>
         ) : null}
@@ -65,9 +65,9 @@ function Destinatario(props) {
         <input
           className="text-input"
           type="text"
-          placeholder="santi_m_21"
+          placeholder="jamesvicen"
           value={props.instagram}
-          onChange={e => props.setInstagram(e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, ""))}
+          onChange={e => props.instagram = e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "")}
         />
         <label>¿Qué estudia?</label>
         <p className="input-description">Nivel experto, ¿sabes qué estudia?</p>
@@ -76,8 +76,8 @@ function Destinatario(props) {
             name="degree"
             id="degree"
             className="selector"
-            onChange={e => props.setDegree(e.target.value)}
-            value={degree}
+            onChange={e => props.degree = e.target.value}
+            value={props.degree}
           >
 
               <option key={1} value="telecommunications">
@@ -101,9 +101,9 @@ function Destinatario(props) {
         <input
           className="text-input"
           type="text"
-          placeholder="43.2"
-          value={group}
-          onChange={e => props.setGroup(e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, ""))}
+          placeholder="35.2"
+          value={props.group}
+          onChange={e => props.group = e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "")}
         />
           </>
         ) : null

diff --git a/components/Form.js b/components/Form.js
@@ -2,30 +2,42 @@ import { useEffect, useState } from "react";
 import Destinatario from "./Destinatario";
 
 function Form(props) {
-  const [email, setEmail] = useState("");
-  const [personType, setPersonType] = useState("student");
-  const [fullname, setFullname] = useState("");
-  const [instagram, setInstagram] = useState("");
+  //const [email, setEmail] = useState("");
+  //const [personType, setPersonType] = useState("student");
+  //const [fullname, setFullname] = useState("");
+  //const [instagram, setInstagram] = useState("");
   //const [group, setGroup] = useState("");
   //const [degree, setDegree] = useState("telecomunications");
-  const [message, setMessage] = useState("");
-  const [findHint, setFindHint] = useState("");
+  //const [message, setMessage] = useState("");
+  //const [findHint, setFindHint] = useState("");
   const [disable, setDisable] = useState(true);
-
+  const [destinatarios, setDestinatarios] = useState([]);
+  const [destArgs, setDestArgs] = useState([])
   const [nPiruletas, setNumberPiruletas] = useState(1);
 
-  const destinatarios = [];
   for (let i = 0; i < nPiruletas; i++) {
+    setDestArgs([...destArgs], 
+      "",                  // email
+      "student",           // student
+      "",                  // fullname
+      "",                  // instagram
+      "",                  // group
+      "telecomunications", // degree
+      "",                  // message
+      ""                   // findHint
+      )
     destinatarios.push(
     <Destinatario 
-      personType={personType}
-      setPersonType={setPersonType}
-      fullname={fullname}
-      setFullname={setFullname}
-      instagram={instagram}
-      setInstagram={setInstagram}
-      findHint={findHint}
-      setFindHint={setFindHint}
+      personType={destArgs.slice(-1)[5]}
+      //setPersonType={destArgs.slice(-1)[1]}
+      fullname={destArgs(-1)[4]}
+      //setFullname={destArgs(-1)[3]}
+      instagram={destArgs(-1)[3]}
+      group={destArgs(-1)[2]}
+      degree={destArgs(-1)[1]}
+      //setInstagram={setInstagram}
+      findHint={destArgs.slice(-1)[0]}
+      //setFindHint={setFindHint}
       key={i}
       />
     );
@@ -48,27 +60,31 @@ function Form(props) {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    let data = {
-      email: email.trim(),
-      personType,
-      name: fullname.trim(),
-      account: instagram.trim().replace("@", ""),
-      group: group.trim(),
-      message,
-      degree,
-      findHint: findHint.trim()
-    };
-
-    // console.log("DATA", data);
-
-    let response = await fetch("/api/send", {
-      method: "POST",
-      headers: {'Content-Type': 'application/json'}, 
-      body: JSON.stringify(data)
-    });
+    for (let i=0; i++; i<nPiruletas) {
+
+      let data = {
+        email: destinatarios[i*6],
+        personType: destinatarios[i*6 + 1],
+        name: destinatarios[i*6 + 2],
+        account: destinatarios[i*6 + 3].replace("@", ""),
+        group: destinatarios[i*6 + 4].trim(),
+        message: destinatarios[i*6 + 5],
+        degree: destinatarios[i*6 + 6],
+        findHint: destinatarios[i*6 + 7].trim()
+      };
+
+      // console.log("DATA", data);
+      response = [];
+      let response = response.push(
+        await fetch("/api/send", {
+        method: "POST",
+        headers: {'Content-Type': 'application/json'}, 
+        body: JSON.stringify(data)
+      }));
+    }
 
     if (response.ok) {
-      props.setParentMessage(message);
+      props.setParentMessage([...props.message, message]);
       alert("Hemos recibido tu piruleta!");
     }
 
@@ -115,7 +131,7 @@ function Form(props) {
 
           <label>Mensaje</label>
           <p className="input-description">Es tu momento de explayarte. No te olvides de poner &quot;De:&quot; (puede ser anónimo) y &quot;Para:&quot;. Puedes poner lo que quieras. </p>
-          <textarea className="text-box" name="message" value={message} cols="40" rows="5" placeholder="Mucho texto." onChange={e => setMessage(e.target.value)}></textarea>
+          <textarea className="text-box" name="message" value={message} cols="40" rows="5" placeholder="Si te curras este texto, la enamorarás." onChange={e => setMessage(e.target.value)}></textarea>
 
           <h2 className="payment-title">Pago</h2>
           <p className="payment-info">Deberás pagar el número de piruletas que hayas enviado.

diff --git a/pages/send.js b/pages/send.js
@@ -4,7 +4,7 @@ import { Form, Preview } from "../components";
 
 function Send() {
 
-    const [message, setMessage] = useState("");
+    const [message, setMessage] = useState([]);
   return <>
 
     {