feat: add uniqueness indicator

web/src/components/cards/core.tsx

@@ -1,8 +1,8 @@
 import React, {useState, useEffect, Suspense} from 'react';
 import styled from 'styled-components';
 import useFetch from 'fetch-suspense';
-import {Tooltip} from 'react-tippy';
-import 'react-tippy/dist/tippy.css';
+import Tooltip from 'rc-tooltip';
+import 'rc-tooltip/assets/bootstrap.css';
 import BarLoader from 'react-spinners/BarLoader';
 import {GoInfo} from 'react-icons/go';
 import {IoIosFlash} from 'react-icons/io';
@@ -11,6 +11,7 @@ import {OutboundLink} from 'react-ga';
 
 import {sendError, sendExpandEvent} from '../../util/analytics';
 import {mobile} from '../../util/css';
+import {useStoreActions} from '../../store';
 
 export const COLORS = {
   available: '#6e00ff',
@@ -105,6 +106,7 @@ export const DedicatedAvailability: React.FC<{
   suffix = '',
   icon,
 }) => {
+  const increaseCounter = useStoreActions((actions) => actions.stats.add);
   const response = useFetch(
     `/availability/${service}/${encodeURIComponent(query || name)}`,
   ) as Response;
@@ -113,6 +115,10 @@ export const DedicatedAvailability: React.FC<{
     throw new APIError(`${service}: ${response.error}`);
   }
 
+  useEffect(() => {
+    increaseCounter(response.availability);
+  }, []);
+
   return (
     <Result
       title={name}
@@ -147,6 +153,7 @@ export const ExistentialAvailability: React.FC<{
   suffix = '',
   icon,
 }) => {
+  const increaseCounter = useStoreActions((actions) => actions.stats.add);
   const response = useFetch(target, undefined, {metadata: true});
 
   if (response.status !== 404 && response.status !== 200) {
@@ -155,6 +162,10 @@ export const ExistentialAvailability: React.FC<{
 
   const availability = response.status === 404;
 
+  useEffect(() => {
+    increaseCounter(availability);
+  }, []);
+
   return (
     <Result
       title={name}
@@ -200,13 +211,7 @@ export const Result: React.FC<{
       : COLORS.unavailable;
   return (
     <ResultContainer>
-      <Tooltip
-        title={message}
-        position="bottom"
-        arrow={true}
-        animation="shift"
-        duration="200"
-      >
+      <Tooltip overlay={message} placement="top" trigger={['hover']}>
         <ResultItem color={itemColor}>
           <ResultIcon>{icon}</ResultIcon>
           <ResultName>
@@ -266,13 +271,11 @@ class ErrorBoundary extends React.Component<
       return (
         <ResultContainer>
           <Tooltip
-            title={`${this.state.message}${
+            overlay={`${this.state.message}${
               this.state.eventId ? ` (${this.state.eventId})` : ''
             }`}
-            position="bottom"
-            arrow={true}
-            animation="shift"
-            duration="200"
+            placement="top"
+            trigger={['hover']}
           >
             <ResultItem color={COLORS.error}>
               <ResultIcon>

web/src/components/cards/providers/Cratesio.tsx

@@ -19,6 +19,7 @@ const CratesioCard: React.FC<{query: string}> = ({query}) => {
             query={`crates.io/api/v1/crates/${name}`}
             service="existence"
             link={`https://crates.io/crates/${name}`}
+            message="Go to crates.io"
             icon={<DiRust />}
           />
         )}

web/src/components/cards/providers/Linux.tsx

@@ -19,12 +19,14 @@ const LinuxCard: React.FC<{query: string}> = ({query}) => {
             <DedicatedAvailability
               name={name}
               service="launchpad"
+              message="Go to Launchpad"
               link={`https://launchpad.net/ubuntu/+source/${name}`}
               icon={<DiUbuntu />}
             />
             <DedicatedAvailability
               name={name}
               service="debian"
+              message="Go to debian.org"
               link={`https://packages.debian.org/buster/${name}`}
               icon={<DiDebian />}
             />

web/src/components/cards/providers/Ocaml.tsx

@@ -18,6 +18,7 @@ const OcamlCard: React.FC<{query: string}> = ({query}) => {
             name={name}
             query={`opam.ocaml.org/packages/${name}/`}
             service="existence"
+            message="Go to opam"
             link={`https://opam.ocaml.org/packages/${name}/`}
             icon={<OcamlIcon />}
           />