DEV Community: Olowu Abraham

Exploring Git API: Fetching and Paginating All Repositories, and Displaying Single Repository Pages using React

Olowu Abraham — Thu, 25 Jan 2024 14:59:00 +0000

Step 1: create the Repository component, you can call it anything you want. this is where are are going to call all the GitHub repositories and also perform our pagination.

Respository.jsx.

// Respository.jsx

import React, { useEffect, useState } from 'react'
import Eachrepo from './Eachrepo'
import axios from 'axios'

const Repositories = () => {
const [reps, setReps]= useState([])
const [Error, setError]= useState(null)
const [loading, setLoading]=useState(true)
  //pignate
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 4;
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = reps.slice(indexOfFirstItem, indexOfLastItem);
const totalPages = Math.ceil(reps.length / itemsPerPage);

const handlePageChange = (newPage) => {
  setCurrentPage(newPage);
};

  useEffect(()=>{
    const fetchdata = async()=>{
     try{
       const rep = await axios.get(`https://api.github.com/users/abrahamsegun/repos?per_page=100`);
       const data = await rep.data;
       setReps(data)
       setLoading(false)
     } catch (error) {
       setError(error)
       setLoading(false)
       console.log(`Your code is having this ${error} error`)
     }
    }
    fetchdata();
 }, [])

 if(loading){
  return <div className='loading'>Loading ...</div>
  }
  if(Error){
   return <div>error: {Error.message}</div>
  }
  return (
    <div>
        <Eachrepo handlePageChange={handlePageChange} reps={reps} currentPage={currentPage} totalPages={totalPages} currentItems={currentItems}></Eachrepo>
    </div>
  )
}

export default Repositories

First I imported axois and my react hooks to the component. then I stored my GitHub repositories API inside the reps state.

line 6 and line 24- 26.

//array
=>  const [reps, setReps]= useState([])
//update 
=>  setReps(data)

I handle any errors using the Error state and conditionally render my page with a loading message due to API delays.

Afterward, I implemented pagination for my page from line 10 to 20. The variable names are self-explanatory, but please note that on line 15, reps.length represents my GitHub state, which is updated as per the state defined in line 5.

*Note: *
The handlePageChange function in your code is responsible for updating the currentPage state when called. This function is passed down to the Eachrepo component as a prop.

step 2: Each repo component
I decided to display in Api fetched data in the Eachrepo component .

// Eachrepo component

import React from 'react'
import "../css/eachrepo.css"
import "../App.css"
import {Link} from "react-router-dom"

const Eachrepo = ({handlePageChange , currentItems, totalPages, currentPage, reps}) => {
  return (
    <div className='eachrepo'id='eachrepo'>
      {currentItems.map((each)=>{
        return(
        <div className='singlerepo' key={each.id}> 

         <div id='smallerme'><Link to={`/each/${each.name}`}> <h2>{each.name}</h2>  </Link></div>
            <div className='eachupdate' >
            <p id='smalleru'>{each.language}</p> 
              </div> 
              </div>)
      })}
      <div>
       <div>
        <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
        Previous
        </button>
          <span>Page {currentPage} of {totalPages}</span>
        <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
        Next
        </button>
      </div>
    </div>
    </div>
  )
}

export default Eachrepo

This is where I displayed my repository name called each.name from my GitHub repository array.

The link on link 13 is to link the repository name dynamically to new page which is connected to the Route at App.js to display page path according to the repository name

  <Route path="Repositories" element={<Repositories />}>
           <Route path='each/:repoName' element={<DiplayEachRepo />}></Route>
        </ Route>

<Link to={`/each/${each.name}`}> <h2>{each.name}</h2>  </Link>

Then there is a div to display two buttons to control the pages to be displayed. All the functions were passed as props from the parent component (Respository.jsx),the span tag shows the numbers and you carry out the button actions.

Step 3: Individual GitHub Page.
This is where I consumed my data based on the name of the repository. In GitHub the name of the repository leads to another array which consume here.

DisplayeachRepo.jsx

//DisplayeachRepo

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import { Link } from 'react-router-dom';
import '../css/display.css';

const DiplayEachRepo = () => {
  const { repoName } = useParams();
  const [repository, setRepository] = useState({});

  useEffect(() => {
    const fetchData = async () => {
      try {
        const rep = await axios.get(`https://api.github.com/repos/abrahamsegun/${repoName}`);
        const data = await rep.data;
        // const dadada = data.find((r) => r.name === repoName);
        setRepository(data);
      } catch (error) {
        console.log(error);
      }
    };
    fetchData();
  }, [repoName]);

  if (!repository) {
    return (
      <div className='loadingEach'>
        <div>Loading...</div>
        <div>If it persists, please go back</div>

        <Link to='/'>
          <button className='btn'>Go Home</button>
        </Link>
      </div>
    );
  }

  return (
    <section className='bigwahala'>
      <h2>{repository.name}</h2>

      <br />
      <br />
      <ul className='uldisplay'>
        <li>Languages: {repository.language ? repository.language : 'NONE'}</li>
        <li>Stars: {repository.stargazers_count}</li>
        <li>Forks: {repository.forks_count}</li>
      </ul>
      <hr />
      <div className='hr'>
        <ul>
          <div className='issuesdiv'>
            <p>Issues:</p>{' '}
            <p>
              {repository.open_issues_count > 0
                ? `${repository.open_issues_count} open issue(s)`
                : 'No issues'}
            </p>
          </div>
          <div className='visibitydiv'>
            <p> Visibility: </p>
            <p>{repository.visibility}</p>
          </div>
        </ul>
      </div>
      <hr />
      <div className='ButtonGit'>
        <button>
          <Link to={`https://github.com/abrahamsegun/${repoName}`}>Go to GitHub repository</Link>
        </button>
      </div>
    </section>
  );
};

export default DisplayEachRepo;

Clicking on each name in EachRepo will open up the individual API to be consumed here.

The useParams hook provides access to the parameters of the current route. In your case, it extracts the repoName parameter from the URL. For example, if your route is "/repos/:repoName" and the user navigates to "/repos/any-repo", repoName would be equal to "any-repo".

Finally, there is a GitHub link for each of them at line 69 to check the code on GitHub.

Thank you.

Creating line and bar graphs in Vue.js using Chart.js through API calls

Olowu Abraham — Tue, 23 Jan 2024 14:35:01 +0000

I accomplished this task while working on a project, and I believe it would be beneficial to share the template with other developers who may find it useful in the future.

Step-by-Step Guide: Creating a Line Graph with Chart.js in Vue

Step 1: Set Up Your Vue Environment.
Begin by setting up your Vue environment using the Vue CLI. Navigate to the 'src' folder to start your work.

npm create vue@latest

Step 2: Create a Component for Your Line Chart (e.g., Chart.vue)

Create a new component to manage your line chart. You can name it, for example, Chart.vue. Before you proceed, ensure that you have installed the Chart.js library in your project, Using this command.

  npm install chart.js

Step 3: Making API Calls

In this step, you'll initiate API calls to fetch data. In my approach, I make the API call in the parent component and pass the retrieved data as a prop to the child component (Chart.js). However, you may opt to make the API call directly within the child component, depending on your preference.

Parent Component (Index.vue):

<template>
  <div>
    <div v-if="isLoading">Loading please wait...</div>
    <Chats :data="prices" v-if="!isLoading && prices.length > 0"></Chats>
  </div>
</template>

<script setup>
import axios from 'axios';
import Chats from "../components/Chats.vue"
import { ref, onMounted } from 'vue';

const prices = ref([]);
const isLoading = ref(true);

onMounted(async () => {
  try {
    const { data } = await axios.get(`http://localhost:5500/prices`);
    console.log('Data fetched successfully:', data);
    prices.value = data;
    isLoading.value = false;
  } catch (error) {
    console.error('Error fetching data:', error);
    prices.value = [];
    isLoading.value = false;
  }
});
</script>

As shown in line 4, I use the v-if directive to display "Loading, please wait" during the API call, ensuring that the Chart component is displayed only when the data is ready. I employ an asynchronous function within the mounted lifecycle hook to consistently call the API when the page is loaded, ensuring the data is always up to date.

It's important to note that I store the retrieved data in line 22 under the "price.value" ref. Storing the data in a ref is crucial as it allows for dynamic updates. I use prices.value = data; to achieve this.

prices.value = data;

Following that, I bind the state [price] to the prop data that the Chart.vue component will utilize.

:data="prices"

It's essential to ensure that the data passed consists of more than one array, as indicated in
line 5 to eliminate any potential bugs

v-if="!isLoading && prices.length

This condition ensures that the Chart component is displayed only when there is data available, and the loading process has completed.

step 4:Chart.js

 <template>
  <div class="main">
    <canvas ref="lineChart" :style='{ height: "40rem", width: "100%" }'></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js';

export default {
  props: {
    data: Array,
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.createChart();
  },

  methods: {
    createChart() {
      const data = this.data || [];

      const timestamps = data.map(entry => new Date(entry.timestamp).toLocaleTimeString());
      const values = data.map(entry => entry.value);

      this.chart = new Chart(this.$refs.lineChart.getContext('2d'), {
        type: 'line',
        data: {
          labels: timestamps,
          datasets: [{
            label: 'Value',
            data: values,
            borderColor: 'blue', // change color
            borderWidth: 2,
            fill: false,
          }],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            x: {
              type: 'linear',
              position: 'bottom',
              title: {
                display: true,
                text: 'Timestamp',
              },
            },
            y: {
              type: 'linear',
              position: 'left',
              title: {
                display: true,
                text: 'Value',
              },
            },
          },
        },
      });
    },
  },

  beforeUnmount() {
    if (this.chart) {
      this.chart.destroy();
    }
  },
};
</script>

<style scoped>
.main {
  height: 80vh;
  width: 100%;
}
</style>

First you want to pass your props, import Chart from Chart.js and for this it is advisable you use vUE option api of vue as I did above and I will explain why later.

Now, line 15 to line 68 is provided by chartjs to run the code, but note line 27 and 28 is my x and y axis on the graph so I extracted it from from my api using the map properties. note it varies depending on you api structure.

In your chartjs provided code, there is the object of x and y replace what there with with x and y text in a string. Note it must be a string is "string"

 x: {
               type: 'linear',
                position: 'bottom',
                title: {
                  display: true,
                  text: 'Timestamp',
                },
              },
              y: {
                type: 'linear',
                position: 'left',
                title: {
                  display: true,
                  text: 'Value',
                }

To display your graph insert component into your desired div with the ref. Dont forget your ref as shown below for line
line 3

  <canvas ref="lineChart"></canvas>

The destroy() method is a Chart.js function that cleans up and removes the chart, releasing any resources associated with it.

  beforeUnmount() {
      if (this.chart) {
        this.chart.destroy();
      }
    }

Bars

if you want to use bar rather than line chart use the child code below. change the type and ref.

<template>
  <div class="main">
    <canvas ref="barChart" :style='{height:"40rem", width:"100%"}'></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js';

export default {
  props: {
    data: Array,
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      const data = this.data || [];

      const timestamps = data.map(entry => new Date(entry.timestamp).toLocaleTimeString());
      const values = data.map(entry => entry.value);

      this.chart = new Chart(this.$refs.barChart.getContext('2d'), {
        type: 'bar', // Change type to 'bar'
        data: {
          labels: timestamps,
          datasets: [{
            label: 'Value',
            data: values,
            backgroundColor: 'blue', // Change background color for bars if you want to
            borderWidth: 2,
          }],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            x: {
              type: 'linear',
              position: 'bottom',
              title: {
                display: true,
                text: 'Timestamp',
              },
            },
            y: {
              type: 'linear',
              position: 'left',
              title: {
                display: true,
                text: 'Value',
              },
            },
          },
        },
      });
    },
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.destroy();
    }
  },
};
</script>

<style scoped>
.main {
  height: 80vh;
  width: 100%;
}
</style>

Finally, I opted for using the Vue Option API without the setup function. The chart was originally designed to seamlessly integrate with the Vue Option API, and I encountered issues when attempting to modify the code using the Composition API. Therefore, my advice is to stick with the Option API for smoother integration and to avoid potential bugs.

         `   this.chart = new Chart(this.$refs.lineChart.getContext('2d')`

line 30 was giving refs bug with Vue compostion api. that is

<script ></script>
instead of
<script setup></script>
as used in the parent component. `

DEV Community: Olowu Abraham

Exploring Git API: Fetching and Paginating All Repositories, and Displaying Single Repository Pages using React

Creating line and bar graphs in Vue.js using Chart.js through API calls

Step-by-Step Guide: Creating a Line Graph with Chart.js in Vue

Bars

Outcome