Integrate blogtraversy with your Portfolio

blog.js

/*
Thanks for using blogtraversy. 
Read this before using.... 
Please configure the following usernames variable, with your respective handles.
You can set a type at line:34, default type is 'all' which fetches all the blogs.
*/

import React, { useState } from "react";
import { getBlogs } from "blogtraversy";
// importing react bootstrap for quick css.
import {
  Card,
  Button,
  Row,
  Col,
  Container,
  InputGroup,
  FormControl,
  Nav,
} from "react-bootstrap";

const MyBlogs = () => {
  // initializing states
  const [blogs, setBlogs] = React.useState([]);
  const [error, setError] = React.useState(false);

  // config for usernames, modify accordingly.
  let usernames = {
    mediumUsername: `abirwrites`, 
    hashnodeUsername: `imabp`,
  };
    
  //select type before you render   type = 'all' | 'medium' | 'hashnode' 
  const type = "all";
  
  React.useEffect(()=>{
    async function fetchBlogs(){
        const blogs = await getBlogs(type, usernames);
        if (type == "all") {
            // spreading the hashnodeposts and mediumarticles when fetching under 'all' condition.
            setBlogs([...blogs.hashnodePosts, ...blogs.mediumArticles]);  } 
        else {
            setBlogs(blogs);
        }
    }
    fetchBlogs();
  },[])


  return (
    <Container>
      <Row>
        { 
          blogs &&
          blogs.map((el) => {
            return (
              <Col>
                <Card style={{ width: "18rem" }}>
                  <Card.Img variant="top" src={`${el.thumbnail}`} width="200" />
                  <Card.Body>
                    <Card.Title>{el.title}</Card.Title>
                    <Button variant="primary">
                      <a
                        href={el.link}
                        target="_blank"
                        rel="noreferrer noopenner"
                      >
                        Read Article
                      </a>
                    </Button>
                  </Card.Body>
                </Card>
              </Col>
            );
          })}
      </Row>
    </Container>
  );
};
export default MyBlogs;