refactor: useRouteField to useField #172

teritorio · Mar 12, 2024 · 36f88e8 · 36f88e8
1 parent d364c0d
commit 36f88e8
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 38 deletions.
diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
@@ -2,7 +2,7 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { localeIncludes } from 'locale-includes'
 import { PropertyTranslationsContextEnum } from '~/plugins/property-translations'
-import type { ApiPoi, ApiPoiProperties, FieldsListItem } from '~/lib/apiPois'
+import type { ApiPoi, FieldsListItem } from '~/lib/apiPois'
 import type { ApiMenuCategory } from '~/lib/apiMenu'
 import Field from '~/components/Fields/Field.vue'
 import IconButton from '~/components/UI/IconButton.vue'
@@ -25,7 +25,7 @@ const props = defineProps<{
   category: ApiMenuCategory
 }>()
 
-const { toString } = useRouteField()
+const { routeToString, addressToString } = useField()
 const { t, locale } = useI18n()
 const siteStore = useSiteStore()
 const { $propertyTranslations } = useNuxtApp()
@@ -37,6 +37,7 @@ const cachedKey = computed(() => `pois-${props.category.id}`)
 const pois = ref()
 const loadingState = ref(false)
 const { data: cachedPois } = useNuxtData(cachedKey.value)
+
 if (cachedPois.value) {
   pois.value = cachedPois.value
 }
@@ -54,7 +55,7 @@ else {
   loadingState.value = pending.value
 }
 
-// Handle default config field if not provided by API
+// Set default config field if not provided by API
 const fields = computed((): FieldsListItem[] => {
   return (
     (pois.value?.features[0].properties.editorial?.list_fields)
@@ -69,10 +70,10 @@ pois.value.features = pois.value.features.map((f: ApiPoi) => {
   const arrayProps: { [key: string]: any } = []
 
   if (fieldEntries.includes('route'))
-    arrayProps.route = toString(f.properties, getContext('route'))
+    arrayProps.route = routeToString(f.properties, getContext('route'))
 
   if (fieldEntries.includes('addr'))
-    arrayProps.addr = getAddrString(f.properties)
+    arrayProps.addr = addressToString(f.properties)
 
   return {
     ...f,
@@ -95,8 +96,8 @@ const headers = computed((): Array<DataTableHeader> => {
       PropertyTranslationsContextEnum.List,
     ),
     sort: (a: string, b: string) => {
-      const first = transformValue(a)
-      const second = transformValue(b)
+      const first = valueToString(a)
+      const second = valueToString(b)
 
       if (!first && second)
         return -1
@@ -132,30 +133,15 @@ const headers = computed((): Array<DataTableHeader> => {
   return headers
 })
 
-function getAddrString(properties: ApiPoiProperties) {
-  const addressFields = [
-    'addr:housenumber',
-    'addr:street',
-    'addr:postcode',
-    'addr:city',
-  ]
-
-  return addressFields
-    .map(field => properties[field])
-    .map(f => (f || '').toString().trim())
-    .filter(f => f)
-    .join(' ')
-}
-
-function transformValue(item: any) {
+function valueToString(item: any) {
   if (Array.isArray(item))
     return item.join(' ')
 
   return item === undefined || typeof item === 'object' ? '' : item
 }
 
 function customFilter(value: any, query: string): boolean {
-  value = transformValue(value)
+  value = valueToString(value)
 
   if (!value)
     return false

diff --git a/composables/useRouteField.ts → composables/useField.ts b/composables/useRouteField.ts → composables/useField.ts
@@ -1,10 +1,27 @@
 import type { ApiPoiProperties } from '~/lib/apiPois'
 
+const ADDRESS_FIELDS = [
+  'addr:housenumber',
+  'addr:street',
+  'addr:postcode',
+  'addr:city',
+]
+
 export default function () {
   const { $propertyTranslations } = useNuxtApp()
   const { t } = useI18n()
 
-  const getActivity = (properties: ApiPoiProperties, context: string): { key: string, translatedValue: string } | undefined => {
+  // Address Field
+  const addressToString = (properties: ApiPoiProperties): string => {
+    return ADDRESS_FIELDS
+      .map(field => properties[field])
+      .map(f => (f || '').toString().trim())
+      .filter(f => f)
+      .join(' ')
+  }
+
+  // Route Field
+  const getRouteActivity = (properties: ApiPoiProperties, context: string): { key: string, translatedValue: string } | undefined => {
     const activity = Object.entries(properties)
       .find(([key, _value]) => {
         if (!key.includes(':'))
@@ -25,13 +42,13 @@ export default function () {
       : { key: activityKey, translatedValue: $propertyTranslations.pv('route', `${activityKey}`, context) }
   }
 
-  const getDifficulty = (activity: string, difficulty: string, context: string): string | undefined => {
+  const getRouteDifficulty = (activity: string, difficulty: string, context: string): string | undefined => {
     return !difficulty
       ? undefined
       : $propertyTranslations.pv(`route:${activity}:difficulty`, difficulty, context)
   }
 
-  const getDuration = (duration: number): string | undefined => {
+  const getRouteDuration = (duration: number): string | undefined => {
     if (!duration)
       return undefined
 
@@ -48,22 +65,22 @@ export default function () {
     return string
   }
 
-  const getLength = (length: number): string | undefined => {
+  const getRouteLength = (length: number): string | undefined => {
     return !length
       ? undefined
       : t('units.km', { length })
   }
 
-  const toString = (properties: ApiPoiProperties, context: string): string => {
+  const routeToString = (properties: ApiPoiProperties, context: string): string => {
     let routeData = []
-    const activity = getActivity(properties, context)
+    const activity = getRouteActivity(properties, context)
 
     if (!activity)
       return ''
 
-    const difficulty = getDifficulty(activity.key, properties[`route:${activity.key}:difficulty`], context)
-    const duration = getDuration(properties[`route:${activity.key}:duration`])
-    const length = getLength(properties[`route:${activity.key}:length`])
+    const difficulty = getRouteDifficulty(activity.key, properties[`route:${activity.key}:difficulty`], context)
+    const duration = getRouteDuration(properties[`route:${activity.key}:duration`])
+    const length = getRouteLength(properties[`route:${activity.key}:length`])
 
     routeData = [
       activity.translatedValue,
@@ -76,10 +93,11 @@ export default function () {
   }
 
   return {
-    getActivity,
-    getDifficulty,
-    getDuration,
-    getLength,
-    toString,
+    addressToString,
+    getRouteActivity,
+    getRouteDifficulty,
+    getRouteDuration,
+    getRouteLength,
+    routeToString,
   }
 }