Skip to content

Commit 9818a4b

Browse files
TRomeshTRomesh
committed
Refactor index file to handle templates and split queries
1 parent 5a7ee67 commit 9818a4b

File tree

15 files changed

+302
-48
lines changed

15 files changed

+302
-48
lines changed

‎src/components/base/experience/experience.graphql.ts‎ renamed to ‎src/components/base/experience/blankexperience/experience.graphql.ts‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
import { graphql } from "@generated/graphql/gql";
22

33
export const ExperienceQuery = graphql(/* GraphQL */ `
4-
query GetExperience($key: String, $version: String, $locale: String, $url: String, $status: String) {
5-
content: _Experience(
4+
query GetExperience(
5+
$key: String
6+
$version: String
7+
$locale: String
8+
$url: String
9+
$status: String
10+
) {
11+
content: BlankExperience(
612
where: {
713
_metadata: {
814
url: { default: { eq: $url } }
@@ -14,19 +20,6 @@ export const ExperienceQuery = graphql(/* GraphQL */ `
1420
}
1521
) {
1622
items {
17-
metadata: _metadata {
18-
key
19-
version
20-
locale
21-
displayName
22-
url {
23-
default
24-
}
25-
published
26-
status
27-
created
28-
lastModified
29-
}
3023
composition {
3124
key
3225
displayName

‎src/components/base/experience/experience.style.ts‎ renamed to ‎src/components/base/experience/blankexperience/experience.style.ts‎

File renamed without changes.

‎src/components/base/experience/experience.template.tsx‎ renamed to ‎src/components/base/experience/blankexperience/experience.template.tsx‎

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { useQuery } from "@apollo/client";
2-
import { CompositionDisplaySetting, SectionNodeFragment } from "@generated/graphql";
2+
import {
3+
CompositionDisplaySetting,
4+
SectionNodeFragment,
5+
} from "@generated/graphql";
36
import { useContentSaved } from "@hooks";
47
import { useEffect, useMemo } from "react";
5-
import { SectionTemplate } from "../section/section.template";
8+
import { SectionTemplate } from "../../section/section.template";
69
import { ExperienceQuery } from "./experience.graphql";
710
import { GetExperienceStyles } from "./experience.style";
811
import { useGlobalContext } from "@context";
@@ -15,9 +18,20 @@ interface ExperienceTemplateProps {
1518
url?: string | null; // Matched against the URL.Default
1619
}
1720

18-
export const ExperienceTemplate: React.FC<ExperienceTemplateProps> = ({ contentGuid, version, locale, url }) => {
21+
export const ExperienceTemplate: React.FC<ExperienceTemplateProps> = ({
22+
contentGuid,
23+
version,
24+
locale,
25+
url,
26+
}) => {
1927
const { setIsLoading } = useGlobalContext();
20-
const queryVariables = { key: contentGuid, version, locale, url, status: url ? "Published" : undefined };
28+
const queryVariables = {
29+
key: contentGuid,
30+
version,
31+
locale,
32+
url,
33+
status: url ? "Published" : undefined,
34+
};
2135

2236
const { data, refetch, error, loading } = useQuery(ExperienceQuery, {
2337
variables: queryVariables,
@@ -27,7 +41,11 @@ export const ExperienceTemplate: React.FC<ExperienceTemplateProps> = ({ contentG
2741
// refetch(queryVariables);
2842
},
2943
onCompleted: (data) => {
30-
console.log("[QUERY] Query finished with variables", queryVariables, data);
44+
console.log(
45+
"[QUERY] Query finished with variables",
46+
queryVariables,
47+
data
48+
);
3149
setIsLoading(false);
3250
},
3351
});
@@ -56,10 +74,15 @@ export const ExperienceTemplate: React.FC<ExperienceTemplateProps> = ({ contentG
5674
}
5775
}, [loading]);
5876

59-
const sections = useMemo(() => experience?.composition?.sections ?? [], [experience]);
77+
const sections = useMemo(
78+
() => experience?.composition?.sections ?? [],
79+
[experience]
80+
);
6081

6182
const classes = useMemo(() => {
62-
return GetExperienceStyles(experience?.composition?.displaySettings as CompositionDisplaySetting[]);
83+
return GetExperienceStyles(
84+
experience?.composition?.displaySettings as CompositionDisplaySetting[]
85+
);
6386
}, [experience]);
6487

6588
if (error) {
@@ -72,7 +95,15 @@ export const ExperienceTemplate: React.FC<ExperienceTemplateProps> = ({ contentG
7295

7396
return (
7497
<article className={classes}>
75-
{sections.map((section) => section && <SectionTemplate section={section as SectionNodeFragment} key={section.key} />)}
98+
{sections.map(
99+
(section) =>
100+
section && (
101+
<SectionTemplate
102+
section={section as SectionNodeFragment}
103+
key={section.key}
104+
/>
105+
)
106+
)}
76107
</article>
77108
);
78109
};

‎src/components/base/page/justpage/justpage.graphql.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { graphql } from "@generated/graphql/gql";
2+
3+
export const JustPageQuery = graphql(/* GraphQL */ `
4+
query GetJustPage(
5+
$key: String
6+
$version: String
7+
$locale: String
8+
$url: String
9+
$status: String
10+
) {
11+
content: JustPage(
12+
where: {
13+
_metadata: {
14+
url: { default: { eq: $url } }
15+
status: { eq: $status }
16+
key: { eq: $key }
17+
version: { eq: $version }
18+
locale: { eq: $locale }
19+
}
20+
}
21+
) {
22+
items {
23+
Block {
24+
Text {
25+
json
26+
}
27+
}
28+
}
29+
}
30+
}
31+
`);

‎src/components/base/page/justpage/justpage.template.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { useQuery } from "@apollo/client";
2+
import { useGlobalContext } from "@context";
3+
import { JustPageQuery } from "./justpage.graphql";
4+
5+
export interface JustPageTemplateProps {
6+
contentGuid?: string | null; // Content GUID
7+
version?: string | null; // Optional version
8+
locale?: string | null; // Optional locale
9+
// Or queried by just URL
10+
url?: string | null; // Matched against the URL.Default
11+
}
12+
13+
interface Node {
14+
text?: string;
15+
children?: Node[];
16+
}
17+
18+
function extractText(node: Node): string {
19+
if (!node) return "";
20+
21+
if (typeof node.text === "string" && node.text !== "&nbsp;") return node.text;
22+
23+
if (Array.isArray(node.children)) {
24+
return node.children.reduce((acc, child) => acc + extractText(child), "");
25+
}
26+
27+
return "";
28+
}
29+
30+
export const JustPageTemplate: React.FC<JustPageTemplateProps> = ({ url }) => {
31+
const { setIsLoading } = useGlobalContext();
32+
const { data, refetch, error, loading } = useQuery(JustPageQuery, {
33+
variables: { url },
34+
notifyOnNetworkStatusChange: true,
35+
onError: (error) => {
36+
console.error("[QUERY] Error fetching Experience", error);
37+
// refetch(queryVariables);
38+
},
39+
onCompleted: (data) => {
40+
console.log("[QUERY] Query finished with variables", {}, data);
41+
setIsLoading(false);
42+
},
43+
});
44+
45+
const paragraph =
46+
extractText(data?.content?.items?.[0]?.Block?.Text?.json) || "";
47+
48+
return (
49+
<article className="relative experience theme--blue">
50+
<section className="opti-container outer-padding padding-top--medium padding-bottom--medium">
51+
<div className="opti-container__content container-narrow">
52+
<p>{paragraph}</p>
53+
</div>
54+
</section>
55+
</article>
56+
);
57+
};

‎src/components/base/page/justpage/justpages.styles.ts‎

Whitespace-only changes.

‎src/components/base/page/newabout/newabout.graphql.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { graphql } from "@generated/graphql/gql";
2+
3+
export const NewAboutQuery = graphql(/* GraphQL */ `
4+
query GetNewAboutPage(
5+
$key: String
6+
$version: String
7+
$locale: String
8+
$url: String
9+
$status: String
10+
) {
11+
content: BlankPage(
12+
where: {
13+
_metadata: {
14+
url: { default: { eq: $url } }
15+
status: { eq: $status }
16+
key: { eq: $key }
17+
version: { eq: $version }
18+
locale: { eq: $locale }
19+
}
20+
}
21+
) {
22+
items {
23+
Title
24+
Block {
25+
Heading
26+
}
27+
}
28+
}
29+
}
30+
`);

‎src/components/base/page/newabout/newabout.styles.ts‎

Whitespace-only changes.

‎src/components/base/page/newabout/newabout.template.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { useQuery } from "@apollo/client";
2+
import { useGlobalContext } from "@context";
3+
import { NewAboutQuery } from "./newabout.graphql";
4+
import { ElementTemplate } from "@components/base/element/element.template";
5+
import { ElementNodeFragment } from "@generated/graphql";
6+
7+
export interface NewAboutTemplateProps {
8+
contentGuid?: string | null; // Content GUID
9+
version?: string | null; // Optional version
10+
locale?: string | null; // Optional locale
11+
// Or queried by just URL
12+
url?: string | null; // Matched against the URL.Default
13+
}
14+
15+
export const NewAboutTemplate: React.FC<NewAboutTemplateProps> = ({ url }) => {
16+
const { setIsLoading } = useGlobalContext();
17+
18+
const { data, refetch, error, loading } = useQuery(NewAboutQuery, {
19+
variables: { url },
20+
notifyOnNetworkStatusChange: true,
21+
onError: (error) => {
22+
console.error("[QUERY] Error fetching Experience", error);
23+
// refetch(queryVariables);
24+
},
25+
onCompleted: (data) => {
26+
console.log("[QUERY] Query finished with variables", {}, data);
27+
setIsLoading(false);
28+
},
29+
});
30+
31+
const title = data?.content?.items?.[0]?.Title || "No Title";
32+
const heading = data?.content?.items?.[0]?.Block?.Heading || "No Heading";
33+
34+
return (
35+
<article className="relative experience theme--blue">
36+
<section className="opti-container outer-padding padding-top--medium padding-bottom--medium">
37+
<div className="opti-container__content container-narrow">
38+
{/* <ElementTemplate
39+
element={
40+
data?.content?.items?.[0]?.Block?.Heading as ElementNodeFragment
41+
}
42+
/>
43+
<ElementTemplate
44+
element={data?.content?.items?.[0]?.Title as ElementNodeFragment}
45+
/> */}
46+
<h1 className="text-red">{title}</h1>
47+
<h2>{heading}</h2>
48+
</div>
49+
</section>
50+
</article>
51+
);
52+
};

‎src/components/base/templates/metadata.graphql.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { graphql } from "@generated/graphql/gql";
2+
3+
export const MetadataQuery = graphql(/* GraphQL */ `
4+
query GetPageMetaData($url: String) {
5+
content: _Content(
6+
where: { _metadata: { url: { default: { eq: $url } } } }
7+
) {
8+
items {
9+
_metadata {
10+
displayName
11+
key
12+
types
13+
}
14+
}
15+
}
16+
}
17+
`);

0 commit comments

Comments
 (0)