Skip to content

Commit

Permalink
fix: Use Banner types from schema (#223)
Browse files Browse the repository at this point in the history
LautaroPetaccio authored Jan 20, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 939b2ce commit 37a11d9
Showing 11 changed files with 60 additions and 148 deletions.
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -38,7 +38,7 @@
"homepage": "https://github.com/decentraland/ui2#readme",
"dependencies": {
"@contentful/rich-text-react-renderer": "^16.0.1",
"@dcl/schemas": "^13.9.0",
"@dcl/schemas": "^15.6.0",
"@dcl/ui-env": "^1.5.1",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
45 changes: 28 additions & 17 deletions src/components/Banner/Banner.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
import { ContentfulLocale } from "@dcl/schemas"
import CircularProgress from "@mui/material/CircularProgress"
import { Locales, getAssetUrl } from "../../hooks/contentful"
import { getAssetUrl } from "../../hooks/contentful"
import { useTabletAndBelowMediaQuery } from "../Media"
import { BannerProps, LowercasedAlignment } from "./Banner.types"
import {
@@ -29,7 +30,13 @@ const convertAlignmentToFlex = (alignment: Property.TextAlign) => {
}

export const Banner: React.FC<BannerProps> = (props: BannerProps) => {
const { isLoading, fields, assets, locale = Locales.enUS, error } = props
const {
isLoading,
fields,
assets,
locale = ContentfulLocale.enUS,
error,
} = props
const isMobileOrTablet = useTabletAndBelowMediaQuery()

if (isLoading) {
@@ -41,38 +48,38 @@ export const Banner: React.FC<BannerProps> = (props: BannerProps) => {
}

// If there is no banner fields or the banner is not supposed to be shown, return null
if (!fields || !fields.showBanner[Locales.enUS] || error) {
if (!fields || error) {
return null
}

// Build the parameteres based on the size of the screen
const bannerBackgroundImage = getAssetUrl(
assets,
Locales.enUS,
ContentfulLocale.enUS,
isMobileOrTablet
? fields.mobileBackground[Locales.enUS]
: fields.fullSizeBackground[Locales.enUS]
? fields.mobileBackground[ContentfulLocale.enUS]
: fields.fullSizeBackground[ContentfulLocale.enUS]
)
const title = isMobileOrTablet
? fields.mobileTitle[locale]
: fields.desktopTitle[locale]
const titleAlignment = (
isMobileOrTablet
? fields.mobileTitleAlignment[Locales.enUS]
: fields.desktopTitleAlignment[Locales.enUS]
? fields.mobileTitleAlignment[ContentfulLocale.enUS]
: fields.desktopTitleAlignment[ContentfulLocale.enUS]
)?.toLowerCase() as LowercasedAlignment
const text = isMobileOrTablet
? fields.mobileText[locale]
: fields.desktopText[locale]
const textAlignment = (
isMobileOrTablet
? fields.mobileTextAlignment[Locales.enUS]
: fields.desktopTextAlignment[Locales.enUS]
? fields.mobileTextAlignment[ContentfulLocale.enUS]
: fields.desktopTextAlignment[ContentfulLocale.enUS]
)?.toLowerCase() as LowercasedAlignment
const buttonAlignment = convertAlignmentToFlex(
(isMobileOrTablet
? fields.mobileButtonAlignment[Locales.enUS]
: fields.desktopButtonAlignment[Locales.enUS]
? fields.mobileButtonAlignment[ContentfulLocale.enUS]
: fields.desktopButtonAlignment[ContentfulLocale.enUS]
)?.toLowerCase() as LowercasedAlignment
)

@@ -87,12 +94,12 @@ export const Banner: React.FC<BannerProps> = (props: BannerProps) => {
{text ? documentToReactComponents(text) : null}
</Text>

{fields.showButton[Locales.enUS] &&
fields.buttonLink?.[Locales.enUS] &&
{fields.showButton[ContentfulLocale.enUS] &&
fields.buttonLink?.[ContentfulLocale.enUS] &&
fields.buttonsText?.[locale] ? (
<ButtonContainer justifyContent={buttonAlignment}>
<Button
href={fields.buttonLink[Locales.enUS]}
href={fields.buttonLink[ContentfulLocale.enUS]}
variant="contained"
disableElevation
>
@@ -101,9 +108,13 @@ export const Banner: React.FC<BannerProps> = (props: BannerProps) => {
</ButtonContainer>
) : null}
</Content>
{fields.logo && fields.logo[Locales.enUS] && (
{fields.logo && fields.logo[ContentfulLocale.enUS] && (
<Logo
src={getAssetUrl(assets, Locales.enUS, fields.logo[Locales.enUS])}
src={getAssetUrl(
assets,
ContentfulLocale.enUS,
fields.logo[ContentfulLocale.enUS]
)}
alt="Banner logo"
/>
)}
36 changes: 4 additions & 32 deletions src/components/Banner/Banner.types.ts
Original file line number Diff line number Diff line change
@@ -1,41 +1,13 @@
import {
AlignmentFieldType,
ContentfulAsset,
Locales,
LocalizedField,
SysAssetLink,
} from "../../hooks/contentful"
import type { Document } from "@contentful/rich-text-types"

type IBannerFields = {
id: LocalizedField<string>
showBanner: LocalizedField<boolean>
desktopTitle: LocalizedField<string>
mobileTitle: LocalizedField<string>
mobileTitleAlignment: LocalizedField<AlignmentFieldType>
desktopTitleAlignment: LocalizedField<AlignmentFieldType>
desktopText: LocalizedField<Document>
mobileText: LocalizedField<Document>
desktopTextAlignment: LocalizedField<AlignmentFieldType>
mobileTextAlignment: LocalizedField<AlignmentFieldType>
showButton: LocalizedField<boolean>
buttonLink?: LocalizedField<string>
buttonsText?: LocalizedField<string>
desktopButtonAlignment: LocalizedField<AlignmentFieldType>
mobileButtonAlignment: LocalizedField<AlignmentFieldType>
fullSizeBackground: LocalizedField<SysAssetLink>
mobileBackground: LocalizedField<SysAssetLink>
logo?: LocalizedField<SysAssetLink>
}
import { BannerFields, ContentfulAsset, ContentfulLocale } from "@dcl/schemas"

type BannerProps = {
fields: IBannerFields | null
fields: BannerFields | null
assets: Record<string, ContentfulAsset>
isLoading: boolean
locale?: Locales
locale?: ContentfulLocale
error: string | null
}

type LowercasedAlignment = "left" | "center" | "right"

export type { BannerProps, IBannerFields, LowercasedAlignment }
export type { BannerProps, BannerFields, LowercasedAlignment }
2 changes: 1 addition & 1 deletion src/components/Banner/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export { Banner } from "./Banner"
export type { BannerProps, IBannerFields } from "./Banner.types"
export type { BannerProps } from "./Banner.types"
6 changes: 3 additions & 3 deletions src/components/MarketingBanner/MarketingBanner.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ContentfulLocale } from "@dcl/schemas"
import { MarketingBanner } from "./MarketingBanner"
import { Locales } from "../../hooks/contentful"
import type { Meta, StoryObj } from "@storybook/react"

const meta = {
@@ -25,14 +25,14 @@ const Default: Story = {
const SpanishLocale: Story = {
args: {
...Default.args,
locale: Locales.es,
locale: ContentfulLocale.es,
},
}

const ChineseLocale: Story = {
args: {
...Default.args,
locale: Locales.zh,
locale: ContentfulLocale.zh,
},
}

15 changes: 11 additions & 4 deletions src/components/MarketingBanner/MarketingBanner.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
import React from "react"
import { Banner, IBannerFields } from "../../components/Banner"
import { Locales, useGetContentfulEntry } from "../../hooks/contentful"
import { BannerFields, ContentfulLocale } from "@dcl/schemas"
import { Banner } from "../../components/Banner"
import { useGetContentfulEntry } from "../../hooks/contentful"
import { MarketingBannerProps } from "./MarketingBanner.types"

const BANNER_CONTENT_TYPE = "banner"

export const MarketingBanner: React.FC<MarketingBannerProps> = (
props: MarketingBannerProps
) => {
const { id, environment, token, space, locale = Locales.enUS } = props
const {
id,
environment,
token,
space,
locale = ContentfulLocale.enUS,
} = props
const { fields, assets, isLoading, error } =
useGetContentfulEntry<IBannerFields>(
useGetContentfulEntry<BannerFields>(
id,
environment,
BANNER_CONTENT_TYPE,
4 changes: 2 additions & 2 deletions src/components/MarketingBanner/MarketingBanner.types.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Locales } from "hooks/contentful"
import { ContentfulLocale } from "@dcl/schemas"

type MarketingBannerProps = {
id: string
environment: string
token: string
space: string
locale?: Locales
locale?: ContentfulLocale
}

export type { MarketingBannerProps }
12 changes: 6 additions & 6 deletions src/hooks/contentful/contentful.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { useEffect, useState } from "react"
import {
ContentfulAsset,
ContentfulLocale,
ContentfulResponse,
Locales,
LocalizedField,
LocalizedFieldType,
SysAssetLink,
} from "./contentful.types"
SysLink,
} from "@dcl/schemas"

const getAssetUrl = (
assets: Record<string, ContentfulAsset>,
locale: Locales,
assetLink?: SysAssetLink
locale: ContentfulLocale,
assetLink?: SysLink<"Asset">
): string => {
if (!assetLink) return ""
const asset = assets[assetLink.sys.id]
@@ -66,7 +66,7 @@ const useGetContentfulEntry = <
throw new Error("No entity found with the specified ID")
}

const assetsMap = data.includes.Asset.reduce(
const assetsMap = (data.includes.Asset ?? []).reduce(
(acc, asset) => {
acc[asset.sys.id] = asset
return acc
77 changes: 0 additions & 77 deletions src/hooks/contentful/contentful.types.ts

This file was deleted.

1 change: 0 additions & 1 deletion src/hooks/contentful/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
export * from "./contentful.types"
export * from "./contentful"

0 comments on commit 37a11d9

Please sign in to comment.