From 24ee4bde176a3c5c523aee1b9884f650d3bdc203 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sun, 3 Jul 2022 23:15:10 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Start=20on=20results=20component?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Results.tsx | 58 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/pages/Results.tsx

diff --git a/src/pages/Results.tsx b/src/pages/Results.tsx
new file mode 100644
index 0000000..6cb5d20
--- /dev/null
+++ b/src/pages/Results.tsx
@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react';
+import {   useParams } from "react-router-dom";
+import styled from 'styled-components';
+
+import colors from 'styles/colors';
+import Heading from 'components/Form/Heading';
+import ServerLocationCard from 'components/Results/ServerLocation';
+
+import { getLocation, ServerLocation } from 'utils/result-processer';
+
+const ResultsOuter = styled.div`
+  display: flex;
+`;
+
+const ResultsInner = styled.section`
+  padding: 1rem;
+  margin: 1rem;
+  width: 95vw;
+`;
+
+interface ResultsType {
+  serverLocation?: ServerLocation,
+};
+
+const Results = (): JSX.Element => {
+  const [ results, setResults ] = useState<ResultsType>({});
+  const { address } = useParams();
+  if (address) {
+    console.log(decodeURIComponent(address));
+  }
+
+  const applyResults = (response: any) => {
+    console.log(response);
+    const serverLocation = getLocation(response);
+    setResults({...results, serverLocation });
+  }
+
+  useEffect(() => {
+    console.log('Will fetch....', process.env.SHODAN_API_KEY);
+    const apiKey = 'WB6B7tRAskjlmpVUrYfnU1CVGCIpUs1t';
+    fetch(`https://api.shodan.io/shodan/host/${address}?key=${apiKey}`)
+    .then(response => response.json())
+    .then(response => applyResults(response))
+    .catch(err => console.error(err));
+  }, [address]);
+
+  return (
+    <ResultsOuter>
+      <ResultsInner>
+        <Heading color={colors.primary} size="large">Results</Heading>
+        <Heading color={colors.textColor} size="medium">{address}</Heading>
+        { results.serverLocation && <ServerLocationCard {...results.serverLocation} />}
+      </ResultsInner>
+    </ResultsOuter>
+  );
+}
+
+export default Results;