Browse Source

query route begin (typing)

asmer 1 tháng trước cách đây
mục cha
commit
00dbab7b94
5 tập tin đã thay đổi với 114 bổ sung6 xóa
  1. 2 0
      src/App.tsx
  2. 1 0
      src/lib/pub/index.ts
  3. 7 3
      src/lib/pub/query/index.ts
  4. 101 0
      src/lib/queryRoute/index.ts
  5. 3 3
      src/lib/router/index.tsx

+ 2 - 0
src/App.tsx

@@ -17,6 +17,8 @@ const SwapiPeople = ({data:{name, eye_color}}) =>
     <a href="#/bar">go to bar</a>
 </div>
 
+NamedRoute.defaultErrorComponent = () => <h1>Error</h1>
+
 const SwapiPlanet = ({data:{name, diameter}}) =>
 <div>
     <h3>{name}</h3>

+ 1 - 0
src/lib/pub/index.ts

@@ -2,6 +2,7 @@ import createPub from './createPub'
 import createQueryPub from './query'
 
 export type { Pub } from  './createPub'
+export type { QueryFuncType, CreateQueryPubOptions } from  './query'
 export { usePub } from  './react'
 export default createPub;
 export {createQueryPub};

+ 7 - 3
src/lib/pub/query/index.ts

@@ -1,9 +1,9 @@
 import createPub from '../';
 import {usePub}  from '../';
 
-type QueryFuncType = (...args: Array<any>) => Promise;
+export type QueryFuncType = (...args: Array<any>) => Promise;
 
-type CreateQueryPubOptions = {
+export type CreateQueryPubOptions = {
     queryFunc?: QueryFuncType,
     cacheTimeout?: number,
     hidePendingOnRefresh?: boolean
@@ -43,9 +43,13 @@ export default (options:CreateQueryPubOptions) => {
      * @returns {function} "createQuery", which receives promise name for pub, isMutation flag, cacheTagsFunc and query function arguments 
      */
     const withQueryFunc = (queryFunc?: QueryFuncType):Function => {
-        return ({promiseName, isMutation, cacheTagsFunc, args=[]}) => {
+        //TODO: give ability of options override
+        return ({promiseName, name, isMutation, cacheTagsFunc, args=[]}) => {
+            promiseName = promiseName || name
+
             const qF = queryFunc || options.queryFunc
             const defaultArgs = args
+            
 
             /*
              * Concats default arguments from withQueryFunc resulting function with passed arguments

+ 101 - 0
src/lib/queryRoute/index.ts

@@ -0,0 +1,101 @@
+import { ComponentType } from 'react';
+import { GetUserRolesFunc } from '../router';
+import { Pub } from '../pub';
+
+type QueryRoute = {
+    path? : string,
+    args: any[]|Function,
+    component? : ComponentType,
+
+    /*
+    //TODO; options override in query on createQuery level
+    //it aren't works for now
+    query: QueryFuncType,
+    cacheTimeout?: number,
+    hidePendingOnRefresh?: boolean
+    avoidRepeatInProgress?: boolean,
+    forceRefreshAfterTimeout?: boolean,
+    */
+
+    //pending, error and prop names configuration override on route level
+    Pending?: ComponentType,
+    Error?:   ComponentType,
+
+    errorQueryComponentErrorProp?: string,
+    componentQueryResultProp? : string,
+}
+
+type QueryRoutes = {
+    [name: string]: QueryRoute
+}
+
+type CreateQueryRoutesOptions = {
+    //global query configuration, basic query function are mandatory
+    query: QueryFuncType,
+    cacheTimeout?: number,
+    hidePendingOnRefresh?: boolean
+    avoidRepeatInProgress?: boolean,
+    forceRefreshAfterTimeout?: boolean,
+
+    //global route configuration, pending, error and prop names configuration
+    Pending?: ComponentType,
+    Error?:   ComponentType,
+    errorQueryComponentErrorProp?: string,
+    componentQueryResultProp? : string,
+
+    //global private routing configuration
+    getUserRoles: GetUserRolesFunc, //function to get roles of current user
+    fallback: string|Function //function/string to be redirected to in case of lack of permission
+    routeRoles: string[] //default roles (like ['anon']
+
+    queryRoutes: QueryRoutes
+}
+
+type QueryRoutesResult = {
+    //results about routing:
+    
+    //NamedRoute decorated
+    Route: ComponentType,
+    //Same value as for Route, but named.  For example, if name "category" it will be CategoryRoute 
+    [name: string]: ComponentType, 
+    //NamedLink to exactly this route
+    Link: ComponentType,
+    //Same value as for Link, but named. Like CategoryLink
+    [name: string]: ComponentType, 
+
+
+    //results about queries
+    makeQuery: Function,
+    query: Function,
+    forceQuery: Function,
+    Hook: ComponentType,
+
+    //named hook useNameQuery
+    [name: string]: ComponentType, 
+}
+
+type QueryRoutesResults = {
+    [name: string]: QueryRoutesResult
+}
+
+type CreateQueryRoutesResult = {
+    //Global results:
+    //routing:
+    NamedRoute: ComponentType,
+    PrivateRoute: ComponentType,
+    NamedLink   ; ComponentType, //just copy of NamedLink, nothing special
+    //Component renders all routes in one place. Shortcut, but isn't flexible if you want routes
+    //in different places of page layout
+    AllRoutes: ComponentType,
+
+    //queryPub
+    queryPub: Pub,
+    withQueryFunc: Function, //type it
+    createQuery: Function, //type it
+    
+    queryRoutes: QueryRoutesResults
+}
+
+export const createQueryRoutes = (options) => {
+
+}

+ 3 - 3
src/lib/router/index.tsx

@@ -55,7 +55,7 @@ export const NamedRoute = ({name, routeName, query, pendingQueryComponent:P, err
             }
         },Object.values(props.match.params))
 
-        console.log('NAMED ROUTE STATE', queryResult, queryError)
+        //console.log('NAMED ROUTE STATE', queryResult, queryError)
 
         if (!query || typeof query !== 'function')
             return <Render {...{[componentQueryResultProp]:query, ...props}} />
@@ -105,10 +105,10 @@ export const HashRoute = ({component, render, ...props}) => {
     return <Render match={match} history={history} location={location} />
 }
 
-type GetUserRolesFunc = () => Array<string>
+export type GetUserRolesFunc = () => Array<string>
 
 export const createPrivateRoute = (getUserRoles:GetUserRolesFunc, defaultFallback:string|Function, defaultRouteRoles:string[]):Function => 
-    (RouteComponent:ComponentType):ComponentType => 
+    (RouteComponent:ComponentType=NamedRoute):ComponentType => 
         ({fallback, roles=[], render, component, ...props}) => {
             const Render:ComponentType = component || render