nicolasukd · nicolasukd · Jun 2, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,12 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.5",
     "@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",
+    "leaflet": "^1.9.4",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.7.4",
     "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
+    "react-redux": "^8.0.7",
     "react-scripts": "5.0.1",
+    "redux": "^4.2.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,16 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>React App</title>
+</head>
+
+<body>
+  <script>
+    document.body.style.backgroundColor = "rgb(50, 50, 50)";
+  </script>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +41,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,21 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.appStyle{
+  display: grid;
+  justify-content: center;
+  background-color: rgb(50, 50, 50);
+  height: 100%;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.center{
+  display: grid;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
-  color: #61dafb;
+.shadow {
+  border: 1px solid;
+  padding: 10px;
+  box-shadow: 5px 10px #0000;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.warningText{
+  color: red;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,16 @@
+import React from 'react';
 import './App.css';
+import Header from './components/Header';
+import Content from './components/Content';
 
 function App() {
   return (
-    <div className="App">
-      <h1>CONTROL 2 TEL-335</h1>
+    <div className='appStyle'>
+      <Header />
+      <Content />
     </div>
+
   );
 }
 
-export default App;
+export default App;
diff --git a/src/components/Content.js b/src/components/Content.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+// import Template from './contentComponents/Template';
+import Pregunta1 from './contentComponents/Pregunta1';
+
+
+
+function Content() {
+    return (
+        <div style={{ display: 'grid', justifyContent: 'center' }}>
+            {/* <Template /> */}
+            <Pregunta1 />
+        </div>
+    );
+}
+
+export default Content;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,16 @@
+
+
+
+
+function Header() {
+
+    return (
+        <div style={{ display: 'grid', justifyContent: 'center', width:  document.body.clientWidth}} className="shadow">
+            <header >
+                <h1 style={{ color: 'white' }}>Control 2 TEL-335</h1>
+            </header>
+        </div>
+    );
+}
+
+export default Header;
diff --git a/src/components/contentComponents/Pregunta1.js b/src/components/contentComponents/Pregunta1.js
@@ -0,0 +1,180 @@
+import { useState, useEffect } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import Card from 'react-bootstrap/Card';
+import axios from 'axios';
+
+import { MapContainer, TileLayer, useMap, Marker, Popup } from 'react-leaflet'
+
+
+
+function Pregunta1() {
+    const [ipv4, setIpv4] = useState('');
+    const [show, setShow] = useState(false);
+    const [ipv4Data, setIpv4Data] = useState([]);
+    const [ipv4DataSaved, setIpv4DataSaved] = useState([]);
+    const [show2, setShow2] = useState(false);
+
+    const dummyObject = {
+        "ip": "161.185.160.93",
+        "city": "New York City",
+        "region": "New York",
+        "country": "US",
+        "loc": "40.7143,-74.0060",
+        "org": "AS22252 The City of New York",
+        "postal": "10004",
+        "timezone": "America/New_York",
+        "readme": "https://ipinfo.io/missingauth"
+    };
+
+    function handleClose() {
+        setShow(false);
+    }
+
+    function onChange(event) {
+        setIpv4(event.target.value)
+    }
+
+    function checkValidIp(ip) {
+        if (/^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ip)) {
+            return true;
+        }
+        return false;
+
+    }
+
+    function onClick() {
+        if (checkValidIp(ipv4)) {
+            const searchForIp = async () => {
+                let url = "https://ipinfo.io/" + ipv4 + "/geo";
+                // await axios.get({
+                //     method: 'GET',
+                //     url: url,
+                // }).then((res) => {
+                //     setIpv4Data(res);
+                //     setShow(true);
+
+                // }).catch((err) => {
+                //     alert('Error');
+
+                // });
+
+
+                //Caso de todo OK
+                setIpv4Data(dummyObject);
+                setShow(true);
+
+            }
+            searchForIp();
+
+        }
+    }
+
+    function onSave() {
+        if (ipv4Data != '') {
+            const post = async () => {
+                let url = "https://jsonplaceholder.typicode.com/posts";
+                // await axios.post({url: url, data: ipv4Data})
+                // .then((res) => {
+                //     setIpv4DataSaved(res);
+                //     setShow2(true);
+
+
+                // }).catch((err) => {
+                //     alert('Error, la data no ha podido ser guardad');
+                // });
+
+
+
+                //Caso de todo OK
+                setIpv4DataSaved(ipv4Data);
+                setShow2(true);
+
+            }
+
+            post();
+
+        }
+    }
+
+    return (
+        <div>
+            <div style={{ paddingBottom: '25px', paddingTop: '25px', paddingRight: '100px', paddingLeft: '100px' }}>
+                <Card >
+                    <Card.Body className='center'>
+                        <Card.Title>Preguntar por IP</Card.Title>
+                        <div style={{ height: '20px' }}></div>
+                        <form style={{ display: 'grid', justifyContent: 'center' }}>
+                            <label>
+                                IPv4:
+                                <div style={{ height: '5px' }}></div>
+                                <input type="text" value={ipv4} onChange={(event) => { onChange(event) }} name="name" />
+                            </label>
+                            {checkValidIp(ipv4) || ipv4 == '' ?
+                                null
+                                :
+                                <p className='warningText'>IP no valida</p>}
+
+                            <div style={{ height: '5px' }}></div>
+                            <div style={{
+                                display: 'flex',
+                                justifyContent: 'space-between'
+                            }}>
+                                <Button variant={checkValidIp(ipv4) ? 'primary' : 'secondary'} onClick={onClick}> Buscar </Button>
+                                <Button variant={ipv4Data != '' ? 'primary' : 'secondary'} onClick={onSave}> Guardar </Button>
+
+                            </div>
+
+                        </form>
+                    </Card.Body>
+                </Card>
+            </div>
+
+            <Modal show={show} onHide={handleClose}>
+                <Modal.Header closeButton style={{ borderBottom: 'none' }}>
+                    <Modal.Title>IP Info</Modal.Title>
+                    <Modal.Body>
+                        {Object.keys(ipv4Data).map(key => (
+                            <p key={key}>{key}: {ipv4Data[key]}</p>
+                        ))}
+                        <div style={{height: '100px', width: '100px'}}>
+                            <MapContainer center={[String(ipv4Data.loc).split(',')[0], String(ipv4Data.loc).split(',')[1]]} zoom={100} scrollWheelZoom={false}>
+                                <TileLayer
+                                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                                />
+                                <Marker position={[String(ipv4Data.loc).split(',')[0], String(ipv4Data.loc).split(',')[1]]}>
+                                </Marker>
+                            </MapContainer>
+                        </div>
+
+                    </Modal.Body>
+                </Modal.Header>
+            </Modal>
+
+            <Modal show={show2} onHide={() => setShow2(false)}>
+                <Modal.Header closeButton style={{ borderBottom: 'none' }}>
+                    <Modal.Title>Data guardada</Modal.Title>
+                    <Modal.Body>
+                        {Object.keys(ipv4DataSaved).map(key => (
+                            <p key={key}>{key}: {ipv4DataSaved[key]}</p>
+                        ))}
+                        <div style={{height: '100px', width: '100px'}}>
+                            <MapContainer center={[String(ipv4DataSaved.loc).split(',')[0], String(ipv4DataSaved.loc).split(',')[1]]} zoom={100} scrollWheelZoom={false}>
+                                <TileLayer
+                                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                                />
+                                <Marker position={[String(ipv4DataSaved.loc).split(',')[0], String(ipv4DataSaved.loc).split(',')[1]]}>
+                                </Marker>
+                            </MapContainer>
+                        </div>
+                    </Modal.Body>
+                </Modal.Header>
+            </Modal>
+        </div>
+
+    );
+}
+
+export default Pregunta1;