namae/src/components/cards/providers/Domains.tsx

import fetch from 'cross-fetch';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { MdDomain } from 'react-icons/md';
import useSWR from 'swr';
import { normalize } from '../../../util/text';
import { zones } from '../../../util/zones';
import { Card, DedicatedAvailability, Repeater } from '../core';

export interface DomainrResponse {
  results: {
    domain: string;
    host: string;
    subdomain: string;
    zone: string;
    path: string;
    registerURL: string;
  }[];
}

function fetcher(url: string) {
  return fetch(url, {}).then((res) => res.json());
}

const DomainCard: React.FC<{ query: string }> = ({ query }) => {
  const { t } = useTranslation();

  const normalizedQuery = normalize(query, {
    alphanumeric: false,
    allowUnderscore: false,
  });
  const lowerCase = normalizedQuery.toLowerCase();

  const domainHackSuggestions = zones
    .map((zone) => new RegExp(`${zone}$`).exec(lowerCase.slice(1)))
    .filter((s): s is RegExpExecArray => s !== null)
    .map(
      (m) =>
        lowerCase.substring(0, m.index + 1) +
        '.' +
        lowerCase.substring(m.index + 1)
    );

  const { data } = useSWR<DomainrResponse>(
    `/api/list/domain/${encodeURIComponent(query)}`,
    fetcher
  );

  const cctldSuggestions =
    data?.results
      ?.filter((res) => res.subdomain !== '' && res.path === '')
      ?.map((res) => res.domain) ?? [];

  const names =
    // use Set() to eliminate dupes
    new Set([
      ...['com', 'org', 'app', 'io'].map((tld) => lowerCase + '.' + tld),
      ...domainHackSuggestions,
      ...cctldSuggestions,
    ]);

  const moreNames = new Set([
    `${lowerCase}app.com`,
    `get${lowerCase}.com`,
    ...[
      'co',
      'dev',
      'sh',
      'cloud',
      'tools',
      'build',
      'run',
      'ai',
      'design',
      'directory',
      'guru',
      'ninja',
      'info',
      'biz',
    ].map((tld) => lowerCase + '.' + tld),
  ]);

  for (const name of moreNames) {
    if (names.has(name)) {
      moreNames.delete(name);
    }
  }

  return (
    <Card title={t('providers.domains')}>
      <Repeater items={Array.from(names)} moreItems={Array.from(moreNames)}>
        {(name) => (
          <DedicatedAvailability
            name={name}
            message="Go to Domainr.com"
            service="domain"
            link={`https://domainr.com/?q=${name}`}
            icon={<MdDomain />}
          />
        )}
      </Repeater>
    </Card>
  );
};

export default DomainCard;