bravo68web
/
url-minify
mirror of https://github.com/BRAVO68WEB/url-minify.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: integrate github api to fetch contributors (#139) 

* feat: integrate github api to fetch contributors

* fix: link credits page on mobile
This commit is contained in:
Olaleye Blessing 2022-04-19 11:48:59 +01:00 committed by GitHub
parent 430c6f08ad
commit acd29e95cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 1888 additions and 1790 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
frontend/components/Contributors/Contributors.jsx
View File

@ -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 (
<>
<Head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossOrigin="anonymous"
<Head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossOrigin="anonymous"
/>
</Head>
<Script
id="bootstrap-cdn"
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" />
<ContributorsStyle>
<>
<div className={styles.head}>CONTRIBUTORS</div>
<div class="conatiner contributor-cards">
<div className="contributor-cards row">
{contributors.map((contributor) => {
return (
<div className="contributor-card col-3" key={contributor.id}>
<div className="contributor-cardPointerStart">
<div id="circle"></div>
</div>
<div id="ImageContainer">
<Image
src={contributor.profilepic}
alt="Contributors Profile Picture"
width={'100px'}
height={'100px'}
className="contributor-Pic"
/>
</div>
<div id="contributorDetailsWrapper">
<div className="contributor-Name">{contributor.name}</div>
<div className="contributor-GithubUsername">
<GitHub />
<span id="username">{contributor.gitHubUsername}</span>
</div>
</div>
</div>
)
})}
</div>
</div>
id="bootstrap-cdn"
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
/>
<ContributorsStyle className="conttt">
<>
<header>
<h1 className={styles.head}>CONTRIBUTORS</h1>
</header>
{contributors.loading ? (
<p className="contributors__loading">Loading...</p>
) : contributors.error ? (
<p className="contributors__loading">{contributors.error}</p>
) : (
<ul className="contributor-cards row">
{contributors.data.map((contributor) => {
return (
<li
className="contributor-card col-3 flex"
key={contributor.id}
>
<span className="contributor__indicator"></span>
<figure className="contributor__avatar flex">
<Image
src={contributor.avatar_url}
width={100}
height={100}
alt={`${contributor.login}'s profile picture`}
/>
</figure>
<p
className="contributor__name ellipsis"
title={contributor.login}
>
{contributor.login}
</p>
<p className="contributor__github flex">
<a
href={contributor.url}
target="_blank"
rel="noopener"
className="contributor__github--link flex"
>
<GitHub className="contributor__github--icon" />
<span
id="username"
className="contributor__github--username ellipsis"
>
@{contributor.login}
</span>
</a>
</p>
</li>
)
})}
</ul>
)}
</>
</ContributorsStyle>
</>
</>
)
}

171
frontend/components/Contributors/Contributors.style.js
View File

@ -1,67 +1,124 @@
import styled from 'styled-components'
export default styled.section`
display: flex;
flex-direction: column;
justify-content: center;
.contributor-cards{
display: flex;
width: 85%;
align-item: center;
justify-content: center;
margin:20px;
margin-left: 6%
padding-top: 6rem;
.contributors {
&__loading {
text-align: center;
font-size: clamp(1.5rem, 2vw, 2.5rem);
}
}
.contributor-card {
width: 240px;
height: 250px;
.flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: #ffffff;
border-radius: 10px;
margin: 15px;
padding: 5px;
justify-content: center;
}
.contributor-cardPointerStart {
width: 180px;
display: flex;
justify-content: flex-start;
}
#circle {
height: 10px;
width: 10px;
border-radius: 50%;
background-color: green;
}
.contributor-Pic {
width: 100px;
height: 100px;
}
#ImageContainer {
border-radius: 50%;
border: 3px solid #35cdf0;
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
.contributor-Name {
color: #1d92e0;
font-size: 25px;
font-weight: bold;
.contributor {
&-cards {
list-style: none;
display: flex;
padding-left: 1.6rem;
padding-right: 1.6rem;
gap: 2rem 1.6rem;
max-width: 80rem;
margin: 1rem auto 2rem;
}
&-card {
margin-left: auto;
margin-right: auto;
background-color: rgb(255, 255, 255);
border-radius: 1rem;
flex: 1 1 auto;
max-width: 18rem;
width: 100%;
flex-direction: column;
text-align: center;
padding: 2.4rem 0.8rem;
position: relative;
transition: all 0.2s linear;
transform: scale(0.97);
&:hover {
transform: scale(1);
box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.2);
}
&:nth-child(3n-2) {
.contributor__indicator {
left: 1rem;
}
}
&:nth-child(3n-1) {
.contributor__indicator {
left: 48.5%;
}
}
&:nth-child(3n) {
.contributor__indicator {
right: 1rem;
}
}
}
&__indicator {
position: absolute;
top: 1rem;
width: 0.6rem;
height: 0.6rem;
background: green;
border-radius: 50%;
}
&__avatar {
border-radius: 50%;
border: 3px solid rgb(53, 205, 240);
overflow: hidden;
img {
max-width: 100%;
border-radius: 50%;
}
}
&__name {
color: rgb(29, 146, 224);
font-size: clamp(1.5rem, calc(4vw + 0.5em), 2.5rem);
font-weight: bold;
}
&__github {
width: 100%;
&--link {
width: 100%;
transition: all 0.2s linear;
transform: scale(0.95);
max-width: max-content;
&:hover {
transform: scale(1);
text-shadow: 1px 1px black;
}
}
&--username {
display: inline-block;
margin-left: 0.2rem;
width: auto;
}
}
}
#contributorDetailsWrapper {
display: flex;
flex-direction: column;
justfiy-content: flex-start;
}
.contributor-GithubUsername {
display: flex;
justify-content: baseline;
font-size: 20px;
}
#username {
color: grey;
font-weight: bold;
padding-left: 4px;
}
`

20
frontend/components/NavBar/index.js
View File

@ -116,15 +116,17 @@ function Index(props) {
</a>
</MenuItem>
<MenuItem onClick={handleCloseNavMenu}>
<a href={NotFound}>
<Typography
textAlign="center"
variant="h6"
sx={{ display: 'flex' }}
>
CREDITS
</Typography>
</a>
<Link href="/contributors">
<a>
<Typography
textAlign="center"
variant="h6"
sx={{ display: 'flex' }}
>
CREDITS
</Typography>
</a>
</Link>
</MenuItem>
</Menu>
</Box>

3
frontend/next.config.js
View File

@ -1,3 +1,6 @@
module.exports = {
reactStrictMode: true,
images: {
domains: ['avatars.githubusercontent.com'],
},
}

15
frontend/styles/Contributors.module.css
View File

@ -2,16 +2,21 @@
font-family: 'Montserrat Alternates', sans-serif;
color: #fff;
/* text-shadow: 3px 2px 1px black; */
margin-top: 100px;
/* margin-top: 100px; */
line-height: 1.15;
font-size: 5.5rem;
/* font-size: 5.5rem; */
font-weight: bold;
text-align: center;
font-size: clamp(1.8rem, calc(5vw + 1rem), 5.5rem);
padding-left: 1.6rem;
padding-right: 1.6rem;
margin-bottom: 4rem;
}
@media (max-width: 600px) {
.head {
font-size: 2.5rem;
margin-top: 2em;
margin-bottom: 100px;
/* font-size: 2.5rem; */
/* margin-top: 2em; */
margin-bottom: 2rem;
}
}

3270
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff