import { type MaybeRef, get, useStorage } from '@vueuse/core'; import { defineStore } from 'pinia'; import type { Ref } from 'vue'; import _ from 'lodash'; import type { Tool, ToolCategory, ToolWithCategory } from './tools.types'; import { toolsWithCategory } from './index'; export const useToolStore = defineStore('tools', () => { const favoriteToolsName = useStorage('favoriteToolsName', []) as Ref; const { t } = useI18n(); const tools = computed(() => toolsWithCategory.map((tool) => { const toolI18nKey = tool.path.replace(/\//g, ''); return ({ ...tool, name: t(`tools.${toolI18nKey}.title`, tool.name), description: t(`tools.${toolI18nKey}.description`, tool.description), category: t(`tools.categories.${tool.category.toLowerCase()}`, tool.category), }); })); const toolsByCategory = computed(() => { return _.chain(tools.value) .groupBy('category') .map((components, name) => ({ name, components, })) .value(); }); const favoriteTools = computed(() => { return favoriteToolsName.value .map(favoriteName => tools.value.find(({ name }) => name === favoriteName)) .filter(Boolean) as ToolWithCategory[]; // cast because .filter(Boolean) does not remove undefined from type }); return { tools, favoriteTools, toolsByCategory, newTools: computed(() => tools.value.filter(({ isNew }) => isNew)), addToolToFavorites({ tool }: { tool: MaybeRef }) { favoriteToolsName.value.push(get(tool).name); }, removeToolFromFavorites({ tool }: { tool: MaybeRef }) { favoriteToolsName.value = favoriteToolsName.value.filter(name => get(tool).name !== name); }, isToolFavorite({ tool }: { tool: MaybeRef }) { return favoriteToolsName.value.includes(get(tool).name); }, }; });