freeCodeCamp/client/src/templates/Challenges/codeally/show.tsx

/* eslint-disable max-len */

// Package Utilities
import { graphql } from 'gatsby';
import React, { Component } from 'react';
import Helmet from 'react-helmet';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import type { Dispatch } from 'redux';

// Local Utilities
import LearnLayout from '../../../components/layouts/learn';
import {
  ChallengeNodeType,
  ChallengeMetaType
} from '../../../redux/prop-types';
import { updateChallengeMeta, challengeMounted } from '../redux';
// Redux
const mapStateToProps = () => ({});
const mapDispatchToProps = (dispatch: Dispatch) =>
  bindActionCreators(
    {
      updateChallengeMeta,
      challengeMounted
    },
    dispatch
  );

// Types
interface ShowCodeAllyProps {
  data: { challengeNode: ChallengeNodeType };
  pageContext: {
    challengeMeta: ChallengeMetaType;
  };
  updateChallengeMeta: (arg0: ChallengeMetaType) => void;
}

// Component
class ShowCodeAlly extends Component<ShowCodeAllyProps> {
  static displayName: string;
  componentDidMount(): void {
    const {
      updateChallengeMeta,
      data: {
        challengeNode: { challengeType, title }
      },
      pageContext: { challengeMeta }
    } = this.props;
    updateChallengeMeta({ ...challengeMeta, title, challengeType });
  }

  render() {
    const {
      title,
      fields: { blockName },
      url
    } = this.props.data.challengeNode;

    return (
      <LearnLayout>
        <Helmet title={`${blockName}: ${title} | freeCodeCamp.org`} />
        <iframe
          className='codeally-frame'
          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
          sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
          src={`https://codeally.io/embed/?repoUrl=${url}`}
          title='Editor'
        />
      </LearnLayout>
    );
  }
}

ShowCodeAlly.displayName = 'ShowCodeAlly';

export default connect(mapStateToProps, mapDispatchToProps)(ShowCodeAlly);

// GraphQL
export const query = graphql`
  query CodeAllyChallenge($slug: String!) {
    challengeNode(fields: { slug: { eq: $slug } }) {
      title
      challengeType
      url
      fields {
        blockName
      }
    }
  }
`;