Feature

package.json

@@ -6,9 +6,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
+    "bootstrap": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,11 +1,16 @@
 import './App.css';
-
+import Search from './components/Search';
+import Header from "./components/Header";
+import React from "react";
 function App() {
   return (
     <div className="App">
+      <img src={require('./img/logo.png')} alt="Logo" className="mr-2" style={{ width: '30px', height: '30px' }} />
       <h1>CONTROL 2 TEL-335</h1>
+        <Header/>
+        <Search/>
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/ApiService.js

@@ -0,0 +1,33 @@
+import axios from 'axios';
+
+const BASE_URL = 'https://jsonplaceholder.typicode.com/posts';
+const URL = 'https://ipinfo.io/';
+
+const getGeoInfo = async (ipv4) => {
+    try {
+        const response = await axios.get(`${URL}${ipv4}/geo`);
+        return response.data;
+    } catch (error) {
+        console.error('Error al obtener la información:', error);
+        throw error;
+    }
+};
+
+const saveData = async (data) => {
+    try {
+        const { ip, city, region, country } = data;
+        const postData = {ip, city, region, country};
+
+        const response = await axios.post(BASE_URL, postData);
+        console.log(response.status)
+        return response;
+    } catch (error) {
+        console.error('Error e', error);
+        throw error;
+    }
+};
+
+export default {
+    getGeoInfo,
+    saveData
+};

src/components/Header.js

@@ -0,0 +1,9 @@
+
+function Header() {
+    return (
+        <div className="App">
+            <h3>Mariapaz Gomez</h3>
+        </div>
+    );
+}
+export default Header;

src/components/SaveButton.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import ApiService from "./ApiService";
+
+const SaveButton = ({ data }) => {
+
+    const [isSaving, setIsSaving] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [saveSuccess, setSaveSuccess] = useState(false);
+
+    const handleSave = async () => {
+        setIsSaving(true);
+        setSaveError(null);
+        setSaveSuccess(false);
+
+        try {
+            const response = await ApiService.saveData(data);
+
+            if (response.status === 201) {
+                setSaveSuccess(true);
+            } else {
+                setSaveError("Error al guardar los datos. Intente nuevamente.");
+            }
+        } catch (error) {
+            setSaveError("Error al guardar los datos. Intente nuevamente.");
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    return (
+        <div>
+            <button onClick={handleSave} disabled={isSaving}>
+                Guardar
+            </button>
+            {isSaving && <p>Guardando datos...</p>}
+            {saveError && <p>{saveError}</p>}
+            {saveSuccess && <p>Datos guardados correctamente</p>}
+        </div>
+    );
+};
+
+export default SaveButton;

src/components/Search.js

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import ApiService from './ApiService';
+
+// Función dummy para simular la respuesta del API
+const getDummyGeoInfo = (ipv4) => {
+    return new Promise((resolve) => {
+        // Simulación de un retardo de 1 segundo
+        setTimeout(() => {
+            const dummyData = {
+                ip: ipv4,
+                city: 'Ciudad Dummy',
+                region: 'Región Dummy',
+                country: 'País Dummy',
+                loc: 'Ubicación Dummy',
+                org: 'Proveedor Dummy',
+                postal: 'Código Postal Dummy',
+                timezone: 'Zona Horaria Dummy',
+            };
+            resolve(dummyData);
+        }, 1000);
+    });
+};
+
+const Search = () => {
+    const [ipv4, setIPv4] = useState('');
+    const [geoInfo, setGeoInfo] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [isValidIP, setIsValidIP] = useState(true);
+
+    const handleInputChange = (event) => {
+        const value = event.target.value;
+        setIPv4(value);
+        setIsValidIP(validateIP(value));
+    };
+
+    const handleSearch = async () => {
+        setIsLoading(true);
+        setError('');
+
+        try {
+            //const data = await ApiService.getGeoInfo(ipv4);
+            const data = await getDummyGeoInfo(ipv4);
+            setGeoInfo(data);
+        } catch (error) {
+            setError(error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleSave = async () => {
+        setIsLoading(true);
+        setError('');
+
+        try {
+            await ApiService.saveData(geoInfo);
+            setError('¡Guardado correctamente!');
+        } catch (error) {
+            setError('Error al guardar. Intente nuevamente.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const validateIP = (ip) => {
+        // Expresión regular para validar una dirección IPv4
+        const regex = /^(\d{1,3}\.){3}\d{1,3}$/;
+        return regex.test(ip);
+    };
+
+    return (
+        <div className="container">
+            <div className="row">
+                <div className="col-md-6 offset-md-3">
+                    <div className="d-flex align-items-center mb-3">
+                        <h2>Buscar Información de IP</h2>
+                    </div>
+                    <div className="input-group mb-3">
+                        <input
+                            type="text"
+                            className="form-control"
+                            placeholder="Ingrese una dirección IPv4"
+                            value={ipv4}
+                            onChange={handleInputChange}
+                        />
+                        {!isValidIP && <p className="text-danger">Formato de dirección IPv4 inválido</p>}
+                        <button className="btn btn-primary" onClick={handleSearch} disabled={isLoading || !ipv4 || !isValidIP}>
+                            Buscar
+                        </button>
+                    </div>
+                    {isLoading && <p>Cargando información...</p>}
+                    {error && <p className="text-danger">{error}</p>}
+                    {geoInfo && (
+                        <div>
+                            <h3>Información de IP:</h3>
+                            <p>IP: {geoInfo.ip}</p>
+                            <p>Ciudad: {geoInfo.city}</p>
+                            <p>Región: {geoInfo.region}</p>
+                            <p>País: {geoInfo.country}</p>
+                            <p>Ubicación: {geoInfo.loc}</p>
+                            <p>Proveedor de Internet: {geoInfo.org}</p>
+                            <p>Código Postal: {geoInfo.postal}</p>
+                            <p>Zona Horaria: {geoInfo.timezone}</p>
+                            <button className="btn btn-primary" onClick={handleSave} disabled={isLoading}>
+                                Guardar
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Search;

src/index.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import './index.css';
 import App from './App';
+
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));