query parsers

src/common/hooks/useQuery.ts

@@ -1,10 +1,54 @@
+import {head} from 'lodash';
 import {parse, ParsedUrlQuery} from 'querystring';
 import {useMemo} from 'react';
 import {useLocation} from 'react-router-dom';
+import {toNumber} from '../../utils/parsers';
 
-type QueryParser<T> = (value?: string | string[]) => Undefinable<T>;
+type QueryParser<T> = (value?: string | string[]) => T;
 export type QueryParsers<T> = Partial<{[K in keyof T]: QueryParser<T[K]>}>;
 
+export function stringParser<T extends string>(): QueryParser<Undefinable<T>>;
+export function stringParser<T extends string>(defaultValue: T): QueryParser<T>;
+export function stringParser<T extends string>(defaultValue?: T) {
+    return (val?: string | string[]) => {
+        const value = Array.isArray(val) ? head(val) : val;
+
+        return value ?? defaultValue;
+    };
+}
+
+export function numberParser(): QueryParser<Undefinable<number>>;
+export function numberParser(defaultValue?: number): QueryParser<number>;
+export function numberParser(defaultValue?: number) {
+    return (val?: string | string[]) => {
+        const value = Array.isArray(val) ? head(val) : val;
+
+        return toNumber(value) ?? defaultValue;
+    };
+}
+
+export function booleanParser(): QueryParser<Undefinable<boolean>>;
+export function booleanParser(defaultValue: boolean): QueryParser<boolean>;
+export function booleanParser(defaultValue?: boolean) {
+    return (val?: string | string[]) => {
+        const value = Array.isArray(val) ? head(val) : val;
+
+        if (value === 'true') {
+            return true;
+        }
+
+        if (value === 'false') {
+            return false;
+        }
+
+        return defaultValue;
+    };
+}
+
+// Date parser
+
+// Array parser (должен уметь с enum)
+
 export function useQuery(): ParsedUrlQuery;
 export function useQuery<T extends {[name: string]: unknown}>(queryParsers: QueryParsers<T>): Partial<T>;
 export function useQuery<T extends {[name: string]: unknown}>(

src/pages/auth-response/components/page/Page.tsx

@@ -1,16 +1,24 @@
+import {format} from 'date-fns';
 import {parse} from 'querystring';
 import React, {memo} from 'react';
-import {QueryParsers, useQuery} from '../../../../common/hooks/useQuery';
+import {numberParser, QueryParsers, stringParser, useQuery} from '../../../../common/hooks/useQuery';
 import {QueryResponse, QueryResponseError} from '../../types';
 
+const enum PersonType {
+    One = 'one',
+    Two = 'two'
+}
+
 type Person = {
     name: string;
-    age: number;
+    age?: number;
+    type: PersonType;
 };
 
 const parsers: QueryParsers<Person> = {
-    name: name => name ? name.toString() : '',
-    age: age => age ? Number(age) : undefined,
+    name: stringParser(''),
+    age: numberParser(),
+    type: stringParser(PersonType.One),
 };
 
 const AuthResponsePage: React.FC = () => {

src/utils/parsers.ts

@@ -0,0 +1,4 @@
+export const toNumber = (val: unknown): Undefinable<number> => {
+    const prepareValue = Number(val);
+    return Number.isNaN(prepareValue) ? undefined : prepareValue;
+};