diff --git a/src/modules/pages/components/Tutorials/Tutorials.jsx b/src/modules/pages/components/Tutorials/Tutorials.jsx index 0ed84d6ac..3568334a3 100644 --- a/src/modules/pages/components/Tutorials/Tutorials.jsx +++ b/src/modules/pages/components/Tutorials/Tutorials.jsx @@ -1,9 +1,69 @@ /* @flow */ +import type { IntlShape } from 'react-intl'; + import React from 'react'; +import { defineMessages } from 'react-intl'; + +import { graphql, useStaticQuery } from 'gatsby'; + +import type { TutorialNode } from '~types'; + +import Heading from '~core/Heading'; +import Link from '~core/Link'; +import Search from '~core/Search'; + +const MSG = defineMessages({ + pageTitle: { + id: 'pages.Tutorials.pageTitle', + defaultMessage: 'Explore Tutorials', + }, + pageSubtitle: { + id: 'pages.Tutorials.pageSubtitle', + defaultMessage: 'Tutorials', + }, +}); + +type QueryData = { + allTutorials: { + edges: Array<{ + node: TutorialNode, + }>, + }, +}; + +type Props = {| + /** Injected via `injectIntl` */ + intl: IntlShape, +|}; const displayName = 'pages.Tutorials'; -const Tutorials = () =>
; +const Tutorials = () => { + const tutorialsQueryData: QueryData = useStaticQuery(graphql` + { + ...allTutorialsFragment + } + `); + return ( + <> + + + + {tutorialsQueryData.allTutorials.edges.map( + ({ + node: { + fields: { slug }, + name, + }, + }) => ( + + + + ), + )} + + ); +}; Tutorials.displayName = displayName; diff --git a/src/queries/tutorial.js b/src/queries/tutorial.js index 6c57058df..3ba678eb0 100644 --- a/src/queries/tutorial.js +++ b/src/queries/tutorial.js @@ -7,7 +7,9 @@ export const allTutorialsFragment = graphql` edges { node { name - slug + fields { + slug + } } } }