diff --git a/src/components/Results/BuiltWith.tsx b/src/components/Results/BuiltWith.tsx index 4a6bc4e..c0ce415 100644 --- a/src/components/Results/BuiltWith.tsx +++ b/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 ( Technologies diff --git a/src/components/Results/Cookies.tsx b/src/components/Results/Cookies.tsx index cd05139..609d8e0 100644 --- a/src/components/Results/Cookies.tsx +++ b/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 ( Cookies { - cookies.length === 0 &&

No cookies found.

+ cookies.cookies.length === 0 &&

No cookies found.

} { - 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 => { ) }) - } + }
); } diff --git a/src/components/Results/DnsRecords.tsx b/src/components/Results/DnsRecords.tsx index f5b6704..30ffbec 100644 --- a/src/components/Results/DnsRecords.tsx +++ b/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 ( DNS Records diff --git a/src/components/Results/Headers.tsx b/src/components/Results/Headers.tsx index 2af2974..5417739 100644 --- a/src/components/Results/Headers.tsx +++ b/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 ( Headers diff --git a/src/components/Results/HostNames.tsx b/src/components/Results/HostNames.tsx index 3c828df..4e433df 100644 --- a/src/components/Results/HostNames.tsx +++ b/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 ( { hosts.domains.length > 0 && diff --git a/src/components/Results/Lighthouse.tsx b/src/components/Results/Lighthouse.tsx index 6625bba..4405aed 100644 --- a/src/components/Results/Lighthouse.tsx +++ b/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 ( - - { audit.title } - {score} - - ); -}; - 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 ( diff --git a/src/components/Results/RobotsTxt.tsx b/src/components/Results/RobotsTxt.tsx index bbe53ee..0b16786 100644 --- a/src/components/Results/RobotsTxt.tsx +++ b/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 ( Crawl Rules
{ - props.robotTxt.length === 0 &&

No crawl rules found.

+ robots.robots.length === 0 &&

No crawl rules found.

} { - props.robotTxt.map((row: RowProps, index: number) => { + robots.robots.map((row: RowProps, index: number) => { return ( ) diff --git a/src/components/Results/Screenshot.tsx b/src/components/Results/Screenshot.tsx index dbaf18c..95ef65c 100644 --- a/src/components/Results/Screenshot.tsx +++ b/src/components/Results/Screenshot.tsx @@ -14,11 +14,11 @@ img { } `; -const ScreenshotCard = (props: { screenshot: string }): JSX.Element => { +const ScreenshotCard = (screenshot: string): JSX.Element => { return ( Screenshot - Full page screenshot + Full page screenshot ); } diff --git a/src/components/Results/SslCert.tsx b/src/components/Results/SslCert.tsx index dc69577..d9941e6 100644 --- a/src/components/Results/SslCert.tsx +++ b/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 ( SSL Info diff --git a/src/pages/Results.tsx b/src/pages/Results.tsx index dde507a..a5aea4d 100644 --- a/src/pages/Results.tsx +++ b/src/pages/Results.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useCallback, SetStateAction, Dispatch } from 'react'; +import { useState, useEffect, useCallback } from 'react'; import { useParams } from "react-router-dom"; import styled from 'styled-components'; @@ -121,7 +121,7 @@ const Results = (): JSX.Element => { }); // Fetch and parse cookies info - const [cookieResults] = useMotherHook({ + const [cookieResults] = useMotherHook<{cookies: Cookie[]}>({ jobId: 'cookies', updateLoadingJobs, addressInfo: { address, addressType, expectedAddressTypes: urlTypeOnly }, @@ -131,7 +131,7 @@ const Results = (): JSX.Element => { }); // Fetch and parse crawl rules from robots.txt - const [robotsTxtResults] = useMotherHook({ + const [robotsTxtResults] = useMotherHook<{robots: RowProps[]}>({ jobId: 'robots-txt', updateLoadingJobs, addressInfo: { address, addressType, expectedAddressTypes: urlTypeOnly }, @@ -229,6 +229,22 @@ const Results = (): JSX.Element => { return address; } } + + // A list of state sata, corresponding component and title for each card + const resultCardData = [ + { title: 'Server Location', result: locationResults, Component: ServerLocationCard }, + { title: 'SSL Info', result: sslResults, Component: SslCertCard }, + { title: 'Headers', result: headersResults, Component: HeadersCard }, + { title: 'Host Names', result: shoadnResults?.hostnames, Component: HostNamesCard }, + { title: 'Domain Info', result: whoIsResults, Component: WhoIsCard }, + { 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: 'Technologies', result: technologyResults, Component: BuiltWithCard }, + { title: 'Crawl Rules', result: robotsTxtResults, Component: RobotsTxtCard }, + { title: 'Server Info', result: shoadnResults?.serverInfo, Component: ServerInfoCard }, + ]; return ( @@ -244,43 +260,17 @@ const Results = (): JSX.Element => { } + - - { locationResults && } - - - { sslResults && } - - - { headersResults && } - - - { shoadnResults?.hostnames && } - - - { whoIsResults && } - - - { dnsResults && } - - - { lighthouseResults && } - - - { cookieResults && } - - - { lighthouseResults?.fullPageScreenshot?.screenshot?.data && } - - - { technologyResults && } - - - { robotsTxtResults && } - - - { shoadnResults?.serverInfo && } - + { + resultCardData.map(({ title, result, Component }) => ( + (result) ? ( + + + + ) : <> + )) + }