From 38df1fcdb71502f3b55558944a1b7841e22fad63 Mon Sep 17 00:00:00 2001 From: keyan Date: Wed, 7 Jul 2021 13:34:21 -0500 Subject: [PATCH] ssr preview info --- components/header.js | 16 +++++++++++ components/layout-preview.js | 18 ++++++++++++ pages/preview/index.js | 0 pages/preview/items/[id].js | 53 ++++++++++++++++++++++++++++++++++++ pages/preview/recent.js | 0 5 files changed, 87 insertions(+) create mode 100644 components/layout-preview.js create mode 100644 pages/preview/index.js create mode 100644 pages/preview/items/[id].js create mode 100644 pages/preview/recent.js diff --git a/components/header.js b/components/header.js index c85eee96..026d9c28 100644 --- a/components/header.js +++ b/components/header.js @@ -123,3 +123,19 @@ export default function Header () { ) } + +export function HeaderPreview () { + return ( + <> + + + + + + + ) +} diff --git a/components/layout-preview.js b/components/layout-preview.js new file mode 100644 index 00000000..e33e431c --- /dev/null +++ b/components/layout-preview.js @@ -0,0 +1,18 @@ +import { HeaderPreview } from './header' +import Head from 'next/head' +import Container from 'react-bootstrap/Container' + +export default function LayoutPreview ({ children }) { + return ( + <> + + + + + + + {children} + + + ) +} diff --git a/pages/preview/index.js b/pages/preview/index.js new file mode 100644 index 00000000..e69de29b diff --git a/pages/preview/items/[id].js b/pages/preview/items/[id].js new file mode 100644 index 00000000..eddae8d7 --- /dev/null +++ b/pages/preview/items/[id].js @@ -0,0 +1,53 @@ +import { gql } from '@apollo/client' +import ApolloClient from '../../../api/client' +import { ITEM_FIELDS } from '../../../fragments/items' +import Item from '../../../components/item' +import Text from '../../../components/text' +import LayoutPreview from '../../../components/layout-preview' +import { LightningProvider } from '../../../components/lightning' +import Comment from '../../../components/comment' + +// we can't SSR on the normal page because we'd have to hyrdate the cache +// on the client which is a lot of work, i.e. a bit fat todo +export async function getServerSideProps ({ req, params }) { + // grab the item on the server side + const { error, data: { item } } = await (await ApolloClient(req)).query({ + query: + gql` + ${ITEM_FIELDS} + { + item(id: ${params.id}) { + ...ItemFields + text + } + }` + }) + + if (!item || error) { + return { + notFound: true + } + } + + return { + props: { + item + } + } +} + +export default function ItemPreview ({ item }) { + return ( + + + {item.parentId + ? + : ( + + {item.text &&
{item.text}
} + + )} + + + ) +} diff --git a/pages/preview/recent.js b/pages/preview/recent.js new file mode 100644 index 00000000..e69de29b