Skip to content

Commit de7d506

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

File tree

15 files changed

+308
-48
lines changed

15 files changed

+308
-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: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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> = ({
31+
url,
32+
contentGuid,
33+
}) => {
34+
const { setIsLoading } = useGlobalContext();
35+
const { data, refetch, error, loading } = useQuery(JustPageQuery, {
36+
variables: { url, key: contentGuid },
37+
notifyOnNetworkStatusChange: true,
38+
onError: (error) => {
39+
console.error("[QUERY] Error fetching Experience", error);
40+
// refetch(queryVariables);
41+
},
42+
onCompleted: (data) => {
43+
console.log("[QUERY] Query finished with variables", {}, data);
44+
setIsLoading(false);
45+
},
46+
});
47+
48+
const paragraph =
49+
extractText(data?.content?.items?.[0]?.Block?.Text?.json) || "";
50+
51+
return (
52+
<article className="relative experience theme--blue">
53+
<section className="opti-container outer-padding padding-top--medium padding-bottom--medium">
54+
<div className="opti-container__content container-narrow">
55+
<p>{paragraph}</p>
56+
</div>
57+
</section>
58+
</article>
59+
);
60+
};

‎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: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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> = ({
16+
url,
17+
contentGuid,
18+
}) => {
19+
const { setIsLoading } = useGlobalContext();
20+
21+
const { data, refetch, error, loading } = useQuery(NewAboutQuery, {
22+
variables: { url, key: contentGuid },
23+
notifyOnNetworkStatusChange: true,
24+
onError: (error) => {
25+
console.error("[QUERY] Error fetching Experience", error);
26+
// refetch(queryVariables);
27+
},
28+
onCompleted: (data) => {
29+
console.log("[QUERY] Query finished with variables", {}, data);
30+
setIsLoading(false);
31+
},
32+
});
33+
34+
const title = data?.content?.items?.[0]?.Title || "No Title";
35+
const heading = data?.content?.items?.[0]?.Block?.Heading || "No Heading";
36+
37+
return (
38+
<article className="relative experience theme--blue">
39+
<section className="opti-container outer-padding padding-top--medium padding-bottom--medium">
40+
<div className="opti-container__content container-narrow">
41+
{/* <ElementTemplate
42+
element={
43+
data?.content?.items?.[0]?.Block?.Heading as ElementNodeFragment
44+
}
45+
/>
46+
<ElementTemplate
47+
element={data?.content?.items?.[0]?.Title as ElementNodeFragment}
48+
/> */}
49+
<h1 className="text-red">{title}</h1>
50+
<h2>{heading}</h2>
51+
</div>
52+
</section>
53+
</article>
54+
);
55+
};

‎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+
`);

‎src/components/base/templates/template.factory.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { useQuery } from "@apollo/client";
2+
import { MetadataQuery } from "./metadata.graphql";
3+
import { ExperienceTemplate } from "../experience/blankexperience/experience.template";
4+
import { NewAboutTemplate } from "../page/newabout/newabout.template";
5+
import { JustPageTemplate } from "../page/justpage/justpage.template";
6+
7+
const TemplateFactory = ({ url }: { url: string }) => {
8+
const { data: metadata } = useQuery(MetadataQuery, {
9+
skip: !url,
10+
variables: { url },
11+
notifyOnNetworkStatusChange: true,
12+
onError: (error) => console.error("GraphQL Error:", error),
13+
});
14+
15+
const type =
16+
metadata?.content?.items?.[0]?._metadata?.types?.[0] ?? "default";
17+
18+
const contentGuid = metadata?.content?.items?.[0]?._metadata?.key;
19+
20+
switch (type) {
21+
case "BlankExperience":
22+
return <ExperienceTemplate {...{ contentGuid }} />;
23+
case "JustPage":
24+
return <JustPageTemplate {...{ contentGuid }} />;
25+
case "BlankPage":
26+
return <NewAboutTemplate {...{ contentGuid }} />;
27+
default:
28+
return <ExperienceTemplate {...{ contentGuid }} />;
29+
}
30+
};
31+
32+
export default TemplateFactory;

‎src/components/layout/header/header.graphql.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ import { graphql } from "@generated/graphql/gql";
33
export const NavigationItemsQuery = graphql(/* GraphQL */ `
44
query GetNavigationLinks($status: String! = "Published", $host: String) {
55
content: _Page(
6-
where: { _metadata: { status: { eq: $status }, url: { base: { eq: $host } } } }
7-
limit: 5
6+
where: {
7+
_metadata: { status: { eq: $status }, url: { base: { eq: $host } } }
8+
}
9+
limit: 8
810
orderBy: { _metadata: { created: ASC } }
911
) {
1012
items {

0 commit comments

Comments
 (0)