diff --git a/picker-starter/src/core/index.ts b/picker-starter/src/core/index.ts index b0d42d9..9ffa387 100644 --- a/picker-starter/src/core/index.ts +++ b/picker-starter/src/core/index.ts @@ -1,6 +1,7 @@ export * from './basket/BasketItem' export * from './basket' -export * from './matchItem' +export * from './matchCategories' +export * from './matchSearchTerm' export * from './service' export * from './types' export * from './setup' diff --git a/picker-starter/src/core/matchCategories/index.ts b/picker-starter/src/core/matchCategories/index.ts new file mode 100644 index 0000000..9045cd6 --- /dev/null +++ b/picker-starter/src/core/matchCategories/index.ts @@ -0,0 +1 @@ +export * from './matchCategories' diff --git a/picker-starter/src/core/matchCategories/matchCategories.ts b/picker-starter/src/core/matchCategories/matchCategories.ts new file mode 100644 index 0000000..f70707f --- /dev/null +++ b/picker-starter/src/core/matchCategories/matchCategories.ts @@ -0,0 +1,9 @@ +import { MockItem } from '@/data' + +export const matchCategories = + (categoryNames: string[]) => (items: MockItem) => { + if (categoryNames.length === 0) { + return true + } + return categoryNames.some((categoryName) => items.category === categoryName) + } diff --git a/picker-starter/src/core/matchItem/index.ts b/picker-starter/src/core/matchItem/index.ts deleted file mode 100644 index 9cd0cf0..0000000 --- a/picker-starter/src/core/matchItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './matchItem' diff --git a/picker-starter/src/core/matchSearchTerm/index.ts b/picker-starter/src/core/matchSearchTerm/index.ts new file mode 100644 index 0000000..f03a92a --- /dev/null +++ b/picker-starter/src/core/matchSearchTerm/index.ts @@ -0,0 +1 @@ +export * from './matchSearchTerm' diff --git a/picker-starter/src/core/matchItem/matchItem.test.ts b/picker-starter/src/core/matchSearchTerm/matchSearchTerm.test.ts similarity index 75% rename from picker-starter/src/core/matchItem/matchItem.test.ts rename to picker-starter/src/core/matchSearchTerm/matchSearchTerm.test.ts index 5ec78eb..20449aa 100644 --- a/picker-starter/src/core/matchItem/matchItem.test.ts +++ b/picker-starter/src/core/matchSearchTerm/matchSearchTerm.test.ts @@ -1,4 +1,4 @@ -import { matchItem } from './matchItem' +import { matchSearchTerm } from './matchSearchTerm' import { BasketItem } from '../' const templateItem: BasketItem = { @@ -9,10 +9,10 @@ const templateItem: BasketItem = { name: '', } -describe('matchItem', () => { +describe('matchSearchTerm', () => { it('should search the name', () => { expect( - matchItem('gorilla')({ + matchSearchTerm('gorilla')({ ...templateItem, name: 'gorilla', }), @@ -20,7 +20,7 @@ describe('matchItem', () => { }) it('should search the description', () => { expect( - matchItem('gorilla')({ + matchSearchTerm('gorilla')({ ...templateItem, description: 'gorilla', }), @@ -28,7 +28,7 @@ describe('matchItem', () => { }) it('should be case insensitive', () => { expect( - matchItem('gorilla')({ + matchSearchTerm('gorilla')({ ...templateItem, name: 'Gorilla', }), @@ -36,14 +36,14 @@ describe('matchItem', () => { }) it('should not match', () => { expect( - matchItem('gorilla')({ + matchSearchTerm('gorilla')({ ...templateItem, }), ).toBeFalsy() }) test('that empty strings match all', () => { expect( - matchItem('')({ + matchSearchTerm('')({ ...templateItem, }), ).toBeTruthy() diff --git a/picker-starter/src/core/matchItem/matchItem.ts b/picker-starter/src/core/matchSearchTerm/matchSearchTerm.ts similarity index 94% rename from picker-starter/src/core/matchItem/matchItem.ts rename to picker-starter/src/core/matchSearchTerm/matchSearchTerm.ts index 376571f..1032597 100644 --- a/picker-starter/src/core/matchItem/matchItem.ts +++ b/picker-starter/src/core/matchSearchTerm/matchSearchTerm.ts @@ -8,7 +8,7 @@ const stringContains = (searchTerm: string) => (text: string | undefined) => * @param searchTerm * @returns true if the item contains the text */ -export const matchItem = +export const matchSearchTerm = (searchTerm: string) => (item: BasketItem): boolean => { const containsSearchTerm = stringContains(searchTerm) diff --git a/picker-starter/src/data/categories.ts b/picker-starter/src/data/categories.ts index f477d09..7fdaa86 100644 --- a/picker-starter/src/data/categories.ts +++ b/picker-starter/src/data/categories.ts @@ -1,22 +1,16 @@ export type MockCategory = { name: string - description?: string } -// TODO this should become a tree -export const categoryMockAssets: MockCategory[] = [ +export const categories: MockCategory[] = [ { name: 'Kitchen', - description: - 'Knives, forks, spoons... and everything else that you can think of for your home kitchen!', }, { name: 'Food', - description: 'Yummy things for your tummy!', }, { name: 'Beverages', - description: 'Beeeeeeer', }, { name: 'Electronics', @@ -35,6 +29,5 @@ export const categoryMockAssets: MockCategory[] = [ }, { name: 'Hygiene', - description: 'Take care of yourself', }, ] diff --git a/picker-starter/src/data/items.ts b/picker-starter/src/data/items.ts index 74990cc..ad327a1 100644 --- a/picker-starter/src/data/items.ts +++ b/picker-starter/src/data/items.ts @@ -1,19 +1,5 @@ -import { - ItemQuery, - FilterList, - FilterItem, - FilterOption, - matchItem, - BasketItem, -} from '@/core' -import { - compareName, - capitalizeWord, - getPage, - delayed, - randomDelay, -} from '@/utils' -import { categoryMockAssets } from './categories' +import { BasketItem } from '@/core' +import { compareName, capitalizeWord } from '@/utils' export type TempItem = { id: number @@ -659,56 +645,3 @@ export const items: MockItem[] = tmpAssets } as MockItem }) .sort(compareName) - -export const getItemFilters: FilterList = async () => { - const options: FilterOption[] = categoryMockAssets.map( - (category) => { - return { - label: category.name, - value: category.name, - } - }, - ) - - const response: FilterItem[] = [ - { - type: 'multi', - options: options, - defaultValue: [], - label: 'Categories', - name: 'categoryMulti', - }, - ] - - // It mimics an API call by adding a delay before return the data. - return delayed(randomDelay(), response) -} - -export const queryItems: ItemQuery = async ({ - searchTerm, - page, - perPage, - filterSelection, -}) => { - const matchCategories = (categoryNames: string[]) => (items: MockItem) => { - if (categoryNames.length === 0) { - return true - } - return categoryNames.some((categoryName) => items.category === categoryName) - } - - const allSearchResults = items - .filter(matchCategories(filterSelection['categoryMulti'] as string[])) - .filter(matchItem(searchTerm)) - - const paginatedResults = getPage(allSearchResults, page, perPage) - const response = { - items: paginatedResults, - pageInfo: { - totalCount: allSearchResults.length, - }, - } - - // It mimics an API call by adding a delay before return the data. - return delayed(randomDelay(), response) -} diff --git a/picker-starter/src/picker.config.ts b/picker-starter/src/picker.config.ts index 42d2bff..d2a32b2 100644 --- a/picker-starter/src/picker.config.ts +++ b/picker-starter/src/picker.config.ts @@ -1,34 +1,55 @@ -import { getItemFilters, queryItems } from '@/data' -import { defineConfig } from '@/core' +import { categories, items } from '@/data' +import { defineConfig, matchCategories, matchSearchTerm } from '@/core' import { StoryblokIcon } from './components' +import { getPage } from './utils' -export default defineConfig((options) => { - return { - title: 'Picker Starter', - icon: StoryblokIcon, - validateOptions: () => { - const { limit } = options +export default defineConfig((options) => ({ + title: 'Picker Starter', + icon: StoryblokIcon, + validateOptions: () => { + const { limit } = options - const isLimitOptionValid = limit === undefined || Number(limit) > 0 - - if (!isLimitOptionValid) { - return { - isValid: false, - error: `The 'limit' option must be an integer greater than 0`, - } - } + const isLimitOptionValid = limit === undefined || Number(limit) > 0 + if (!isLimitOptionValid) { return { - isValid: true, + isValid: false, + error: `The 'limit' option must be an integer greater than 0`, } - }, - tabs: [ - { - name: 'items', - label: 'Items', - query: queryItems, - getFilters: getItemFilters, + } + + return { + isValid: true, + } + }, + tabs: [ + { + name: 'items', + label: 'Items', + query: async ({ searchTerm, page, perPage, filterSelection }) => { + const filteredItems = items + .filter(matchCategories(filterSelection['categoryMulti'] as string[])) + .filter(matchSearchTerm(searchTerm)) + + return { + items: getPage(filteredItems, page, perPage), + pageInfo: { + totalCount: filteredItems.length, + }, + } }, - ], - } -}) + getFilters: async () => [ + { + type: 'multi', + label: 'Categories', + name: 'categoryMulti', + defaultValue: [], + options: categories.map((category) => ({ + label: category.name, + value: category.name, + })), + }, + ], + }, + ], +})) diff --git a/picker-starter/src/utils/delayed/delayed.ts b/picker-starter/src/utils/delayed/delayed.ts deleted file mode 100644 index 59c8e17..0000000 --- a/picker-starter/src/utils/delayed/delayed.ts +++ /dev/null @@ -1,11 +0,0 @@ -export const delayed = ( - delayMs: number, - promise: Promise | T, -): Promise => - new Promise((resolve) => { - window.setTimeout(() => { - resolve(promise) - }, delayMs) - }) - -export const randomDelay = () => 250 + Math.random() * 500 diff --git a/picker-starter/src/utils/delayed/index.ts b/picker-starter/src/utils/delayed/index.ts deleted file mode 100644 index dbfad3a..0000000 --- a/picker-starter/src/utils/delayed/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './delayed' diff --git a/picker-starter/src/utils/index.ts b/picker-starter/src/utils/index.ts index 24f5aeb..d0f54b7 100644 --- a/picker-starter/src/utils/index.ts +++ b/picker-starter/src/utils/index.ts @@ -1,6 +1,5 @@ export * from './capitalizeWord' export * from './compareName' -export * from './delayed' export * from './getPage' export * from './initials' export * from './hasKey'