feat:multiplelollipop

Eurielec · Feb 1, 2023 · 2582e98 · 2582e98
1 parent a61edc1
commit 2582e98
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 623 deletions.
diff --git a/components/Destinatario.js b/components/Destinatario.js
@@ -0,0 +1,116 @@
+import { useState, useEffect } from "react";
+
+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 [findHint, setFindHint] = useState("");
+
+    return (
+        <div className="destinatario-container">
+        <h2>Sobre el destinatario</h2>
+        <label>Estudiante, profesor o PAS?</label>
+        <p className="input-description">Mandas la piruleta a un estudiante, un profesor o personal no docente (pecera, secretaría, Quique...)?</p>
+        <select
+            required
+            name="person-type"
+            id="type"
+            className="selector"
+            onChange={e => props.setPersonType(e.target.value)}
+            value={props.personType}
+          >
+              <option key={1} value="student">
+                Estudiante
+              </option>
+              <option key={2} value="teacher">
+                Profesor
+              </option>
+              <option key={3} value="pas">
+                PAS
+              </option>
+          </select>
+        <label>Nombre completo</label>
+        <p className="input-description">{
+        props.personType === "student"
+        ? 'Si sabes el nombre completo, genial. Eliminamos ñ y tildes 😃.'
+        : 'Nombre por el que se le conozca 🧐.'
+        }</p>
+        <input
+          className='text-input'
+          type="text"
+          placeholder={props.personType === "student" ? "Santiago Muñoz-Chapuli Díaz-Mero" : "Grajal"}
+          value={props.fullname}
+          onChange={e => props.setFullname(e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, ""))}
+        />
+        { props.personType !== "student" ? (
+          <>
+          <label>¿Dónde buscamos?</label>
+        <p className="input-description">Despacho o sitio de la universidad donde podamos encontrarle fácilmente.</p>
+        <input
+          className="text-input"
+          type="text"
+          placeholder={"C-407.2"}
+          value={props.findHint}
+          onChange={e => props.setFindHint(e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, ""))}
+        />
+          </>
+        ) : null}
+        { props.personType === "student" ? (
+          <>
+          <label>Instagram o Twitter</label>
+        <p className="input-description">Si no te sabes el nombre, puedes darnos el Instagram o el Twitter. Todo suma. Trust the plan 😎. </p>
+        <input
+          className="text-input"
+          type="text"
+          placeholder="santi_m_21"
+          value={props.instagram}
+          onChange={e => props.setInstagram(e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, ""))}
+        />
+        <label>¿Qué estudia?</label>
+        <p className="input-description">Nivel experto, ¿sabes qué estudia?</p>
+        <select
+            required
+            name="degree"
+            id="degree"
+            className="selector"
+            onChange={e => props.setDegree(e.target.value)}
+            value={degree}
+          >
+
+              <option key={1} value="telecommunications">
+                Telecomunicación
+              </option>
+              <option key={2} value="biomedicine">
+                Biomédica
+              </option>
+              <option key={3} value="data">
+                Datos
+              </option>
+              <option key={4} value="muit">
+                MUIT
+              </option>
+              <option key={5} value="other">
+                Otro
+              </option>
+          </select>
+        <label>Grupo/s</label>
+        <p className="input-description">Sería espectacular si sabes a qué grupo/s va. </p>
+        <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, ""))}
+        />
+          </>
+        ) : null
+        }
+        </div>
+
+    );
+}
+
+export default Destinatario;
diff --git a/components/Form.js b/components/Form.js
@@ -1,16 +1,36 @@
 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 [group, setGroup] = useState("");
-  const [degree, setDegree] = useState("telecomunications");
+  //const [group, setGroup] = useState("");
+  //const [degree, setDegree] = useState("telecomunications");
   const [message, setMessage] = useState("");
   const [findHint, setFindHint] = useState("");
   const [disable, setDisable] = useState(true);
 
+  const [nPiruletas, setNumberPiruletas] = useState(1);
+
+  const destinatarios = [];
+  for (let i = 0; i < nPiruletas; i++) {
+    destinatarios.push(
+    <Destinatario 
+      personType={personType}
+      setPersonType={setPersonType}
+      fullname={fullname}
+      setFullname={setFullname}
+      instagram={instagram}
+      setInstagram={setInstagram}
+      findHint={findHint}
+      setFindHint={setFindHint}
+      key={i}
+      />
+    );
+  }
+
   useEffect(() => {
 
     const isInvalid = () => {
@@ -73,103 +93,26 @@ function Form(props) {
             onChange={e => setEmail(e.target.value.toLowerCase())}
             pattern=".*@(?:alumnos.upm.es|upm.es|.*.upm.es)$"
           />
-          <h2>Sobre el destinatario</h2>
-          <label>Estudiante, profesor o PAS?</label>
-          <p className="input-description">Mandas la piruleta a un estudiante, un profesor o personal no docente (pecera, secretaría, Quique...)?</p>
+          <label>¿Cuántas piruletas quieres mandar?</label>
+          <p className="input-description">¡Ahora puedes enviar múltiples piruletas de una!</p>
           <select
               required
-              name="person-type"
+              name="piruleta-number"
               id="type"
               className="selector"
-              onChange={e => setPersonType(e.target.value)}
-              value={personType}
-            >
-                <option key={1} value="student">
-                  Estudiante
-                </option>
-                <option key={2} value="teacher">
-                  Profesor
-                </option>
-                <option key={3} value="pas">
-                  PAS
-                </option>
-            </select>
-          <label>Nombre completo</label>
-          <p className="input-description">{
-          personType === "student"
-          ? 'Si sabes el nombre completo, genial. Eliminamos ñ y tildes 😃.'
-          : 'Nombre por el que se le conozca 🧐.'
-          }</p>
-          <input
-            className='text-input'
-            type="text"
-            placeholder={personType === "student" ? "Santiago Muñoz-Chapuli Díaz-Mero" : "Grajal"}
-            value={fullname}
-            onChange={e => setFullname(e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, ""))}
-          />
-          { personType !== "student" ? (
-            <>
-            <label>¿Dónde buscamos?</label>
-          <p className="input-description">Despacho o sitio de la universidad donde podamos encontrarle fácilmente.</p>
-          <input
-            className="text-input"
-            type="text"
-            placeholder={"C-407.2"}
-            value={findHint}
-            onChange={e => setFindHint(e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, ""))}
-          />
-            </>
-          ) : null}
-          { personType === "student" ? (
-            <>
-            <label>Instagram o Twitter</label>
-          <p className="input-description">Si no te sabes el nombre, puedes darnos el Instagram o el Twitter. Todo suma. Trust the plan 😎. </p>
-          <input
-            className="text-input"
-            type="text"
-            placeholder="santi_m_21"
-            value={instagram}
-            onChange={e => setInstagram(e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, ""))}
-          />
-          <label>¿Qué estudia?</label>
-          <p className="input-description">Nivel experto, ¿sabes qué estudia?</p>
-          <select
-              required
-              name="degree"
-              id="degree"
-              className="selector"
-              onChange={e => setDegree(e.target.value)}
-              value={degree}
+              onChange={e => setNumberPiruletas(e.target.value)}
+              value={nPiruletas}
             >
-
-                <option key={1} value="telecommunications">
-                  Telecomunicación
-                </option>
-                <option key={2} value="biomedicine">
-                  Biomédica
-                </option>
-                <option key={3} value="data">
-                  Datos
-                </option>
-                <option key={4} value="muit">
-                  MUIT
-                </option>
-                <option key={5} value="other">
-                  Otro
+              {[...Array(5).keys()].map((index) => {
+                return <option key={index + 1} value={index + 1}>
+                  {index + 1}
                 </option>
+              })}
             </select>
-          <label>Grupo/s</label>
-          <p className="input-description">Sería espectacular si sabes a qué grupo/s va. </p>
-          <input
-            className="text-input"
-            type="text"
-            placeholder="43.2"
-            value={group}
-            onChange={e => setGroup(e.target.value.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, ""))}
-          />
-            </>
-          ) : null
-          }
+          {/*Destinatario*/}
+
+          return <tbody>{destinatarios}</tbody>
+
           <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>

diff --git a/components/NavBar.js b/components/NavBar.js
@@ -39,7 +39,7 @@ function NavBar() {
         />
       </Link>
       <div className="right-menu">
-     {/* <Link href="/send">
+     /* <Link href="/send">
       <Image
           height={imageClass === "san-valentin reduced" ? 172*0.1 : 172*0.2 }
           width={imageClass === "san-valentin reduced" ? 616*0.1 : 616*0.2 }
@@ -50,7 +50,7 @@ function NavBar() {
           loading="eager"
         />
       </Link>
-  */}
+  */
       <Link href="/check">
       <Image
           height={imageClass === "san-valentin reduced" ? 174*0.1 : 174*0.2 }