refactor: syncQuery2Conditions

Author: runkids

.eslintrc

@@ -39,6 +39,7 @@
 		"@typescript-eslint/no-explicit-any": 0,
 		"@typescript-eslint/no-unused-vars": 0,
 		"@typescript-eslint/explicit-module-boundary-types": 0,
+		"@typescript-eslint/ban-ts-comment": 0,
 		"@typescript-eslint/ban-types": [
 			"error",
 			{

src/core/composable/useHistory.ts

@@ -15,7 +15,7 @@ function decode(text: string | number): string {
   return '' + text
 }
 
-function parseQuery(search: string) {
+function parseQuery(search: string): object {
   const query = {}
   if (search === '' || search === '?') return query
   const hasLeadingIM = search[0] === '?'

src/core/useConditionWatcher.ts

@@ -272,9 +272,9 @@ export default function useConditionWatcher<O extends object, K extends keyof O>
       sync: config.history.sync,
       ignore: config.history.ignore || [],
       navigation: config.history.navigation || 'push',
-      listener(parsedQuery) {
+      listener(parsedQuery: object) {
         const queryObject = Object.keys(parsedQuery).length ? parsedQuery : backupIntiConditions
-        syncQuery2Conditions(_conditions, queryObject)
+        syncQuery2Conditions(_conditions, queryObject, backupIntiConditions)
       },
     }
     useHistory(query, historyOption)

src/core/utils/common.ts

@@ -48,28 +48,57 @@ export function stringifyQuery(params: ConditionsType, ignoreKeys?: any[]): stri
     .join('&')
 }
 
-export function syncQuery2Conditions(conditions: ConditionsType, query: ConditionsType): void {
+export function typeOf(obj) {
+  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
+}
+
+export function syncQuery2Conditions(
+  conditions: ConditionsType,
+  query: ConditionsType,
+  backupIntiConditions: ConditionsType
+): void {
   const conditions2Object = { ...conditions }
   const noQuery = Object.keys(query).length === 0
   Object.keys(conditions2Object).forEach((key) => {
     if (key in query || noQuery) {
-      if (conditions2Object[key] instanceof Date) {
-        conditions[key] = noQuery ? null : new Date(query[key])
-        return
+      const conditionType = typeOf(conditions2Object[key])
+      switch (conditionType) {
+        case 'date':
+          conditions[key] = noQuery ? '' : new Date(query[key])
+          break
+        case 'array':
+          conditions[key] =
+            noQuery || !query[key].length ? [] : typeOf(query[key]) === 'string' ? query[key].split(',') : query[key]
+
+          if (backupIntiConditions[key].length && conditions[key].length) {
+            let originArrayValueType = typeOf(backupIntiConditions[key][0])
+            conditions[key] = conditions[key].map((v: any) => {
+              switch (originArrayValueType) {
+                case 'number':
+                  return Number(v)
+                case 'date':
+                  return new Date(v)
+                case 'boolean':
+                  return v === 'true'
+                default:
+                  return String(v)
+              }
+            })
+          }
+          break
+        case 'string':
+          conditions[key] = noQuery ? '' : String(query[key])
+          break
+        case 'number':
+          conditions[key] = noQuery ? 0 : Number(query[key])
+          break
+        case 'boolean':
+          conditions[key] = noQuery ? '' : Boolean(query[key])
+          break
+        default:
+          conditions[key] = noQuery ? '' : query[key]
+          break
       }
-      conditions[key] = Array.isArray(conditions2Object[key])
-        ? noQuery || !query[key].length
-          ? []
-          : typeof query[key] === 'string'
-          ? query[key].split(',')
-          : query[key]
-        : typeof conditions2Object[key] === 'number'
-        ? noQuery
-          ? 0
-          : +query[key]
-        : noQuery
-        ? ''
-        : query[key]
     }
   })
 }

test/utils.test.ts

@@ -5,6 +5,7 @@ import {
   syncQuery2Conditions,
   isEquivalent,
   deepClone,
+  typeOf,
 } from '../src/core/utils/common'
 
 describe('utils: isEquivalent', () => {
@@ -27,6 +28,37 @@ describe('utils: isEquivalent', () => {
   })
 })
 
+describe('utils: typeof', () => {
+  it(`Is array`, () => {
+    expect(typeOf([])).toEqual('array')
+  })
+  it(`Is date`, () => {
+    expect(typeOf(new Date())).toEqual('date')
+  })
+  it(`Is object`, () => {
+    expect(typeOf({})).toEqual('object')
+  })
+  it(`Is number`, () => {
+    expect(typeOf(1)).toEqual('number')
+  })
+  it(`Is string`, () => {
+    expect(typeOf('hi')).toEqual('string')
+  })
+  it(`Is null`, () => {
+    expect(typeOf(null)).toEqual('null')
+  })
+  it(`Is undefined`, () => {
+    expect(typeOf(undefined)).toEqual('undefined')
+  })
+  it(`Is function`, () => {
+    expect(
+      typeOf(() => {
+        //
+      })
+    ).toEqual('function')
+  })
+})
+
 describe('utils: deepClone', () => {
   it(`Check Object deepClone`, () => {
     const current = {
@@ -102,7 +134,7 @@ describe('utils: syncQuery2Conditions', () => {
       age: 20,
       tags: ['react', 'vue'],
     }
-    syncQuery2Conditions(conditions, query)
+    syncQuery2Conditions(conditions, query, conditions)
     expect(conditions).toMatchObject({
       age: 50,
       tags: ['react', 'vue'],
@@ -116,22 +148,51 @@ describe('utils: syncQuery2Conditions', () => {
     const conditions = {
       date: new Date(),
     }
-    syncQuery2Conditions(conditions, query)
+    syncQuery2Conditions(conditions, query, conditions)
     expect(Object.prototype.toString.call(conditions.date) === '[object Date]').toBeTruthy()
   })
 
+  it('should sync query object to conditions with Array<string>', () => {
+    const query = {
+      daterange: ['2020-01-02', '2020-01-03'],
+    }
+    const conditions = {
+      daterange: [],
+    }
+    syncQuery2Conditions(conditions, query, conditions)
+    expect(conditions.daterange).toMatchObject(['2020-01-02', '2020-01-03'])
+  })
+
+  it('should sync query object to conditions with Array<number>', () => {
+    const query = {
+      daterange: [1, 2],
+    }
+    const conditions = {
+      daterange: [],
+    }
+    syncQuery2Conditions(conditions, query, conditions)
+    expect(conditions.daterange).toMatchObject([1, 2])
+  })
+
   it('if query is empty conditions should set init value', () => {
     const query = {}
     const conditions = {
       date: new Date(),
-      name: 'runkids',
-      tags: ['react'],
+      string: 'runkids',
+      array: ['react', 'vue'],
+      boolean: false,
+      undefined: undefined,
+      null: null,
     }
-    syncQuery2Conditions(conditions, query)
+    syncQuery2Conditions(conditions, query, conditions)
+
     expect(conditions).toMatchObject({
-      date: null,
-      name: '',
-      tags: [],
+      date: '',
+      string: '',
+      array: [],
+      boolean: '',
+      undefined: '',
+      null: '',
     })
   })
 })