Merge pull request #6829 from M-Ivan/ts-migration/M-Ivan_assigned-pages

Ts migration(src/pages): Migrated assigned files

src/components/AssetDownload.tsx

@@ -26,7 +26,7 @@ interface IPropsWithSVG extends IPropsBase {
 }
 interface IPropsWithImage extends IPropsBase {
   svg?: never
-  image: string
+  image: any
 }
 
 export type IProps = IPropsWithImage | IPropsWithSVG

src/components/Leaderboard.tsx

@@ -64,7 +64,7 @@ const githubUrl = `https://github.com/`
 
 export interface Person {
   name: string
-  username: string
+  username?: string
   score: number
 }
 

src/pages/404.js → src/pages/404.tsx

@@ -5,12 +5,13 @@ import Link from "../components/Link"
 import Translation from "../components/Translation"
 
 import { Page, Content } from "../components/SharedStyledComponents"
+import { PageProps } from "gatsby"
 
 const StyledPage = styled(Page)`
   margin-top: 4rem;
 `
 
-const NotFoundPage = () => (
+const NotFoundPage = (props: PageProps) => (
   <StyledPage>
     <Content>
       <h1>

src/pages/assets.js → src/pages/assets.tsx

@@ -3,7 +3,7 @@ import { useIntl } from "react-intl"
 import { ThemeContext } from "styled-components"
 import styled from "styled-components"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import { graphql } from "gatsby"
+import { graphql, PageProps } from "gatsby"
 
 import AssetDownload from "../components/AssetDownload"
 import Link from "../components/Link"
@@ -14,6 +14,7 @@ import FeedbackCard from "../components/FeedbackCard"
 
 import { translateMessageId } from "../utils/translations"
 import EthGlyphColoredSvg from "../assets/assets/eth-glyph-colored.svg"
+import { Context } from "../types"
 
 const Image = styled(GatsbyImage)`
   align-self: center;
@@ -75,7 +76,7 @@ const Header = styled.header`
   }
 `
 
-const AssetsPage = ({ data }) => {
+const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
   const intl = useIntl()
   const themeContext = useContext(ThemeContext)
   const isDarkTheme = themeContext.isDark

src/pages/bug-bounty.js → src/pages/bug-bounty.tsx

@@ -1,8 +1,8 @@
-import React, { useContext } from "react"
+import React, { ReactNode, useContext } from "react"
 import { ThemeContext } from "styled-components"
 import styled from "styled-components"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import { graphql } from "gatsby"
+import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
 
 import { translateMessageId } from "../utils/translations"
@@ -27,6 +27,7 @@ import {
   SloganGradient,
 } from "../components/SharedStyledComponents"
 import FeedbackCard from "../components/FeedbackCard"
+import { Context } from "../types"
 
 const HeroCard = styled.div`
   display: flex;
@@ -230,44 +231,87 @@ const Faq = styled.div`
   }
 `
 
-const BugBountiesPage = ({ data, location }) => {
+type BountyHuntersArg = {
+  score?: number | null
+}
+
+function sortBountyHuntersFn(a: BountyHuntersArg, b: BountyHuntersArg) {
+  if (a.score && b.score) {
+    return b.score - a.score
+  }
+
+  return 0
+}
+
+interface INode {
+  readonly username: string
+  readonly name: string
+  readonly score: number
+}
+
+interface IClient {
+  title: string
+  link: string
+  image: any
+}
+
+interface ISpec {
+  title: ReactNode
+  link: string
+}
+
+const BugBountiesPage = ({
+  data,
+  location,
+}: PageProps<Queries.BugBountyPageQuery, Context>) => {
   const intl = useIntl()
   const themeContext = useContext(ThemeContext)
   const isDarkTheme = themeContext.isDark
 
   // TODO sort query isn't working :(
-  const consensusBountyHunters = data.consensusBountyHunters.nodes.sort(
-    (a, b) => b.score - a.score
+  const consensusBountyHuntersNodes = data.consensusBountyHunters
+    .nodes as Array<INode>
+  const consensusBountyHunters = [...consensusBountyHuntersNodes].sort(
+    sortBountyHuntersFn
   )
 
-  const executionBountyHunters = data.executionBountyHunters.nodes.sort(
-    (a, b) => b.score - a.score
+  const executionBountyHuntersNodes = data.executionBountyHunters
+    .nodes as Array<INode>
+  const executionBountyHunters = [...executionBountyHuntersNodes].sort(
+    sortBountyHuntersFn
   )
 
+  const bountyHuntersArrayToObject: Record<string, INode> = [
+    ...consensusBountyHunters,
+    ...executionBountyHunters,
+  ].reduce((acc, next) => {
+    const name = next.name
+    if (!name) {
+      return acc
+    }
+
+    if (acc[name]) {
+      return {
+        ...acc,
+        [name]: {
+          ...next,
+          score: acc[name].score + next.score,
+        },
+      }
+    }
+
+    return {
+      ...acc,
+      [name]: next,
+    }
+  }, {})
+
   // total all counts using name as identifier, then sort
-  const allBounterHunters = Object.values(
-    [...consensusBountyHunters, ...executionBountyHunters].reduce(
-      (acc, next) => {
-        if (acc[next.name]) {
-          return {
-            ...acc,
-            [next.name]: {
-              ...next,
-              score: acc[next.name].score + next.score,
-            },
-          }
-        }
-
-        return {
-          ...acc,
-          [next.name]: next,
-        }
-      },
-      {}
-    )
-  ).sort((a, b) => b.score - a.score)
-
-  const clients = [
+  const allBounterHunters = Object.values(bountyHuntersArrayToObject).sort(
+    (a, b) => b.score - a.score
+  )
+
+  const clients: Array<IClient> = [
     {
       title: "Besu",
       link: "https://besu.hyperledger.org/en/stable/",
@@ -327,7 +371,7 @@ const BugBountiesPage = ({ data, location }) => {
     ? getImage(data.lighthouseDark)
     : getImage(data.lighthouseLight)
 
-  const specs = [
+  const specs: Array<ISpec> = [
     {
       title: <Translation id="page-upgrades-bug-bounty-title-1" />,
       link: "https://github.com/ethereum/consensus-specs/blob/dev/specs/phase0/beacon-chain.md",

src/pages/community.js → src/pages/community.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import styled from "styled-components"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import { graphql } from "gatsby"
+import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
 
 import ActionCard from "../components/ActionCard"
@@ -21,6 +21,7 @@ import {
   Page,
 } from "../components/SharedStyledComponents"
 import { translateMessageId } from "../utils/translations"
+import { Context } from "../types"
 
 const ButtonRow = styled.div`
   display: flex;
@@ -306,7 +307,23 @@ const StyledCallout = styled(Callout)`
   min-height: 100%;
 `
 
-const CommunityPage = ({ data }) => {
+interface ICard {
+  image: any
+  title: string
+  description: string
+  alt: string
+  to: string
+}
+
+interface IGetInvolvedCard {
+  emoji: string
+  title: string
+  description: string
+}
+
+const CommunityPage = ({
+  data,
+}: PageProps<Queries.CommunityPageQuery, Context>) => {
   const intl = useIntl()
 
   const heroContent = {
@@ -317,7 +334,7 @@ const CommunityPage = ({ data }) => {
     alt: translateMessageId("page-community-hero-alt", intl),
   }
 
-  const cards = [
+  const cards: Array<ICard> = [
     {
       image: getImage(data.docking),
       title: translateMessageId("page-community-card-1-title", intl),
@@ -360,7 +377,7 @@ const CommunityPage = ({ data }) => {
     },
   ]
 
-  const whyGetInvolvedCards = [
+  const whyGetInvolvedCards: Array<IGetInvolvedCard> = [
     {
       emoji: ":mage:",
       title: translateMessageId(