[#58] rework scripts setup for pages

buggregator · Mar 3, 2024 · 3e41306 · 3e41306
1 parent 6543250
commit 3e41306
Show file tree

Hide file tree

Showing 5 changed files with 303 additions and 332 deletions.
diff --git a/pages/http-dumps/[id].vue b/pages/http-dumps/[id].vue
@@ -1,3 +1,62 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { useFetch, useRoute, useRouter, useHead } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { PageHeader } from "~/src/widgets/ui";
+import { useHttpDump } from "~/src/entities/http-dump";
+import type { HttpDump } from "~/src/entities/http-dump/types";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+import { HttpDumpPage } from "~/src/screens/http-dump";
+
+const { normalizeHttpDumpEvent } = useHttpDump();
+
+const { params } = useRoute();
+const router = useRouter();
+const eventId = params.id as EventId;
+
+useHead({
+  title: `Http dumps > ${eventId} | Buggregator`,
+});
+
+const { events } = useEvents();
+
+const isLoading = ref(false);
+const serverEvent = ref<Event | null>(null);
+
+const event = computed(() =>
+  serverEvent.value
+    ? normalizeHttpDumpEvent(
+        serverEvent.value as unknown as ServerEvent<HttpDump>
+      )
+    : null
+);
+
+const onDelete = () => {
+  events.removeById(eventId);
+
+  router.push("/");
+};
+
+const getEvent = async () => {
+  isLoading.value = true;
+
+  await useFetch(events.getUrl(eventId), {
+    onResponse({ response: { _data } }) {
+      serverEvent.value = _data;
+      isLoading.value = false;
+    },
+    onResponseError() {
+      router.push("/404");
+    },
+    onRequestError() {
+      router.push("/404");
+    },
+  });
+};
+
+onMounted(getEvent);
+</script>
+
 <template>
   <main class="http-dumps-event">
     <PageHeader
@@ -7,10 +66,10 @@
     >
       <NuxtLink to="/">Home</NuxtLink>&nbsp;/
       <NuxtLink to="/http-dumps">Http dumps</NuxtLink>&nbsp;/
-      <NuxtLink :disabled="true">{{ event.id }}</NuxtLink>
+      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
     </PageHeader>
 
-    <div v-if="pending && !event" class="http-dumps-event__loading">
+    <div v-if="isLoading && !event" class="http-dumps-event__loading">
       <div></div>
       <div></div>
       <div></div>
@@ -22,71 +81,6 @@
   </main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
-import { useHttpDump } from "~/src/entities/http-dump";
-import type { HttpDump } from "~/src/entities/http-dump/types";
-import { useEvents } from "~/src/shared/lib/use-events";
-import type { EventId, ServerEvent } from "~/src/shared/types";
-import { HttpDumpPage } from "~/src/screens/http-dump";
-
-const { normalizeHttpDumpEvent } = useHttpDump();
-
-export default defineComponent({
-  components: { HttpDumpPage, PageHeader },
-
-  async setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const eventId = route.params.id as EventId;
-
-    const { events } = useEvents();
-
-    const { data: event, pending } = await useFetch(events.getUrl(eventId), {
-      onResponse({ response }) {
-        return response.data;
-      },
-      onResponseError() {
-        router.push("/404");
-      },
-      onRequestError() {
-        router.push("/404");
-      },
-    });
-
-    return {
-      serverEvent: event,
-      pending,
-      eventId,
-      clearEvent: () => events.removeById(eventId),
-    };
-  },
-  head() {
-    return {
-      title: `Http dumps > ${this.eventId} | Buggregator`,
-    };
-  },
-  computed: {
-    event() {
-      return this.serverEvent
-        ? normalizeHttpDumpEvent(
-            this.serverEvent as unknown as ServerEvent<HttpDump>
-          )
-        : null;
-    },
-  },
-  methods: {
-    onDelete() {
-      this.clearEvent();
-
-      this.$router.push("/");
-    },
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 @import "assets/mixins";
 .http-dumps-event {

diff --git a/pages/inspector/[id].vue b/pages/inspector/[id].vue
@@ -1,3 +1,62 @@
+<script lang="ts" setup>
+import { onMounted, computed, ref } from "vue";
+import { useFetch, useHead, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { PageHeader } from "~/src/widgets/ui";
+import { useInspector } from "~/src/entities/inspector";
+import type { Inspector } from "~/src/entities/inspector/types";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+import { InspectorPage } from "~/src/screens/inspector";
+
+const { normalizeInspectorEvent } = useInspector();
+
+const { params } = useRoute();
+const router = useRouter();
+const eventId = params.id as EventId;
+
+useHead({
+  title: `Inspector > ${eventId} | Buggregator`,
+});
+
+const { events } = useEvents();
+
+const isLoading = ref(false);
+const serverEvent = ref<Event | null>(null);
+
+const event = computed(() =>
+  serverEvent.value
+    ? normalizeInspectorEvent(
+        serverEvent.value as unknown as ServerEvent<Inspector>
+      )
+    : null
+);
+
+const onDelete = () => {
+  events.removeById(eventId);
+
+  router.push("/");
+};
+
+const getEvent = async () => {
+  isLoading.value = true;
+
+  await useFetch(events.getUrl(eventId), {
+    onResponse({ response: { _data } }) {
+      serverEvent.value = _data;
+      isLoading.value = false;
+    },
+    onResponseError() {
+      router.push("/404");
+    },
+    onRequestError() {
+      router.push("/404");
+    },
+  });
+};
+
+onMounted(getEvent);
+</script>
+
 <template>
   <main class="inspector-event">
     <PageHeader
@@ -7,10 +66,10 @@
     >
       <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
       <NuxtLink to="/inspector">Inspector</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink :disabled="true">{{ event.id }}</NuxtLink>
+      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
     </PageHeader>
 
-    <div v-if="pending && !event" class="inspector-event__loading">
+    <div v-if="isLoading && !event" class="inspector-event__loading">
       <div></div>
       <div></div>
       <div></div>
@@ -22,71 +81,6 @@
   </main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
-import { useInspector } from "~/src/entities/inspector";
-import type { Inspector } from "~/src/entities/inspector/types";
-import { useEvents } from "~/src/shared/lib/use-events";
-import type { EventId, ServerEvent } from "~/src/shared/types";
-import { InspectorPage } from "~/src/screens/inspector";
-
-const { normalizeInspectorEvent } = useInspector();
-
-export default defineComponent({
-  components: { InspectorPage, PageHeader },
-
-  async setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const eventId = route.params.id as EventId;
-
-    const { events } = useEvents();
-
-    const { data: event, pending } = await useFetch(events.getUrl(eventId), {
-      onResponse({ response }) {
-        return response.data;
-      },
-      onResponseError() {
-        router.push("/404");
-      },
-      onRequestError() {
-        router.push("/404");
-      },
-    });
-
-    return {
-      serverEvent: event,
-      pending,
-      eventId,
-      clearEvent: () => events.removeById(eventId),
-    };
-  },
-  head() {
-    return {
-      title: `Inspector > ${this.eventId} | Buggregator`,
-    };
-  },
-  computed: {
-    event() {
-      return this.serverEvent
-        ? normalizeInspectorEvent(
-            this.serverEvent as unknown as ServerEvent<Inspector>
-          )
-        : null;
-    },
-  },
-  methods: {
-    onDelete() {
-      this.clearEvent();
-
-      this.$router.push("/");
-    },
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 @import "assets/mixins";
 .inspector-event {