-
-
Save evertonpavan/2071df60d4936cb4a86254e76dd0fa47 to your computer and use it in GitHub Desktop.
feat: add stars and forks from Github repositories
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Fragment, useMemo } from 'react'; | |
import { HandHeart, Home, Loader, Users } from 'lucide-react'; | |
import { BurgerMenu, Header } from '@/components'; | |
import { AboutCardInfo, ServicedFrontInfo } from './components'; | |
import { frontItems } from './frontItems'; | |
import { useGithubContributors } from '@/hooks'; | |
import WithTooltip from '@/components/ui/with-tooltip'; | |
import { removeDuplicatesByField } from '@/lib/utils'; | |
import { IAboutUsPerson } from './types'; | |
import { useGithubRepositoryInformation } from '@/hooks/useGithubRepositoryInformation'; | |
const AboutUs = () => { | |
const { data: frontendContributors, loading: loadingFrontendContributors } = | |
useGithubContributors('sos-rs', 'frontend'); | |
const { data: backendContributors, loading: loadingBackendContributors } = | |
useGithubContributors('sos-rs', 'backend'); | |
const { data: frontendRepositoryInfos, loading: loadingFrontendRepositoryInfos } = | |
useGithubRepositoryInformation('sos-rs', 'frontend'); | |
const { data: backendRepositoryInfos, loading: loadingBackendRepositoryInfos } = | |
useGithubRepositoryInformation('sos-rs', 'backend'); | |
const persons: IAboutUsPerson[] = [ | |
{ | |
name: 'Klaus Riffel', | |
link: 'https://www.linkedin.com/in/klaus-riffel-69441928/', | |
}, | |
{ | |
name: 'Rhuam Estevam', | |
link: 'https://www.linkedin.com/in/rhuam/', | |
}, | |
{ | |
name: 'José Fagundes', | |
link: 'https://www.linkedin.com/in/jos%C3%A9-fagundes/', | |
}, | |
{ | |
name: 'Manoel Júnior', | |
link: 'https://www.linkedin.com/in/manoelfpjunior/', | |
}, | |
{ | |
name: 'Vinicius Arantes', | |
link: 'https://www.linkedin.com/in/viniciusrnt/', | |
}, | |
{ | |
name: 'Thiago Marins', | |
link: 'https://www.linkedin.com/in/thiago-dable', | |
}, | |
{ | |
name: 'Gabriel Mancuso', | |
link: 'https://www.linkedin.com/in/luizgabrielmancuso/', | |
}, | |
{ | |
name: 'Max Riffel', | |
link: 'https://www.linkedin.com/in/max-riffel-07a134a1/', | |
}, | |
{ | |
name: 'Kiwi Bertola', | |
link: 'https://www.linkedin.com/in/kiwi-bertola-10079073/', | |
}, | |
]; | |
const loading = useMemo( | |
() => loadingBackendContributors || loadingFrontendContributors || loadingFrontendRepositoryInfos || loadingBackendRepositoryInfos, | |
[loadingBackendContributors, loadingFrontendContributors, loadingFrontendRepositoryInfos, loadingBackendRepositoryInfos] | |
); | |
const contributors = useMemo( | |
() => | |
removeDuplicatesByField( | |
'login', | |
frontendContributors, | |
backendContributors | |
), | |
[frontendContributors, backendContributors] | |
); | |
const stars = useMemo( | |
() => (frontendRepositoryInfos?.stargazers_count || 0) + (backendRepositoryInfos?.stargazers_count || 0), | |
[frontendRepositoryInfos, backendRepositoryInfos] | |
); | |
const forks = useMemo( | |
() => (frontendRepositoryInfos?.forks_count || 0) + (backendRepositoryInfos?.forks_count || 0), | |
[frontendRepositoryInfos, backendRepositoryInfos] | |
); | |
return ( | |
<div className="flex flex-col h-screen items-center"> | |
<Header title="SOS Rio Grande do Sul" startAdornment={<BurgerMenu />} /> | |
<div className="flex flex-col gap-4 p-4 max-w-4xl pb-8 w-full"> | |
<h2 className="text-4xl pt-4 font-semibold !text-zinc-900"> | |
Sobre nós | |
</h2> | |
<h4 className="text-lg text-muted-foreground font-medium"> | |
Conheça a história do projeto SOS RS | |
</h4> | |
<h3 className="text-2xl font-medium text-muted-foreground mt-8"> | |
Como tudo começou | |
</h3> | |
<p className="text-justify text-md md:text-lg font-medium [&>a]:text-blue-500 [&>a]:hover:text-blue-600 [&>a]:active:text-blue-700"> | |
Iniciado no domingo (04/05) e concluído na segunda (05/05), após 18 | |
horas seguidas de desenvolvimento, nosso webapp <b>SOS RS 🛟</b>, | |
idealizado e desenvolvido por{' '} | |
{persons.slice(0, -1).map((p, idx) => ( | |
<Fragment key={idx}> | |
<a className="hover:underline" href={p.link} target="_blank"> | |
{p.name} | |
</a> | |
{', '} | |
</Fragment> | |
))}{' '} | |
e{' '} | |
<a | |
className="hover:underline" | |
href={persons.at(-1)?.link} | |
target="_blank" | |
> | |
{persons.at(-1)?.name} | |
</a> | |
, atingiu resultados verdadeiramente inspiradores. | |
</p> | |
<p className="text-justify font-medium text-md md:text-lg"> | |
O SOS RS rapidamente ganhou destaque nos grupos de WhatsApp, graças ao | |
seu modelo colaborativo. Alcançamos rapidamente o nível de todas as | |
outras iniciativas de gestão de demanda combinadas e lançamos nossa | |
comunidade open source, recebendo uma enxurrada de contribuições: | |
nosso projeto alcançou <b>{stars} estrelas no GitHub</b> e foi{' '} | |
<b>forkeado {forks} vezes!</b> | |
</p> | |
<h3 className="text-2xl font-medium text-muted-foreground mt-8"> | |
Nossos parceiros | |
</h3> | |
<p className="text-justify font-medium text-md md:text-lg"> | |
Formamos parcerias sólidas com mais de 1400 voluntários, fortalecendo | |
ainda mais nossa missão. Hoje, comemoramos números que falam por si. | |
</p> | |
<div className="flex gap-2 flex-wrap mt-4"> | |
<AboutCardInfo | |
icon={<Home />} | |
topLabel="mais de" | |
centerLabel="800" | |
bottomLabel="abrigos atendidos" | |
className="flex-1" | |
/> | |
<AboutCardInfo | |
icon={<Users />} | |
topLabel="apoio de mais de" | |
centerLabel="1400" | |
bottomLabel="voluntários" | |
className="flex-1" | |
/> | |
<AboutCardInfo | |
icon={<HandHeart />} | |
topLabel="mais de" | |
centerLabel="55.000" | |
bottomLabel="pessoas beneficiadas desde o lançamento" | |
className="w-full" | |
/> | |
</div> | |
<p className="text-justify font-medium text-md md:text-lg"> | |
Atualmente, o <b>SOS RS 🛟</b> apoia a gestão das demandas e | |
necessidades dos abrigos do Rio Grande do Sul com informações | |
públicas, atualizadas, confiáveis e auditáveis. | |
</p> | |
<h3 className="text-2xl font-medium text-muted-foreground mt-4"> | |
Frentes atendidas | |
</h3> | |
<div className="flex flex-col gap-6"> | |
{frontItems.map((item, idx) => ( | |
<ServicedFrontInfo key={idx} {...item} /> | |
))} | |
</div> | |
<p className="text-justify font-medium text-md md:text-lg mt-4"> | |
O grupo de voluntários do SOS RS já soma mais de 2100 pessoas e cerca | |
de 126 mil horas de trabalho desde a criação da iniciativa. | |
</p> | |
<h3 className="text-2xl font-medium text-muted-foreground mt-4"> | |
Contribuidores da plataforma ({contributors.length}) | |
</h3> | |
<div className="flex flex-wrap gap-2"> | |
{loading ? ( | |
<Loader className="w-5 h-5 animate-spin" /> | |
) : ( | |
contributors.map((contributor, idx) => ( | |
<WithTooltip key={idx} content={contributor.login}> | |
<a href={contributor.html_url} target="_blank"> | |
<img | |
className="rounded-full w-10 h-10 md:w-12 md:h-12" | |
src={contributor.avatar_url} | |
/> | |
</a> | |
</WithTooltip> | |
)) | |
)} | |
</div> | |
</div> | |
<div className="bg-black [&>p]:text-white p-8 w-full flex justify-center mt-4"> | |
<p className="text-justify text-md md:text-lg"> | |
Agradecemos a todos que têm tornado este impacto possível! Vamos | |
continuar trabalhando juntos para fazer a diferença. Acesse:{' '} | |
<a | |
href="https://sos-rs.com" | |
className="hover:underline text-blue-500 hover:text-blue-600 active:text-blue-700" | |
> | |
sos-rs.com | |
</a> | |
</p> | |
</div> | |
</div> | |
); | |
}; | |
export { AboutUs }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useGithubRepositoryInformation } from './useGithubRepositoryInformation'; | |
export { useGithubRepositoryInformation }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
interface IGithubLicense { | |
key: string; | |
name: string; | |
spdx_id: string; | |
url: string; | |
node_id: string; | |
} | |
interface IGithubOwner { | |
login: string; | |
id: number; | |
node_id: string; | |
avatar_url: string; | |
gravatar_id: string; | |
url: string; | |
html_url: string; | |
followers_url: string; | |
following_url: string; | |
gists_url: string; | |
starred_url: string; | |
subscriptions_url: string; | |
organizations_url: string; | |
repos_url: string; | |
events_url: string; | |
received_events_url: string; | |
type: string; | |
site_admin: boolean; | |
} | |
interface IGithubOrganization { | |
login: string; | |
id: number; | |
node_id: string; | |
avatar_url: string; | |
gravatar_id: string; | |
url: string; | |
html_url: string; | |
followers_url: string; | |
following_url: string; | |
gists_url: string; | |
starred_url: string; | |
subscriptions_url: string; | |
organizations_url: string; | |
repos_url: string; | |
events_url: string; | |
received_events_url: string; | |
type: string; | |
site_admin: boolean; | |
} | |
export interface IGithubRepository { | |
id: number; | |
node_id: string; | |
name: string; | |
full_name: string; | |
private: boolean; | |
owner: IGithubOwner; | |
html_url: string; | |
description: string; | |
fork: boolean; | |
url: string; | |
forks_url: string; | |
keys_url: string; | |
collaborators_url: string; | |
teams_url: string; | |
hooks_url: string; | |
issue_events_url: string; | |
events_url: string; | |
assignees_url: string; | |
branches_url: string; | |
tags_url: string; | |
blobs_url: string; | |
git_tags_url: string; | |
git_refs_url: string; | |
trees_url: string; | |
statuses_url: string; | |
languages_url: string; | |
stargazers_url: string; | |
contributors_url: string; | |
subscribers_url: string; | |
subscription_url: string; | |
commits_url: string; | |
git_commits_url: string; | |
comments_url: string; | |
issue_comment_url: string; | |
contents_url: string; | |
compare_url: string; | |
merges_url: string; | |
archive_url: string; | |
downloads_url: string; | |
issues_url: string; | |
pulls_url: string; | |
milestones_url: string; | |
notifications_url: string; | |
labels_url: string; | |
releases_url: string; | |
deployments_url: string; | |
created_at: string; | |
updated_at: string; | |
pushed_at: string; | |
git_url: string; | |
ssh_url: string; | |
clone_url: string; | |
svn_url: string; | |
homepage: string; | |
size: number; | |
stargazers_count: number; | |
watchers_count: number; | |
language: string; | |
has_issues: boolean; | |
has_projects: boolean; | |
has_downloads: boolean; | |
has_wiki: boolean; | |
has_pages: boolean; | |
has_discussions: boolean; | |
forks_count: number; | |
mirror_url: string | null; | |
archived: boolean; | |
disabled: boolean; | |
open_issues_count: number; | |
license: IGithubLicense; | |
allow_forking: boolean; | |
is_template: boolean; | |
web_commit_signoff_required: boolean; | |
topics: string[]; | |
visibility: string; | |
forks: number; | |
open_issues: number; | |
watchers: number; | |
default_branch: string; | |
temp_clone_token: string | null; | |
custom_properties: Record<string, unknown>; | |
organization: IGithubOrganization; | |
network_count: number; | |
subscribers_count: number; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useCallback, useEffect, useState } from 'react'; | |
import axios, { AxiosRequestConfig } from 'axios'; | |
import { IGithubRepository } from './types'; | |
function useGithubRepositoryInformation(owner: string, repo: string) { | |
const [loading, setLoading] = useState<boolean>(true); | |
const [data, setData] = useState<IGithubRepository>(); | |
const refresh = useCallback( | |
(config?: AxiosRequestConfig<any>) => { | |
setLoading(true); | |
axios | |
.get( | |
`https://api.github.com/repos/${owner}/${repo}`, | |
config | |
) | |
.then(({ data }) => setData(data)) | |
.finally(() => setLoading(false)); | |
}, | |
[owner, repo] | |
); | |
useEffect(() => { | |
refresh(); | |
}, [refresh]); | |
return { data, loading, refresh }; | |
} | |
export { useGithubRepositoryInformation }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment