refactor: page and provider layouts

VariableVic · VariableVic · commit 8936bb63f6b1 · 2023-07-04T15:48:26.000+02:00
diff --git a/src/app/cart/layout.tsx b/src/app/cart/layout.tsx
@@ -0,0 +1,9 @@
+import PageLayout from "app/page-layout"
+
+export default function CartLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <PageLayout>{children}</PageLayout>
+}
diff --git a/src/app/checkout/layout.tsx b/src/app/checkout/layout.tsx
diff --git a/src/app/collections/[handle]/collection.tsx b/src/app/collections/[handle]/collection.tsx
@@ -28,11 +28,11 @@ const fetchCollectionProducts = async ({
   handle: string
   cartId?: string
 }) => {
-  const { products, count, nextPage } = await fetch(
+  const { response, nextPage } = await fetch(
     `${BASEURL}/collections?handle=${handle}&cart_id=${cartId}&page=${pageParam}`
   ).then((res) => res.json())
   return {
-    response: { products, count },
+    response,
     nextPage,
   }
 }
@@ -46,7 +46,6 @@ const Collection: React.FC<CollectionTemplateProps> = ({ collection }) => {
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
-    isLoading,
     refetch,
   } = useInfiniteQuery(
     [`get_collection_products`, collection.handle, cart?.id],
@@ -90,13 +89,6 @@ const Collection: React.FC<CollectionTemplateProps> = ({ collection }) => {
             <ProductPreview {...p} />
           </li>
         ))}
-        {isLoading &&
-          !previews.length &&
-          repeat(8).map((index) => (
-            <li key={index}>
-              <SkeletonProductPreview />
-            </li>
-          ))}
         {isFetchingNextPage &&
           repeat(getNumberOfSkeletons(infiniteData?.pages)).map((index) => (
             <li key={index}>
diff --git a/src/app/collections/[handle]/page.tsx b/src/app/collections/[handle]/page.tsx
@@ -1,3 +1,4 @@
+import PageLayout from "app/page-layout"
 import Collection from "./collection"
 
 import { Metadata } from "next"
@@ -26,8 +27,8 @@ export default async function CollectionPage({ params }: Props) {
   ).then((res) => res.json())
 
   return (
-    <>
+    <PageLayout>
       <Collection collection={collection} />
-    </>
+    </PageLayout>
   )
 }
diff --git a/src/app/collections/route.ts b/src/app/collections/route.ts
@@ -12,15 +12,17 @@ export async function GET(request: NextRequest) {
       throw new Error(JSON.stringify(error.error))
     })
 
-  const { response, nextPage } = await fetchCollectionProducts({
+  const { products, count, nextPage } = await fetchCollectionProducts({
     pageParam,
     id: collection.id,
   }).then((res) => res)
 
   return NextResponse.json({
     collection,
-    products: response.products,
-    count: response.count,
+    response: {
+      products,
+      count,
+    },
     nextPage,
   })
 }
@@ -52,7 +54,8 @@ async function fetchCollectionProducts({
   ).then((res) => res.body)
 
   return {
-    response: { products, count },
+    products: [...products, ...products, ...products, ...products],
+    count: 15,
     nextPage: count > offset + 12 ? offset + 12 : null,
   }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,3 +1,6 @@
+import Footer from "@modules/layout/templates/footer"
+import Nav from "@modules/layout/templates/nav"
+import Providers from "@modules/providers"
 import "styles/globals.css"
 
 export default function RootLayout({
@@ -8,7 +11,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <main className="relative">{children}</main>
+        <Providers>
+          <main className="relative">{children}</main>
+        </Providers>
       </body>
     </html>
   )
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from "next"
 import Link from "next/link"
+import PageLayout from "./page-layout"
 
 export const metadata: Metadata = {
   title: "404",
@@ -8,7 +9,7 @@ export const metadata: Metadata = {
 
 export default function NotFound() {
   return (
-    <>
+    <PageLayout>
       <div className="flex flex-col items-center justify-center min-h-[calc(100vh-64px)]">
         <h1 className="text-2xl-semi text-gry-900">Page not found</h1>
         <p className="text-small-regular text-gray-700">
@@ -21,6 +22,6 @@ export default function NotFound() {
           Go to frontpage
         </Link>
       </div>
-    </>
+    </PageLayout>
   )
 }
diff --git a/src/app/page-layout.tsx b/src/app/page-layout.tsx
@@ -0,0 +1,16 @@
+import Footer from "@modules/layout/templates/footer"
+import Nav from "@modules/layout/templates/nav"
+
+export default function PageLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <Nav />
+      {children}
+      <Footer />
+    </>
+  )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,8 +1,6 @@
+import PageLayout from "./page-layout"
 import FeaturedProducts from "@modules/home/components/featured-products"
 import Hero from "@modules/home/components/hero"
-import Footer from "@modules/layout/templates/footer"
-import Nav from "@modules/layout/templates/nav"
-import Providers from "@modules/providers"
 import { Metadata } from "next"
 
 export const metadata: Metadata = {
@@ -13,12 +11,10 @@ export const metadata: Metadata = {
 
 const Home = () => {
   return (
-    <Providers>
-      <Nav />
+    <PageLayout>
       <Hero />
       <FeaturedProducts />
-      <Footer />
-    </Providers>
+    </PageLayout>
   )
 }
 
diff --git a/src/app/store/page.tsx b/src/app/store/page.tsx
@@ -1,11 +1,16 @@
 import { Metadata } from "next"
 import Store from "./store"
+import PageLayout from "app/page-layout"
 
 export const metadata: Metadata = {
   title: "Store",
   description: "Explore all of our products.",
 }
 
 export default function StorePage() {
-  return <Store />
+  return (
+    <PageLayout>
+      <Store />
+    </PageLayout>
+  )
 }
diff --git a/src/modules/checkout/components/checkout-loader/index.tsx b/src/modules/checkout/components/checkout-loader/index.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { Dialog, Transition } from "@headlessui/react"
 import { useCheckout } from "@lib/context/checkout-context"
 import noop from "@lib/util/noop"
diff --git a/src/modules/checkout/templates/checkout-form/index.tsx b/src/modules/checkout/templates/checkout-form/index.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import Addresses from "@modules/checkout/components/addresses"
 import Payment from "@modules/checkout/components/payment"
 import Shipping from "@modules/checkout/components/shipping"
diff --git a/src/modules/checkout/templates/checkout-summary/index.tsx b/src/modules/checkout/templates/checkout-summary/index.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import DiscountCode from "@modules/checkout/components/discount-code"
 import GiftCard from "@modules/checkout/components/gift-card"
 import PaymentButton from "@modules/checkout/components/payment-button"
diff --git a/src/modules/checkout/templates/index.tsx b/src/modules/checkout/templates/index.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { CheckoutProvider } from "@lib/context/checkout-context"
 import ChevronDown from "@modules/common/icons/chevron-down"
 import MedusaCTA from "@modules/layout/components/medusa-cta"
diff --git a/src/modules/providers/index.tsx b/src/modules/providers/index.tsx
@@ -21,11 +21,7 @@ export default function Providers({ children }: { children: React.ReactNode }) {
         <MobileMenuProvider>
           <CartProvider>
             <StoreProvider>
-              <AccountProvider>
-                <Nav />
-                {children}
-                <Footer />
-              </AccountProvider>
+              <AccountProvider>{children}</AccountProvider>
             </StoreProvider>
           </CartProvider>
         </MobileMenuProvider>

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import PageLayout from "app/page-layout"`
`1`	`2`	`import Collection from "./collection"`
`2`	`3`
`3`	`4`	`import { Metadata } from "next"`
`@@ -26,8 +27,8 @@ export default async function CollectionPage({ params }: Props) {`
`26`	`27`	`).then((res) => res.json())`
`27`	`28`
`28`	`29`	`return (`
`29`		`- <>`
	`30`	`+ <PageLayout>`
`30`	`31`	`<Collection collection={collection} />`
`31`		`- </>`
	`32`	`+ </PageLayout>`
`32`	`33`	`)`
`33`	`34`	`}`