refactor(picker-starter): place query and filters logic directly into the picker.config.ts file

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'

picker-starter/src/core/matchCategories/index.ts

@@ -0,0 +1 @@
+export * from './matchCategories'

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)
+  }

picker-starter/src/core/matchSearchTerm/index.ts

@@ -0,0 +1 @@
+export * from './matchSearchTerm'

picker-starter/src/core/matchItem/matchItem.test.ts → 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,41 +9,41 @@ const templateItem: BasketItem = {
   name: '',
 }
 
-describe('matchItem', () => {
+describe('matchSearchTerm', () => {
   it('should search the name', () => {
     expect(
-      matchItem('gorilla')({
+      matchSearchTerm('gorilla')({
         ...templateItem,
         name: 'gorilla',
       }),
     ).toBeTruthy()
   })
   it('should search the description', () => {
     expect(
-      matchItem('gorilla')({
+      matchSearchTerm('gorilla')({
         ...templateItem,
         description: 'gorilla',
       }),
     ).toBeTruthy()
   })
   it('should be case insensitive', () => {
     expect(
-      matchItem('gorilla')({
+      matchSearchTerm('gorilla')({
         ...templateItem,
         name: 'Gorilla',
       }),
     ).toBeTruthy()
   })
   it('should not match', () => {
     expect(
-      matchItem('gorilla')({
+      matchSearchTerm('gorilla')({
         ...templateItem,
       }),
     ).toBeFalsy()
   })
   test('that empty strings match all', () => {
     expect(
-      matchItem('')({
+      matchSearchTerm('')({
         ...templateItem,
       }),
     ).toBeTruthy()

picker-starter/src/core/matchItem/matchItem.ts → 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)

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',
   },
 ]

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<FilterOption>(
-    (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)
-}

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,
+          })),
+        },
+      ],
+    },
+  ],
+}))

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'