refresh button

Author: maslianok

app/by/[rankingType]/components/link-with-stop-propagation.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import Link from 'next/link';
+import { FC, ReactNode } from 'react';
+
+type LinkWithStopPropagationProps = {
+  children: ReactNode;
+  href: string;
+};
+
+export const LinkWithStopPropagation: FC<LinkWithStopPropagationProps> = ({ children, href }) => {
+  return (
+    <Link href={href} onClick={(event) => event.stopPropagation()}>
+      {children}
+    </Link>
+  );
+};

app/by/[rankingType]/page.tsx

@@ -1,5 +1,3 @@
-import Link from 'next/link';
-
 import { Page } from '@/components/page/page';
 import { RankDelta } from '@/components/rank-delta/rank-delta';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
@@ -16,6 +14,7 @@ import { RankingsDocument, RankOrder } from '@/types/generated/graphql';
 import { getInitials } from '@/utils/get-initials';
 
 import { ClickableRow } from './components/clickale-row';
+import { LinkWithStopPropagation } from './components/link-with-stop-propagation';
 
 const ITEMS_PER_PAGE = 100;
 
@@ -101,7 +100,7 @@ export default async function GlobalRanking({
                       <AvatarFallback>{getInitials(user?.login)}</AvatarFallback>
                     </Avatar>
                   )}
-                  <Link href={`/profile/${user?.login}`}>{user?.login}</Link>
+                  <LinkWithStopPropagation href={`/profile/${user?.login}`}>{user?.login}</LinkWithStopPropagation>
                 </TableCell>
                 <TableCell className="hidden sm:table-cell break-all whitespace-normal">{user?.location}</TableCell>
                 <TableCell className="text-right">{user?.[rankPropName]?.toLocaleString('en-US')}</TableCell>

app/profile/[login]/components/refresh-button.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { RefreshCw } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { usePostHog } from 'posthog-js/react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+
+export const RefreshButton = () => {
+  const { login } = useParams();
+  const posthog = usePostHog();
+
+  const handleRefresh = async () => {
+    toast.info('🚧 This feature is still under construction!', {
+      description:
+        "I'm wrestling bugs, chugging coffee, and coding like a caffeinated squirrel to make it happen. Want to lend a hand or just say hi? Catch me on GitHub!",
+    });
+
+    posthog.capture('landingPage.search', { login });
+  };
+
+  return (
+    <Button size="sm" className="flex-grow" onClick={handleRefresh}>
+      Refresh
+      <RefreshCw className="size-4" />
+    </Button>
+  );
+};

app/profile/[login]/page.tsx

@@ -1,15 +1,5 @@
 import { formatDistanceToNow } from 'date-fns';
-import {
-  BriefcaseBusiness,
-  ExternalLink,
-  Hourglass,
-  Link2,
-  Mail,
-  MapPin,
-  RefreshCw,
-  Timer,
-  UsersRound,
-} from 'lucide-react';
+import { BriefcaseBusiness, ExternalLink, Hourglass, Link2, Mail, MapPin, Timer, UsersRound } from 'lucide-react';
 import type { Metadata } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -25,6 +15,7 @@ import { ProfileForMetadataDocument, UserDocument } from '@/types/generated/grap
 import { ProfileListItem } from './components/profile-list-item';
 import { ProfileTimeline } from './components/profile-timeline';
 import { RanksOverview } from './components/ranks-overview';
+import { RefreshButton } from './components/refresh-button';
 import { RepositoriesOverview } from './components/repositories-overiview';
 import { getSocialIcon } from './utils/get-social-icon';
 
@@ -71,10 +62,7 @@ export default async function Profile({ params }: { params: Promise<{ login: str
           </div>
         </div>
         <div className="flex flex-row md:flex-col gap-4">
-          <Button size="sm" className="flex-grow">
-            Refresh
-            <RefreshCw className="size-4" />
-          </Button>
+          <RefreshButton />
           <Button size="sm" variant="secondary" className="flex-grow" asChild>
             <Link href={`https://github.com/${user.login}`} target="_blank" rel="noopener noreferrer">
               Open GitHub