import { type , Event , EV_SET_VALUE , FX_DELAY , FX_DISPATCH_ASYNC , FX_DISPATCH_NOW , valueUpdater , } from "@thi.ng/interceptors" ; import { type , AppConfig , StatusType } from "./api" ; import { allUsers } from "./components/all-users" ; import { contact } from "./components/contact" ; import { home } from "./components/home" ; import { userProfile } from "./components/user-profile" ; import * as fx from "./effects" ; import * as ev from "./events" ; import * as routes from "./routes" ; export const CONFIG = { router : { useFragment : true , defaultRouteID : routes . HOME . id , routes : [ routes . HOME , routes . CONTACT , routes . USER_PROFILE , routes . USER_LIST , ] , } , events : { [ ev . DONE ] : ( ) => ( { [ FX_DISPATCH_NOW ] : [ ev . SET_STATUS , [ StatusType . DONE , "done" ] ] , } ) , [ ev . ERROR ] : ( _ , [ __ , err ] ) => ( { [ FX_DISPATCH_NOW ] : [ ev . SET_STATUS , [ StatusType . ERROR , err . message ] ] , } ) , [ ev . LOAD_USER ] : ( _ , [ __ , id ] ) => ( { [ FX_DISPATCH_NOW ] : [ ev . SET_STATUS , [ StatusType . INFO , `loading user data...` ] , ] , [ FX_DISPATCH_ASYNC ] : [ fx . JSON , `data/user-${ id }.json` , ev . RECEIVE_USER , ev . LOAD_USER_ERROR , ] , } ) , [ ev . RECEIVE_USER ] : ( _ , [ __ , json ] ) => ( { [ FX_DISPATCH_NOW ] : [ < Event > [ EV_SET_VALUE , [ [ "users" , json . id ] , json ] ] , < Event > [ ev . SET_STATUS , [ StatusType . SUCCESS , "JSON successfully loaded" , true ] , ] , ] , } ) , [ ev . LOAD_USER_ERROR ] : ( _ , [ __ , err ] ) => ( { [ FX_DISPATCH_NOW ] : [ ev . SET_STATUS , [ StatusType . ERROR , err . message ] ] , [ FX_DISPATCH_ASYNC ] : [ FX_DELAY , [ 1000 , [ routes . USER_LIST . id ] ] , ev . ROUTE_TO , ev . ERROR , ] , } ) , [ ev . LOAD_USER_LIST ] : ( ) => ( { [ FX_DISPATCH_NOW ] : [ ev . SET_STATUS , [ StatusType . INFO , `loading user data...` ] , ] , [ FX_DISPATCH_ASYNC ] : [ fx . JSON , "data/users.json" , ev . RECEIVE_USERS , ev . ERROR , ] , } ) , [ ev . RECEIVE_USERS ] : ( _ , [ __ , json ] ) => ( { [ FX_DISPATCH_NOW ] : [ < Event > [ EV_SET_VALUE , [ "userlist" , json ] ] , < Event > [ ev . SET_STATUS , [ StatusType . SUCCESS , "JSON successfully loaded" , true ] , ] , ] , } ) , [ ev . SET_STATUS ] : ( _ , [ __ , status ] ) => ( { [ FX_DISPATCH_NOW ] : [ EV_SET_VALUE , [ "status" , status ] ] , [ FX_DISPATCH_ASYNC ] : status [ 0 ] !== StatusType . DONE && status [ 2 ] ? [ FX_DELAY , [ 1000 ] , ev . DONE , ev . ERROR ] : undefined , } ) , [ ev . TOGGLE_DEBUG ] : valueUpdater < number > ( "debug" , ( x ) => x ^ 1 ) , } , effects : { [ fx . JSON ] : ( req ) => fetch ( req ) . then ( ( resp ) => { if ( ! resp . ok ) { throw new Error ( resp . statusText ) ; } return resp . json ( ) ; } ) , } , components : { [ routes . HOME . id ] : home , [ routes . CONTACT . id ] : contact , [ routes . USER_LIST . id ] : allUsers , [ routes . USER_PROFILE . id ] : userProfile , } , domRoot : "app" , initialState : { status : [ StatusType . INFO , "running" ] , users : { } , userlist : [ ] , route : { } , debug : 1 , } , views : { json : [ "" , ( state ) => JSON . stringify ( state , null , 2 ) ] , users : [ "users" , ( users ) => users || { } ] , userlist : "userlist" , status : "status" , debug : "debug" , } , ui : { bodyCopy : { class : "center measure-narrow measure-ns tc lh-copy black-70" , } , bodyLink : { class : "link dim black" } , card : { container : { class : "mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10 tc" , } , thumb : { class : "br-100 h3 w3 dib" } , title : { class : "ma1" } , sep : { class : "mt3 mw3 bb bw1 b--black-10" } , body : { class : "lh-copy measure center f6 black-70" } , } , code : { class : "ma0 ml4 pa2 f7 bg-light-gray code overflow-x-hidden" } , column : { content : [ { class : "w-90-ns ma2" } , { class : "w-50-ns ma2" } ] , debug : [ { class : "w-10-ns ma2 close" } , { class : "w-50-ns ma2 open" } , ] , } , contact : { link : { class : "db pb2 link dim black" } , } , debugToggle : { class : "toggle pointer" } , nav : { inner : { class : "tc pb3" } , title : { class : "black f1 lh-title tc db mb2 mb2-ns" } , link : { class : "pointer link dim gray f6 f5-ns dib mr3" } , linkLast : { class : "pointer link dim gray f6 f5-ns dib" } , } , root : { class : "flex-ns sans-serif ma0" } , status : { [ StatusType . DONE ] : { class : "pa2 bg-light-yellow gold tc fadeout bg-animate" , } , [ StatusType . INFO ] : { class : "pa2 bg-light-yellow gold tc bg-animate" , } , [ StatusType . SUCCESS ] : { class : "pa2 bg-light-green green tc bg-animate" , } , [ StatusType . ERROR ] : { class : "pa2 bg-light-red dark-red tc bg-animate" , } , } , userlist : { root : { class : "measure center" } , container : { class : "dt w-100 bb b--black-05 pb2 mt2" } , thumbWrapper : { class : "dtc w2 w3-ns v-mid" } , thumb : { class : "ba b--black-10 db br-100 w2 w3-ns h2 h3-ns" } , body : { class : "dtc v-mid pl3" } , title : { class : "pointer f6 f5-ns fw6 lh-title black mv0" } , subtitle : { class : "f6 fw4 mt0 mb0 black-60" } , meta : { class : "dtc tr v-mid black-60 f7" } , } , } , } ;