feat: let's goooo

src/App.vue

@@ -1,22 +1,31 @@
 <script setup lang="ts">
-import { ref, onMounted, onUpdated, nextTick, onBeforeMount } from "vue";
-import { createIcons, icons } from "lucide";
+import { ref, onMounted, onBeforeMount, watch } from "vue";
 import { WhoIs } from "./lib/whois";
 import { DomainFactory } from "./lib/factory";
 
+enum State {
+  Loading,
+  Ready,
+  Generating,
+  Fetching,
+  Error,
+}
+
+function getLang() {
+  return document.location.hash === "#french" ? "french" : "english";
+}
+
 const visible = ref<boolean>(false);
 const whois = ref<WhoIs>(new WhoIs());
 const factory = ref<DomainFactory>(new DomainFactory());
 const domain = ref<string | null>(null);
-const domainAvailable = ref<boolean | null>(null);
-const lang = ref<string>("english");
-const loading = ref<boolean>(true);
-const fetching = ref<boolean>(false);
-const error = ref<string | null>(null);
+const domainAvailable = ref<boolean>(false);
+const lang = ref<string>(getLang());
+const state = ref<State>(State.Loading);
 
 function newDomain() {
   if (!factory.value.error) {
-    fetching.value = true;
+    state.value = State.Generating;
     factory.value
       .next(lang.value)
       .then((value) => {
@@ -24,24 +33,31 @@ function newDomain() {
         checkAvailability();
       })
       .catch((err: unknown) => {
+        state.value = State.Error;
         throw err;
       });
   }
 }
 
 function checkAvailability() {
-  domainAvailable.value = null;
   if (!whois.value.error && domain.value) {
+    const promiseDomain = domain.value;
+    state.value = State.Fetching;
     whois.value
-      .isDomainAvailable(domain.value)
+      .isDomainAvailable(promiseDomain)
       .then((available) => {
+        if (domain.value !== promiseDomain) {
+          return; // domain changed
+        }
         domainAvailable.value = available;
-        fetching.value = false;
         if (!available) {
           newDomain();
+        } else {
+          state.value = State.Ready;
         }
       })
       .catch((err: unknown) => {
+        state.value = State.Error;
         throw err;
       });
   }
@@ -49,48 +65,101 @@ function checkAvailability() {
 
 onBeforeMount(async () => {
   await whois.value.init();
-  await factory.value.init();
+  await factory.value.init(whois.value);
   newDomain();
-  loading.value = false;
+  state.value = State.Ready;
 });
 onMounted(() => {
   setTimeout(() => {
     visible.value = true;
   });
 });
-onUpdated(async () => {
-  await nextTick();
-  createIcons({
-    icons,
-    nameAttr: "icon",
-    attrs: {
-      width: "1.1em",
-      height: "1.1em",
-    },
-  });
-});
+watch(
+  () => document.location.hash,
+  () => {
+    const newLang = getLang();
+    if (newLang !== lang.value) {
+      lang.value = newLang;
+      newDomain();
+    }
+  },
+);
 </script>
 
 <template>
-  <main :style="{ display: visible ? 'inherit' : 'none' }">
-    <h1>
-      <span v-show="fetching || loading"><i icon="cog"></i></span>
-      {{ domain }}
-      <span v-show="!loading"
-        >({{
-          domainAvailable === null
-            ? "?"
-            : domainAvailable
-              ? "available"
-              : "unavailable"
-        }})</span
-      >
-    </h1>
-    <button v-show="!loading && !fetching" @click="newDomain">
-      New domain
-    </button>
-    <span v-if="error">Error: {{ error }}</span>
-  </main>
+  <div :style="{ display: visible ? 'inherit' : 'none' }">
+    <div class="card bg-base-100 w-xl max-w-xl shrink-0 shadow-2xl">
+      <div class="card-body">
+        <h1 class="text-5xl font-bold font-doto">
+          <span
+            v-if="state !== State.Loading && domain"
+            class="inline-block me-2"
+          >
+            <div v-if="state === State.Fetching" class="status status-xl"></div>
+            <div
+              v-else-if="domainAvailable"
+              class="inline-grid *:[grid-area:1/1]"
+            >
+              <div class="status status-xl status-success animate-ping"></div>
+              <div class="status status-xl status-success"></div>
+            </div>
+            <div v-else class="inline-grid *:[grid-area:1/1]">
+              <div class="status status-xl status-error animate-ping"></div>
+              <div class="status status-xl status-error"></div>
+            </div>
+          </span>
+          <span
+            v-if="!domain"
+            class="loading loading-spinner loading-xl"
+          ></span>
+          <span v-else>{{ domain }}</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 disponible !</span>
+          <span v-else>This domain seems available!</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>
+    </div>
+  </div>
 </template>
 
 <style scoped>