Merge pull request #38 from g4rcez/forward-state

Author: OrionFable

.github/workflows/codeql.yml

@@ -1,7 +1,7 @@
 {
   "name": "brouther",
   "type": "module",
-  "version": "4.3.5",
+  "version": "4.3.6",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",

package-lock.json

@@ -1,9 +1,8 @@
-import { usePage, Link, useQueryString, usePaths, useErrorPage, NotFoundRoute } from "../../src";
+import { Link, NotFoundRoute, Outlet, useErrorPage, usePaths, useQueryString } from "../../src";
 import { router } from "./routes";
 import { NotFound } from "./not-found";
 
 function App() {
-    const page = usePage();
     const error = useErrorPage<NotFoundRoute>();
     const queryString = useQueryString();
     const paths = usePaths();
@@ -47,7 +46,9 @@ function App() {
                 </nav>
             </header>
             <div className="w-full container max-w-lg mx-auto px-4 md:px-0">
-                {page !== null ? <main className="page">{page}</main> : null}
+                <main className="page">
+                    <Outlet />
+                </main>
                 <NotFound error={error} />
             </div>
         </div>

package.json

@@ -1,4 +1,4 @@
-import { ActionProps, createFormPath, Form, InferLoader, jsonResponse, LoaderProps, redirectResponse, useDataLoader } from "../../../src";
+import { ActionProps, createFormPath, Form, jsonResponse, LoaderProps, redirectResponse, useDataLoader, useLoadingState } from "../../../src";
 import { useEffect, useState } from "react";
 import { Input } from "../components/input";
 
@@ -10,9 +10,11 @@ export const actions = () => ({
     post: async (args: ActionProps<Route>) => {
         const url = new URL(args.request.url);
         const json = await args.request.json();
+        console.log(args.request);
         url.searchParams.set("firstName", json.person.name);
         url.searchParams.set("lastName", json.person.surname);
         url.searchParams.set("date", json.person.birthday);
+        await new Promise((res) => setTimeout(res, 3000));
         return redirectResponse(url.href);
     },
 });
@@ -34,6 +36,8 @@ export default function Root() {
         console.log("data loader", data?.qs);
     }, [data]);
 
+    const loading = useLoadingState();
+
     return (
         <section className="flex flex-col gap-12">
             <h2 className="font-bold text-3xl">Form post action - json</h2>
@@ -43,13 +47,15 @@ export default function Root() {
             >
                 Throw error
             </button>
-            <Form encType="json" method="post" className="flex gap-8 items-end">
-                <Input defaultValue={qs?.firstName} name={path("person.name")} placeholder="First Name" />
-                <Input defaultValue={qs?.lastName} name={path("person.surname")} placeholder="Last Name" />
-                <Input defaultValue={qs?.date} name={path("person.birthday")} type="date" placeholder="Birthday" />
-                <button className="py-2 px-4 rounded bg-blue-500 text-white font-medium" type="submit">
-                    Submit
-                </button>
+            <Form encType="json" method="post">
+                <fieldset className="flex gap-8 items-end disabled:opacity-40 disabled:bg-gray-400">
+                    <Input defaultValue={qs?.firstName} name={path("person.name")} placeholder="First Name" />
+                    <Input defaultValue={qs?.lastName} name={path("person.surname")} placeholder="Last Name" />
+                    <Input defaultValue={qs?.date} name={path("person.birthday")} type="date" placeholder="Birthday" />
+                    <button className="py-2 px-4 rounded bg-blue-500 text-white font-medium" type="submit">
+                        {loading ? "Saving..." : "Submit"}
+                    </button>
+                </fieldset>
             </Form>
         </section>
     );

playground/src/App.tsx

@@ -21,6 +21,7 @@ export type ContextProps = {
     navigation: RouterNavigator;
     page: X.Nullable<ConfiguredRoute>;
     paths: {};
+    setLoading: (b: boolean) => void;
 };
 
 const Context = createContext<ContextProps | undefined>(undefined);
@@ -59,18 +60,18 @@ const findMatches = (config: Base, pathName: string, filter: BroutherProps<any>[
  */
 export const Brouther = <T extends Base>({ config, ErrorElement, children, filter }: BroutherProps<T>) => {
     const [state, setState] = useState(() => ({
-        loading: false,
         error: null as X.Nullable<BroutherError>,
         location: config.history.location,
         loaderData: null as X.Nullable<Response>,
         matches: findMatches(config, config.history.location.pathname, filter),
     }));
+    const [loading, setLoading] = useState(false);
 
     useEffect(() => {
         const result = findMatches(config, state.location.pathname, filter);
         const request = async () => {
             if (result?.page?.loader) {
-                setState((p) => ({ ...p, loading: true }));
+                setLoading(true);
                 const search = new URLSearchParams(state.location.search);
                 const qs = transformData(search, mapUrlToQueryStringRecord(result.page.originalPath, fromStringToValue));
                 const s = (state.location.state as any) ?? {};
@@ -81,11 +82,12 @@ export const Brouther = <T extends Base>({ config, ErrorElement, children, filte
                     data: result.page.data ?? {},
                     request: new Request(s.url ?? href, { body: s.body ?? undefined, headers: s.headers }),
                 });
+                setLoading(false);
                 return { loaderData: r, loading: false };
             }
         };
         setState((p) => ({ ...p, matches: result, error: result.error ?? null }));
-        request().then((x) => setState((prev) => ({ ...prev, ...x })));
+        request().then((result) => setState((prev) => ({ ...prev, ...result })));
     }, [findMatches, state.location.search, state.location.state, config, filter, state.location.pathname]);
 
     useEffect(() => {
@@ -105,11 +107,12 @@ export const Brouther = <T extends Base>({ config, ErrorElement, children, filte
                 error: state.matches.error ?? state.error,
                 href,
                 loaderData: state.loaderData,
-                loading: state.loading,
+                loading,
                 location: state.location,
                 navigation: config.navigation,
-                paths: state.matches.params,
                 page: state.error !== null ? null : state.matches.page,
+                paths: state.matches.params,
+                setLoading,
             }}
         >
             <CatchError fallback={Fallback} state={state} setError={setError}>
@@ -214,7 +217,29 @@ export function useDataLoader<T extends DataLoader>(fn: (response: Response) =>
     return state;
 }
 
+/*
+    Get current error and the current page that throw the error
+    @returns string
+ */
 export const useRouteError = () => {
     const router = useRouter();
     return [router.error, router.page] as const;
 };
+
+/*
+    Render the page that match with your route
+    @returns string
+ */
+export const Outlet = () => {
+    const page = usePage();
+    return <Fragment>{page}</Fragment>;
+};
+
+/*
+    Boolean that represents if it's your action/loader process is loading
+    @returns string
+ */
+export const useLoadingState = () => {
+    const router = useRouter();
+    return router.loading;
+};

playground/src/pages/root.tsx

@@ -1,4 +1,3 @@
-import type { IParseOptions, IStringifyOptions } from "qs";
 import { parse, stringify } from "qs";
 
 const sort = (a: string, b: string) => a.localeCompare(b);

src/brouther/brouther.tsx

@@ -49,40 +49,40 @@ const fromResponse = (ctx: ContextProps, response: Response) => {
 export const Form = forwardRef<HTMLFormElement, Props>(function InnerForm(props, externalRef) {
     const router = useRouter();
     const method = (props.method || "get").toLowerCase() as HttpMethods;
+
     const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        router.setLoading(true);
         event.preventDefault();
         const form = event.currentTarget;
-        await props.onSubmit?.(event);
+        if (props.onSubmit) {
+            await props.onSubmit(event);
+        }
         const page = router.page;
         if (method === "get" && page?.loader) {
-            return fromResponse(
-                router,
-                await page.loader({
-                    paths: router.paths,
-                    data: page.data ?? {},
-                    path: router.href as PathFormat,
-                    request: new Request(router.href),
-                    queryString: fetchQs(router.location.search, page.originalPath),
-                })
-            );
+            const body = {
+                paths: router.paths,
+                data: page.data ?? {},
+                path: router.href as PathFormat,
+                request: new Request(router.href),
+                queryString: fetchQs(router.location.search, page.originalPath),
+            };
+            return fromResponse(router, await page.loader(body));
         }
         if (page?.actions && method !== "get") {
-            const actions = await page.actions()
+            const actions = await page.actions();
             if (has(actions, method)) {
                 const fn = actions[method];
                 const body = parseFromEncType(props.encType, form);
                 const headers = new Headers();
                 if (props.encType) headers.set("Content-Type", props.encType);
-                return fromResponse(
-                    router,
-                    await fn!({
-                        paths: router.paths,
-                        data: page.data ?? {},
-                        path: router.href as PathFormat,
-                        request: new Request(router.href, { body, method, headers }),
-                        queryString: fetchQs(router.location.search, page.originalPath),
-                    })
-                );
+                const response = await fn!({
+                    paths: router.paths,
+                    data: page.data ?? {},
+                    path: router.href as PathFormat,
+                    request: new Request(router.href, { body, method, headers }),
+                    queryString: fetchQs(router.location.search, page.originalPath),
+                });
+                return fromResponse(router, response);
             }
         }
     };

src/form/form-data-api.ts

@@ -1,46 +1,48 @@
 export type {
-    ConfiguredRoute,
-    Route,
+    ActionProps,
+    Actions,
     AnyJson,
     AnyJsonArray,
+    ConfiguredRoute,
+    HttpMethods,
     Loader,
-    Actions,
+    LoaderProps,
     PathFormat,
+    Route,
     RouteData,
-    HttpMethods,
     WithoutGet,
-    LoaderProps,
-    ActionProps,
 } from "./types";
 export type { LinkProps } from "./router/link";
 export type { Paths } from "./types/paths";
 export type { QueryString } from "./types/query-string";
 export type { RouterNavigator } from "./router/router-navigator";
 export {
     Brouther,
-    useUrlSearchParams,
-    usePage,
+    Outlet,
+    useBasename,
     useDataLoader,
-    useNavigation,
     useErrorPage,
+    useHref,
+    useLoadingState,
+    useNavigation,
+    usePage,
     usePaths,
     useQueryString,
-    useHref,
     useRouteError,
-    useBasename,
+    useUrlSearchParams,
 } from "./brouther/brouther";
 export { BroutherError, NotFoundRoute } from "./utils/errors";
 export { Form } from "./form/form";
 export { Link } from "./router/link";
 export {
-    createRouter,
-    createMappedRouter,
-    createMappedRouter as createRouterMap,
-    createMappedRouter as createRecordRouter,
-    createRoute,
     asyncActions,
-    asyncLoader,
     asyncComponent,
+    asyncLoader,
+    createMappedRouter as createRecordRouter,
+    createMappedRouter as createRouterMap,
+    createMappedRouter,
+    createRoute,
+    createRouter,
 } from "./router/router";
 export { urlEntity, mergeUrlEntities, createHref, qsToString, transformData, createPaths, type GetPaths } from "./utils/utils";
 export { urlSearchParamsToJson, jsonToURLSearchParams, formToJson } from "./form/form-data-api";