Updates docs, loader list, react lint and remove commented code

src/components/Results/DomainLookup.tsx

@@ -11,7 +11,7 @@ span.val {
 `;
 
 const DomainLookupCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
-  const domain = props.data;
+  const domain = props.data.internicData || {};
   return (
     <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       { domain.Domain_Name && <Row lbl="Registered Domain" val={domain.Domain_Name} /> }
@@ -25,13 +25,6 @@ const DomainLookupCard = (props: { data: any, title: string, actionButtons: any
         <span className="val"><a href={domain.Registrar_URL || '#'}>{domain.Registrar}</a></span>
       </Row> }
       { domain.Registrar_IANA_ID && <Row lbl="Registrar IANA ID" val={domain.Registrar_IANA_ID} /> }
-
-      {/* <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`} /> } */}
     </Card>
   );
 }

src/components/Results/Rank.tsx

@@ -39,6 +39,23 @@ const makeChartData = (data: {date: string, rank: number }[]) => {
   });
 };
 
+function Chart(chartData: { date: string; uv: number; }[], data: any) {
+  return <ResponsiveContainer width="100%" height={100}>
+    <AreaChart width={400} height={100} data={chartData}>
+      <defs>
+        <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="20%" stopColor="#0f1620" stopOpacity={0.8} />
+          <stop offset="80%" stopColor="#0f1620" stopOpacity={0} />
+        </linearGradient>
+      </defs>
+      <CartesianGrid strokeDasharray="4" strokeWidth={0.25} verticalPoints={[50, 100, 150, 200, 250, 300, 350]} horizontalPoints={[25, 50, 75]} />
+      <Tooltip contentStyle={{ background: colors.background, color: colors.textColor, borderRadius: 4 }}
+        labelFormatter={(value) => ['Date : ', data[value].date]} />
+      <Area type="monotone" dataKey="uv" stroke="#9fef00" fillOpacity={1} name="Rank" fill={`${colors.backgroundDarker}a1`} />
+    </AreaChart>
+  </ResponsiveContainer>;
+}
+
 const RankCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
   const data = props.data.ranks || [];
   const { average, percentageChange } = makeRankStats(data);
@@ -49,42 +66,12 @@ const RankCard = (props: { data: any, title: string, actionButtons: any }): JSX.
       <Row lbl="Change since Yesterday" val={`${percentageChange > 0 ? '+':''} ${percentageChange.toFixed(2)}%`} />
       <Row lbl="Historical Average Rank" val={average.toLocaleString()} />
       <div className="chart-container">
-        <ResponsiveContainer width="100%" height={100}>
-          <AreaChart width={400} height={100} data={chartData}>
-            <defs>
-              <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="20%" stopColor="#0f1620" stopOpacity={0.8}/>
-                <stop offset="80%" stopColor="#0f1620" stopOpacity={0}/>
-              </linearGradient>
-            </defs>
-            <CartesianGrid strokeDasharray="4" strokeWidth={0.25} verticalPoints={[50,100,150,200,250,300,350]} horizontalPoints={[25,50,75]} />
-            <Tooltip contentStyle={{background: colors.background, color: colors.textColor, borderRadius: 4 }}
-                labelFormatter={(value) => ['Date : ', data[value].date]}/>
-            <Area type="monotone" dataKey="uv" stroke="#9fef00" fillOpacity={1} name="Rank" fill={`${colors.backgroundDarker}a1`} />
-          </AreaChart>
-        </ResponsiveContainer>
+        {Chart(chartData, data)}
       </div>
-
-      {/* { domain.Domain_Name && <Row lbl="Registered Domain" val={domain.Domain_Name} /> }
-      { domain.Creation_Date && <Row lbl="Creation Date" val={domain.Creation_Date} /> }
-      { domain.Updated_Date && <Row lbl="Updated Date" val={domain.Updated_Date} /> }
-      { domain.Registry_Expiry_Date && <Row lbl="Registry Expiry Date" val={domain.Registry_Expiry_Date} /> }
-      { domain.Registry_Domain_ID && <Row lbl="Registry Domain ID" val={domain.Registry_Domain_ID} /> }
-      { domain.Registrar_WHOIS_Server && <Row lbl="Registrar WHOIS Server" val={domain.Registrar_WHOIS_Server} /> }
-      { domain.Registrar && <Row lbl="" val="">
-        <span className="lbl">Registrar</span>
-        <span className="val"><a href={domain.Registrar_URL || '#'}>{domain.Registrar}</a></span>
-      </Row> }
-      { domain.Registrar_IANA_ID && <Row lbl="Registrar IANA ID" val={domain.Registrar_IANA_ID} /> } */}
-
-      {/* <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`} /> } */}
     </Card>
   );
 }
 
 export default RankCard;
+
+

src/components/misc/AdditionalResources.tsx

@@ -45,11 +45,13 @@ img {
 p, a {
   margin: 0;
 }
-a.resource-link {
+.resource-link {
   color: ${colors.primary};
   opacity: 0.75;
   font-size: 0.9rem;
   transition: all 0.2s ease-in-out;
+  text-decoration: underline;
+  cursor: pointer;
 }
 .resource-title {
   font-weight: bold;
@@ -214,10 +216,12 @@ const AdditionalResources = (props: { url?: string }): JSX.Element => {
       {
         resources.map((resource, index) => {
           return (
-            <li>
-              <a className="resource-wrap" href={makeLink(resource, props.url)}>
+            <li key={index}>
+              <a className="resource-wrap" target="_blank" rel="noreferrer" href={makeLink(resource, props.url)}>
                 <p className="resource-title">{resource.title}</p>
-                <a className="resource-link" href={resource.link} target="_blank" rel="noreferrer">{new URL(resource.link).hostname}</a>
+                <span className="resource-link" onClick={()=> window.open(resource.link, '_blank')} title={`Open: ${resource.link}`}>
+                  {new URL(resource.link).hostname}
+                </span>
                 <div className="resource-lower">
                   <img src={resource.icon} alt="" />
                   <div className="resource-details">

src/components/misc/ProgressBar.tsx

@@ -215,6 +215,8 @@ const jobNames = [
   'trace-route',
   'firewall',
   'http-security',
+  'rank',
+  'archives',
 ] as const;
 
 export const initialJobs = jobNames.map((job: string) => {