feat: add stars and forks from Github repositories

AboutUs.tsx

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 };

index.ts

import { useGithubRepositoryInformation } from './useGithubRepositoryInformation';

export { useGithubRepositoryInformation };

types.ts

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;
}

useGithubRepositoryInformation.tsx

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 };