Skip to content

Commit 13ea172

Browse files
kenjonespizzakenjonespizza
committed
modify createDataAttribute. Remove un-needed Suspense
1 parent a284a6f commit 13ea172

File tree

4 files changed

+329
-332
lines changed

4 files changed

+329
-332
lines changed

‎frontend/app/components/Cta.tsx‎

Lines changed: 31 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,58 @@
1-
import { Suspense } from "react";
2-
import { PortableTextBlock } from "next-sanity";
1+
import {Suspense} from 'react'
2+
import {PortableTextBlock} from 'next-sanity'
33

4-
import ResolvedLink from "@/app/components/ResolvedLink";
5-
import PortableText from "@/app/components/PortableText";
6-
import Image from "@/app/components/SanityImage";
7-
import { stegaClean } from "@sanity/client/stega";
8-
import { ExtractPageBuilderType } from "@/sanity/lib/types";
4+
import ResolvedLink from '@/app/components/ResolvedLink'
5+
import PortableText from '@/app/components/PortableText'
6+
import Image from '@/app/components/SanityImage'
7+
import {stegaClean} from '@sanity/client/stega'
8+
import {ExtractPageBuilderType} from '@/sanity/lib/types'
99

1010
type CtaProps = {
11-
block: ExtractPageBuilderType<"callToAction">;
12-
index: number;
11+
block: ExtractPageBuilderType<'callToAction'>
12+
index: number
1313
// Needed if you want to createDataAttributes to do non-text overlays in Presentation (Visual Editing)
14-
pageType: string;
15-
pageId: string;
16-
};
14+
pageType: string
15+
pageId: string
16+
}
1717

18-
export default function CTA({ block }: CtaProps) {
19-
const {
20-
heading,
21-
eyebrow,
22-
body = [],
23-
button,
24-
image,
25-
theme,
26-
contentAlignment,
27-
} = block;
18+
export default function CTA({block}: CtaProps) {
19+
const {heading, eyebrow, body = [], button, image, theme, contentAlignment} = block
2820

29-
const isDark = theme === "dark";
30-
const isImageFirst = stegaClean(contentAlignment) === "imageFirst";
21+
const isDark = theme === 'dark'
22+
const isImageFirst = stegaClean(contentAlignment) === 'imageFirst'
3123

3224
return (
33-
<section
34-
className={
35-
isDark ? "relative dark dark:bg-black" : "relative dark:bg-black"
36-
}
37-
>
25+
<section className={isDark ? 'relative dark dark:bg-black' : 'relative dark:bg-black'}>
3826
<div className="absolute inset-0 bg-size-[5px] bg-[url(/images/tile-1-black.png)] dark:bg-[url(/images/tile-1-white.png)] opacity-25" />
3927
<div className="container relative">
4028
<div className="grid lg:grid-cols-2 gap-12 py-12">
4129
<div
42-
className={`${isImageFirst && image ? "row-start-2 lg:row-start-1 lg:col-start-2" : ""} flex flex-col gap-2 `}
30+
className={`${isImageFirst && image ? 'row-start-2 lg:row-start-1 lg:col-start-2' : ''} flex flex-col gap-2 `}
4331
>
4432
{eyebrow && (
4533
<span className="text-sm uppercase dark:text-white font-mono tracking-tight opacity-70">
4634
{eyebrow}
4735
</span>
4836
)}
4937
{heading && (
50-
<h2 className="text-2xl md:text-3xl lg:text-4xl dark:text-white">
51-
{heading}
52-
</h2>
38+
<h2 className="text-2xl md:text-3xl lg:text-4xl dark:text-white">{heading}</h2>
5339
)}
5440
{body && (
5541
<div className="lg:text-left">
56-
<PortableText
57-
value={body as PortableTextBlock[]}
58-
className="dark:prose-invert"
59-
/>
42+
<PortableText value={body as PortableTextBlock[]} className="dark:prose-invert" />
6043
</div>
6144
)}
6245

63-
<Suspense fallback={null}>
64-
{button?.buttonText && button?.link && (
65-
<div className="flex mt-4">
66-
<ResolvedLink
67-
link={button?.link}
68-
className="rounded-full flex gap-2 font-mono text-sm whitespace-nowrap items-center bg-black dark:bg-white hover:bg-blue focus:bg-blue py-3 px-6 text-white dark:text-black dark:hover:text-white transition-colors duration-200"
69-
>
70-
{button?.buttonText}
71-
</ResolvedLink>
72-
</div>
73-
)}
74-
</Suspense>
46+
{button?.buttonText && button?.link && (
47+
<div className="flex mt-4">
48+
<ResolvedLink
49+
link={button?.link}
50+
className="rounded-full flex gap-2 font-mono text-sm whitespace-nowrap items-center bg-black dark:bg-white hover:bg-blue focus:bg-blue py-3 px-6 text-white dark:text-black dark:hover:text-white transition-colors duration-200"
51+
>
52+
{button?.buttonText}
53+
</ResolvedLink>
54+
</div>
55+
)}
7556
</div>
7657

7758
{image?.asset?._ref && (
@@ -87,5 +68,5 @@ export default function CTA({ block }: CtaProps) {
8768
</div>
8869
</div>
8970
</section>
90-
);
71+
)
9172
}

‎frontend/app/components/PageBuilder.tsx‎

Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
'use client'
22

3-
import { createDataAttribute, SanityDocument } from "next-sanity";
4-
import { useOptimistic } from "next-sanity/hooks";
5-
import Link from "next/link";
3+
import {SanityDocument} from 'next-sanity'
4+
import {useOptimistic} from 'next-sanity/hooks'
65

7-
import BlockRenderer from "@/app/components/BlockRenderer";
8-
import { GetPageQueryResult } from "@/sanity.types";
9-
import { dataAttr } from "@/sanity/lib/utils";
10-
import { studioUrl } from "@/sanity/lib/api";
11-
import { PageBuilderSection } from "@/sanity/lib/types";
6+
import BlockRenderer from '@/app/components/BlockRenderer'
7+
import {GetPageQueryResult} from '@/sanity.types'
8+
import {dataAttr} from '@/sanity/lib/utils'
9+
import {PageBuilderSection} from '@/sanity/lib/types'
1210

1311
type PageBuilderPageProps = {
1412
page: GetPageQueryResult
@@ -28,8 +26,8 @@ function RenderSections({
2826
pageBuilderSections,
2927
page,
3028
}: {
31-
pageBuilderSections: PageBuilderSection[];
32-
page: GetPageQueryResult;
29+
pageBuilderSections: PageBuilderSection[]
30+
page: GetPageQueryResult
3331
}) {
3432
if (!page) {
3533
return null
@@ -55,32 +53,23 @@ function RenderSections({
5553
)
5654
}
5755

58-
function RenderEmptyState({ page }: { page: GetPageQueryResult }) {
56+
function RenderEmptyState({page}: {page: GetPageQueryResult}) {
5957
if (!page) {
6058
return null
6159
}
6260

63-
const attr = createDataAttribute({
64-
id: page._id,
65-
type: "page",
66-
path: "pageBuilder",
67-
}).toString();
68-
6961
return (
70-
<div className="container" data-sanity={attr}>
71-
<h1 className="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
72-
This page has no content!
73-
</h1>
74-
<p className="mt-2 text-base text-gray-500">Open the page in Sanity Studio to add content.</p>
75-
<div className="mt-10 flex">
76-
<Link
77-
className="rounded-full flex gap-2 mr-6 items-center bg-black hover:bg-brand focus:bg-blue py-3 px-6 text-white transition-colors duration-200"
78-
href={`${studioUrl}/structure/intent/edit/template=page;type=page;path=pageBuilder;id=${page._id}`}
79-
target="_blank"
80-
rel="noopener noreferrer"
81-
>
82-
Add content to this page
83-
</Link>
62+
<div
63+
className="container mt-10"
64+
data-sanity={dataAttr({
65+
id: page._id,
66+
type: 'page',
67+
path: `pageBuilder`,
68+
}).toString()}
69+
>
70+
<div className="prose">
71+
<h2 className="">This page has no content!</h2>
72+
<p className="">Open the page in Sanity Studio to add content.</p>
8473
</div>
8574
</div>
8675
)
@@ -111,7 +100,9 @@ export default function PageBuilder({page}: PageBuilderPageProps) {
111100
return currentSections
112101
})
113102

114-
return pageBuilderSections && pageBuilderSections.length > 0
115-
? <RenderSections pageBuilderSections={pageBuilderSections} page={page} />
116-
: <RenderEmptyState page={page} />;
103+
return pageBuilderSections && pageBuilderSections.length > 0 ? (
104+
<RenderSections pageBuilderSections={pageBuilderSections} page={page} />
105+
) : (
106+
<RenderEmptyState page={page} />
107+
)
117108
}

0 commit comments

Comments
 (0)