Merge pull request #147 from buggregator/bugfix/update-types

Bugfix/update types

Author: butschster

.eslintrc.json

@@ -19,8 +19,7 @@
     "package.json",
     "postcss.config.js",
     "tailwind.config.js",
-    "src/shared/lib/vendor/",
-    "src/.eslintrc.json"
+    "src/shared/lib/vendor/"
   ],
   "parserOptions": {
     "project": "./tsconfig.json",

nuxt.config.ts

@@ -32,11 +32,6 @@ export default defineNuxtConfig({
   dir: {
     static: 'src/static',
   },
-  imports: {
-    dirs: [
-      'composables/**'
-    ]
-  },
   postcss: {
     plugins: {
       tailwindcss: {},

pages/smtp/[id].vue

@@ -21,7 +21,7 @@ useHead({
 });
 
 const { events } = useEvents();
-const { smtp } = useSmtp();
+const { getAttachments } = useSmtp();
 const isLoading = ref(false);
 const serverEvent = ref<Event | null>(null);
 const serverAttachments = ref<Attachment[]>([]);
@@ -61,10 +61,9 @@ const getEvent = async () => {
     },
   });
 
-  await smtp.getAttachments(eventId)
-    .then((attachments: Attachment[]) => {
-      serverAttachments.value = attachments;
-    });
+  await getAttachments(eventId).then((_attachments: Attachment[]) => {
+    serverAttachments.value = _attachments;
+  });
 };
 
 onMounted(getEvent);
@@ -89,10 +88,11 @@ onMounted(getEvent);
     </div>
 
     <div class="smtp-event__body">
-      <SmtpPage v-if="event"
-                :event="event"
-                :attachments="attachments"
-                :html-source="html"
+      <SmtpPage
+        v-if="event"
+        :event="event"
+        :attachments="attachments"
+        :html-source="html"
       />
     </div>
   </main>

src/entities/smtp/lib/use-smtp.ts

@@ -1,16 +1,18 @@
-import type { ServerEvent, NormalizedEvent } from '~/src/shared/types';
-import type { SMTP } from "../types";
+import { useSmtpRequests } from "~/src/shared/lib/io";
+import type { ServerEvent, NormalizedEvent, EventId  } from '~/src/shared/types';
+import type { SMTP, Attachment } from "../types";
 import { normalizeSmtpEvent } from "./normalize-smtp-event";
-import { type TUseSmtpApi, useSmtpApi } from "~/src/shared/lib/use-smtp";
 
 type TUseSmtp = () => {
   normalizeSmtpEvent: (event: ServerEvent<SMTP>) => NormalizedEvent<SMTP>
-  smtp: TUseSmtpApi
+  getAttachments: (id: EventId) => Promise<Attachment[]>
 }
 
 export const useSmtp: TUseSmtp = () => {
+  const { getAttachments } = useSmtpRequests();
+
   return {
     normalizeSmtpEvent,
-    smtp: useSmtpApi()
+    getAttachments
   }
 }

src/entities/smtp/types.ts

@@ -1,4 +1,4 @@
-import type { Attachment } from '~/src/shared/types';
+import type { Attachment, Uuid } from '~/src/shared/types';
 
 export interface SMTPUser {
   name: string,
@@ -18,3 +18,11 @@ export interface SMTP {
   raw: string,
   attachments?: Record<string, Attachment> | Attachment[]
 }
+
+export interface SMTPAttachment {
+  uuid: Uuid,
+  name: string,
+  path: string,
+  size: number,
+  mime: string,
+}

src/entities/var-dump/mocks/index.ts

@@ -1,11 +1,11 @@
 import varDumpArrayMock from './var-dump-array.json'
+import varCodeMock from './var-dump-code-hightlight.json'
 import varDumpFalseMock from './var-dump-false.json'
 import varDumpNumberMock from './var-dump-number.json'
 import varDumpObjectMock from './var-dump-object.json'
 import varDumpEmptyStringMock from './var-dump-string-empty.json'
 import varDumpStringMock from './var-dump-string.json'
 import varDumpTrueMock from './var-dump-true.json'
-import varCodeMock from './var-dump-code-hightlight.json'
 
 export {
   varDumpArrayMock,

src/screens/smtp/ui/smtp-page/smtp-page.vue

@@ -2,8 +2,8 @@
 import moment from "moment";
 import { computed, ref } from "vue";
 import { Tab, Tabs } from "vue3-tabs-component";
-import type { SMTP } from "~/src/entities/smtp/types";
-import type { NormalizedEvent, Attachment } from "~/src/shared/types";
+import type { SMTP, Attachment } from "~/src/entities/smtp/types";
+import type { NormalizedEvent } from "~/src/shared/types";
 import {
   TableBase,
   TableBaseRow,
@@ -20,7 +20,7 @@ type Props = {
 };
 
 const props = withDefaults(defineProps<Props>(), {
-  attachments: [],
+  attachments: () => [],
 });
 
 const htmlSource = ref(props.htmlSource || props.event.payload.html);
@@ -105,7 +105,7 @@ const date = computed(() =>
             suffix="<span class='smtp-page__body-tab-badge'>HTML</span>"
           >
             <SmtpPagePreview device="tablet">
-              <div v-html="htmlSource"/>
+              <div v-html="htmlSource" />
             </SmtpPagePreview>
           </Tab>
           <Tab v-if="isHtml" name="HTML">
@@ -128,18 +128,18 @@ const date = computed(() =>
           >
             <section class="mb-5">
               <div class="flex gap-x-3">
-                <FileAttachment
-                  v-for="a in attachments"
-                  :key="a.uuid"
-                  :event-id="event.id"
-                  :event="event"
-                  :attachment="a"
-                />
+                <template v-for="a in attachments" :key="a.uuid">
+                  <FileAttachment
+                    :event-id="event.id"
+                    :event="event"
+                    :attachment="a"
+                  />
+                </template>
               </div>
             </section>
           </Tab>
           <Tab name="Raw">
-            <CodeSnippet language="html" :code="event.payload.raw"/>
+            <CodeSnippet language="html" :code="event.payload.raw" />
           </Tab>
           <Tab name="Tech Info">
             <section>
@@ -152,22 +152,22 @@ const date = computed(() =>
                   {{ event.payload.subject }}
                 </TableBaseRow>
                 <TableBaseRow title="From">
-                  <SmtpPageAddresses :addresses="event.payload.from"/>
+                  <SmtpPageAddresses :addresses="event.payload.from" />
                 </TableBaseRow>
                 <TableBaseRow title="To">
-                  <SmtpPageAddresses :addresses="event.payload.to"/>
+                  <SmtpPageAddresses :addresses="event.payload.to" />
                 </TableBaseRow>
                 <TableBaseRow v-if="event.payload.cc.length" title="Cc">
-                  <SmtpPageAddresses :addresses="event.payload.cc"/>
+                  <SmtpPageAddresses :addresses="event.payload.cc" />
                 </TableBaseRow>
                 <TableBaseRow v-if="event.payload.bcc.length" title="Bcc">
-                  <SmtpPageAddresses :addresses="event.payload.bcc"/>
+                  <SmtpPageAddresses :addresses="event.payload.bcc" />
                 </TableBaseRow>
                 <TableBaseRow
                   v-if="event.payload.reply_to.length"
                   title="Reply to"
                 >
-                  <SmtpPageAddresses :addresses="event.payload.reply_to"/>
+                  <SmtpPageAddresses :addresses="event.payload.reply_to" />
                 </TableBaseRow>
               </TableBase>
             </section>

src/shared/lib/io/use-smtp-requests.ts

@@ -1,5 +1,6 @@
-import { Attachment, EventId } from "../../types";
 import { type NuxtApp, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import type { SMTPAttachment } from "~/src/entities/smtp/types";
+import type { EventId, Attachment } from "../../types";
 import { REST_API_URL } from "./constants";
 
 type TUseSmtpRequests = () => {
@@ -9,7 +10,6 @@ type TUseSmtpRequests = () => {
 // TODO: add 403 response handling
 
 export const useSmtpRequests: TUseSmtpRequests = () => {
-
   const app: NuxtApp = useNuxtApp()
   const { token } = app.$authToken ?? { token: null }
   const headers = { "X-Auth-Token": token || '' }
@@ -20,7 +20,13 @@ export const useSmtpRequests: TUseSmtpRequests = () => {
     .then((response) => response.json())
     .then((response) => {
       if (response?.data) {
-        return response.data as Attachment[]
+        return (response.data as SMTPAttachment[]).map((attachment) => ({
+          id: attachment.uuid,
+          name: attachment.name,
+          size: attachment.size,
+          mime: attachment.mime,
+          uri: attachment.path
+        }))
       }
 
       if (response?.code === 403) {
@@ -32,7 +38,6 @@ export const useSmtpRequests: TUseSmtpRequests = () => {
 
       return [];
     })
-    .then((attachments: Attachment[]) => attachments)
 
   return {
     getAttachmentsRestUrl,