import { type MaybeRef, get, useStorage } from '@vueuse/core'; import { defineStore } from 'pinia'; import type { Ref } from 'vue'; import type { Tool, ToolWithCategory } from './tools.types'; import { toolsWithCategory } from './index'; export const useToolStore = defineStore('tools', { state: () => ({ favoriteToolsName: useStorage('favoriteToolsName', []) as Ref, }), getters: { favoriteTools(state) { return state.favoriteToolsName .map(favoriteName => toolsWithCategory.find(({ name }) => name === favoriteName)) .filter(Boolean) as ToolWithCategory[]; // cast because .filter(Boolean) does not remove undefined from type }, notFavoriteTools(state): ToolWithCategory[] { return toolsWithCategory.filter(tool => !state.favoriteToolsName.includes(tool.name)); }, tools(): ToolWithCategory[] { return toolsWithCategory; }, newTools(): ToolWithCategory[] { return this.tools.filter(({ isNew }) => isNew); }, }, actions: { addToolToFavorites({ tool }: { tool: MaybeRef }) { this.favoriteToolsName.push(get(tool).name); }, removeToolFromFavorites({ tool }: { tool: MaybeRef }) { this.favoriteToolsName = this.favoriteToolsName.filter(name => get(tool).name !== name); }, isToolFavorite({ tool }: { tool: MaybeRef }) { return this.favoriteToolsName.includes(get(tool).name); }, }, });