Loading...
13 |8 | Share your Github profile with us! 9 |
10 | 11 | 14 | > 15 | ); 16 | -------------------------------------------------------------------------------- /src/components/Header/useShareProfile.ts: -------------------------------------------------------------------------------- 1 | import { trpc } from "../../utils/trpc"; 2 | 3 | export function useShareProfile() { 4 | const { data: profile, isLoading: isLoadingProfile } = 5 | trpc.profile.me.useQuery(); 6 | const utils = trpc.useContext(); 7 | 8 | const { mutate: publish, isLoading: isPublishing } = 9 | trpc.profile.publish.useMutation({ 10 | onSettled: () => { 11 | utils.profile.me.invalidate(); 12 | utils.profile.getPaginated.invalidate(); 13 | }, 14 | }); 15 | const { mutate: unpublish, isLoading: isUnpublishing } = 16 | trpc.profile.unpublish.useMutation({ 17 | onSettled: () => { 18 | utils.profile.me.invalidate(); 19 | utils.profile.getPaginated.invalidate(); 20 | }, 21 | }); 22 | 23 | const isPublished = profile?.published; 24 | 25 | const handlePublish = () => { 26 | if (isPublished) { 27 | unpublish(); 28 | } else { 29 | publish(); 30 | } 31 | }; 32 | 33 | return { 34 | profile, 35 | isLoading: isLoadingProfile || isPublishing || isUnpublishing, 36 | isPublished, 37 | handlePublish, 38 | }; 39 | } 40 | -------------------------------------------------------------------------------- /src/components/Profiles/ProfileItem.tsx: -------------------------------------------------------------------------------- 1 | import { LocationIcon, PeopleIcon } from "@primer/octicons-react"; 2 | import type { Profile } from "@prisma/client"; 3 | import Image from "next/image"; 4 | 5 | export const ProfileItem = ({ profile, position }: ProfileItemProps) => { 6 | return ( 7 |{position}º
20 |{profile.github}
35 | )} 36 |{profile.bio}
42 |85 | {icon} 86 | {children} 87 |
88 | ); 89 | 90 | function transformFollowers(followers: number) { 91 | if (followers < 1000) return followers; 92 | if (followers < 1000000) return `${(followers / 1000).toFixed(1)}k`; 93 | return `${(followers / 1000000).toFixed(1)}m`; 94 | } 95 | 96 | const TwitterIcon = () => ( 97 | 108 | ); 109 | -------------------------------------------------------------------------------- /src/components/Profiles/ProfileList.tsx: -------------------------------------------------------------------------------- 1 | import { ProfileItem } from "./ProfileItem"; 2 | import { useProfilesPaginated } from "./useProfilesPaginated"; 3 | 4 | const PAGE_SIZE = 8; 5 | 6 | export const ProfileList = () => { 7 | const { profiles, isFetchingNextPage, isEmpty, ref } = useProfilesPaginated({ 8 | pageSize: PAGE_SIZE, 9 | }); 10 | 11 | return ( 12 |16 | No profiles found 17 |
18 |Be the first to share your github profile
19 |Developers
24 |Ordered by number of followers
25 |