Merge pull request #159 from Frnn4268/Frnn

Adding new components for Contact.jsx page
Frnn4268 · Nov 8, 2024 · b35dad6 · b35dad6
2 parents e99ec72 + 3d1fc04
commit b35dad6
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 137 deletions.
diff --git a/frontend/components/contact/ContactForm.jsx b/frontend/components/contact/ContactForm.jsx
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { Form, Input, AutoComplete, Button, message } from 'antd';
+const { TextArea } = Input;
+
+const ContactForm = ({ handleSubmit }) => {
+  const [options, setOptions] = useState([]);
+
+  const handleSearch = (value) => {
+    setOptions(() => {
+      if (!value || value.includes('@')) {
+        return [];
+      }
+      return ['gmail.com', 'hotmail.com', 'outlook.com'].map((domain) => ({
+        label: `${value}@${domain}`,
+        value: `${value}@${domain}`,
+      }));
+    });
+  };
+
+  return (
+    <Form layout="vertical" onFinish={handleSubmit}>
+      <Form.Item 
+        label='Nombre completo' 
+        name='name' 
+        rules={[
+          {
+            required: true,
+            message: 'Por favor ingresa tu nombre'
+          }
+        ]}
+      >
+        <Input size='large' placeholder='Ingresa tu nombre completo'/>
+      </Form.Item>
+      <Form.Item
+        label='Email'
+        name='email'
+        rules={[
+          {
+            required: true,
+            message: 'Por favor ingresa tu email',
+          },
+          {
+            type: 'email',
+            message: 'Este no es un email válido',
+          },
+        ]}
+      >
+        <AutoComplete
+          size='large'
+          style={{ width: '100%' }}
+          onSearch={handleSearch}
+          placeholder="Email"
+          options={options}
+        />
+      </Form.Item>
+      <Form.Item 
+        label="Mensaje"
+        name="message"
+        rules={[
+          { 
+            required: true, 
+            message: 'Por favor ingresa tu mensaje.' 
+          }
+        ]}
+      >
+        <TextArea placeholder="Tu mensaje" rows={5} />
+      </Form.Item>
+      <Form.Item>
+        <Button type='primary' size='large' className='btn' htmlType="submit">
+          Enviar
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default ContactForm;
diff --git a/frontend/components/contact/ContactHeader.jsx b/frontend/components/contact/ContactHeader.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Typography } from 'antd';
+
+const ContactHeader = () => {
+  return (
+    <>
+      <Typography.Title level={3} strong className='title' style={{textAlign: 'center'}}>
+        Contacto
+      </Typography.Title>
+      <Typography.Title level={5} strong className='title' style={{textAlign: 'center'}}>
+        Contáctanos para obtener más información.
+      </Typography.Title>
+    </>
+  );
+};
+
+export default ContactHeader;
diff --git a/frontend/components/contact/ContactLayout.jsx b/frontend/components/contact/ContactLayout.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Layout, Card, Row, Col } from 'antd';
+import MainMenu from '../../components/home/MainMenu.jsx';
+import ContactHeader from './ContactHeader.jsx';
+import ContactForm from './ContactForm.jsx';
+
+const { Header, Content } = Layout;
+
+const backgroundStyle = {
+  backgroundImage: `linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.5)), url('https://i.postimg.cc/3wBGn5Jc/form-card1.png')`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  position: 'relative',
+  borderRadius: '0 100% 25% 15%'
+};
+
+const ContactLayout = ({ handleSubmit, contextHolder }) => {
+  return (
+    <Layout className="layout" style={backgroundStyle}>    
+      <Header className='home-header'> 
+        <MainMenu />
+      </Header>
+      <Content style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <Card className="home-block-section-contact">
+          <ContactHeader />
+          <Row justify="space-around">
+            <Col xs={22} sm={18} md={16} lg={8}>
+              <ContactForm handleSubmit={handleSubmit} />
+            </Col>
+          </Row>
+        </Card>
+      </Content>
+      {contextHolder}
+    </Layout>
+  );
+};
+
+export default ContactLayout;
diff --git a/frontend/src/pages/home/Contact.jsx b/frontend/src/pages/home/Contact.jsx
@@ -1,141 +1,40 @@
 import React, { useState } from 'react';
-import { Row, Col, Button, Form, Input, AutoComplete, Layout, Card, Typography, message } from 'antd';
-const { TextArea } = Input;
-
-import MainMenu from '../../../components/home/MainMenu.jsx'; 
-
-import '../../css/Home.css';
-
-const { Header, Content } = Layout;
-
-const backgroundStyle = {
-    backgroundImage: `linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.5)), url('https://i.postimg.cc/3wBGn5Jc/form-card1.png')`,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    position: 'relative',
-    borderRadius: '0 100% 25% 15%'
-};
+import { message } from 'antd';
+import ContactLayout from '../../../components/contact/ContactLayout.jsx';
 
 const Contact = () => {
-    const [options, setOptions] = useState([]);
-    const [messageApi, contextHolder] = message.useMessage();
-
-    const handleSearch = (value) => {
-        setOptions(() => {
-            if (!value || value.includes('@')) {
-                return [];
-            }
-            return ['gmail.com', 'hotmail.com', 'outlook.com'].map((domain) => ({
-                label: `${value}@${domain}`,
-                value: `${value}@${domain}`,
-            }));
-        });
-    };
-
-    const success = () => {
-        messageApi
-            .loading('Enviando mensaje...', 2.5)
-            .then(() => message.success('Mensaje enviado correctamente', 2.5))
-            .catch(() => message.error('Error al enviar el mensaje', 2.5));
-    };
-
-    const handleSubmit = async (values) => {
-        try {
-            const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/contact`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(values),
-            });
-
-            if (response.ok) {
-                success();
-            } else {
-                throw new Error('Error al enviar el mensaje');
-            }
-        } catch (error) {
-            message.error(error.message);
-        }
-    };
-
-    return (
-        <>
-            <Layout className="layout" style={backgroundStyle}>    
-                <Header className='home-header'> 
-                    <MainMenu />
-                </Header>
-                <Content style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                    <Card className="home-block-section-contact">
-                        <Typography.Title level={3} strong className='title' style={{textAlign: 'center'}}>
-                            Contacto
-                        </Typography.Title>
-                        <Typography.Title level={5} strong className='title' style={{textAlign: 'center'}}>
-                            Contáctanos para obtener más información.
-                        </Typography.Title>
-                        <Row justify="space-around">
-                            <Col xs={22} sm={18} md={16} lg={8}>
-                                <Form layout="vertical" onFinish={handleSubmit}>
-                                    <Form.Item 
-                                        label='Nombre completo' 
-                                        name='name' 
-                                        rules={[
-                                            {
-                                                required: true,
-                                                message: 'Por favor ingresa tu nombre'
-                                            }
-                                        ]}
-                                    >
-                                        <Input size='large' placeholder='Ingresa tu nombre completo'/>
-                                    </Form.Item>
-                                    <Form.Item
-                                        label='Email'
-                                        name='email'
-                                        rules={[
-                                            {
-                                                required: true,
-                                                message: 'Por favor ingresa tu email',
-                                            },
-                                            {
-                                                type: 'email',
-                                                message: 'Este no es un email válido',
-                                            },
-                                        ]}
-                                    >
-                                        <AutoComplete
-                                            size='large'
-                                            style={{ width: '100%' }}
-                                            onSearch={handleSearch}
-                                            placeholder="Email"
-                                            options={options}
-                                        />
-                                    </Form.Item>
-                                    <Form.Item 
-                                        label="Mensaje"
-                                        name="message"
-                                        rules={[
-                                            { 
-                                                required: true, 
-                                                message: 'Por favor ingresa tu mensaje.' 
-                                            }
-                                        ]}
-                                    >
-                                        <TextArea placeholder="Tu mensaje" rows={5} />
-                                    </Form.Item>
-                                    <Form.Item>
-                                        <Button type='primary' size='large' className='btn' htmlType="submit">
-                                            Enviar
-                                        </Button>
-                                    </Form.Item>
-                                </Form>
-                            </Col>
-                        </Row>
-                    </Card>
-                </Content>
-                {contextHolder}
-            </Layout>
-        </>
-    );
-}
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const success = () => {
+    messageApi
+      .loading('Enviando mensaje...', 2.5)
+      .then(() => message.success('Mensaje enviado correctamente', 2.5))
+      .catch(() => message.error('Error al enviar el mensaje', 2.5));
+  };
+
+  const handleSubmit = async (values) => {
+    try {
+      const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/contact`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(values),
+      });
+
+      if (response.ok) {
+        success();
+      } else {
+        throw new Error('Error al enviar el mensaje');
+      }
+    } catch (error) {
+      message.error(error.message);
+    }
+  };
+
+  return (
+    <ContactLayout handleSubmit={handleSubmit} contextHolder={contextHolder} />
+  );
+};
 
-export default Contact;
+export default Contact;