5htp-core 0.1.2 → 0.2.0

package/src/client/pages/_messages/401.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import route from '@router';
+import { router } from '@app';
 import Button from '@client/components/button';
 
 // App
@@ -18,7 +18,7 @@ import Button from '@client/components/button';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-route.error(401, {  }, ({ }, { api, toast, modal, request, page }) => {
+router.error(401, {  }, ({ api, toast, modal, request, page }) => {
 
     request.response?.redirect('/');
 

package/src/client/pages/_messages/403.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import route from '@router';
+import { router } from '@app';
 import Button from '@client/components/button';
 
 // App
@@ -15,7 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-route.error( 403, {}, ({ message }, { modal }) => {
+router.error( 403, {}, ({ message, modal }) => {
 
     if (!message)
         message = "You do not have sufficient permissions to access this content.";

package/src/client/pages/_messages/404.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import route from '@router';
+import { router } from '@app';
 import Button from '@client/components/button';
 
 // App
@@ -15,7 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-route.error( 404, {}, ({ message }, { modal }) => {
+router.error( 404, {}, ({ message, modal }) => {
 
     if (!message)
         message = "The content you asked for was not found.";

package/src/client/pages/_messages/500.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import route from '@router';
+import { router } from '@app';
 import Button from '@client/components/button';
 
 // App
@@ -15,7 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-route.error( 500, {}, ({ message }) => {
+router.error( 500, {}, ({ message }) => {
 
     if (!message)
         message = "A technical error occurred.";

package/src/client/pages/bug.tsx

@@ -10,7 +10,7 @@ import Textarea from '@client/components/input/Textarea';
 import Card, { Props as CardProps } from '@client/components/Dialog/card';
 
 // Core libs
-import useContext from '@client/context';
+import useContext from '@/client/context';
 
 /*----------------------------------
 - TYPES

package/src/client/pages/useHeader.tsx

@@ -3,7 +3,7 @@
 ----------------------------------*/
 
 // Core
-import useContext from '@client/context';
+import useContext from '@/client/context';
 
 /*----------------------------------
 - TYPES

package/src/client/services/metrics/index.ts

@@ -0,0 +1,37 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+
+// Core
+import type ClientApplication from '@client/app';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+
+
+/*----------------------------------
+- SERVICE
+----------------------------------*/
+export default class ClientMetrics {
+
+    public constructor( public app: ClientApplication ) {
+
+    }
+
+    public start() {
+        
+    }
+
+    // Tracking
+    public event( name: string, params?: object ) {
+        if (!window.gtag) return;
+        if (name === 'pageview')
+            window.gtag('send', name);
+        else
+            window.gtag('event', name, params);
+    }
+}

package/src/client/{router → services/router/components}/Link.tsx

@@ -5,7 +5,7 @@
 // Npm
 import React from 'react';
 import type { ComponentChild } from 'preact';
-import { history } from './request/history';
+import { history } from '../request/history';
 
 /*----------------------------------
 - COMPONENT

package/src/client/services/router/components/Page.tsx

@@ -0,0 +1,59 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+// Npm
+import React from 'react';
+
+// Core
+import useContext from '@/client/context';
+
+// Specific
+import type Page from '../response/page';
+
+/*----------------------------------
+- PAGE STATE
+----------------------------------*/
+
+export default ({ page, isCurrent }: { page: Page, isCurrent?: boolean }) => {
+
+    const context = useContext();
+
+    const [apiData, setApiData] = React.useState<{[k: string]: any} | null>( 
+        page.loadIndicator ? null : page.data 
+    );
+    page.setAllData = setApiData;
+ 
+    React.useEffect(() => {
+
+        // Fetch the data asynchronously for the first time
+        if (apiData === null && isCurrent)
+            page.fetchData().then( loadedData => {
+                page.loadIndicator = false;
+                setApiData(loadedData);
+            })
+
+    }, []);
+
+    return (
+        <div 
+            class={"page" + (isCurrent ? ' current' : '')} 
+            id={page.chunkId === undefined ? undefined : 'page_' + page.chunkId}
+        >
+
+            {/* Make request parameters and api data accessible from the page component */}
+            {page.renderer ? (
+
+                <page.renderer 
+                    // Services
+                    {...context} 
+                    // URL params
+                    {...context.request.data} 
+                    // API data
+                    {...apiData} 
+                />
+                
+            ) : null}
+
+        </div>
+    )
+}

package/src/client/{router/component.tsx → services/router/components/router.tsx}

@@ -4,21 +4,21 @@
 // Npm
 import React from 'react';
 
-// Libs
-import useContext from '@client/context';
-import ClientRequest from './request';
+// Core
+import useContext from '@/client/context';
+
+// Specific
+import type Router from '..';
+import PageComponent from './Page';
+import ClientRequest from '../request';
+import { history, location, Update } from '../request/history';
 //import initTooltips from '@client/components/Donnees/Tooltip';
-
-// Navigation
-import router from '.';
-import { history, location, Update } from './request/history';
+import type Page from '../response/page';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
-import type PageResponse from '../../common/router/response/page';
-
 export type PropsPage<TParams extends { [cle: string]: unknown }> = TParams & {
     data: {[cle: string]: unknown}
 }
@@ -27,52 +27,20 @@ export type PropsPage<TParams extends { [cle: string]: unknown }> = TParams & {
 - PAGE STATE
 ----------------------------------*/
 
-const Page = ({ page, isCurrent }: { page: PageResponse, isCurrent?: boolean }) => {
-
-    const gui = useContext();
-
-    const [data, setData] = React.useState<{[k: string]: any} | null>( page.loading ? null : page.data );
-    page.setAllData = setData;
- 
-    React.useEffect(() => {
-
-        if (data === null && isCurrent)
-            page.fetchData().then( loadedData => {
-                page.loading = false;
-                setData(loadedData);
-            })
-
-    }, []);
-
-    return (
-        <div 
-            class={"page" + (isCurrent ? ' current' : '')} 
-            id={page.id === undefined ? undefined : 'page_' + page.id}
-        >
-
-            {/* Make request parameters and api data accessible from the page component */}
-            {page.component ? (
-
-                <page.component {...gui.request.data} {...data} />
-                
-            ) : null}
-
-        </div>
-    )
-}
+const LogPrefix = `[router][component]`
 
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
-export default () => {
+export default ({ service: router }: { service: Router }) => {
 
-    const gui = useContext();
+    const context = useContext();
 
     const [pages, setPages] = React.useState<{
-        current: undefined | PageResponse,
-        //previous: undefined | PageResponse
+        current: undefined | Page,
+        //previous: undefined | Page
     }>({
-        current: gui.page,
+        current: context.page,
         //previous: undefined
     });
     
@@ -82,8 +50,8 @@ export default () => {
         //  If needed to play with pages, do it in the setPages callback below
 
         // Load the route chunks
-        gui.request = request;
-        const newpage = gui.page = await router.resolve(request, gui);
+        context.request = request;
+        const newpage = context.page = await router.resolve(request);
 
         // Page not found: Directly load with the browser
         if (newpage === undefined) {
@@ -94,22 +62,25 @@ export default () => {
             return;
         }
 
-        // Set loading state
-        newpage.loading = <i src="spin" />
+        // Set.loadIndicator state
+        newpage.loadIndicator = <i src="spin" />
         // Add page container
         setPages( pages => {
 
-            // Page unchanges
-            if (pages.current?.route.path === request.path)  {
-                console.warn("Canceling navigation to the same page:", {...request});
+            const currentRoute = pages.current?.route;
+
+            // Check if the page changed
+            if (currentRoute?.path === request.path)  {
+                console.warn(LogPrefix, "Canceling navigation to the same page:", {...request});
                 return pages;
             }
 
-            //  Layout change
-            const curLayout = pages.current?.route.options.layout;
-            const newlayout = newpage?.route.options.layout;
-            if (newlayout && curLayout && newlayout.path !== curLayout.path) {
-                gui.setLayout(newlayout);
+            // If if the layout changed
+            const curLayout = currentRoute?.options.layout;
+            const newLayout = newpage?.route.options.layout;
+            if (newLayout && curLayout && newLayout.path !== curLayout.path) {
+                console.log(LogPrefix, `Changing layout. Before:`, curLayout, 'New layout:', newLayout);
+                context.app.setLayout(newLayout);
             }
 
             // Remove old page after the aff-page css transition
@@ -128,8 +99,8 @@ export default () => {
         });
     }
 
-    const restoreScroll = (currentPage?: PageResponse) => currentPage?.hash 
-        && document.getElementById( currentPage.hash.substring(1) )?.scrollIntoView({
+    const restoreScroll = (currentPage?: Page) => currentPage?.scrollToId 
+        && document.getElementById( currentPage.scrollToId.substring(1) )?.scrollIntoView({
             behavior: "smooth", 
             block: "start", 
             inline: "nearest"
@@ -138,19 +109,15 @@ export default () => {
     // First load
     React.useEffect(() => {
 
-        /*gui.api.set = (newData: TObjetDonnees) =>  {
-            setPage(a => ({ ...a, data: { ...a.data, ...newData } }));
-        }*/
-
         // Resolve page if it wasn't done via SSR
-        if (gui.page === undefined)
-            resolvePage(gui.request);
+        if (context.page === undefined)
+            resolvePage(context.request);
 
         // Foreach URL change (Ex: bowser' back buttton)
         return history?.listen(async (locationUpdate) => {
 
             // Load the concerned route
-            const request = new ClientRequest(locationUpdate.location, gui);
+            const request = new ClientRequest(locationUpdate.location, context);
             await resolvePage(request);
             
             // Scroll to the selected content via url hash
@@ -161,16 +128,15 @@ export default () => {
     // On every page change
     React.useEffect(() => {
 
-        // Tracking
-        gui.event('pageview');
         // Reset scroll
         window.scrollTo(0, 0);
         // Should be called AFTER rendering the page (so after the state change)
-        gui.page?.updateClient();
-
+        pages.current?.updateClient();
         // Scroll to the selected content via url hash
         restoreScroll(pages.current);
-            
+
+        // Hooks
+        router.runHook('page.changed', pages.current)
         
     }, [pages.current]);
     
@@ -181,7 +147,10 @@ export default () => {
         )*/}
 
         {pages.current && (
-            <Page page={pages.current} isCurrent key={pages.current.id === undefined ? undefined : 'page_' + pages.current.id} />
+            <PageComponent page={pages.current} 
+                isCurrent 
+                key={pages.current.id === undefined ? undefined : 'page_' + pages.current.id} 
+            />
         )}
     </>
 }