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({}); + 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 ( + + + Results + {address} + { results.serverLocation && } + + + ); +} + +export default Results;