feat: input and history pages

src/components/PageRandom.vue

@@ -3,6 +3,8 @@ import { ref, onBeforeMount, watch } from "vue";
 import { isDomainAvailable } from "@/lib/whois";
 import type { DomainFactory } from "@/lib/factory";
 import CoolDomain from "./CoolDomain.vue";
+import type { Domain } from "@/types";
+import { useI18n } from "vue-i18n";
 
 enum State {
   Loading,
@@ -12,19 +14,20 @@ enum State {
   Error,
 }
 
-const props = defineProps<{ lang: string; factory: DomainFactory }>();
+const props = defineProps<{ factory: DomainFactory }>();
 
-const domain = ref<string | null>(null);
-const domainAvailable = ref<boolean>(false);
+const domain = ref<Domain | null>(null);
 const state = ref<State>(State.Loading);
 
+const i18n = useI18n();
+
 function newDomain() {
   if (!props.factory.error) {
     state.value = State.Generating;
     props.factory
-      .next(props.lang)
-      .then((value: string) => {
-        domain.value = value;
+      .next(i18n.locale.value)
+      .then((newDomain: Domain) => {
+        domain.value = newDomain;
         checkAvailability();
       })
       .catch((err: unknown) => {
@@ -37,13 +40,13 @@ function newDomain() {
 function checkAvailability() {
   if (domain.value) {
     const promiseDomain = domain.value;
+    domain.value.searching = true;
     state.value = State.Fetching;
-    isDomainAvailable(promiseDomain)
+    isDomainAvailable(domain.value)
       .then((available: boolean) => {
-        if (domain.value !== promiseDomain) {
+        if (domain.value?.name !== promiseDomain.name) {
           return; // domain changed
         }
-        domainAvailable.value = available;
         if (!available) {
           newDomain();
         } else {
@@ -58,86 +61,58 @@ function checkAvailability() {
 }
 
 function getTextClass() {
-  if (!domain.value || domain.value.length < 15) {
+  if (!domain.value || domain.value.name.length < 15) {
     return "text-5xl";
   }
-  if (domain.value.length < 20) {
+  if (domain.value.name.length < 20) {
     return "text-4xl";
   }
-  if (domain.value.length < 25) {
+  if (domain.value.name.length < 25) {
     return "text-3xl";
   }
-  if (domain.value.length < 30) {
+  if (domain.value.name.length < 30) {
     return "text-2xl";
   }
   return "text-xl";
 }
 
-onBeforeMount(() => {
-  newDomain();
-});
-watch(() => props.lang, newDomain);
+onBeforeMount(newDomain);
+watch(i18n.locale, 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>
+      <span v-else><CoolDomain :domain="domain" 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>
+      {{ $t("page_random.state.loading") }}
       <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>
+      {{ $t("page_random.state.generating") }}
       <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>
+      {{ $t("page_random.state.fetching") }}
       <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 v-else-if="state === State.Ready && domain?.available" class="py-6">
+      {{ $t("this_domain") }} {{ $t("seems") }}
+      <a
+        :href="`https://tld-list.com/${i18n.locale}/tld/${domain.name?.split('.')[1]}`"
+        target="_blank"
+        class="underline"
+        >{{ $t("available") }}</a
       >
+      !
     </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 v-else-if="state === State.Ready && !domain?.available" class="py-6">
+      {{ $t("this_domain") }} {{ $t("is_unavailable") }}
     </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>
+      {{ $t("error") }}
     </div>
     <button
       :disabled="
@@ -148,8 +123,7 @@ watch(() => props.lang, newDomain);
       class="btn btn-primary"
       @click="newDomain"
     >
-      <span v-if="lang === 'french'">Nouveau domaine</span>
-      <span v-else>New domain</span>
+      {{ $t("button.new_domain") }}
     </button>
   </div>
 </template>