Nanoscale Parts Manufacturing

    @focuson/pages
    TypeScript icon, indicating that this package has built-in type declarations

    1.21.15 • Public • Published

    Many applications are not so complex that they need a sophisticated paging system

    Here we just have the idea of 'pages' and that there is a single page displayed at once.

    Features

    • Pages can have messages on them: from other pages, from actions, or from apis
    • Loading of pages is important
    • Pages might just be 'show this api result' (i.e. 'show customer account details'). Here the state for the page is just from an api
      • This is such a common situation it has 'simpler configuration'
    • Pages can also have 'some of the state from the api, some local'. A good example here is a search page with a search query and the results of the search
    • Pages need to get their data from the backend, and some fetchers are provided that integrate smoothly with the pages

    Current Page

    We have a component that displays the current selected page. There is always a current selected page (even if it is an 'empty page')

    The current page is stored in the state as a

    export interface PageSelection<Details> {
      pageName: keyof Details,
      firstTime?: boolean
    }

    First time is set to true when the page changes, and reset to undefined when the 'processing of the first page' has been completed.

    Note the details: that is an object that has keys (page name) and values. It's for page configuration. This interface knows nothing other than the details has legal page names as keys.

    In many places we use PageSelection just to avoid threading that Details through the application

    export interface HasPageSelection<Details> {
      pageSelection: PageSelection<Details>
    }
    function pageSelectionlens<S extends HasPageSelection<any>, Details> (): Lens<S, PageSelection<Details>>{}

    These are useful when the main state has the page selection as a HasPageSelection

    Modal Pages

    It is quite common to want 'popup' a modal page over the top of another page. This is very easy to do

    Page configuration

    Install

    npm i @focuson/pages

    DownloadsWeekly Downloads

    1,937

    Version

    1.21.15

    License

    MIT

    Unpacked Size

    74.4 kB

    Total Files

    42

    Last publish

    Collaborators

    • phil-rice