From e06af6307bf6d7904153b4c8aa85636668a88b55 Mon Sep 17 00:00:00 2001
From: Gabriel AMR <gabrieladrianmezar@gmail.com>
Date: Fri, 15 Nov 2024 17:51:14 -0300
Subject: [PATCH] feat: add role and linkedin to register form

Added role and linkedin inputs handling to RegistrationForm component. Added a Participant interface which takes the new role and linkedin fields into account.
---
 src/App.tsx                          | 15 +++++++++---
 src/components/registration-form.tsx | 34 +++++++++++++++++++++++++---
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0f65bec..5807236 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,13 +16,20 @@ interface Event {
   agenda: { time: string; topic: string }[];
 }
 
+interface Participant {
+  name: string;
+  email: string;
+  role: string;
+  linkedin: string;
+}
+
 function App() {
-  const [participant, setParticipant] = useState<{ name: string; email: string; } | null>(null);
+  const [participant, setParticipant] = useState<Participant | null>(null);
   const [event, setEvent] = useState<Event | null>(null);
   const [loading, setLoading] = useState(false); 
   const [fetchingEvent, setFetchingEvent] = useState(true); 
 
-  const handleRegister = async (name: string, email: string) => {
+  const handleRegister = async (name: string, email: string, role: string, linkedin: string) => {
     if (!event) return;
 
     setLoading(true);
@@ -41,6 +48,8 @@ function App() {
         await addDoc(participantsRef, {
           name,
           email,
+          role,
+          linkedin,
           eventId: event.id,
           timestamp: Timestamp.now(),
         });
@@ -48,7 +57,7 @@ function App() {
         console.log("El usuario ya está registrado para este evento.");
       }
 
-      setParticipant({ name, email });
+      setParticipant({ name, email, role, linkedin });
     } catch (error) {
       console.error("Error al registrar al participante:", error);
     }
diff --git a/src/components/registration-form.tsx b/src/components/registration-form.tsx
index 8f4dcc8..6a337eb 100644
--- a/src/components/registration-form.tsx
+++ b/src/components/registration-form.tsx
@@ -2,17 +2,19 @@ import React, { useState } from 'react';
 
 
 interface RegistrationFormProps {
-  onRegister: (name: string, email: string) => void;
+  onRegister: (name: string, email: string, role: string, linkedin: string) => void;
 }
 
 function RegistrationForm({ onRegister }: RegistrationFormProps) {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
+  const [role, setRole] = useState('');
+  const [linkedin, setLinkedin] = useState('');
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (name && email) {
-      onRegister(name, email);
+    if (name && email && role && linkedin) {
+      onRegister(name, email, role, linkedin);
     }
   };
 
@@ -46,6 +48,32 @@ function RegistrationForm({ onRegister }: RegistrationFormProps) {
             required
           />
         </div>
+        <div>
+          <label htmlFor="role" className="block text-sm font-medium mb-2">
+            Role
+          </label>
+          <input
+            type="text"
+            id="role"
+            value={role}
+            onChange={(e) => setRole(e.target.value)}
+            className="w-full px-4 py-2 rounded-lg bg-zinc-800 border border-zinc-700 focus:outline-none focus:border-purple-500"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="linkedin" className="block text-sm font-medium mb-2">
+            Linkedin
+          </label>
+          <input
+            type="text"
+            id="linkedin"
+            value={linkedin}
+            onChange={(e) => setLinkedin(e.target.value)}
+            className="w-full px-4 py-2 rounded-lg bg-zinc-800 border border-zinc-700 focus:outline-none focus:border-purple-500"
+            required
+          />
+        </div>
         <button
           type="submit"
           className="w-full bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-lg transition duration-200"