Adds card for showing response times

package.json

@@ -18,6 +18,7 @@
     "got": "^13.0.0",
     "jest-styled-components": "^7.0.8",
     "node-fetch": "2.6.1",
+    "perf_hooks": "^0.0.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",

src/components/Form/Heading.tsx

@@ -19,7 +19,7 @@ const StyledHeading = styled.h1<HeadingProps>`
   align-items: center;
   font-size: ${TextSizes.medium};
   img { // Some titles have an icon
-    width: 2rem;
+    width: 2.5rem;
     border-radius: 4px;
   }
   a { // If a title is a link, keep title styles

src/components/Form/Row.tsx

@@ -64,14 +64,16 @@ const formatDate = (dateString: string): string => {
     day: 'numeric', month: 'long', year: 'numeric'
   }).format(new Date(dateString));
 }
-
 const formatValue = (value: any): string => {
-  const isValidDate = (date: any) => date instanceof Date && !isNaN(date as any as number);
+  const isValidDate = (date: any) => {
+    return date instanceof Date && !isNaN(date as any as number) && date >= new Date('1980-01-01');
+  };
   if (isValidDate(new Date(value))) return formatDate(value);
   if (typeof value === 'boolean') return value ? '✅' : '❌';
   return value;
 };
 
+
 const copyToClipboard = (text: string) => {
   navigator.clipboard.writeText(text);
 }

src/components/Results/Screenshot.tsx

@@ -14,11 +14,11 @@ img {
 }
 `;
 
-const ScreenshotCard = (screenshot: string): JSX.Element => {
+const ScreenshotCard = (screenshot: { data: string }): JSX.Element => {
   return (
     <Outer>
       <Heading as="h3" align="left" color={colors.primary}>Screenshot</Heading>
-      <img src={screenshot} alt="Full page screenshot" />
+      <img src={screenshot.data} alt="Full page screenshot" />
     </Outer>
   );
 }

src/components/Results/ServerStatus.tsx

@@ -0,0 +1,29 @@
+
+import styled from 'styled-components';
+import colors from 'styles/colors';
+import Card from 'components/Form/Card';
+import Heading from 'components/Form/Heading';
+import Row from 'components/Form/Row';
+
+const Outer = styled(Card)`
+span.val {
+  &.up { color: ${colors.success}; }
+  &.down { color: ${colors.danger}; }
+}
+`;
+
+const ServerStatusCard = (serverStatus: any): JSX.Element => {
+  return (
+    <Outer>
+      <Heading as="h3" align="left" color={colors.primary}>Server Status</Heading>
+      <Row lbl="" val="">
+        <span className="lbl">Is Up?</span>
+        { serverStatus.isUp ? <span className="val up">✅ Online</span> : <span className="val down">❌ Offline</span>}
+      </Row>
+      <Row lbl="Status Code" val={serverStatus.responseCode} />
+      { serverStatus.responseTime && <Row lbl="Response Time" val={`${Math.round(serverStatus.responseTime)}ms`} /> }
+    </Outer>
+  );
+}
+
+export default ServerStatusCard;

src/components/Results/TxtRecords.tsx

@@ -8,7 +8,6 @@ import Row from 'components/Form/Row';
 const Outer = styled(Card)``;
 
 const TxtRecordCard = (records: any): JSX.Element => {
-  console.log(records);
   return (
     <Outer>
       <Heading as="h3" align="left" color={colors.primary}>TXT Config</Heading>

src/components/misc/ProgressBar.tsx

@@ -141,6 +141,9 @@ const jobNames = [
   'lighthouse',
   'location',
   'shodan',
+  'redirects',
+  'txt-records',
+  'status',
   // 'server-info',
   'whois',
 ] as const;

src/pages/Results.tsx

@@ -23,7 +23,8 @@ import CookiesCard from 'components/Results/Cookies';
 import RobotsTxtCard from 'components/Results/RobotsTxt';
 import DnsRecordsCard from 'components/Results/DnsRecords';
 import RedirectsCard from 'components/Results/Redirects';
-import TxtRecordResults from 'components/Results/TxtRecords';
+import TxtRecordCard from 'components/Results/TxtRecords';
+import ServerStatusCard from 'components/Results/ServerStatus';
 import ProgressBar, { LoadingJob, LoadingState, initialJobs } from 'components/misc/ProgressBar';
 import keys from 'utils/get-keys';
 import { determineAddressType, AddressType } from 'utils/address-type-checker';
@@ -233,6 +234,14 @@ const Results = (): JSX.Element => {
     fetchRequest: () => fetch(`/follow-redirects?url=${address}`).then(res => res.json()),
   });
 
+  // Get current status and response time of server
+  const [serverStatusResults] = useMotherHook({
+    jobId: 'status',
+    updateLoadingJobs,
+    addressInfo: { address, addressType, expectedAddressTypes: urlTypeOnly },
+    fetchRequest: () => fetch(`/server-status?url=${address}`).then(res => res.json()),
+  });
+
   /* Cancel remaining jobs after  10 second timeout */
   useEffect(() => {
     const checkJobs = () => {
@@ -266,18 +275,20 @@ const Results = (): JSX.Element => {
     { title: 'DNS Records', result: dnsResults, Component: DnsRecordsCard },
     { title: 'Performance', result: lighthouseResults, Component: LighthouseCard },
     { title: 'Cookies', result: cookieResults, Component: CookiesCard },
-    { title: 'Screenshot', result: lighthouseResults?.fullPageScreenshot?.screenshot?.data, Component: ScreenshotCard },
+    { title: 'Screenshot', result: lighthouseResults?.fullPageScreenshot?.screenshot, Component: ScreenshotCard },
     { title: 'Technologies', result: technologyResults, Component: BuiltWithCard },
     { title: 'Crawl Rules', result: robotsTxtResults, Component: RobotsTxtCard },
     { title: 'Server Info', result: shoadnResults?.serverInfo, Component: ServerInfoCard },
     { title: 'Redirects', result: redirectResults, Component: RedirectsCard },
-    { title: 'TXT Records', result: txtRecordResults, Component: TxtRecordResults },
+    { title: 'TXT Records', result: txtRecordResults, Component: TxtRecordCard },
+    { title: 'Server Status', result: serverStatusResults, Component: ServerStatusCard },
   ];
   
   return (
     <ResultsOuter>
       <Header as="header">
         <Heading color={colors.primary} size="large">
+          <img width="64" src="/web-check.png" alt="Web Check Icon" />
           <a href="/">Web Check</a>
         </Heading>
         { address && 

yarn.lock

@@ -7291,6 +7291,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+perf_hooks@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/perf_hooks/-/perf_hooks-0.0.1.tgz#253e7e18b71fcc0390fd3afb2cd7cf1685df040c"
+  integrity sha512-qG/D9iA4KDme+KF4vCObJy6Bouu3BlQnmJ8jPydVPm32NJBD9ZK1ZNgXSYaZKHkVC1sKSqUiLgFvAZPUiIEnBw==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"