From acd29e95cf8ca06ff1b2d0e43ab44a4bde8b491e Mon Sep 17 00:00:00 2001 From: Olaleye Blessing Date: Tue, 19 Apr 2022 11:48:59 +0100 Subject: [PATCH] feat: integrate github api to fetch contributors (#139) * feat: integrate github api to fetch contributors * fix: link credits page on mobile --- .../components/Contributors/Contributors.jsx | 199 +- .../Contributors/Contributors.style.js | 171 +- frontend/components/NavBar/index.js | 20 +- frontend/next.config.js | 3 + frontend/styles/Contributors.module.css | 15 +- frontend/yarn.lock | 3270 +++++++++-------- 6 files changed, 1888 insertions(+), 1790 deletions(-) diff --git a/frontend/components/Contributors/Contributors.jsx b/frontend/components/Contributors/Contributors.jsx index 554b828..92179e5 100644 --- a/frontend/components/Contributors/Contributors.jsx +++ b/frontend/components/Contributors/Contributors.jsx @@ -1,115 +1,116 @@ -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' +import axios from 'axios' import ContributorsStyle from './Contributors.style' import styles from '../../styles/Contributors.module.css' import Image from 'next/image' import profilepic from 'assets/ContributorsImages/sampleImage.jpg' import { GitHub } from '@mui/icons-material' -import Head from "next/head"; -import Script from "next/script"; +import Head from 'next/head' +import Script from 'next/script' + +const contributorsURL = + 'https://api.github.com/repos/bravo68web/url-minify/contributors' export default function Contributors() { - const [contributors, setContributors] = useState([ - { - id: 1, - profilepic, - name: 'Jacob Myers', - gitHubUsername: '@jacob', - }, - { - id: 2, - profilepic, - name: 'John Doe', - gitHubUsername: '@john', - }, - { - id: 3, - profilepic, - name: 'Sara Williams', - gitHubUsername: '@sara', - }, - { - id: 4, - profilepic, - name: 'Sara Williams', - gitHubUsername: '@sara', - }, - { - id: 5, - profilepic, - name: 'Sara Williams', - gitHubUsername: '@sara', - }, - { - id: 6, - profilepic, - name: 'Sara Williams', - gitHubUsername: '@sara', - }, - { - id: 7, - profilepic, - name: 'Sara Williams', - gitHubUsername: '@sara', - }, - { - id: 8, - profilepic, - name: 'Sara Williams', - gitHubUsername: '@sara', - }, - { - id: 9, - profilepic, - name: 'Sara Williams', - gitHubUsername: '@sara', - }, - ]) + const [contributors, setContributors] = useState({ + loading: true, + error: null, + data: [], + }) + + useEffect(() => { + const fetchContributors = async () => { + try { + setContributors((prev) => ({ ...prev, loading: true })) + const { data } = await axios.get(contributorsURL) + setContributors((prev) => ({ ...prev, data })) + } catch (error) { + console.log(error) + setContributors((prev) => ({ ...prev, error: 'There is an error' })) + } finally { + setContributors((prev) => ({ ...prev, loading: false })) + } + } + fetchContributors() + }, []) + + if (contributors.data) { + // remove bots from contributors list + contributors.data = [...contributors.data].filter( + ({ type }) => type === 'User' + ) + } + return ( <> - - +