From ba555590ee51853f42a37441f687f69e88889424 Mon Sep 17 00:00:00 2001 From: Dmitriy Pleshevskiy Date: Wed, 1 Feb 2023 00:09:33 +0300 Subject: [PATCH] refac: define typed symbol for provider --- src/app/contacts/ContactForm/store.ts | 10 ++++------ src/app/contacts/ContactsTable/store.ts | 10 ++++------ src/app/files/FilesTable/store.ts | 10 ++++------ src/app/lists/ListForm/store.ts | 10 ++++------ src/app/lists/ListsSelect/store.ts | 10 ++++------ src/app/lists/ListsTable/store.ts | 10 ++++------ src/pages/audience/AudienceContactsPage.vue | 2 +- src/shared/lib/di.ts | 16 ++++++++-------- 8 files changed, 33 insertions(+), 45 deletions(-) diff --git a/src/app/contacts/ContactForm/store.ts b/src/app/contacts/ContactForm/store.ts index fb591e9..260d753 100644 --- a/src/app/contacts/ContactForm/store.ts +++ b/src/app/contacts/ContactForm/store.ts @@ -1,16 +1,14 @@ import { useLoader } from "@/shared/lib/composables/loader"; -import { validInject } from "@/shared/lib/di"; +import { defineInjectKey, validInject } from "@/shared/lib/di"; import { reactive } from "vue"; import { useContactsStore } from "../store"; import type { ContactFormApiCreateProps, ContactFormApiPort } from "./ports"; -export const CONTACT_FORM_API_PROVIDE_KEY = Symbol("ContactFormApi"); +export const CONTACT_FORM_API_PROVIDE_KEY = + defineInjectKey("ContactFormApi"); export function useContactFormStore() { - const api = validInject( - CONTACT_FORM_API_PROVIDE_KEY, - "ContactFormApiPort" - ); + const api = validInject(CONTACT_FORM_API_PROVIDE_KEY); const contactsStore = useContactsStore(); diff --git a/src/app/contacts/ContactsTable/store.ts b/src/app/contacts/ContactsTable/store.ts index 1576531..d690e8b 100644 --- a/src/app/contacts/ContactsTable/store.ts +++ b/src/app/contacts/ContactsTable/store.ts @@ -1,5 +1,5 @@ import { useLoader } from "@/shared/lib/composables/loader"; -import { validInject } from "@/shared/lib/di"; +import { defineInjectKey, validInject } from "@/shared/lib/di"; import { storeToRefs } from "pinia"; import { reactive } from "vue"; import { useContactsStore } from "../store"; @@ -8,13 +8,11 @@ import type { ContactsTableApiPort, } from "./ports"; -export const CONTACTS_TABLE_API_PROVIDE_KEY = Symbol("ContactsTableApi"); +export const CONTACTS_TABLE_API_PROVIDE_KEY = + defineInjectKey("ContactsTableApi"); export function useContactsTableStore() { - const api = validInject( - CONTACTS_TABLE_API_PROVIDE_KEY, - "ContactsTableApiPort" - ); + const api = validInject(CONTACTS_TABLE_API_PROVIDE_KEY); const contactsStore = useContactsStore(); const { contacts } = storeToRefs(contactsStore); diff --git a/src/app/files/FilesTable/store.ts b/src/app/files/FilesTable/store.ts index bbbfb37..b318ed0 100644 --- a/src/app/files/FilesTable/store.ts +++ b/src/app/files/FilesTable/store.ts @@ -1,17 +1,15 @@ import { useLoader } from "@/shared/lib/composables/loader"; -import { validInject } from "@/shared/lib/di"; +import { defineInjectKey, validInject } from "@/shared/lib/di"; import { storeToRefs } from "pinia"; import { reactive } from "vue"; import { useFilesStore } from "../store"; import type { FilesTableApiPort } from "./ports"; -export const FILES_TABLE_API_PROVIDE_KEY = Symbol("FilesTableApi"); +export const FILES_TABLE_API_PROVIDE_KEY = + defineInjectKey("FilesTableApi"); export function useFilesTableStore() { - const api = validInject( - FILES_TABLE_API_PROVIDE_KEY, - "ContactsTableApiPort" - ); + const api = validInject(FILES_TABLE_API_PROVIDE_KEY); const filesStore = useFilesStore(); const { files } = storeToRefs(filesStore); diff --git a/src/app/lists/ListForm/store.ts b/src/app/lists/ListForm/store.ts index 53065d4..3b9c6e2 100644 --- a/src/app/lists/ListForm/store.ts +++ b/src/app/lists/ListForm/store.ts @@ -1,16 +1,14 @@ import { useLoader } from "@/shared/lib/composables/loader"; -import { validInject } from "@/shared/lib/di"; +import { defineInjectKey, validInject } from "@/shared/lib/di"; import { reactive } from "vue"; import { useListsStore } from "../store"; import type { ListFormApiCreateProps, ListFormApiPort } from "./ports"; -export const LIST_FORM_API_PROVIDE_KEY = Symbol("ListFormApi"); +export const LIST_FORM_API_PROVIDE_KEY = + defineInjectKey("ListFormApi"); export function useListFormStore() { - const api = validInject( - LIST_FORM_API_PROVIDE_KEY, - "ListFormApiPort" - ); + const api = validInject(LIST_FORM_API_PROVIDE_KEY); const listsStore = useListsStore(); diff --git a/src/app/lists/ListsSelect/store.ts b/src/app/lists/ListsSelect/store.ts index 17aff3c..8e2f22f 100644 --- a/src/app/lists/ListsSelect/store.ts +++ b/src/app/lists/ListsSelect/store.ts @@ -1,16 +1,14 @@ import { useLoader } from "@/shared/lib/composables/loader"; -import { validInject } from "@/shared/lib/di"; +import { defineInjectKey, validInject } from "@/shared/lib/di"; import { computed, reactive } from "vue"; import { useListsStore } from "../store"; import type { ListsSelectApiPort } from "./ports"; -export const LISTS_SELECT_API_PROVIDE_KEY = Symbol("ListsTableApi"); +export const LISTS_SELECT_API_PROVIDE_KEY = + defineInjectKey("ListsTableApi"); export function useListsSelectStore() { - const api = validInject( - LISTS_SELECT_API_PROVIDE_KEY, - "ListsSelectApiPort" - ); + const api = validInject(LISTS_SELECT_API_PROVIDE_KEY); const listsStore = useListsStore(); diff --git a/src/app/lists/ListsTable/store.ts b/src/app/lists/ListsTable/store.ts index 15dacfd..12b71fb 100644 --- a/src/app/lists/ListsTable/store.ts +++ b/src/app/lists/ListsTable/store.ts @@ -1,17 +1,15 @@ import { useLoader } from "@/shared/lib/composables/loader"; -import { validInject } from "@/shared/lib/di"; +import { defineInjectKey, validInject } from "@/shared/lib/di"; import { storeToRefs } from "pinia"; import { reactive } from "vue"; import { useListsStore } from "../store"; import type { ListsTableApiPort } from "./ports"; -export const LISTS_TABLE_API_PROVIDE_KEY = Symbol("ListsTableApi"); +export const LISTS_TABLE_API_PROVIDE_KEY = + defineInjectKey("ListsTableApi"); export function useListsTableStore() { - const api = validInject( - LISTS_TABLE_API_PROVIDE_KEY, - "ContactsTableApiPort" - ); + const api = validInject(LISTS_TABLE_API_PROVIDE_KEY); const listsStore = useListsStore(); const { lists } = storeToRefs(listsStore); diff --git a/src/pages/audience/AudienceContactsPage.vue b/src/pages/audience/AudienceContactsPage.vue index c9f4364..4cdd032 100644 --- a/src/pages/audience/AudienceContactsPage.vue +++ b/src/pages/audience/AudienceContactsPage.vue @@ -25,7 +25,7 @@ function openAddContactForm() { const selectedListId = ref(""); watch( () => route.params.listId, - (listId) => { + (listId: string) => { selectedListId.value = listId ?? ""; }, { immediate: true } diff --git a/src/shared/lib/di.ts b/src/shared/lib/di.ts index e9f33b7..4db7185 100644 --- a/src/shared/lib/di.ts +++ b/src/shared/lib/di.ts @@ -1,15 +1,15 @@ -import { inject } from "vue"; +import { inject, type InjectionKey } from "vue"; -export function validInject(key: Symbol, interfaceName?: string): T { - const api = inject(key); +export function defineInjectKey(name: string): InjectionKey { + return Symbol(name); +} + +export function validInject(key: InjectionKey): T { + const api = inject(key); if (api == null) { - let errorMessage = `You have to provide "${key.toString()}"`; - if (interfaceName) { - errorMessage += `, that implement ${interfaceName} interface`; - } + const errorMessage = `You have to provide "${key.toString()}"`; throw new Error(errorMessage); } - // TODO: it would be great if we could check the type for the injected object. return api; }