Add Persistent layout to new app template with <Layout> and `getLay…

…out()` (blitz-js#897) Co-authored-by: Brandon Bayer <[email protected]> (minor)
Anjianto · Aug 18, 2020 · 18beb6f · 18beb6f
1 parent 5f68bda
commit 18beb6f
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 23 deletions.
diff --git a/MEETING_NOTES.md b/MEETING_NOTES.md
@@ -1,21 +1,19 @@
-
 # 2020-08-17 Blitz Contributor Call
 
 - Attending: Brandon Bayer, Adam Markon, Kellen Mace, Myron Davis, Dwight Watson
 - Brandon:
-    - Auth out, set up by default in canary release
-    - Need to work on a potential CSRF bug
-    - Next major release will include auth by default and allow you to choose your form library
-    - Next auth features are email confirmation
-    - After that, logging and plugins are next
+  - Auth out, set up by default in canary release
+  - Need to work on a potential CSRF bug
+  - Next major release will include auth by default and allow you to choose your form library
+  - Next auth features are email confirmation
+  - After that, logging and plugins are next
 - Adam:
-    - Overhauled the recipe infrastructure. Now using jscodeshift instead of recast
-    - Added support for conditional JSX in templates
-    - Going to work on custom templates next
+  - Overhauled the recipe infrastructure. Now using jscodeshift instead of recast
+  - Added support for conditional JSX in templates
+  - Going to work on custom templates next
 - Dwight
-    - Has been opening issues for problems
-    - Made a few PRs for some issues
-
+  - Has been opening issues for problems
+  - Made a few PRs for some issues
 
 # 2020-07-07 Blitz Contributor Call
 

diff --git a/README.md b/README.md
@@ -332,6 +332,7 @@ Thanks to these wonderful people ([emoji key](https://allcontributors.org/docs/e
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,3 +1,6 @@
+import {NextPage, NextComponentType} from "next"
+import {AppProps as NextAppProps} from "next/app"
+
 export * from "./use-query"
 export * from "./use-paginated-query"
 export * from "./use-params"
@@ -22,13 +25,10 @@ export {
   GetServerSideProps,
   InferGetStaticPropsType,
   InferGetServerSidePropsType,
-  NextPage as BlitzPage,
   NextApiRequest as BlitzApiRequest,
   NextApiResponse as BlitzApiResponse,
 } from "next"
 
-export {AppProps} from "next/app"
-
 export {default as Head} from "next/head"
 
 export {default as Link} from "next/link"
@@ -49,4 +49,14 @@ export {default as dynamic} from "next/dynamic"
 
 export {default as ErrorComponent} from "next/error"
 
+export type BlitzComponentType = NextComponentType
+
+export interface AppProps extends NextAppProps {
+  Component: BlitzComponentType & {
+    getLayout?: (component: JSX.Element) => JSX.Element
+  }
+}
+export type BlitzPage<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (component: JSX.Element) => JSX.Element
+}
 export {isLocalhost} from "./utils/index"
diff --git a/packages/generator/templates/app/app/layouts/Layout.tsx b/packages/generator/templates/app/app/layouts/Layout.tsx
@@ -0,0 +1,14 @@
+import { Head } from "blitz"
+
+const Layout = ({ title, children }) => (
+  <>
+    <Head>
+      <title>{title || "__name__"}</title>
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+
+    {children}
+  </>
+)
+
+export default Layout
diff --git a/packages/generator/templates/app/app/pages/_app.tsx b/packages/generator/templates/app/app/pages/_app.tsx
@@ -4,6 +4,8 @@ import { queryCache } from "react-query"
 import LoginForm from "app/auth/components/LoginForm"
 
 export default function App({ Component, pageProps }: AppProps) {
+  const getLayout = Component.getLayout || ((page) => page)
+
   return (
     <ErrorBoundary
       FallbackComponent={RootErrorFallback}
@@ -13,7 +15,7 @@ export default function App({ Component, pageProps }: AppProps) {
         queryCache.resetErrorBoundaries()
       }}
     >
-      <Component {...pageProps} />
+      {getLayout(<Component {...pageProps} />)}
     </ErrorBoundary>
   )
 }

diff --git a/packages/generator/templates/app/app/pages/index.tsx b/packages/generator/templates/app/app/pages/index.tsx
@@ -1,21 +1,17 @@
-import { Head, Link, useSession } from "blitz"
+import Layout from "app/layouts/layout"
+import { Link, useSession } from "blitz"
 import logout from "app/auth/mutations/logout"
 
 /*
  * This file is just for a pleasant getting started page for your new app.
  * You can delete everything in here and start from scratch if you like.
  */
 
-export default function Home() {
+const Home = () => {
   const session = useSession()
 
   return (
     <div className="container">
-      <Head>
-        <title>__name__</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
       <main>
         <div className="logo">
           <img src="/logo.png" alt="blitz.js" />
@@ -249,3 +245,7 @@ export default function Home() {
     </div>
   )
 }
+
+Home.getLayout = (page) => <Layout title="Home">{page}</Layout>
+
+export default Home
diff --git a/packages/generator/templates/page/__modelIdParam__.tsx b/packages/generator/templates/page/__modelIdParam__.tsx
@@ -1,4 +1,5 @@
 import React, {Suspense} from "react"
+import Layout from "app/layouts/Layout"
 import {Head, Link, useRouter, useQuery, useParam, BlitzPage} from "blitz"
 import get__ModelName__ from "app/__modelNamesPath__/queries/get__ModelName__"
 import delete__ModelName__ from "app/__modelNamesPath__/mutations/delete__ModelName__"
@@ -90,4 +91,6 @@ const Show__ModelName__Page: BlitzPage = () => {
   )
 }
 
+Show__ModelName__Page.getLayout = (page) => <Layout title={"__ModelName__"}>{page}</Layout>
+
 export default Show__ModelName__Page
diff --git a/packages/generator/templates/page/__modelIdParam__/edit.tsx b/packages/generator/templates/page/__modelIdParam__/edit.tsx
@@ -1,4 +1,5 @@
 import React, {Suspense} from "react"
+import Layout from "app/layouts/Layout"
 import {Head, Link, useRouter, useQuery, useParam, BlitzPage} from "blitz"
 import get__ModelName__ from "app/__modelNamesPath__/queries/get__ModelName__"
 import update__ModelName__ from "app/__modelNamesPath__/mutations/update__ModelName__"
@@ -81,4 +82,6 @@ const Edit__ModelName__Page: BlitzPage = () => {
   )
 }
 
+Edit__ModelName__Page.getLayout = (page) => <Layout title={"Edit __ModelName__"}>{page}</Layout>
+
 export default Edit__ModelName__Page
diff --git a/packages/generator/templates/page/index.tsx b/packages/generator/templates/page/index.tsx
@@ -1,4 +1,5 @@
 import React, {Suspense} from "react"
+import Layout from "app/layouts/Layout"
 if (process.env.parentModel) {
   import {Head, Link, useQuery, useParam, BlitzPage} from "blitz"
 } else {
@@ -86,4 +87,6 @@ const __ModelNames__Page: BlitzPage = () => {
   )
 }
 
+__ModelNames__Page.getLayout = (page) => <Layout title={"__ModelNames__"}>{page}</Layout>
+
 export default __ModelNames__Page
diff --git a/packages/generator/templates/page/new.tsx b/packages/generator/templates/page/new.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import Layout from "app/layouts/Layout"
 if (process.env.parentModel) {
   import {Head, Link, useRouter, useParam, BlitzPage} from "blitz"
 } else {
@@ -66,4 +67,6 @@ const New__ModelName__Page: BlitzPage = () => {
   )
 }
 
+New__ModelName__Page.getLayout = (page) => <Layout title={"Create New __ModelName__"}>{page}</Layout>
+
 export default New__ModelName__Page