Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: migrate listed components to typescript #6909

Merged
merged 6 commits into from
Jul 16, 2022
Merged

refactor: migrate listed components to typescript #6909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4c2381e
refactor: migrate PageHero/SkipLink to typescript
didoshotev Jul 4, 2022
3ae4e03
Merge branch 'dev' of https://github.com/didoshotev/ethereum-org-webs…
didoshotev Jul 4, 2022
2ffce15
Merge branch 'dev' of https://github.com/didoshotev/ethereum-org-webs…
didoshotev Jul 16, 2022
92a61cc
Merge branch 'dev' of https://github.com/ethereum/ethereum-org-websit…
didoshotev Jul 16, 2022
2dd8720
fix: required ts changes
didoshotev Jul 16, 2022
9c377e3
fix types
pettinarip Jul 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/ButtonLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const SecondaryScrollLink = styled(StyledScrollButton)`
}
`

interface IProps extends ILinkProps, MarginProps {
export interface IProps extends ILinkProps, MarginProps {
toId?: string
isSecondary?: boolean
}
Expand Down
39 changes: 34 additions & 5 deletions src/components/PageHero.js → src/components/PageHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import React from "react"
import styled from "styled-components"
import { GatsbyImage } from "gatsby-plugin-image"
import ButtonLink from "./ButtonLink"
import ButtonLink, { IProps as IButtonLinkProps } from "./ButtonLink"
import { Content } from "./SharedStyledComponents"

const HeroContainer = styled.div`
export interface IIsReverse {
isReverse: boolean
}

const HeroContainer = styled.div<IIsReverse>`
display: flex;
justify-content: space-between;
margin-top: 2rem;
Expand Down Expand Up @@ -89,7 +93,32 @@ const StyledButtonLink = styled(ButtonLink)`
}
`

const PageHero = ({ content, children, className, isReverse }) => {
export interface IButton extends Partial<IButtonLinkProps> {
content: string
}

export interface IContent {
buttons?: Array<IButton>
title: string
header: string
subtitle: string
image: string
alt: string
}

export interface IProps {
content: IContent
isReverse?: boolean
children?: React.ReactNode
className?: string
}

const PageHero: React.FC<IProps> = ({
content,
isReverse = false,
children,
className,
}) => {
const { buttons, title, header, subtitle, image, alt } = content
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now, we could add the content interface in this file with this structure. Could be something like:

interface IButton {
  path: string
  pathId: string
}

interface IContent {
  buttons?: Array<IButton>
  title: string
  header: string
  subtitle: string
  image: string
  alt: string
}

return (
<Content>
Expand All @@ -104,8 +133,8 @@ const PageHero = ({ content, children, className, isReverse }) => {
<StyledButtonLink
isSecondary={button.isSecondary}
key={idx}
to={button.path}
toId={button.pathId}
to={button.to}
toId={button.toId}
>
{button.content}
</StyledButtonLink>
Expand Down
8 changes: 6 additions & 2 deletions src/components/SkipLink.js → src/components/SkipLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@ const DivAnchor = styled.div`
margin-top: -80px;
`

export const SkipLink = ({ hrefId }) => {
export interface IProps {
hrefId: string
}

export const SkipLink: React.FC<IProps> = ({ hrefId }) => {
return (
<Div>
<Anchor href={hrefId}>
Expand All @@ -34,6 +38,6 @@ export const SkipLink = ({ hrefId }) => {
)
}

export const SkipLinkAnchor = ({ id }) => {
export const SkipLinkAnchor: React.FC<{ id: string }> = ({ id }) => {
return <DivAnchor id={id}></DivAnchor>
}
6 changes: 3 additions & 3 deletions src/pages-conditional/dapps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1150,12 +1150,12 @@ const DappsPage = ({
buttons: [
{
content: translateMessageId("page-dapps-explore-dapps-title", intl),
path: "#explore",
to: "#explore",
},
{
content: translateMessageId("page-dapps-what-are-dapps", intl),
path: "#what-are-dapps",
isSecondary: "isSecondary",
to: "#what-are-dapps",
isSecondary: true,
},
],
}
Expand Down
2 changes: 1 addition & 1 deletion src/pages-conditional/wallets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ const WalletsPage = ({
alt: translateMessageId("page-wallets-alt", intl),
buttons: [
{
path: "/wallets/find-wallet/",
to: "/wallets/find-wallet/",
content: translateMessageId("page-wallets-find-wallet-link", intl),
},
],
Expand Down
2 changes: 1 addition & 1 deletion src/pages/learn/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ const LearnPage = ({ data }: PageProps<Queries.LearnPageQuery, Context>) => {
buttons: [
{
content: "Let's get started",
pathId: tocItems[0].id,
toId: tocItems[0].id,
},
],
}
Expand Down