proteum 1.0.2 → 2.0.0

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

@@ -19,125 +19,104 @@ import type Page from '../response/page';
 - TYPES
 ----------------------------------*/
 
-export type PropsPage<TParams extends { [cle: string]: unknown }> = TParams & {
-    data: {[cle: string]: unknown}
-}
+export type PropsPage<TParams extends { [cle: string]: unknown }> = TParams & { data: { [cle: string]: unknown } };
 
-export type TProps = {
-    service?: ClientRouter,
-    loaderComponent?: React.ComponentType<{ isLoading: boolean }>,
-}
+export type TProps = { service?: ClientRouter; loaderComponent?: React.ComponentType<{ isLoading: boolean }> };
 
 /*----------------------------------
-- PAGE STATE
+- HELPERS
 ----------------------------------*/
 
-const LogPrefix = `[router][component]`
+const LogPrefix = `[router][component]`;
 
-const PageLoading = ({ clientRouter, loaderComponent: LoaderComponent }: { 
-    clientRouter?: ClientRouter,
-    loaderComponent?: React.ComponentType<{ isLoading: boolean }>,
+const PageLoading = ({
+    clientRouter,
+    loaderComponent: LoaderComponent,
+}: {
+    clientRouter?: ClientRouter;
+    loaderComponent?: React.ComponentType<{ isLoading: boolean }>;
 }) => {
-
     const [isLoading, setLoading] = React.useState(false);
 
-    if (clientRouter)
-        clientRouter.setLoading = setLoading;
-
-    return LoaderComponent 
-        ? <LoaderComponent isLoading={isLoading} /> 
-        : (
-            <div id="loading" class={isLoading ? 'display' : ''}>
-                <i src="spin" />
-            </div>
-        )
-}
-
-const scrollToElement = (selector: string) => document.querySelector( selector )
-    ?.scrollIntoView({
-        behavior: "smooth", 
-        block: "start", 
-        inline: "nearest"
-    })
+    if (clientRouter) clientRouter.setLoading = setLoading;
+
+    return LoaderComponent ? (
+        <LoaderComponent isLoading={isLoading} />
+    ) : (
+        <div id="loading" class={isLoading ? 'display' : ''}>
+            <i class="spin" />
+        </div>
+    );
+};
+
+const scrollToElement = (selector: string) =>
+    document.querySelector(selector)?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
 
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
 export default ({ service: clientRouter, loaderComponent }: TProps) => {
-
     /*----------------------------------
-    - INIT
+    - CONTEXT
     ----------------------------------*/
 
     const context = useContext();
-
-    const [currentPage, setCurrentPage] = React.useState<undefined | Page>(context.page);
+    const [currentPage, setCurrentPage] = React.useState<undefined | Page>(context.page as Page | undefined);
 
     // Bind context object to client router
     if (clientRouter !== undefined) {
         clientRouter.context = context;
         clientRouter.navigate = changePage;
     }
-    
+
     /*----------------------------------
     - ACTIONS
     ----------------------------------*/
     const resolvePage = async (request: ClientRequest, data: {} = {}) => {
-
         if (!clientRouter) return;
 
-        const currentRequest = context.request;
-        context.request = request;
+        const currentRequest = context.request as ClientRequest;
+        context.request = request as typeof context.request;
 
         // WARNING: Don"t try to play with pages here, since the object will not be updated
         //  If needed to play with pages, do it in the setPages callback below
         // Unchanged path
         if (
-            request.path === currentRequest.path 
-            && 
-            request.hash !== currentRequest.hash
-            && 
+            request.path === currentRequest.path &&
+            request.hash !== currentRequest.hash &&
             request.hash !== undefined
         ) {
             scrollToElement(request.hash);
             return;
         }
-        
+
         // Set loading state
         clientRouter.runHook('page.change', request);
-        window.scrollTo({
-            top: 0,
-            behavior: 'smooth'
-        });
+        window.scrollTo({ top: 0, behavior: 'smooth' });
         clientRouter.setLoading(true);
-        const newpage = context.page = await clientRouter.resolve(request);
+        const newpage = (context.page = await clientRouter.resolve(request));
 
         // Unable to load (no connection, server error, ....)
-        if (newpage === null) {
-            return;
-        }
+        if (newpage === null) return;
 
         return await changePage(newpage, data, request);
-    }
+    };
 
     async function changePage(newpage: Page, data?: {}, request?: ClientRequest) {
-
         // Fetch API data to hydrate the page
         try {
             await newpage.preRender();
         } catch (error) {
-            console.error(LogPrefix, "Unable to fetch data:", error);
+            console.error(LogPrefix, 'Unable to fetch data:', error);
             clientRouter?.setLoading(false);
             return;
         }
 
         // Add additional data
-        if (data)
-            newpage.data = { ...newpage.data, ...data };
+        if (data) newpage.data = { ...newpage.data, ...data };
 
         // Add page container
-        setCurrentPage( page => {
-
+        setCurrentPage((page) => {
             // WARN: Don't cancel navigation if same page as before, as we already instanciated the new page and bound the context with it
             //  Otherwise it would cause reference issues (ex: page.setAllData makes ref to the new context)
 
@@ -145,7 +124,6 @@ export default ({ service: clientRouter, loaderComponent }: TProps) => {
             const curLayout = currentPage?.layout;
             const newLayout = newpage?.layout;
             if (newLayout && curLayout && newLayout.path !== curLayout.path) {
-
                 // TEMPORARY FIX: reload everything when we change layout
                 //  Because layout can have a different CSS theme
                 //  But when we call setLayout, the style of the previous layout are still oaded and applied
@@ -154,35 +132,35 @@ export default ({ service: clientRouter, loaderComponent }: TProps) => {
                 /*window.location.replace( request ? request.url : window.location.href );
                 return page; // Don't spread since it's an instance*/
 
-                context.app.setLayout(newLayout);
+                (context.app as { setLayout?: (layout: NonNullable<typeof newLayout>) => void }).setLayout?.(newLayout);
             }
 
             return newpage;
         });
     }
 
-    const restoreScroll = (currentPage?: Page) => currentPage?.scrollToId 
-        && scrollToElement( currentPage.scrollToId.substring(1) )
+    /*----------------------------------
+    - HOOKS
+    ----------------------------------*/
+
+    const restoreScroll = (currentPage?: Page) =>
+        currentPage?.scrollToId && scrollToElement(currentPage.scrollToId.substring(1));
 
     // First render
     React.useEffect(() => {
-
         // Resolve page if it wasn't done via SSR
-        if (context.page === undefined)
-            resolvePage(context.request);
+        if (context.page === undefined) resolvePage(context.request as ClientRequest);
 
         // Foreach URL change (Ex: bowser' back buttton)
         return history?.listen(async (locationUpdate) => {
-
             // Load the concerned route
             const request = new ClientRequest(locationUpdate.location, context.Router);
             await resolvePage(request);
-        })
+        });
     }, []);
 
     // On every page change
     React.useEffect(() => {
-
         if (!clientRouter) return;
 
         // Page loaded
@@ -196,23 +174,25 @@ export default ({ service: clientRouter, loaderComponent }: TProps) => {
         restoreScroll(currentPage);
 
         // Hooks
-        clientRouter.runHook('page.changed', currentPage)
-        
+        clientRouter.runHook('page.changed', (currentPage?.context.request || context.request) as ClientRequest);
     }, [currentPage]);
 
     /*----------------------------------
     - RENDER
     ----------------------------------*/
     // Render the page component
-    return <>
-        {currentPage && (
-            <PageComponent page={currentPage} 
-                /* Create a new instance of the Page component every time the page change 
-                Otherwise the page will memorise the data of the previous page */
-                key={currentPage.chunkId === undefined ? undefined : 'page_' + currentPage.chunkId} 
-            />
-        )}
-
-        <PageLoading clientRouter={clientRouter} loaderComponent={loaderComponent} />
-    </>
-}
+    return (
+        <>
+            {currentPage && (
+                    <PageComponent
+                    page={currentPage as Parameters<typeof PageComponent>[0]['page']}
+                    /* Create a new instance of the Page component every time the page change
+                    Otherwise the page will memorise the data of the previous page */
+                    key={currentPage.chunkId === undefined ? undefined : 'page_' + currentPage.chunkId}
+                />
+            )}
+
+            <PageLoading clientRouter={clientRouter} loaderComponent={loaderComponent} />
+        </>
+    );
+};