Merge pull request #133 from buggregator/issue/#58-update-components-…

…to-composition-api

Issue/#58 update components to composition api

.storybook/preview.ts

@@ -1,7 +1,7 @@
 import {createPinia} from 'pinia';
 import { setup } from '@storybook/vue3';
-import "../assets/index.css";
-import "../assets/vendor";
+import "../src/assets/index.css";
+import "../src/assets/vendor";
 import "./stories.css"
 import SfdumpWrap from "../src/shared/lib/vendor/dumper";
 import 'tailwindcss/tailwind.css'

app.vue

@@ -5,6 +5,6 @@
 </template>
 
 <script lang="ts" setup>
-import "./assets/index.css";
-import "./assets/vendor";
+import "./src/assets/index.css";
+import "./src/assets/vendor";
 </script>

error.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import "./assets/tailwind.css";
+import "./src/assets/tailwind.css";
 import "highlight.js/lib/common";
 import { clearError } from "#app";
 

layouts/blank.vue

@@ -4,11 +4,10 @@
   </div>
 </template>
 
-<script lang="ts">
-</script>
+<script lang="ts"></script>
 
 <style lang="scss" scoped>
-@import "assets/mixins";
+@import "src/assets/mixins";
 
 .main-layout {
   @apply flex min-h-screen items-stretch relative;

layouts/default.vue

@@ -1,71 +1,62 @@
-<template>
-  <div class="main-layout">
-    <LayoutSidebar
-      class="main-layout__sidebar"
-      :api-version="apiVersion"
-      :client-version="clientVersion"
-      :profile="profile"
-    />
-
-    <div class="main-layout__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
+<script lang="ts" setup>
 import { storeToRefs } from "pinia";
-import { defineComponent } from "vue";
+import { ref, onMounted } from "vue";
 import { LayoutSidebar } from "~/src/widgets/ui";
 import { useEvents } from "~/src/shared/lib/use-events";
 import { useSettings } from "~/src/shared/lib/use-settings";
 import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
+import { useProfileStore, useSettingsStore } from "~~/src/shared/stores";
 import { version } from "../package.json";
-import {useProfileStore} from "~/stores/profile";
-import { useSettingsStore } from "~/stores/settings";
-
-export default defineComponent({
-  components: {
-    LayoutSidebar,
-  },
 
-  async setup() {
-    SfdumpWrap(window.document);
+useSettingsStore();
+SfdumpWrap(window.document);
+const { profile } = storeToRefs(useProfileStore());
 
-    const settingsStore = useSettingsStore();
-    const profileStore = useProfileStore();
-    const { themeType, isFixedHeader } = storeToRefs(settingsStore);
+const {
+  api: { getVersion },
+} = useSettings();
 
-    const {
-      api: { getVersion },
-    } = useSettings();
+const apiVersion = ref("");
+const clientVersion = ref(
+  !version || version === "0.0.1" ? "@dev" : `v${version}`
+);
 
-    const apiVersion = await getVersion();
+const getApiVersion = async () => {
+  const data = await getVersion();
 
-    const { events } = useEvents();
+  apiVersion.value = String(data).match(/^[0-9.]+.*$/)
+    ? `v${data}`
+    : `@${data}`;
+};
 
-    if (!events?.items?.value?.length) {
-      events.getAll();
-    }
+onMounted(() => {
+  getApiVersion();
 
-    const clientVersion =
-      !version || version === "0.0.1" ? "@dev" : `v${version}`;
+  const { events } = useEvents();
 
-    return {
-      themeType,
-      isFixedHeader,
-      apiVersion: String(apiVersion).match(/^[0-9.]+.*$/)
-        ? `v${apiVersion}`
-        : `@${apiVersion}`,
-      clientVersion,
-      profile: profileStore.profile,
-    };
-  },
+  if (!events?.items?.value?.length) {
+    events.getAll();
+  }
 });
 </script>
 
+<template>
+  <div class="main-layout">
+    <LayoutSidebar
+      class="main-layout__sidebar"
+      :api-version="apiVersion"
+      :client-version="clientVersion"
+      :profile="profile"
+    />
+
+    <div class="main-layout__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
-@import "assets/mixins";
+@import "src/assets/mixins";
 
 .main-layout {
   @apply flex min-h-screen items-stretch relative;

middleware/auth.global.ts

@@ -1,12 +1,12 @@
-import { useNuxtApp, navigateTo } from "#app"
+import { useNuxtApp, navigateTo, defineNuxtRouteMiddleware } from "#app";
 import { useSettings } from "~/src/shared/lib/use-settings";
-import { useProfileStore } from "~/stores/profile"
+import { useProfileStore } from "~/src/shared/stores/profile"
 
 export default defineNuxtRouteMiddleware(async (to) => {
   const app = useNuxtApp()
 
   if (!app.$appSettings.auth.enabled) {
-    return
+    return undefined
   }
 
   const store = useProfileStore()
@@ -16,7 +16,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
     const {api: {getProfile}} = useSettings();
     const profile = await getProfile();
     store.setProfile(profile)
-    return
+    return undefined
   }
 
   if (to.name !== 'login' && !store.isAuthenticated) {
@@ -27,4 +27,6 @@ export default defineNuxtRouteMiddleware(async (to) => {
     store.setToken(to.query.token)
     return navigateTo('/')
   }
+
+  return undefined
 })

nuxt.config.ts

@@ -30,7 +30,7 @@ export default defineNuxtConfig({
     '~/plugins/auth',
   ],
   dir: {
-    static: 'static',
+    static: 'src/static',
   },
   imports: {
     dirs: [
@@ -43,7 +43,7 @@ export default defineNuxtConfig({
       autoprefixer: {},
     },
   },
-  css: ["~/assets/index.css"],
+  css: ["~/src/assets/index.css"],
   modules: [
     '@nuxtjs/tailwindcss',
     '@pinia/nuxt',

pages/http-dumps/[id].vue

@@ -1,3 +1,65 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { HttpDumpPage } from "~/src/screens/http-dump";
+import { useFetch, useRoute, useRouter, useHead, useNuxtApp } 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";
+
+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 { $authToken } = useNuxtApp();
+
+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 () => {
+  await useFetch(events.getUrl(eventId), {
+    headers: { "X-Auth-Token": $authToken.token || "" },
+    onRequest() {
+      isLoading.value = true;
+    },
+    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 +69,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,75 +84,8 @@
   </main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import { useFetch, useRoute, useRouter, useNuxtApp } 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 nuxtApp = useNuxtApp();
-    const eventId = route.params.id as EventId;
-
-    const { events } = useEvents();
-
-    const { data: event, pending } = await useFetch(events.getUrl(eventId), {
-      headers: {"X-Auth-Token": nuxtApp.$authToken.token},
-      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";
+@import "src/assets/mixins";
 .http-dumps-event {
   @include layout;
 }

pages/http-dumps/index.vue

@@ -1,28 +1,8 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
+import { PageLayout } from "~/src/widgets/ui/page-layout";
 import { PAGE_TYPES } from "~/src/shared/constants";
-import { useEvents } from "~/src/shared/lib/use-events";
-import PageIndex from "../index.vue"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-
-export default defineComponent({
-  extends: PageIndex,
-  setup() {
-    const { events } = useEvents();
-
-    if (!events?.items?.value?.length) {
-      events.getAll();
-    }
-
-    return {
-      events: events.items,
-      title: "Http dumps",
-      type: PAGE_TYPES.HTTP_DUMP,
-    };
-  },
-  head() {
-    return {
-      title: `Http dumps [${this.events.length}] | Buggregator`,
-    };
-  },
-});
 </script>
+
+<template>
+  <PageLayout :type="PAGE_TYPES.HTTP_DUMP" title="HttpDump" />
+</template>