cool-domain-web/src/components/PageRandom.vue

<script setup lang="ts">
import { ref, onBeforeMount, watch } from "vue";
import { isDomainAvailable } from "@/lib/whois";
import type { DomainFactory } from "@/lib/factory";
import CoolDomain from "./CoolDomain.vue";

enum State {
  Loading,
  Ready,
  Generating,
  Fetching,
  Error,
}

const props = defineProps<{ lang: string; factory: DomainFactory }>();

const domain = ref<string | null>(null);
const domainAvailable = ref<boolean>(false);
const state = ref<State>(State.Loading);

function newDomain() {
  if (!props.factory.error) {
    state.value = State.Generating;
    props.factory
      .next(props.lang)
      .then((value: string) => {
        domain.value = value;
        checkAvailability();
      })
      .catch((err: unknown) => {
        state.value = State.Error;
        throw err;
      });
  }
}

function checkAvailability() {
  if (domain.value) {
    const promiseDomain = domain.value;
    state.value = State.Fetching;
    isDomainAvailable(promiseDomain)
      .then((available: boolean) => {
        if (domain.value !== promiseDomain) {
          return; // domain changed
        }
        domainAvailable.value = available;
        if (!available) {
          newDomain();
        } else {
          state.value = State.Ready;
        }
      })
      .catch((err: unknown) => {
        state.value = State.Error;
        throw err;
      });
  }
}

function getTextClass() {
  if (!domain.value || domain.value.length < 15) {
    return "text-5xl";
  }
  if (domain.value.length < 20) {
    return "text-4xl";
  }
  if (domain.value.length < 25) {
    return "text-3xl";
  }
  if (domain.value.length < 30) {
    return "text-2xl";
  }
  return "text-xl";
}

onBeforeMount(() => {
  newDomain();
});
watch(() => props.lang, newDomain);
</script>

<template>
  <div>
    <h1 class="font-bold" :class="getTextClass()">
      <span v-if="!domain" class="loading loading-spinner loading-xl"></span>
      <span v-else
        ><CoolDomain
          :domain="domain"
          :available="domainAvailable"
          :searching="state === State.Fetching"
          size="xl"
      /></span>
    </h1>
    <p v-if="state === State.Loading" class="py-6">
      <span v-if="lang === 'french'"
        >Chargement de la Cool Domain Factory™</span
      >
      <span v-else>Loading the Cool Domain Factory™</span>
      <span class="loading loading-dots loading-xs"></span>
    </p>
    <p v-else-if="state === State.Generating" class="py-6">
      <span v-if="lang === 'french'">Création d'un domaine cool</span>
      <span v-else>Generating a new cool domain</span>
      <span class="loading loading-dots loading-xs"></span>
    </p>
    <p v-else-if="state === State.Fetching" class="py-6">
      <span v-if="lang === 'french'">Vérification de la disponibilité</span>
      <span v-else>Checking domain availability</span>
      <span class="loading loading-dots loading-xs"></span>
    </p>
    <div v-else-if="state === State.Ready && domainAvailable" class="py-6">
      <span v-if="lang === 'french'"
        >Ce domaine semble
        <a
          :href="`https://tld-list.com/fr/tld/${domain?.split('.')[1]}`"
          target="_blank"
          class="underline"
          >disponible</a
        >
        !</span
      >
      <span v-else
        >This domain seems
        <a
          :href="`https://tld-list.com/tld/${domain?.split('.')[1]}`"
          target="_blank"
          class="underline"
          >available</a
        >!</span
      >
    </div>
    <div v-else-if="state === State.Ready && !domainAvailable" class="py-6">
      <span v-if="lang === 'french'">Ce domaine n'est pas disponible.</span>
      <span v-else>This domain is not available.</span>
    </div>
    <div v-else-if="state === State.Error" class="py-6">
      <span v-if="lang === 'french'"
        >Une erreur est survenue, merci de recharger la page.</span
      >
      <span v-else>An error has occured, please reload the page.</span>
    </div>
    <button
      :disabled="
        state === State.Loading ||
        state === State.Generating ||
        state === State.Error
      "
      class="btn btn-primary"
      @click="newDomain"
    >
      <span v-if="lang === 'french'">Nouveau domaine</span>
      <span v-else>New domain</span>
    </button>
  </div>
</template>