Merge pull request #221 from ninoseki/introduce-zod

refactor: introduce Zod

frontend/src/api.ts

@@ -1,30 +1,30 @@
 import axios from 'axios'
 
-import type { Response, Status } from '@/types'
+import { ResponseSchema, type ResponseType, StatusSchema, type StatusType } from '@/schemas'
 
 const client = axios.create()
 
 export const API = {
- async analyze(file: File): Promise<Response> {
+ async analyze(file: File): Promise<ResponseType> {
  const formData = new FormData()
  formData.append('file', file)
- const res = await client.post<Response>('/api/analyze/file', formData, {
+ const res = await client.post('/api/analyze/file', formData, {
  headers: {
  'Content-Type': 'multipart/form-data'
  }
  })
- return res.data
+ return ResponseSchema.parse(res.data)
  },
- async lookup(id: string): Promise<Response> {
- const res = await client.get<Response>(`/api/lookup/${id}`)
- return res.data
+ async lookup(id: string): Promise<ResponseType> {
+ const res = await client.get(`/api/lookup/${id}`)
+ return ResponseSchema.parse(res.data)
  },
  async getCacheKeys(): Promise<string[]> {
  const res = await client.get<string[]>(`/api/cache/`)
  return res.data
  },
- async getStatus(): Promise<Status> {
- const res = await client.get<Status>(`/api/status/`)
- return res.data
+ async getStatus(): Promise<StatusType> {
+ const res = await client.get(`/api/status/`)
+ return StatusSchema.parse(res.data)
  }
 }

frontend/src/components/Cache.vue

@@ -1,7 +1,7 @@
 <template>
  <div class="box">
  <h2 class="is-size-4 has-text-weight-bold middle">Cache</h2>
- <Loading v-if="getCacheKeysTask.isRunning"></Loading>
+ <Loading v-if="getCacheKeysTask.isRunning" />
  <ErrorMessage :error="getCacheKeysTask.last?.error" v-if="getCacheKeysTask.isError" />
  <div class="block" v-if="getCacheKeysTask.last?.value && !getCacheKeysTask.last.isRunning">
  <div class="buttons" v-if="getCacheKeysTask.last.value.length > 0">

frontend/src/components/Eml.vue

@@ -10,13 +10,13 @@ import { defineComponent, type PropType } from 'vue'
 import Attachments from '@/components/attachments/Attachments.vue'
 import Bodies from '@/components/bodies/Bodies.vue'
 import Headers from '@/components/headers/Headers.vue'
-import type { Eml } from '@/types'
+import type { EmlType } from '@/schemas'
 
 export default defineComponent({
  name: 'EmlComponent',
  props: {
  eml: {
- type: Object as PropType<Eml>,
+ type: Object as PropType<EmlType>,
  required: true
  }
  },

frontend/src/components/ErrorMessage.vue

@@ -5,7 +5,7 @@
  <div v-if="typeof data.detail === 'string'">
  {{ data.detail }}
  </div>
- <VueJsonPretty :data="data.detail" v-else></VueJsonPretty>
+ <VueJsonPretty :data="data.detail" v-else />
  </div>
  <p v-else>{{ error }}</p>
  </div>
@@ -18,7 +18,7 @@ import { AxiosError } from 'axios'
 import { computed, defineComponent } from 'vue'
 import VueJsonPretty from 'vue-json-pretty'
 
-import type { ErrorData } from '@/types'
+import type { ErrorDataType } from '@/schemas'
 
 export default defineComponent({
  name: 'ErrorItem',
@@ -37,9 +37,9 @@ export default defineComponent({
  },
  emits: ['dispose'],
  setup(props, context) {
- const data = computed<ErrorData | undefined>(() => {
+ const data = computed<ErrorDataType | undefined>(() => {
  if (props.error.response) {
- return props.error.response?.data as ErrorData
+ return props.error.response?.data as ErrorDataType
  }
  return undefined
  })

frontend/src/components/IndicatorButton.vue

@@ -37,7 +37,7 @@ import truncate from 'just-truncate'
 import { computed, defineComponent } from 'vue'
 
 import { Links } from '@/links'
-import type { IndicatorType } from '@/types'
+import type { IndicatorType } from '@/schemas'
 import { getIndicatorType } from '@/utils'
 
 export default defineComponent({

frontend/src/components/Lookup.vue

@@ -1,7 +1,7 @@
 <template>
- <Loading v-if="lookupTask.isRunning"></Loading>
+ <Loading v-if="lookupTask.isRunning" />
  <ErrorMessage :error="lookupTask.last?.error" v-if="lookupTask.isError" />
- <ResponseComponent :response="lookupTask.last.value" v-if="lookupTask.last?.value" />
+ <Response :response="lookupTask.last.value" v-if="lookupTask.last?.value" />
 </template>
 
 <script lang="ts">
@@ -11,8 +11,8 @@ import { useAsyncTask } from 'vue-concurrency'
 import { API } from '@/api'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import Loading from '@/components/Loading.vue'
-import ResponseComponent from '@/components/Response.vue'
-import type { Response } from '@/types'
+import Response from '@/components/Response.vue'
+import type { ResponseType } from '@/schemas'
 
 export default defineComponent({
  name: 'LookupItem',
@@ -23,12 +23,12 @@ export default defineComponent({
  }
  },
  components: {
- ResponseComponent,
+ Response,
  Loading,
  ErrorMessage
  },
  setup(props) {
- const lookupTask = useAsyncTask<Response, []>(async () => {
+ const lookupTask = useAsyncTask<ResponseType, []>(async () => {
  return await API.lookup(props.id)
  })
 

frontend/src/components/Navbar.vue

@@ -16,7 +16,7 @@
  </div>
  <div class="navbar-end">
  <div class="navbar-item">
- <StatusTags :status="status"></StatusTags>
+ <StatusTags :status="status" />
  </div>
  </div>
  </div>

frontend/src/components/Response.vue

@@ -20,13 +20,13 @@ import { defineComponent, type PropType } from 'vue'
 
 import Eml from '@/components/Eml.vue'
 import Verdicts from '@/components/verdicts/Verdicts.vue'
-import type { Response } from '@/types'
+import type { ResponseType } from '@/schemas'
 
 export default defineComponent({
  name: 'ResponseComponent',
  props: {
  response: {
- type: Object as PropType<Response>,
+ type: Object as PropType<ResponseType>,
  required: true
  }
  },

frontend/src/components/StatusTags.vue

@@ -11,13 +11,13 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue'
 
-import type { Status } from '@/types'
+import type { StatusType } from '@/schemas'
 
 export default defineComponent({
  name: 'StatusTags',
  props: {
  status: {
- type: Object as PropType<Status>,
+ type: Object as PropType<StatusType>,
  required: true
  }
  },

frontend/src/components/Upload.vue

@@ -49,28 +49,27 @@
  </div>
  <Loading v-if="analyzeTask.isRunning"></Loading>
  <ErrorMessage :error="analyzeTask.last?.error" v-if="analyzeTask.isError" />
- <ResponseComponent
+ <Response
  :response="analyzeTask.last.value"
  v-if="analyzeTask.last?.value && !analyzeTask.isRunning"
  />
 </template>
 
 <script lang="ts">
-import { storeToRefs } from 'pinia'
-import { computed, defineComponent, ref, toRef, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { useAsyncTask } from 'vue-concurrency'
 
 import { API } from '@/api'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import Loading from '@/components/Loading.vue'
-import ResponseComponent from '@/components/Response.vue'
+import Response from '@/components/Response.vue'
+import type { ResponseType } from '@/schemas'
 import { useStatusStore } from '@/store'
-import type { Response } from '@/types'
 
 export default defineComponent({
  name: 'UploadItem',
  components: {
- ResponseComponent,
+ Response,
  ErrorMessage,
  Loading
  },
@@ -84,7 +83,7 @@ export default defineComponent({
  return store.$state
  })
 
- const analyzeTask = useAsyncTask<Response, [File]>(async (_signal, file: File) => {
+ const analyzeTask = useAsyncTask<ResponseType, [File]>(async (_signal, file: File) => {
  return await API.analyze(file)
  })
 

frontend/src/components/attachments/Attachment.vue

@@ -18,7 +18,7 @@
  <tr>
  <th>SHA256</th>
  <td>
- <IndicatorButton :value="attachment.hash.sha256"></IndicatorButton>
+ <IndicatorButton :value="attachment.hash.sha256" />
  </td>
  </tr>
  </tbody>
@@ -67,15 +67,15 @@ import AttachmentSubmissionButton from '@/components/attachments/AttachmentSubmi
 import AttachmentSubmissionNotification from '@/components/attachments/AttachmentSubmissionNotification.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import IndicatorButton from '@/components/IndicatorButton.vue'
+import type { AttachmentType } from '@/schemas'
 import { useStatusStore } from '@/store'
 import { InQuest, VirusTotal } from '@/submitters'
-import type { Attachment } from '@/types'
 
 export default defineComponent({
  name: 'AttachmentComponent',
  props: {
  attachment: {
- type: Object as PropType<Attachment>,
+ type: Object as PropType<AttachmentType>,
  required: true
  },
  index: {

frontend/src/components/attachments/AttachmentDownloadButton.vue

@@ -11,14 +11,14 @@
 import fileDownload from 'js-file-download'
 import { defineComponent, type PropType } from 'vue'
 
-import type { Attachment } from '@/types'
+import type { AttachmentType } from '@/schemas'
 import { b64toBlob } from '@/utils'
 
 export default defineComponent({
  name: 'AttachmentDownloadButton',
  props: {
  attachment: {
- type: Object as PropType<Attachment>,
+ type: Object as PropType<AttachmentType>,
  required: true
  }
  },

frontend/src/components/attachments/AttachmentSubmissionButton.vue

@@ -13,23 +13,23 @@ import axios from 'axios'
 import { defineComponent, type PropType } from 'vue'
 import { useAsyncTask } from 'vue-concurrency'
 
-import type { Attachment, SubmissionResult, Submitter } from '@/types'
+import type { AttachmentType, SubmissionResultType, SubmitterType } from '@/schemas'
 
 export default defineComponent({
  name: 'AttachmentSubmissionButton',
  props: {
  attachment: {
- type: Object as PropType<Attachment>,
+ type: Object as PropType<AttachmentType>,
  required: true
  },
  submitter: {
- type: Object as PropType<Submitter>,
+ type: Object as PropType<SubmitterType>,
  required: true
  }
  },
  emits: ['set-reference-url', 'set-error'],
  setup(props, context) {
- const submitTask = useAsyncTask<SubmissionResult, []>(async () => {
+ const submitTask = useAsyncTask<SubmissionResultType, []>(async () => {
  return await props.submitter.submit(props.attachment)
  })
 

frontend/src/components/attachments/Attachments.vue

@@ -1,7 +1,7 @@
 <template>
  <div class="block">
  <h2 class="is-size-4 has-text-weight-bold middle">Attachments</h2>
- <AttachmentComponent
+ <Attachment
  v-for="(attachment, index) in attachments"
  :key="attachment.hash.md5"
  :attachment="attachment"
@@ -13,18 +13,18 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue'
 
-import AttachmentComponent from '@/components/attachments/Attachment.vue'
-import type { Attachment } from '@/types'
+import Attachment from '@/components/attachments/Attachment.vue'
+import type { AttachmentType } from '@/schemas'
 
 export default defineComponent({
  name: 'AttachmentsComponent',
  props: {
  attachments: {
- type: Array as PropType<Attachment[]>,
+ type: Array as PropType<AttachmentType[]>,
  required: true
  }
  },
- components: { AttachmentComponent },
+ components: { Attachment },
  setup() {}
 })
 </script>

frontend/src/components/bodies/Bodies.vue

@@ -9,12 +9,13 @@
 import { defineComponent, type PropType } from 'vue'
 
 import BodyComponent from '@/components/bodies/Body.vue'
-import type { Body } from '@/types'
+import type { BodyType } from '@/schemas'
+
 export default defineComponent({
  name: 'BodiesComponent',
  props: {
  bodies: {
- type: Array as PropType<Body[]>,
+ type: Array as PropType<BodyType[]>,
  required: true
  }
  },