From 18beb6fb1d650a7faa7de19dfd1c186b98c7dfe5 Mon Sep 17 00:00:00 2001 From: Dwight Watson Date: Wed, 19 Aug 2020 07:58:40 +1000 Subject: [PATCH] Add Persistent layout to new app template with `` and `getLayout()` (#897) Co-authored-by: Brandon Bayer (minor) --- MEETING_NOTES.md | 22 +++++++++---------- README.md | 1 + packages/core/src/index.ts | 16 +++++++++++--- .../templates/app/app/layouts/Layout.tsx | 14 ++++++++++++ .../templates/app/app/pages/_app.tsx | 4 +++- .../templates/app/app/pages/index.tsx | 14 ++++++------ .../templates/page/__modelIdParam__.tsx | 3 +++ .../templates/page/__modelIdParam__/edit.tsx | 3 +++ packages/generator/templates/page/index.tsx | 3 +++ packages/generator/templates/page/new.tsx | 3 +++ 10 files changed, 60 insertions(+), 23 deletions(-) create mode 100644 packages/generator/templates/app/app/layouts/Layout.tsx diff --git a/MEETING_NOTES.md b/MEETING_NOTES.md index ee3b3d0d59..f69565dda4 100644 --- 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 index ecbe558950..145be4b4ba 100644 --- a/README.md +++ b/README.md @@ -332,6 +332,7 @@ Thanks to these wonderful people ([emoji key](https://allcontributors.org/docs/e + 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 index e1865b64a7..1f5359276b 100644 --- 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

= NextPage & { + 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 new file mode 100644 index 0000000000..660ed995fb --- /dev/null +++ b/packages/generator/templates/app/app/layouts/Layout.tsx @@ -0,0 +1,14 @@ +import { Head } from "blitz" + +const Layout = ({ title, children }) => ( + <> + + {title || "__name__"} + + + + {children} + +) + +export default Layout diff --git a/packages/generator/templates/app/app/pages/_app.tsx b/packages/generator/templates/app/app/pages/_app.tsx index 0be54b8643..73ab70f6a7 100644 --- 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 ( - + {getLayout()} ) } diff --git a/packages/generator/templates/app/app/pages/index.tsx b/packages/generator/templates/app/app/pages/index.tsx index a82f314447..85282cc6de 100644 --- a/packages/generator/templates/app/app/pages/index.tsx +++ b/packages/generator/templates/app/app/pages/index.tsx @@ -1,4 +1,5 @@ -import { Head, Link, useSession } from "blitz" +import Layout from "app/layouts/layout" +import { Link, useSession } from "blitz" import logout from "app/auth/mutations/logout" /* @@ -6,16 +7,11 @@ import logout from "app/auth/mutations/logout" * You can delete everything in here and start from scratch if you like. */ -export default function Home() { +const Home = () => { const session = useSession() return (

- - __name__ - - -
blitz.js @@ -249,3 +245,7 @@ export default function Home() {
) } + +Home.getLayout = (page) => {page} + +export default Home diff --git a/packages/generator/templates/page/__modelIdParam__.tsx b/packages/generator/templates/page/__modelIdParam__.tsx index 0fd96aa73f..4b6e9531ee 100644 --- 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) => {page} + export default Show__ModelName__Page diff --git a/packages/generator/templates/page/__modelIdParam__/edit.tsx b/packages/generator/templates/page/__modelIdParam__/edit.tsx index 287a1932d3..3520f95076 100644 --- 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) => {page} + export default Edit__ModelName__Page diff --git a/packages/generator/templates/page/index.tsx b/packages/generator/templates/page/index.tsx index fef0f68cc5..9108734daf 100644 --- 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) => {page} + export default __ModelNames__Page diff --git a/packages/generator/templates/page/new.tsx b/packages/generator/templates/page/new.tsx index 81d0af13dd..f6ab4748e0 100644 --- 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) => {page} + export default New__ModelName__Page