conditional load react scan

ethanniser · Dec 2, 2024 · e70f8bc · e70f8bc
1 parent 8fc0c11
commit e70f8bc
Show file tree

Hide file tree

Showing 31 changed files with 134 additions and 7 deletions.
diff --git a/.../(category-sidebar)/[collection]/page.tsx → .../(category-sidebar)/[collection]/page.tsx b/.../(category-sidebar)/[collection]/page.tsx → .../(category-sidebar)/[collection]/page.tsx
diff --git a/src/app/(category-sidebar)/layout.tsx → src/app/(app)/(category-sidebar)/layout.tsx b/src/app/(category-sidebar)/layout.tsx → src/app/(app)/(category-sidebar)/layout.tsx
diff --git a/src/app/(category-sidebar)/page.tsx → src/app/(app)/(category-sidebar)/page.tsx b/src/app/(category-sidebar)/page.tsx → src/app/(app)/(category-sidebar)/page.tsx
diff --git a/...ubcategory]/[product]/opengraph-image.tsx → ...ubcategory]/[product]/opengraph-image.tsx b/...ubcategory]/[product]/opengraph-image.tsx → ...ubcategory]/[product]/opengraph-image.tsx
diff --git a/...ategory]/[subcategory]/[product]/page.tsx → ...ategory]/[subcategory]/[product]/page.tsx b/...ategory]/[subcategory]/[product]/page.tsx → ...ategory]/[subcategory]/[product]/page.tsx
diff --git a/...tegory]/[subcategory]/opengraph-image.tsx → ...tegory]/[subcategory]/opengraph-image.tsx b/...tegory]/[subcategory]/opengraph-image.tsx → ...tegory]/[subcategory]/opengraph-image.tsx
diff --git a/...roducts/[category]/[subcategory]/page.tsx → ...roducts/[category]/[subcategory]/page.tsx b/...roducts/[category]/[subcategory]/page.tsx → ...roducts/[category]/[subcategory]/page.tsx
diff --git a/...y-sidebar)/products/[category]/layout.tsx → ...y-sidebar)/products/[category]/layout.tsx b/...y-sidebar)/products/[category]/layout.tsx → ...y-sidebar)/products/[category]/layout.tsx
diff --git a/...)/products/[category]/opengraph-image.tsx → ...)/products/[category]/opengraph-image.tsx b/...)/products/[category]/opengraph-image.tsx → ...)/products/[category]/opengraph-image.tsx
diff --git a/...ory-sidebar)/products/[category]/page.tsx → ...ory-sidebar)/products/[category]/page.tsx b/...ory-sidebar)/products/[category]/page.tsx → ...ory-sidebar)/products/[category]/page.tsx
diff --git a/src/app/(login)/actions.ts → src/app/(app)/(login)/actions.ts b/src/app/(login)/actions.ts → src/app/(app)/(login)/actions.ts
diff --git a/src/app/api/debug/route.ts → src/app/(app)/api/debug/route.ts b/src/app/api/debug/route.ts → src/app/(app)/api/debug/route.ts
diff --git a/...pp/api/prefetch-images/[...rest]/route.ts → ...p)/api/prefetch-images/[...rest]/route.ts b/...pp/api/prefetch-images/[...rest]/route.ts → ...p)/api/prefetch-images/[...rest]/route.ts
diff --git a/src/app/api/search/route.ts → src/app/(app)/api/search/route.ts b/src/app/api/search/route.ts → src/app/(app)/api/search/route.ts
diff --git a/src/app/auth.client.tsx → src/app/(app)/auth.client.tsx b/src/app/auth.client.tsx → src/app/(app)/auth.client.tsx
diff --git a/src/app/auth.server.tsx → src/app/(app)/auth.server.tsx b/src/app/auth.server.tsx → src/app/(app)/auth.server.tsx
diff --git a/src/app/data.ts → src/app/(app)/data.ts b/src/app/data.ts → src/app/(app)/data.ts
diff --git a/src/app/error.tsx → src/app/(app)/error.tsx b/src/app/error.tsx → src/app/(app)/error.tsx
diff --git a/src/app/favicon.ico → src/app/(app)/favicon.ico b/src/app/favicon.ico → src/app/(app)/favicon.ico
diff --git a/src/app/globals.css → src/app/(app)/globals.css b/src/app/globals.css → src/app/(app)/globals.css
diff --git a/src/app/layout.tsx → src/app/(app)/layout.tsx b/src/app/layout.tsx → src/app/(app)/layout.tsx
diff --git a/src/app/not-found.tsx → src/app/(app)/not-found.tsx b/src/app/not-found.tsx → src/app/(app)/not-found.tsx
diff --git a/src/app/opengraph-image.png → src/app/(app)/opengraph-image.png b/src/app/opengraph-image.png → src/app/(app)/opengraph-image.png
diff --git a/src/app/order-history/dynamic.tsx → src/app/(app)/order-history/dynamic.tsx b/src/app/order-history/dynamic.tsx → src/app/(app)/order-history/dynamic.tsx
diff --git a/src/app/order-history/page.tsx → src/app/(app)/order-history/page.tsx b/src/app/order-history/page.tsx → src/app/(app)/order-history/page.tsx
diff --git a/src/app/order/dynamic.tsx → src/app/(app)/order/dynamic.tsx b/src/app/order/dynamic.tsx → src/app/(app)/order/dynamic.tsx
diff --git a/src/app/order/page.tsx → src/app/(app)/order/page.tsx b/src/app/order/page.tsx → src/app/(app)/order/page.tsx
diff --git a/src/app/robots.txt → src/app/(app)/robots.txt b/src/app/robots.txt → src/app/(app)/robots.txt
diff --git a/src/app/welcome-toast.tsx → src/app/(app)/welcome-toast.tsx b/src/app/welcome-toast.tsx → src/app/(app)/welcome-toast.tsx
diff --git a/src/app/(scan)/scan/layout.tsx b/src/app/(scan)/scan/layout.tsx
@@ -0,0 +1,134 @@
+import type { Metadata } from "next";
+import "@/app/(app)/globals.css";
+import { SearchDropdownComponent } from "@/components/search-dropdown";
+import { MenuIcon } from "lucide-react";
+import { Suspense } from "react";
+import { Cart } from "@/components/cart";
+import { Link } from "@/components/ui/link";
+import { Analytics } from "@vercel/analytics/react";
+import { Toaster } from "sonner";
+import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
+import { AuthServer } from "@/app/(app)/auth.server";
+import { WelcomeToast } from "@/app/(app)/welcome-toast";
+
+export const metadata: Metadata = {
+  title: {
+    template: "%s | NextFaster",
+    default: "NextFaster",
+  },
+  description: "A performant site built with Next.js",
+};
+
+export const revalidate = 86400; // One day
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="h-full">
+      <head>
+        <script src="https://unpkg.com/react-scan/dist/auto.global.js" async />
+      </head>
+      <body
+        className={`${GeistSans.variable} ${GeistMono.variable} flex flex-col overflow-y-auto overflow-x-hidden antialiased`}
+      >
+        <div>
+          <header className="fixed top-0 z-10 flex h-[90px] w-[100vw] flex-grow items-center justify-between border-b-2 border-accent2 bg-background p-2 pb-[4px] pt-2 sm:h-[70px] sm:flex-row sm:gap-4 sm:p-4 sm:pb-[4px] sm:pt-0">
+            <div className="flex flex-grow flex-col">
+              <div className="absolute right-2 top-2 flex justify-end pt-2 font-sans text-sm hover:underline sm:relative sm:right-0 sm:top-0">
+                <Suspense
+                  fallback={
+                    <button className="flex flex-row items-center gap-1">
+                      <div className="h-[20px]" />
+                      <svg viewBox="0 0 10 6" className="h-[6px] w-[10px]">
+                        <polygon points="0,0 5,6 10,0"></polygon>
+                      </svg>
+                    </button>
+                  }
+                >
+                  <AuthServer />
+                </Suspense>
+              </div>
+              <div className="flex w-full flex-col items-start justify-center sm:w-auto sm:flex-row sm:items-center sm:gap-2">
+                <Link
+                  prefetch={true}
+                  href="/"
+                  className="text-4xl font-bold text-accent1"
+                >
+                  NextFaster
+                </Link>
+                <div className="items flex w-full flex-row items-center justify-between gap-4">
+                  <div className="mx-0 flex-grow sm:mx-auto sm:flex-grow-0">
+                    <SearchDropdownComponent />
+                  </div>
+                  <div className="flex flex-row justify-between space-x-4">
+                    <div className="relative">
+                      <Link
+                        prefetch={true}
+                        href="/order"
+                        className="text-lg text-accent1 hover:underline"
+                      >
+                        ORDER
+                      </Link>
+                      <Suspense>
+                        <Cart />
+                      </Suspense>
+                    </div>
+                    <Link
+                      prefetch={true}
+                      href="/order-history"
+                      className="hidden text-lg text-accent1 hover:underline md:block"
+                    >
+                      ORDER HISTORY
+                    </Link>
+                    <Link
+                      prefetch={true}
+                      href="/order-history"
+                      aria-label="Order History"
+                      className="block text-lg text-accent1 hover:underline md:hidden"
+                    >
+                      <MenuIcon />
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </header>
+          <div className="pt-[85px] sm:pt-[70px]">{children}</div>
+        </div>
+        <footer className="fixed bottom-0 flex h-12 w-screen flex-col items-center justify-between space-y-2 border-t border-gray-400 bg-background px-4 font-sans text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
+          <div className="flex flex-wrap justify-center space-x-2 pt-2 sm:justify-start">
+            <span className="hover:bg-accent2 hover:underline">Home</span>
+            <span>|</span>
+            <span className="hover:bg-accent2 hover:underline">FAQ</span>
+            <span>|</span>
+            <span className="hover:bg-accent2 hover:underline">Returns</span>
+            <span>|</span>
+            <span className="hover:bg-accent2 hover:underline">Careers</span>
+            <span>|</span>
+            <span className="hover:bg-accent2 hover:underline">Contact</span>
+          </div>
+          <div className="text-center sm:text-right">
+            By using this website, you agree to check out the{" "}
+            <Link
+              href="https://github.com/ethanniser/NextFaster"
+              className="font-bold text-accent1 hover:underline"
+              target="_blank"
+            >
+              Source Code
+            </Link>
+          </div>
+        </footer>
+        {/* does putting this in suspense do anything? */}
+        <Suspense fallback={null}>
+          <Toaster closeButton />
+          <WelcomeToast />
+        </Suspense>
+        <Analytics scriptSrc="/insights/events.js" endpoint="/hfi/events" />
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/scan/page.tsx → src/app/(scan)/scan/page.tsx b/src/app/scan/page.tsx → src/app/(scan)/scan/page.tsx
@@ -1,15 +1,8 @@
 "use client";
 
-import { scan } from "react-scan"; // import this BEFORE react
 import React from "react";
 import Link from "next/link";
 
-if (typeof window !== "undefined") {
-  scan({
-    enabled: true,
-  });
-}
-
 export default function ScanPage() {
   return (
     <div className="flex h-screen flex-col items-center justify-center">