chore: refactor redundant filter helper function

PondC · PondC · commit f17e15df3d48 · 2025-08-27T15:30:48.000+07:00
diff --git a/examples/erp/genseki/collections/posts.client.tsx b/examples/erp/genseki/collections/posts.client.tsx
@@ -72,19 +72,6 @@ export function PostClientToolbar() {
   return (
     <div>
       <CollectionListToolbar actions={context.actions} />
-      {/* <CollectionListToolbar
-        filterOptions={Object.values(listViewProps.fieldsClient.shape).map((field) => {
-          return {
-            fieldShape: field,
-            optionsName: optionsFetchPathName(field),
-          }
-        })}
-        allowedFilters={listViewProps.listConfiguration?.filterBy || []}
-        actions={listViewProps.actions}
-        slug={listViewProps.slug}
-        isShowDeleteButton={isShowDeleteButton}
-        onDelete={handleBulkDelete}
-      /> */}
     </div>
   )
 }
diff --git a/packages/react/src/react/views/collections/list/toolbar/components/filter/filter-helper.ts b/packages/react/src/react/views/collections/list/toolbar/components/filter/filter-helper.ts
@@ -21,126 +21,97 @@ export const isThisFilterAllowed = (target: string, allowedList: string[]) => {
   return allowedList.includes(target)
 }
 
-export const whatFilterChoiceToChoose = (item: FieldShapeClient): FilterChoiceComponent => {
-  switch (item.type) {
-    case 'richText':
-    case 'text':
-    case 'password':
-    case 'email':
-    case 'number':
-    case 'comboboxNumber':
-    case 'comboboxText':
-    case 'media':
-    case 'create':
-      return null
-
-    case 'time':
-    case 'date':
-      return 'datetime' // as range
-
-    case 'checkbox':
-    case 'switch':
-      return 'toggle' // as toggle ?
-
-    case 'selectNumber':
-    case 'selectText':
-    case 'connect':
-    case 'connectOrCreate': {
-      if (!item.options || (Array.isArray(item.options) && item.options.length === 0)) {
-        throw new Error('Missing options for select/connect field')
-      }
-      return 'singleselect'
-    }
-
-    default:
-      return null
+export function getLabelFromFieldShape(fieldShape: FieldShapeClient, userFriendlyText: boolean) {
+  const isRelational = isRelationFieldShapeClient(fieldShape)
+  let columnOrRelationName = ''
+  if (isRelational) {
+    columnOrRelationName = fieldShape.$client.relation.name
+  } else {
+    columnOrRelationName = fieldShape.$client.column.name
   }
+  if (userFriendlyText) {
+    return `${fieldShape.label || fieldShape.$client.fieldName} (${columnOrRelationName})`
+  }
+  return `${columnOrRelationName}`
 }
 
-export const isThisTypeFilterable = (item: FieldShapeClient) => {
-  switch (item.type) {
-    case 'richText':
-    case 'text':
-    case 'password':
-    case 'email':
-    case 'number':
-    case 'comboboxNumber':
-    case 'comboboxText':
-    case 'media':
-    case 'create':
-      return false
+export function mapFieldShapeClient(fieldShape: FieldShapeClient): {
+  filterChoice: FilterChoiceComponent
+  optionsFetchPathName: string
+} {
+  switch (fieldShape.type) {
+    // case 'richText':
+    // case 'text':
+    // case 'password':
+    // case 'email':
+    // case 'number':
+    // case 'comboboxNumber':
+    // case 'comboboxText':
+    // case 'media':
+    // case 'create':
 
     case 'time':
     case 'date':
-      return true
+      return {
+        filterChoice: 'datetime',
+        optionsFetchPathName: '',
+      }
 
     case 'checkbox':
     case 'switch':
-      return false // not ready
+      // this component is not ready yet
+      return {
+        filterChoice: 'toggle',
+        optionsFetchPathName: '',
+      }
 
     case 'selectNumber':
     case 'selectText':
     case 'connect':
     case 'connectOrCreate': {
-      if (!item.options) throw new Error('Missing optionsFetchPath')
-      return true
+      if (
+        !fieldShape.options ||
+        (Array.isArray(fieldShape.options) && fieldShape.options.length === 0)
+      ) {
+        // `optionsFetchPathName` will not be completed without `options`, won't be able to fetch for choices
+        // Act as if it is non-filterable
+        return {
+          filterChoice: null,
+          optionsFetchPathName: '',
+        }
+      }
+      return {
+        filterChoice: 'singleselect',
+        optionsFetchPathName: fieldShape.options,
+      }
     }
 
     default:
-      throw new Error(`Unsupported field type: ${JSON.stringify(item)}`)
+      return {
+        filterChoice: null,
+        optionsFetchPathName: '',
+      }
   }
 }
 
-export const optionsFetchPathName = (item: FieldShapeClient) => {
-  switch (item.type) {
-    case 'richText':
-      return undefined
-    case 'text':
-      return undefined
-    case 'password':
-      return undefined
-    case 'email':
-      return undefined
-    case 'number':
-      return undefined
-    case 'time':
-      return undefined
-    case 'date':
-      return undefined
-    case 'checkbox':
-      return undefined
-    case 'switch':
-      return undefined
+export function selectFilterChoiceWithFieldShape(
+  fieldShape: FieldShapeClient
+): FilterChoiceComponent {
+  return mapFieldShapeClient(fieldShape).filterChoice
+}
 
-    case 'selectNumber':
-    case 'selectText': {
-      if (!item.options) throw new Error('Missing optionsFetchPath')
-      return item.options
-    }
-    case 'comboboxNumber':
-    case 'comboboxText': {
-      return undefined
-    }
-    case 'media': {
-      return undefined
-    }
-    case 'create': {
-      return undefined
-    }
-    case 'connect':
-    case 'connectOrCreate': {
-      if (!item.options) throw new Error('Missing optionsFetchPath')
-      return item.options
-    }
-    default:
-      throw new Error(`Unsupported field type: ${JSON.stringify(item)}`)
-  }
+export function isThisFieldShapeFilterable(fieldShape: FieldShapeClient): boolean {
+  return !!mapFieldShapeClient(fieldShape).filterChoice
+}
+
+export function getOptionsFetchPathNameWithFieldShape(fieldShape: FieldShapeClient): string {
+  return mapFieldShapeClient(fieldShape).optionsFetchPathName
 }
 
 export const transformFilterToPrismaString = (filters: MinimalFilter[]) => {
   // In case false data gets in, filter it out
   const filteredFilters = filters.filter((f) => {
-    const targetType = whatFilterChoiceToChoose(f.fieldShape)
+    const targetType = selectFilterChoiceWithFieldShape(f.fieldShape)
     switch (targetType) {
       case 'datetime':
         return !!f.value.filterValue && !!f.value.endFilterValue
@@ -173,7 +144,7 @@ export const transformFilterToPrismaString = (filters: MinimalFilter[]) => {
   }
 
   const selfPrismaObjectGenerator = (sItem: MinimalFilter) => {
-    const targetType = whatFilterChoiceToChoose(sItem.fieldShape)
+    const targetType = selectFilterChoiceWithFieldShape(sItem.fieldShape)
     switch (targetType) {
       case 'datetime':
         return { gte: sItem.value.filterValue, lte: sItem.value.endFilterValue }
diff --git a/packages/react/src/react/views/collections/list/toolbar/components/filter/panel-content.tsx b/packages/react/src/react/views/collections/list/toolbar/components/filter/panel-content.tsx
@@ -3,13 +3,13 @@ import { useState } from 'react'
 import { FilterDate } from './components/filter-date'
 import { FilterOptions } from './components/filter-options'
 import {
+  getLabelFromFieldShape,
   type MinimalFilter,
+  selectFilterChoiceWithFieldShape,
   transformFilterToPrismaString,
-  whatFilterChoiceToChoose,
 } from './filter-helper'
 
 import type { FieldShapeClient } from '../../../../../../../core'
-import { isRelationFieldShapeClient } from '../../../../../../../core/utils'
 import {
   Button,
   Select,
@@ -35,35 +35,18 @@ interface CollectionListFilterPanelProps {
 }
 
 export function CollectionListFilterPanel(props: CollectionListFilterPanelProps) {
-  const generateLabel = (target: FieldShapeClient, userFriendlyText: boolean) => {
-    const isRelational = isRelationFieldShapeClient(target)
-
-    let columnOrRelationName = ''
-
-    if (isRelational) {
-      columnOrRelationName = target.$client.relation.name
-    } else {
-      columnOrRelationName = target.$client.column.name
-    }
-
-    if (userFriendlyText) {
-      return `${target.label || target.$client.fieldName} (${columnOrRelationName})`
-    }
-    return `${columnOrRelationName}`
-  }
-
   const availableFields = [
     ...props.fetchList.map((e) => {
       return {
         field: e.fieldShape,
-        label: generateLabel(e.fieldShape, true),
+        label: getLabelFromFieldShape(e.fieldShape, true),
         options: e.optionsName,
       }
     }),
     ...props.formulateList.map((e) => {
       return {
         field: e.fieldShape,
-        label: generateLabel(e.fieldShape, true),
+        label: getLabelFromFieldShape(e.fieldShape, true),
         options: e.optionsName,
       }
     }),
@@ -180,8 +163,8 @@ export function CollectionListFilterPanel(props: CollectionListFilterPanelProps)
         {chosenFilter.length > 0 && (
           <div className="space-y-2">
             {chosenFilter.map((filterField) => {
-              const fieldLabel = generateLabel(filterField.fieldShape, true)
-              const choiceType = whatFilterChoiceToChoose(filterField.fieldShape)
+              const fieldLabel = getLabelFromFieldShape(filterField.fieldShape, true)
+              const choiceType = selectFilterChoiceWithFieldShape(filterField.fieldShape)
               switch (choiceType) {
                 case 'datetime':
                   return (
diff --git a/packages/react/src/react/views/collections/list/toolbar/filter.tsx b/packages/react/src/react/views/collections/list/toolbar/filter.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { isThisFilterAllowed, isThisTypeFilterable } from './components/filter/filter-helper'
+import { isThisFieldShapeFilterable, isThisFilterAllowed } from './components/filter/filter-helper'
 import {
   CollectionListFilterPanel,
   type FilterFieldOptions,
@@ -30,7 +30,7 @@ export interface CollectionListFilterProps
 export function CollectionListFilter(props: CollectionListFilterProps) {
   const { setFilter } = useFilter({ debounce: 500 })
 
-  const filterable = props.filterOptions.filter((e) => isThisTypeFilterable(e.fieldShape))
+  const filterable = props.filterOptions.filter((e) => isThisFieldShapeFilterable(e.fieldShape))
 
   const whatFilterCanIFetch = [] // use this to fetch for optionsName
   const whatFilterCanIFormulate = [] // these you will have to create a component to handle the filter value(s) yourself
diff --git a/packages/react/src/react/views/collections/list/toolbar/index.tsx b/packages/react/src/react/views/collections/list/toolbar/index.tsx
@@ -5,17 +5,13 @@ import { useState } from 'react'
 import { CaretLeftIcon } from '@phosphor-icons/react/dist/ssr'
 import { useQueryClient } from '@tanstack/react-query'
 
-import { optionsFetchPathName } from './components/filter/filter-helper'
+import { getOptionsFetchPathNameWithFieldShape } from './components/filter/filter-helper'
 import { FilterToggle } from './components/filter/filter-toggle'
 import { CollectionListCreate } from './create'
 import { CollectionListDelete } from './delete'
 import { CollectionListFilter } from './filter'
 import { CollectionListSearch } from './search'
 
-// import { CollectionListCreate, type MinimalCollectionListCreateProps } from './create'
-// import { CollectionListDelete, type MinimalCollectionListDeleteProps } from './delete'
-// import { CollectionListFilter } from './filter'
-// import { CollectionListSearch, type CollectionListSearchProps } from './search'
 import type { CollectionListActions } from '../../../../../core/collection'
 import { toast } from '../../../..'
 import { BaseIcon, ButtonLink } from '../../../../components'
@@ -27,20 +23,6 @@ import { useCollectionDeleteMutation } from '../hooks/use-collection-delete'
 export interface CollectionListToolbarProps {
   actions?: Partial<CollectionListActions>
 }
-// import { cn } from '../../../../utils/cn'
-// import type { ListActions } from '../../types'
-
-// export interface CollectionListToolbarProps
-//   extends CollectionListSearchProps,
-//     MinimalCollectionListDeleteProps,
-//     MinimalCollectionListFilterProps,
-//     MinimalCollectionListCreateProps {
-//   isShowDeleteButton?: boolean
-//   actions?: ListActions
-//   filterOptions: FilterFieldOptions[]
-//   allowedFilters: string[]
-//   onFilterChange?: (value: string) => void
-// }
 
 export function CollectionListToolbar(props: CollectionListToolbarProps) {
   const context = useCollectionList()
@@ -108,7 +90,7 @@ export function CollectionListToolbar(props: CollectionListToolbarProps) {
             filterOptions={Object.values(context.fields.shape).map((fieldShape) => {
               return {
                 fieldShape,
-                optionsName: optionsFetchPathName(fieldShape),
+                optionsName: getOptionsFetchPathNameWithFieldShape(fieldShape),
               }
             })}
             allowedFilters={context.filter || []}
