completejavascript / gatsby-blog-template Goto Github PK

// File: GiscusKomentar.jsx

import React, { Component } from 'react'
import { Giscus } from '@giscus/react';

class GiscusKomentar extends Component {
  constructor(props) {
    super(props)
    this.state = {
      toasts: [],
    }
  }

  render() {
    const { postNode } = this.props
    const post = postNode.frontmatter

    return (
      <>
      <h1>{post.title}</h1>
        <Giscus
          id="comments"
          repo="topidesta/topidesta"
          repoId="MDEwOlJlcG9zaXRvcnkyMDA1ODIyNTk="
          category="Comments"
          categoryId="DIC_kwDOC_Skc84CAQVo"
          mapping="url"
          term="Selamat datang di topidesta Blogs"
          reactionsEnabled="1"
          emitMetadata="0"
          inputPosition="top"
          theme="light_protanopia"
          lang="en"
        />
      </>
    )
  }
}

export default GiscusKomentar

===================

// File: Comment.jsx

import React, { Component } from "react";
import GiscusKomen from "./GiscusKomentar";

class Comment extends Component {
  state = {
    isShow: !this.props.lazyload,
  };

  handleClick = () => {
    this.setState((prevState) => ({
      isShow: !prevState.isShow,
    }));
  };

  render() {
    const { extraClass, postNode, btnLoadComments } = this.props;

    return (
      <div className={`comment-container text-center ${extraClass}`}>
        {!this.state.isShow && (
          <button className="btn-primary" onClick={this.handleClick}>
            {btnLoadComments}
          </button>
        )}

        {this.state.isShow && <GiscusKomen postNode={postNode} />}
      </div>
    );
  }
}

export default Comment;

  socialLinks: [
    { 
      label: "Instagram", 
      url: "https://www.instagram.com/", 
      iconClassName: "fab instagram"
    }
  ],