scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: zod validation and pr comments

Browse Source
This commit is contained in:
Christel Westerberg
2024-04-29 14:00:24 +02:00
parent 9f0b044daa
commit d9f1470eb7
31 changed files with 222 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/[lang]/(live)/(protected)/my-pages/layout.module.css
View File

@@ -1,5 +1,4 @@
.layout {
--max-width: 101.4rem;
--header-height: 4.5rem;
display: grid;
@@ -25,4 +24,4 @@
padding-right: 2.4rem;
padding-top: 5.8rem;
}
}
}

2
app/[lang]/(live)/(public)/loyalty-page/layout.module.css
View File

@@ -1,6 +1,4 @@
.layout {
--max-width: 101.4rem;
display: grid;
font-family: var(--ff-fira-sans);
background-color: var(--Brand-Coffee-Subtle);

1
app/[lang]/(live)/(public)/loyalty-page/page.module.css
View File

@@ -26,5 +26,6 @@
gap: 6.4rem;
padding-left: 0;
padding-right: 0;
grid-column: 2 / -1;
}
}

9
app/[lang]/(live)/(public)/loyalty-page/page.tsx
View File

@@ -26,13 +26,8 @@ export default async function LoyaltyPage({
return (
<section className={styles.content}>
<aside>
{loyaltyPage.sidebar
? loyaltyPage.sidebar.map((block, i) => (
<Sidebar key={i} block={block} />
))
: null}
</aside>
{loyaltyPage.sidebar ? <Sidebar blocks={loyaltyPage.sidebar} /> : null}
<MaxWidth className={styles.blocks} tag="main">
<Blocks blocks={loyaltyPage.blocks} />
</MaxWidth>

1
app/globals.css
View File

@@ -1,5 +1,6 @@
:root {
font-size: 62.5%;
--max-width: 113.5rem;
}
* {

18
components/Loyalty/Blocks/CardGrid/index.tsx
View File

@@ -5,7 +5,7 @@ import Title from "@/components/Title"
import styles from "./cardGrid.module.css"
import { CardGridProps, CardProps } from "@/types/components/loyalty/blocks"
import { CardGridProps } from "@/types/components/loyalty/blocks"
export default function CardGrid({ card_grid }: CardGridProps) {
return (
@@ -27,17 +27,15 @@ export default function CardGrid({ card_grid }: CardGridProps) {
</header>
<div className={styles.cardContainer}>
{card_grid.cards.map((card, i) => (
<CardWrapper key={`${card.title}+${i}`} card={card} />
<div className={styles.cardWrapper} key={`${card.title}+${i}`}>
<Card
subtitle={card.subtitle}
title={card.title}
link={card.link}
/>
</div>
))}
</div>
</section>
)
}
function CardWrapper({ card }: CardProps) {
return (
<div className={styles.cardWrapper}>
<Card subtitle={card.subtitle} title={card.title} link={card.link} />
</div>
)
}

4
components/Loyalty/Blocks/DynamicContent/HowItWorks/index.tsx
View File

@@ -4,10 +4,10 @@ import styles from "./howItWorks.module.css"
export default function HowItWorks() {
return (
<div className={styles.container}>
<section className={styles.container}>
<Title level="h3" uppercase>
How it works Placeholder
</Title>
</div>
</section>
)
}

4
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
View File

@@ -33,7 +33,7 @@ export default async function LoyaltyLevels() {
function LevelCard({ level }: LevelCardProps) {
return (
<div className={styles.card}>
<article className={styles.card}>
<Title level="h4">{level.tier}</Title>
<Image src={level.logo} alt={level.name} width={140} height={54} />
<p className={styles.qualifications}>
@@ -45,6 +45,6 @@ function LevelCard({ level }: LevelCardProps) {
{benefit}
</p>
))}
</div>
</article>
)
}

3
components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css
View File

@@ -8,7 +8,7 @@
.titleContainer {
display: grid;
grid-template-areas: "title link";
grid-template-areas: "title link" "subtitle subtitle";
grid-template-columns: 1fr max-content;
padding-bottom: 0.8rem;
}
@@ -25,4 +25,5 @@
.subtitle {
margin: 0;
grid-area: subtitle;
}

36
components/Loyalty/Blocks/DynamicContent/index.tsx
View File

@@ -32,25 +32,23 @@ export default function DynamicContent({
}: DynamicContentProps) {
return (
<section className={styles.container}>
<header>
<div className={styles.titleContainer}>
{dynamicContent.title && (
<Title
as="h3"
level="h2"
className={styles.title}
weight="semiBold"
uppercase
>
{dynamicContent.title}
</Title>
)}
{dynamicContent.link ? (
<Link className={styles.link} href={dynamicContent.link.href}>
{dynamicContent.link.text}
</Link>
) : null}
</div>
<header className={styles.titleContainer}>
{dynamicContent.title && (
<Title
as="h3"
level="h2"
className={styles.title}
weight="semiBold"
uppercase
>
{dynamicContent.title}
</Title>
)}
{dynamicContent.link ? (
<Link className={styles.link} href={dynamicContent.link.href}>
{dynamicContent.link.text}
</Link>
) : null}
{dynamicContent.subtitle && (
<Title
as="h5"

10
components/Loyalty/Blocks/index.tsx
View File

@@ -13,10 +13,12 @@ export function Blocks({ blocks }: BlocksProps) {
return <CardGrid card_grid={block.card_grid} />
case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
return (
<JsonToHtml
nodes={block.content.content.json.children}
embeds={block.content.content.embedded_itemsConnection.edges}
/>
<section>
<JsonToHtml
nodes={block.content.content.json.children}
embeds={block.content.content.embedded_itemsConnection.edges}
/>
</section>
)
case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
return <DynamicContentBlock dynamicContent={block.dynamic_content} />

8
components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
View File

@@ -5,13 +5,9 @@ import { getValueFromContactConfig } from "@/utils/contactConfig"
import styles from "./contactRow.module.css"
import type { ContactFields } from "@/types/requests/contactConfig"
import type { ContactRowProps } from "@/types/components/loyalty/sidebar"
export default async function ContactRow({
contact,
}: {
contact: ContactFields
}) {
export default async function ContactRow({ contact }: ContactRowProps) {
const data = await serverClient().contentstack.contactConfig.get({
lang: Lang.en,
})

2
components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
View File

@@ -19,7 +19,7 @@ export default async function Contact({ contactBlock }: ContactProps) {
case JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact:
return (
<ContactRow
key={`${contact.display_text}-i`}
key={`${contact.display_text}-${i}`}
contact={contact}
/>
)

2
components/Loyalty/Sidebar/JoinLoyalty/index.tsx
View File

@@ -28,7 +28,7 @@ export default function JoinLoyaltyContact({ block }: JoinLoyaltyContactProps) {
<span>{_("Join Scandic Friends")}</span>
</Button>
<div className={styles.linkContainer}>
<Link href="/login" className={styles.logoutLink}>
<Link href="/login" className={styles.loginLink}>
{_("Already a friend?")} <br />
{_("Click here to log in")}
</Link>

2
components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
View File

@@ -21,7 +21,7 @@
margin: 0;
}
.logoutLink {
.loginLink {
text-decoration: none;
color: var(--some-black-color, #2e2e2e);
font-size: 1.2rem;

38
components/Loyalty/Sidebar/index.tsx
View File

@@ -7,20 +7,26 @@ import styles from "./sidebar.module.css"
import { SidebarProps } from "@/types/components/loyalty/sidebar"
import { SidebarTypenameEnum } from "@/types/requests/loyaltyPage"
export default function SidebarLoyalty({ block }: SidebarProps) {
switch (block.__typename) {
case SidebarTypenameEnum.LoyaltyPageSidebarContent:
return (
<section className={styles.content}>
<JsonToHtml
embeds={block.content.content.embedded_itemsConnection.edges}
nodes={block.content.content.json.children}
/>
</section>
)
case SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact:
return <JoinLoyaltyContact block={block.join_loyalty_contact} />
default:
return null
}
export default function SidebarLoyalty({ blocks }: SidebarProps) {
return (
<aside>
{blocks.map((block) => {
switch (block.__typename) {
case SidebarTypenameEnum.LoyaltyPageSidebarContent:
return (
<section className={styles.content}>
<JsonToHtml
embeds={block.content.content.embedded_itemsConnection.edges}
nodes={block.content.content.json.children}
/>
</section>
)
case SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact:
return <JoinLoyaltyContact block={block.join_loyalty_contact} />
default:
return null
}
})}
</aside>
)
}

8
components/Loyalty/Sidebar/sidebar.module.css
View File

@@ -1,9 +1,5 @@
.content {
padding: 0 1.6rem;
}
@media screen and (min-width: 950px) {
@media screen and (max-width: 950px) {
.content {
padding: 0;
padding: 0 1.6rem;
}
}

4
components/TempDesignSystem/Card/index.tsx
View File

@@ -15,7 +15,7 @@ export default function Card({
openInNewTab = false,
}: CardProps) {
return (
<div className={styles.linkCard}>
<article className={styles.linkCard}>
{title ? (
<Title level="h3" weight="semiBold">
{title}
@@ -33,6 +33,6 @@ export default function Card({
</Link>
</Button>
) : null}
</div>
</article>
)
}

7
lib/graphql/Query/LoyaltyPage.graphql
View File

@@ -7,8 +7,8 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
all_loyalty_page(where: { url: $url, locale: $locale }) {
items {
blocks {
__typename
... on LoyaltyPageBlocksDynamicContent {
__typename
dynamic_content {
title
subtitle
@@ -28,7 +28,6 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
}
}
... on LoyaltyPageBlocksCardGrid {
__typename
card_grid {
title
subtitle
@@ -51,7 +50,6 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
}
}
... on LoyaltyPageBlocksContent {
__typename
content {
content {
json
@@ -70,8 +68,8 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
}
title
sidebar {
__typename
... on LoyaltyPageSidebarJoinLoyaltyContact {
__typename
join_loyalty_contact {
title
preamble
@@ -87,7 +85,6 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
}
}
... on LoyaltyPageSidebarContent {
__typename
content {
content {
json

5
server/routers/contentstack/contactConfig/input.ts Normal file
View File

@@ -0,0 +1,5 @@
import { z } from "zod"
import { Lang } from "@/constants/languages"
export const getConfigInput = z.object({ lang: z.nativeEnum(Lang) })

60
server/routers/contentstack/contactConfig/output.ts Normal file
View File

@@ -0,0 +1,60 @@
import { z } from "zod"
// Help me write this zod schema based on the type ContactConfig
export const validateContactConfigSchema = z.object({
all_contact_config: z.object({
items: z.array(
z.object({
email: z.object({
name: z.string().nullable(),
address: z.string().nullable(),
}),
email_loyalty: z.object({
name: z.string().nullable(),
address: z.string().nullable(),
}),
mailing_address: z.object({
zip: z.string().nullable(),
street: z.string().nullable(),
name: z.string().nullable(),
city: z.string().nullable(),
country: z.string().nullable(),
}),
phone: z.object({
number: z.string().nullable(),
name: z.string().nullable(),
}),
phone_loyalty: z.object({
number: z.string().nullable(),
name: z.string().nullable(),
}),
visiting_address: z.object({
zip: z.string().nullable(),
country: z.string().nullable(),
city: z.string().nullable(),
street: z.string().nullable(),
}),
})
),
}),
})
export enum ContactFieldGroupsEnum {
email = "email",
email_loyalty = "email_loyalty",
mailing_address = "mailing_address",
phone = "phone",
phone_loyalty = "phone_loyalty",
visiting_address = "visiting_address",
}
export type ContactFieldGroups = keyof typeof ContactFieldGroupsEnum
export type ContactConfigData = z.infer<typeof validateContactConfigSchema>
export type ContactConfig = ContactConfigData["all_contact_config"]["items"][0]
export type ContactFields = {
display_text?: string
contact_field: string
}

46
server/routers/contentstack/contactConfig/query.ts
View File

@@ -1,32 +1,34 @@
import { z } from "zod"
import { GetContactConfig } from "@/lib/graphql/Query/ContactConfig.graphql"
import { request } from "@/lib/graphql/request"
import { badRequestError } from "@/server/errors/trpc"
import { publicProcedure, router } from "@/server/trpc"
import { request } from "@/lib/graphql/request"
import { Lang } from "@/constants/languages"
import GetContactConfig from "@/lib/graphql/Query/ContactConfig.graphql"
import type { GetContactConfigData } from "@/types/requests/contactConfig"
import { getConfigInput } from "./input"
import { type ContactConfigData, validateContactConfigSchema } from "./output"
export const contactConfigQueryRouter = router({
get: publicProcedure
.input(z.object({ lang: z.nativeEnum(Lang) }))
.query(async ({ input }) => {
const contactConfig = await request<GetContactConfigData>(
GetContactConfig,
{
locale: input.lang,
},
{
tags: [`contact-config-${input.lang}`],
}
)
get: publicProcedure.input(getConfigInput).query(async ({ input }) => {
try {
const contactConfig = await request<ContactConfigData>(GetContactConfig, {
locale: input.lang,
})
if (contactConfig.data && contactConfig.data.all_contact_config.total) {
return contactConfig.data.all_contact_config.items[0]
if (!contactConfig.data) {
throw badRequestError()
}
const validatedContactConfigConfig =
validateContactConfigSchema.safeParse(contactConfig.data)
if (!validatedContactConfigConfig.success) {
console.error(validatedContactConfigConfig.error)
throw badRequestError()
}
return validatedContactConfigConfig.data.all_contact_config.items[0]
} catch (e) {
console.log(e)
throw badRequestError()
}),
}
}),
})

2
server/routers/contentstack/index.ts
View File

@@ -1,8 +1,8 @@
import { router } from "@/server/trpc"
import { breadcrumbsRouter } from "./breadcrumbs"
import { loyaltyPageRouter } from "./loyaltyPage"
import { contactConfigRouter } from "./contactConfig"
import { loyaltyPageRouter } from "./loyaltyPage"
export const contentstackRouter = router({
breadcrumbs: breadcrumbsRouter,

38
server/routers/contentstack/loyaltyPage/query.ts
View File

@@ -31,6 +31,7 @@ export const loyaltyPageQueryRouter = router({
)
if (!validatedLoyaltyPage.success) {
console.error(validatedLoyaltyPage.error)
throw badRequestError()
}
@@ -68,15 +69,13 @@ export const loyaltyPageQueryRouter = router({
cards: block.card_grid.cards.map((card) => {
return {
...card,
link:
card.referenceConnection.totalCount > 0
? {
href: card.referenceConnection.edges[0].node
.url,
title:
card.referenceConnection.edges[0].node.title,
}
: undefined,
link: card.referenceConnection.totalCount
? {
href: card.referenceConnection.edges[0].node.url,
title:
card.referenceConnection.edges[0].node.title,
}
: undefined,
}
}),
},
@@ -86,17 +85,16 @@ export const loyaltyPageQueryRouter = router({
...block,
dynamic_content: {
...block.dynamic_content,
link:
block.dynamic_content.link.pageConnection.totalCount > 0
? {
text: block.dynamic_content.link.text,
href: block.dynamic_content.link.pageConnection
.edges[0].node.url,
title:
block.dynamic_content.link.pageConnection.edges[0]
.node.title,
}
: undefined,
link: block.dynamic_content.link.pageConnection.totalCount
? {
text: block.dynamic_content.link.text,
href: block.dynamic_content.link.pageConnection
.edges[0].node.url,
title:
block.dynamic_content.link.pageConnection.edges[0]
.node.title,
}
: undefined,
},
}
case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:

7
server/trpc.ts
View File

@@ -1,11 +1,12 @@
import { initTRPC } from "@trpc/server"
import { env } from "@/env/server"
import { transformer } from "./transformer"
import { unauthorizedError } from "./errors/trpc"
import type { Context } from "./context"
import { unauthorizedError } from "./errors/trpc"
import { transformer } from "./transformer"
import type { Meta } from "@/types/trpc/meta"
import type { Context } from "./context"
const t = initTRPC.context<Context>().meta<Meta>().create({ transformer })

3
types/components/loyalty/blocks.ts
View File

@@ -1,7 +1,6 @@
import {
Block,
CardGrid,
CardGridCard,
DynamicContent,
RteBlockContent,
} from "@/server/routers/contentstack/loyaltyPage/output"
@@ -18,8 +17,6 @@ export type DynamicComponentProps = {
component: DynamicContent["dynamic_content"]["component"]
}
export type CardProps = { card: CardGridCard }
export type CardGridProps = Pick<CardGrid, "card_grid">
export type Content = { content: RteBlockContent["content"]["content"] }

7
types/components/loyalty/sidebar.ts
View File

@@ -1,10 +1,11 @@
import { ContactFields } from "@/server/routers/contentstack/contactConfig/output"
import {
JoinLoyaltyContact,
Sidebar,
} from "@/server/routers/contentstack/loyaltyPage/output"
export type SidebarProps = {
block: Sidebar
blocks: Sidebar[]
}
export type JoinLoyaltyContactProps = {
@@ -14,3 +15,7 @@ export type JoinLoyaltyContactProps = {
export type ContactProps = {
contactBlock: JoinLoyaltyContact["join_loyalty_contact"]["contact"]
}
export type ContactRowProps = {
contact: ContactFields
}

53
types/requests/contactConfig.ts
View File

@@ -1,53 +0,0 @@
import { AllRequestResponse } from "./utils/all"
export type ContactConfig = {
email: {
name?: string
address?: string
}
email_loyalty: {
name?: string
address?: string
}
mailing_address: {
zip?: string
street?: string
name?: string
city?: string
country?: string
}
phone: {
number?: string
name?: string
}
phone_loyalty: {
number?: string
name?: string
}
visiting_address: {
zip?: string
country?: string
city?: string
street?: string
}
}
export enum ContactFieldGroupsEnum {
email = "email",
email_loyalty = "email_loyalty",
mailing_address = "mailing_address",
phone = "phone",
phone_loyalty = "phone_loyalty",
visiting_address = "visiting_address",
}
export type ContactFieldGroups = keyof typeof ContactFieldGroupsEnum
export type GetContactConfigData = {
all_contact_config: AllRequestResponse<ContactConfig>
}
export type ContactFields = {
display_text?: string
contact_field: string
}

24
types/requests/contentTypeUid.ts
View File

@@ -1,11 +1,13 @@
export type GetContentTypeUidType = {
all_content_page: {
total: number
}
all_loyalty_page: {
total: number
}
all_current_blocks_page: {
total: number
}
}
import z from "zod"
export const validateContentTypeUid = z.object({
all_content_page: z.object({
total: z.number(),
}),
all_loyalty_page: z.object({
total: z.number(),
}),
all_current_blocks_page: z.object({
total: z.number(),
}),
})

3
utils/contactConfig.ts
View File

@@ -1,7 +1,7 @@
import {
ContactConfig,
ContactFieldGroups,
} from "@/types/requests/contactConfig"
} from "@/server/routers/contentstack/contactConfig/output"
export function getValueFromContactConfig(
keyString: string,
@@ -16,4 +16,5 @@ export function getValueFromContactConfig(
return fieldGroup[key]
}
return undefined
}

19
utils/contentType.ts
View File

@@ -1,10 +1,10 @@
import { DocumentNode } from "graphql"
import { DocumentNode, print } from "graphql"
import { Lang } from "@/constants/languages"
import { env } from "@/env/server"
import GetContentTypeUid from "@/lib/graphql/Query/ContentTypeUid.graphql"
import { GetContentTypeUid } from "@/lib/graphql/Query/ContentTypeUid.graphql"
import type { GetContentTypeUidType } from "@/types/requests/contentTypeUid"
import { validateContentTypeUid } from "@/types/requests/contentTypeUid"
export enum PageTypeEnum {
CurrentBlocksPage = "CurrentBlocksPage",
@@ -16,7 +16,6 @@ export async function getContentTypeByPathName(
pathNameWithoutLang: string,
lang = Lang.en
) {
const print = (await import("graphql/language/printer")).print
const result = await fetch(env.CMS_URL, {
method: "POST",
headers: {
@@ -33,7 +32,17 @@ export async function getContentTypeByPathName(
})
const pageTypeData = await result.json()
const pageType = pageTypeData.data as GetContentTypeUidType
const validatedContentTypeUid = validateContentTypeUid.safeParse(
pageTypeData.data
)
if (!validatedContentTypeUid.success) {
console.error(validatedContentTypeUid.error)
return null
}
const pageType = validatedContentTypeUid.data
if (pageType.all_content_page.total) {
return PageTypeEnum.ContentPage