Towards web standards 🎖️

package.json

@@ -32,10 +32,12 @@
   },
   "dependencies": {
     "@better-giving/assets": "1.0.18",
-    "@better-giving/endowment": "1.0.29",
+    "@better-giving/endowment": "1.0.31",
     "@better-giving/registration": "1.0.24",
     "@better-giving/schemas": "1.0.1",
     "@better-giving/types": "1.0.1",
+    "@conform-to/dom": "1.2.2",
+    "@conform-to/react": "1.2.2",
     "@gsap/react": "2.1.1",
     "@headlessui/react": "2.1.0",
     "@hookform/error-message": "2.0.1",
@@ -47,13 +49,15 @@
     "@sentry/react": "8.22.0",
     "@stripe/react-stripe-js": "2.7.1",
     "@stripe/stripe-js": "3.5.0",
-    "aws-amplify": "6.3.6",
+    "conform-to-valibot": "1.11.0",
     "cropperjs": "1.6.2",
     "date-fns": "3.6.0",
     "decimal.js": "10.4.3",
     "framer-motion": "11.2.10",
     "fuse.js": "7.0.0",
     "gsap": "3.12.5",
+    "jose": "5.9.2",
+    "lodash": "4.17.21",
     "lucide-react": "0.436.0",
     "nprogress": "0.2.0",
     "qrcode.react": "3.1.0",
@@ -69,9 +73,10 @@
     "react-hook-form": "7.53.0",
     "react-player": "2.16.0",
     "react-redux": "9.1.2",
-    "react-router-dom": "6.23.0",
+    "react-router-dom": "6.24.0",
     "sonner": "1.7.0",
     "swiper": "11.1.4",
+    "swr": "2.2.5",
     "type-fest": "4.20.0",
     "valibot": "0.42.0",
     "yup": "1.4.0"
@@ -86,6 +91,7 @@
     "@testing-library/jest-dom": "6.4.6",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
+    "@types/lodash": "4.17.10",
     "@types/node": "18.18.13",
     "@types/nprogress": "^0",
     "@types/react": "18.2.62",

src/App/App.tsx

@@ -1,30 +1,34 @@
 import { appRoutes, donateWidgetRoutes } from "constants/routes";
 import ModalContext from "contexts/ModalContext";
-import { RouterErrorBoundary } from "errors/ErrorBoundary";
-import useScrollTop from "hooks/useScrollTop";
+import { ErrorElement } from "errors/ErrorElement";
 import NProgress from "nprogress";
 import { adminRoute } from "pages/Admin";
+import { promptRoutes, reviewRoute } from "pages/Application/review-route";
+import { bankApplicationRoute } from "pages/BankingApplication";
 import { routes as blogRoutes } from "pages/Blog";
 import { legalRoutes } from "pages/Legal";
 import OAuthRedirector from "pages/OAuthRedirector";
 import { profileRoute } from "pages/Profile";
 import { route as regRoute } from "pages/Registration";
+import { signUpRoute } from "pages/SignUp";
 import { userDashboardRoute } from "pages/UserDashboard";
+import { Component as Widget, loader as widgetLoader } from "pages/Widget";
 import { infoRoutes } from "pages/informational";
 import { useEffect } from "react";
 import {
   Navigate,
   Outlet,
   type RouteObject as RO,
-  useLocation,
+  ScrollRestoration,
   useNavigation,
 } from "react-router-dom";
 import { Toaster } from "sonner";
 import Layout from "./Layout";
+import { rootAction } from "./root-action";
+import { rootLoader } from "./root-loader";
 
 const donateThanks = import("pages/DonateThanks");
 const stripePaymentStatus = import("pages/StripePaymentStatus");
-const widget = import("pages/Widget");
 
 const widgetRoutes: RO[] = [
   { path: ":id", lazy: () => import("pages/DonateWidget") },
@@ -37,78 +41,87 @@ const widgetRoutes: RO[] = [
 
 //routes between header/footer
 const _appRoutes: RO[] = [
-  adminRoute,
   regRoute,
   userDashboardRoute,
   ...blogRoutes,
   ...legalRoutes,
   ...infoRoutes,
-  {
-    element: <Outlet context={true} />, //outlet-value: legacy
-    children: [{ path: appRoutes.profile + "/:id", ...profileRoute }],
-  },
-
+  { path: appRoutes.profile + "/:id", ...profileRoute },
   {
     path: appRoutes.banking_applications,
     children: [
-      { path: ":id", lazy: () => import("pages/BankingApplication") },
+      bankApplicationRoute,
       { index: true, lazy: () => import("pages/BankingApplications") },
     ],
   },
   {
     path: appRoutes.applications,
     children: [
-      { path: ":id", lazy: () => import("pages/Application") },
+      {
+        path: ":id",
+        lazy: () => import("pages/Application"),
+        errorElement: <ErrorElement />,
+        children: [reviewRoute, ...promptRoutes],
+      },
       { index: true, lazy: () => import("pages/Applications") },
     ],
   },
   { path: appRoutes.donate_thanks, lazy: () => donateThanks },
   { path: appRoutes.stripe_payment_status, lazy: () => stripePaymentStatus },
   { path: appRoutes.signin, lazy: () => import("pages/Signin") },
-  { path: appRoutes.signup, lazy: () => import("pages/SignUp") },
+  signUpRoute,
   { path: appRoutes.reset_password, lazy: () => import("pages/ResetPassword") },
   { path: appRoutes.auth_redirector, element: <OAuthRedirector /> },
   {
     path: appRoutes.marketplace,
+    lazy: () => import("pages/Marketplace"),
     children: [
-      { index: true, lazy: () => import("pages/Marketplace") },
-      { path: ":id", ...profileRoute },
+      { path: "filter", lazy: () => import("pages/Marketplace/Filter") },
     ],
   },
+  { path: appRoutes.marketplace + "/:id", ...profileRoute },
   {
     path: appRoutes.form_builder,
+    loader: widgetLoader,
     // Widget.tsx is also used as one of the Admin pages and so
     // where its styles depend on the width of the parent component;
     // We copy/paste src/pages/Admin/Layout.tsx container setup & styles
     // here so that Widget.tsx styles are applied correctly on both pages.
     element: (
       <div className="px-6 py-8 md:p-10 @container">
-        <Outlet />
+        <Widget />
       </div>
     ),
-    children: [{ index: true, lazy: () => widget }],
   },
-  { index: true, lazy: () => import("pages/Home") },
 ];
 
 const rootRoutes: RO[] = [
-  { path: `${appRoutes.donate}/:id`, lazy: () => import("pages/Donate") },
+  { index: true, lazy: () => import("pages/Home") },
+  {
+    path: `${appRoutes.donate}/:id`,
+    lazy: () => import("pages/Donate"),
+  },
+  adminRoute,
   //outlet-value: isInWidget/widgetVersion
   { element: <Layout />, children: _appRoutes },
   {
     path: appRoutes.donate_widget,
     element: <Outlet context={true} />, //outlet-value: isInWidget/widgetVersion
     children: widgetRoutes,
   },
+  { path: "*", element: <Navigate to="/" /> },
 ];
 
 export const routes: RO[] = [
   {
+    id: "root",
+    path: "/",
     element: <RootLayout />,
+    loader: rootLoader,
+    action: rootAction,
     children: rootRoutes,
-    ErrorBoundary: RouterErrorBoundary,
+    ErrorBoundary: ErrorElement,
   },
-  { path: "*", element: <Navigate to="/" /> },
 ];
 
 NProgress.configure({
@@ -125,12 +138,24 @@ function RootLayout() {
     else NProgress.start();
   }, [transition.state]);
 
-  const location = useLocation();
-  useScrollTop(location.pathname);
+  useEffect(() => {
+    console.log("reloaded");
+    return () => {
+      caches.open("bg").then((c) => {
+        c.keys().then((ks) => {
+          for (const k of ks) {
+            c.delete(k);
+          }
+        });
+      });
+    };
+  }, []);
+
   return (
     <ModalContext>
+      <ScrollRestoration />
       <Outlet />
-      <Toaster richColors position="top-right" closeButton />
+      <Toaster richColors position="bottom-right" closeButton />
     </ModalContext>
   );
 }

src/App/Header.tsx

@@ -0,0 +1,37 @@
+import { NavDropdown, UserMenu } from "components/Header";
+import { DappLogo } from "components/Image";
+import { authRoutes } from "constants/routes";
+import { useLocation, useRouteLoaderData } from "react-router-dom";
+import type { DetailedUser } from "types/auth";
+
+type Props = { classes?: string };
+
+export default function Header({ classes }: Props) {
+  const user = useRouteLoaderData("root") as DetailedUser | null;
+  const location = useLocation();
+  const isInAuth = authRoutes.includes(location.pathname);
+
+  return (
+    <header
+      className={`${classes} bg-white`}
+      ref={(node) => {
+        if (!node) return;
+        const observer = new IntersectionObserver(
+          ([e]) => {
+            const isIntersecting = e.intersectionRatio < 1;
+            e.target.classList.toggle("shadow-lg", isIntersecting);
+          },
+          { threshold: [1] }
+        );
+        observer.observe(node);
+      }}
+    >
+      <div className="grid grid-cols-[1fr_auto_auto] items-center gap-4 padded-container py-2">
+        <DappLogo classes="w-48 h-12" />
+
+        {!isInAuth && <UserMenu classes="max-sm:hidden" />}
+        <NavDropdown isInAuth={isInAuth} user={user} />
+      </div>
+    </header>
+  );
+}