Makes components itteratable

src/components/Results/BuiltWith.tsx

@@ -47,9 +47,8 @@ const ListRow = (props: { list: Technology[], title: string }) => {
 );
 }
 
-const BuiltWithCard = (props: { technologies: TechnologyGroup[] }): JSX.Element => {
+const BuiltWithCard = (technologies: TechnologyGroup[]): JSX.Element => {
   // const { created, updated, expires, nameservers } = whois;
-  const { technologies } = props;
   return (
     <Outer>
       <Heading as="h3" align="left" color={colors.primary}>Technologies</Heading>

src/components/Results/Cookies.tsx

@@ -7,16 +7,15 @@ import { ExpandableRow } from 'components/Form/Row';
 
 const Outer = styled(Card)``;
 
-const CookiesCard = (props: { cookies: any }): JSX.Element => {
-  const cookies = props.cookies;
+const CookiesCard = (cookies: { cookies: any }): JSX.Element => {
   return (
     <Outer>
       <Heading as="h3" align="left" color={colors.primary}>Cookies</Heading>
       {
-        cookies.length === 0 && <p>No cookies found.</p>
+        cookies.cookies.length === 0 && <p>No cookies found.</p>
       }
       {
-        cookies.map((cookie: any, index: number) => {
+        cookies.cookies.map((cookie: any, index: number) => {
           const attributes = Object.keys(cookie.attributes).map((key: string) => {
             return { lbl: key, val: cookie.attributes[key] }
           });
@@ -24,7 +23,7 @@ const CookiesCard = (props: { cookies: any }): JSX.Element => {
             <ExpandableRow key={`cookie-${index}`} lbl={cookie.name} val={cookie.value} rowList={attributes} />
           )
         })
-      } 
+      }
     </Outer>
   );
 }

src/components/Results/DnsRecords.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import colors from 'styles/colors';
 import Card from 'components/Form/Card';
 import Heading from 'components/Form/Heading';
-import Row, { ListRow, RowProps }  from 'components/Form/Row';
+import Row, { ListRow }  from 'components/Form/Row';
 
 const Outer = styled(Card)`
   .content {
@@ -12,8 +12,7 @@ const Outer = styled(Card)`
   }
 `;
 
-const DnsRecordsCard = (props: { dnsRecords: any }): JSX.Element => {
-  const dnsRecords = props.dnsRecords;
+const DnsRecordsCard = (dnsRecords: any): JSX.Element => {
   return (
     <Outer>
       <Heading as="h3" align="left" color={colors.primary}>DNS Records</Heading>

src/components/Results/Headers.tsx

@@ -9,8 +9,7 @@ const Outer = styled(Card)`
   grid-row: span 2;
 `;
 
-const HeadersCard = (props: { headers: any }): JSX.Element => {
-  const headers = props.headers;
+const HeadersCard = (headers: any): JSX.Element => {
   return (
     <Outer>
       <Heading as="h3" align="left" color={colors.primary}>Headers</Heading>

src/components/Results/HostNames.tsx

@@ -32,8 +32,7 @@ const HostListSection = (props: { list: string[], title: string }) => {
 );
 }
 
-const HostNamesCard = (props: { hosts: HostNames }): JSX.Element => {
-  const hosts = props.hosts;
+const HostNamesCard = (hosts: HostNames): JSX.Element => {
   return (
     <Outer>
       { hosts.domains.length > 0 &&

src/components/Results/Lighthouse.tsx

@@ -12,44 +12,6 @@ const processScore = (percentile: number) => {
 
 const Outer = styled(Card)``;
 
-const Row = styled.div`
-  details summary {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.25rem;
-    cursor: pointer;
-  }
-  &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; }
-  span.lbl {
-    font-weight: bold;
-    text-transform: capitalize;
-  }
-  span.val {
-    max-width: 200px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-
-const ScoreRow = styled.li`
-  list-style: none;
-  margin: 0;
-  display: flex;
-  gap: 0.25rem;
-  padding: 0.25rem 0;
-  justify-content: space-between;
-  span { min-width: 5rem; max-width: 8rem; }
-  border-bottom: 1px dashed ${colors.primaryTransparent};
-`;
-
-const ScoreList = styled.ul`
-  margin: 0;
-  padding: 0.25rem;
-  border-top: 1px solid ${colors.primary};
-  background: ${colors.primaryTransparent};
-`;
-
 interface Audit {
   id: string,
   score?: number | string,
@@ -59,26 +21,6 @@ interface Audit {
   displayValue?: string,
 };
 
-const ScoreItem = (props: { scoreId: any, audits: Audit[] }) => {
-  const { scoreId, audits } = props;
-  const audit = audits[scoreId];
-  if (!audit.score) return null;
-
-  let score = audit.score;
-  if (audit.displayValue) {
-    score = audit.displayValue;
-  } else if (audit.scoreDisplayMode) {
-    score = audit.score === 1 ? '✅ Pass' : '❌ Fail'; 
-  }
-
-  return (
-    <ScoreRow title={audit.description}>
-      <b>{ audit.title }</b>
-      <span>{score}</span>
-    </ScoreRow>
-  );
-};
-
 const makeValue = (audit: Audit) => {
   let score = audit.score;
   if (audit.displayValue) {
@@ -89,9 +31,9 @@ const makeValue = (audit: Audit) => {
   return score;
 };
 
-const LighthouseCard = (props: { lighthouse: any }): JSX.Element => {
-  const categories = props.lighthouse?.categories || {};
-  const audits = props.lighthouse?.audits || [];
+const LighthouseCard = (lighthouse: any): JSX.Element => {
+  const categories = lighthouse?.categories || {};
+  const audits = lighthouse?.audits || [];
 
   return (
     <Outer>

src/components/Results/RobotsTxt.tsx

@@ -12,16 +12,16 @@ const Outer = styled(Card)`
   }
 `;
 
-const RobotsTxtCard = (props: { robotTxt: RowProps[] }): JSX.Element => {
+const RobotsTxtCard = ( robots: { robots: RowProps[]}): JSX.Element => {
   return (
     <Outer>
       <Heading as="h3" align="left" color={colors.primary}>Crawl Rules</Heading>
       <div className="content">
       {
-        props.robotTxt.length === 0 && <p>No crawl rules found.</p>
+        robots.robots.length === 0 && <p>No crawl rules found.</p>
       }
       {
-        props.robotTxt.map((row: RowProps, index: number) => {
+        robots.robots.map((row: RowProps, index: number) => {
           return (
             <Row key={`${row.lbl}-${index}`} lbl={row.lbl} val={row.val} />
           )

src/components/Results/Screenshot.tsx

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

src/components/Results/SslCert.tsx

@@ -79,8 +79,8 @@ const ListRow = (props: { list: string[], title: string }) => {
 );
 }
 
-const SslCertCard = (props: { sslCert: any }): JSX.Element => {
-  const { subject, issuer, fingerprint, serialNumber, asn1Curve, nistCurve, valid_to, valid_from, ext_key_usage } = props.sslCert;
+const SslCertCard = (sslCert: any): JSX.Element => {
+  const { subject, issuer, fingerprint, serialNumber, asn1Curve, nistCurve, valid_to, valid_from, ext_key_usage } = sslCert;
   return (
     <Outer>
       <Heading as="h3" align="left" color={colors.primary}>SSL Info</Heading>