chore(learn): Merge learn in to the client app

client/src/pages/learn.js

@@ -0,0 +1,122 @@
+/* eslint-disable max-len */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, graphql } from 'gatsby';
+import Helmet from 'react-helmet';
+import { connect } from 'react-redux';
+
+import {
+  ChallengeNode,
+  AllChallengeNode,
+  AllMarkdownRemark
+} from '../redux/propTypes';
+
+import LearnLayout from '../components/layouts/Learn';
+import Spacer from '../components/helpers/Spacer';
+import Map from '../components/Map';
+
+import './learn.css';
+
+const mapStateToProps = () => ({});
+
+const propTypes = {
+  data: PropTypes.shape({
+    challengeNode: ChallengeNode,
+    allChallengeNode: AllChallengeNode,
+    allMarkdownRemark: AllMarkdownRemark
+  })
+};
+
+const IndexPage = ({
+  data: {
+    challengeNode: {
+      fields: { slug }
+    },
+    allChallengeNode: { edges },
+    allMarkdownRemark: { edges: mdEdges }
+  }
+}) => (
+  <LearnLayout>
+    <div className='learn-page-wrapper'>
+      <Helmet title='Welcome to learn.freeCodeCamp!' />
+      <Spacer />
+      <Spacer />
+      <h2>Welcome to the freeCodeCamp curriculum</h2>
+      <p>
+        We have thousands of coding lessons to help you improve your skills.
+      </p>
+      <p>You can earn each certification by completing its 5 final projects.</p>
+      <p>
+        And yes - all of this is 100% free, thanks to the thousands of campers
+        who{' '}
+        <a
+          href='https://donate.freecodecamp.org'
+          rel='noopener noreferrer'
+          target='_blank'
+          >
+          donate
+        </a>{' '}
+        to our nonprofit.
+      </p>
+      <p>
+        If you are new to coding, we recommend you{' '}
+        <Link to={slug}>start at the beginning</Link>.
+      </p>
+      <Spacer />
+      <Map
+        introNodes={mdEdges.map(({ node }) => node)}
+        nodes={edges
+          .map(({ node }) => node)
+          .filter(({ isPrivate }) => !isPrivate)}
+      />
+    </div>
+  </LearnLayout>
+);
+
+IndexPage.displayName = 'IndexPage';
+IndexPage.propTypes = propTypes;
+
+export default connect(mapStateToProps)(IndexPage);
+
+export const query = graphql`
+  query FirstChallenge {
+    challengeNode(order: { eq: 0 }, suborder: { eq: 1 }) {
+      fields {
+        slug
+      }
+    }
+    allChallengeNode(
+      filter: { isPrivate: { eq: false } }
+      sort: { fields: [superOrder, order, suborder] }
+    ) {
+      edges {
+        node {
+          fields {
+            slug
+            blockName
+          }
+          id
+          block
+          title
+          isRequired
+          isPrivate
+          superBlock
+          dashedName
+        }
+      }
+    }
+    allMarkdownRemark(filter: { frontmatter: { block: { ne: null } } }) {
+      edges {
+        node {
+          frontmatter {
+            title
+            block
+          }
+          fields {
+            slug
+          }
+        }
+      }
+    }
+  }
+`;