Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat:multiplelollipop #20

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat:multiplelollipop #20

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2582e98
feat:multiplelollipop
krepox Feb 1, 2023
86864fe
Añadido support para varias peticiones (no funcional)
Kraslo Feb 6, 2023
5a78b4f
Añadido support para varias peticiones (no funcional)_2
Kraslo Feb 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 116 additions & 0 deletions components/Destinatario.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
127 changes: 35 additions & 92 deletions components/Form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions components/NavBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand All @@ -50,7 +50,7 @@ function NavBar() {
loading="eager"
/>
</Link>
*/}
*/
<Link href="/check">
<Image
height={imageClass === "san-valentin reduced" ? 174*0.1 : 174*0.2 }
Expand Down
Loading