From 4ca97314d3edac9474940dcfdab1602165248974 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Fri, 8 Jul 2022 21:46:37 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=A0=20Home=20page=20work?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.css      |  6 ++++++
 src/pages/Home.tsx | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index b5ce0df..9a8b7a6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,3 +25,9 @@ code {
   background: var(--primary, #9fef00);
   color: var(--background, #141d2b);
 }
+
+
+svg.rsm-svg {
+  background: #2a3240;
+  border-radius: 6px;
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index fac9318..2b43253 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -30,14 +30,26 @@ const UserInputMain = styled.form`
   margin: 1rem;
 `;
 
+const FindIpButton = styled.a`
+  margin: 0.5rem;
+  cursor: pointer;
+  display: block;
+  text-align: center;
+  color: ${colors.primary};
+  text-decoration: underline;
+`;
+
 const ErrorMessage = styled.p`
   color: ${colors.danger};
   margin: 0.5rem;
 `;
 
 const Home = (): JSX.Element => {
+  const defaultPlaceholder = 'e.g. https://duck.com/';
   const [userInput, setUserInput] = useState('');
   const [errorMsg, setErrMsg] = useState('');
+  const [placeholder, setPlaceholder] = useState(defaultPlaceholder);
+  const [inputDisabled, setInputDisabled] = useState(false);
   const navigate = useNavigate();
 
   /* Check is valid address, either show err or redirect to results page */
@@ -62,6 +74,24 @@ const Home = (): JSX.Element => {
     if (!isError) setErrMsg('');
   };
 
+  const findIpAddress = () => {
+    setUserInput('');
+    setPlaceholder('Looking up your IP...');
+    setInputDisabled(true);
+    fetch('https://ipapi.co/json/')
+      .then(function(response) {
+        response.json().then(jsonData => {
+          console.log(jsonData);
+          setUserInput(jsonData.ip);
+          setPlaceholder(defaultPlaceholder);
+          setInputDisabled(true);
+        });
+      })
+      .catch(function(error) {
+        console.log(error)
+      });
+  };
+
   const formSubmitEvent = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     submit();
@@ -78,9 +108,11 @@ const Home = (): JSX.Element => {
           label="Enter an IP or URL"
           size="large"
           orientation="vertical"
-          placeholder="e.g. https://duck.com"
+          placeholder={placeholder}
+          disabled={inputDisabled}
           handleChange={inputChange}
         />
+        <FindIpButton onClick={findIpAddress}>Or, find my IP</FindIpButton>
         { errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
         <Button size="large" onClick={submit}>Analyze!</Button>
       </UserInputMain>