profile timeline

Author: maslianok

app/by/[rankingType]/components/clickale-row.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { FC } from 'react';
+
+import { TableRow } from '@/components/ui/table';
+
+type ClickableRowProps = {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const ClickableRow: FC<ClickableRowProps> = ({ children, href, className }) => {
+  const router = useRouter();
+
+  const onClick = () => {
+    router.push(href);
+  };
+
+  return (
+    <TableRow className={className} onClick={onClick}>
+      {children}
+    </TableRow>
+  );
+};

app/by/[rankingType]/page.tsx

@@ -15,6 +15,8 @@ import { graphqlRequest } from '@/lib/graphql-request';
 import { RankingsDocument, RankOrder } from '@/types/generated/graphql';
 import { getInitials } from '@/utils/get-initials';
 
+import { ClickableRow } from './components/clickale-row';
+
 const ITEMS_PER_PAGE = 100;
 
 function getConfigByRankingType(rankingType: string) {
@@ -85,7 +87,7 @@ export default async function GlobalRanking({
           {data.rankings.map((item) => {
             const { githubId, user } = item;
             return (
-              <TableRow key={githubId} className="border-b-0">
+              <ClickableRow key={githubId} className="border-b-0" href={`/profile/${user?.login}`}>
                 <TableCell className="font-medium">
                   <div className="flex items-end gap-1">
                     {item[rankPropName]}
@@ -103,7 +105,7 @@ export default async function GlobalRanking({
                 </TableCell>
                 <TableCell className="hidden sm:table-cell break-all whitespace-normal">{user?.location}</TableCell>
                 <TableCell className="text-right">{user?.[rankPropName]?.toLocaleString('en-US')}</TableCell>
-              </TableRow>
+              </ClickableRow>
             );
           })}
         </TableBody>

app/components/search-profiile.tsx

@@ -58,6 +58,7 @@ export const SearchProfile = () => {
           value={login}
           onChange={(event) => setLogin(event.target.value)}
           disabled={loading}
+          autoCapitalize="none"
         />
         <Button onClick={onSearch} disabled={loading} className="w-[96px]">
           {loading ? <ClipLoader loading={loading} size={16} /> : <Search className="size-4" />}

app/profile/[login]/components/profile-card.tsx

@@ -9,7 +9,7 @@ type ProfileCardProps = {
 
 export const ProfileCard: FC<ProfileCardProps> = ({ title, children }) => {
   return (
-    <Card className="border-0 md:border-2 border-border p-0 md:p-4 min-w-xs flex-grow basis-0">
+    <Card className="border-0 md:border-2 border-border p-0 md:p-4 min-w-xs flex-grow basis-0 shadow-none md:shadow-sm">
       <CardContent className="p-0 flex flex-col gap-1.5 md:gap-4">
         <h4 className="text-lg font-semibold">{title}</h4>
         <div className="flex flex-col gap-1.5">{children}</div>

app/profile/[login]/components/profile-timeline.tsx

@@ -0,0 +1,96 @@
+import { compareDesc, parseISO } from 'date-fns';
+import { ArrowRight } from 'lucide-react';
+import { FC } from 'react';
+
+import { Timeline, TimelineDescription, TimelineItem, TimelineTime } from '@/components/timeline/timeline';
+import {
+  ChangeItemType,
+  ChangeSetItemType,
+  SocialAccountChangeItem,
+  TimelineItemType,
+} from '@/types/profile-timeline.types';
+import { isObject } from '@/utils/is-object';
+import { splitCamelCase } from '@/utils/split-camelcase';
+
+type ProfileTimelineProps = {
+  timeline: TimelineItemType[] | null | undefined;
+  firstSeenAt?: string;
+};
+
+type ProfileTimelineDescriptionProps = {
+  type: string;
+  changeset: ChangeSetItemType;
+};
+
+const parseChangesetItem = (changesetItem: ChangeItemType) => {
+  if (isObject<NonNullable<SocialAccountChangeItem>>(changesetItem)) {
+    if (!changesetItem.totalCount) {
+      return null;
+    }
+
+    return changesetItem.nodes
+      ?.map((account) => `${account.provider?.toLowerCase()}: ${account.displayName}`)
+      .join('; ');
+  }
+
+  if (typeof changesetItem === 'number') {
+    return changesetItem.toLocaleString('en-US');
+  }
+
+  if (!changesetItem) {
+    return null;
+  }
+
+  return String(changesetItem);
+};
+
+const ProfileTimelineDescription: FC<ProfileTimelineDescriptionProps> = ({ type, changeset }) => {
+  const before = parseChangesetItem(changeset.b);
+  const after = parseChangesetItem(changeset.a);
+
+  return (
+    <div className="flex items-center gap-2">
+      {splitCamelCase(type)}:{' '}
+      {!!before && (
+        <span className="opacity-50">
+          {before} {!after && '(removed)'}
+        </span>
+      )}{' '}
+      {!!before && !!after && <ArrowRight size={12} />} {after}
+    </div>
+  );
+};
+
+export const ProfileTimeline: FC<ProfileTimelineProps> = ({ timeline, firstSeenAt }) => {
+  if (!timeline?.length) {
+    return null;
+  }
+
+  const sortedTimeline = timeline.sort((a, b) => compareDesc(parseISO(a.createdAt), parseISO(b.createdAt)));
+
+  return (
+    <div className="flex flex-col gap-6">
+      <h2 className="text-xl font-semibold">Timeline</h2>
+      <Timeline>
+        {sortedTimeline.map((item) => (
+          <TimelineItem key={item.createdAt}>
+            <TimelineTime isoDate={item.createdAt} />
+            <TimelineDescription>
+              {Object.entries(item.changes)
+                .filter(([, changeset]) => !!changeset.a || !!changeset.b)
+                .map(([type, changeset]) => (
+                  <ProfileTimelineDescription key={type} type={type} changeset={changeset} />
+                ))}
+            </TimelineDescription>
+          </TimelineItem>
+        ))}
+        {!!firstSeenAt && (
+          <TimelineItem>
+            <TimelineTime isoDate={firstSeenAt} />
+            <TimelineDescription>First seen</TimelineDescription>
+          </TimelineItem>
+        )}
+      </Timeline>
+    </div>
+  );
+};

app/profile/[login]/page.tsx

@@ -23,6 +23,7 @@ import { graphqlRequest } from '@/lib/graphql-request';
 import { ProfileForMetadataDocument, UserDocument } from '@/types/generated/graphql';
 
 import { ProfileListItem } from './components/profile-list-item';
+import { ProfileTimeline } from './components/profile-timeline';
 import { RanksOverview } from './components/ranks-overview';
 import { RepositoriesOverview } from './components/repositories-overiview';
 import { getSocialIcon } from './utils/get-social-icon';
@@ -149,7 +150,9 @@ export default async function Profile({ params }: { params: Promise<{ login: str
             contributedStars={user.contributedStars}
           />
         </div>
-        <div>Feed</div>
+        <div>
+          <ProfileTimeline timeline={user.timeline} firstSeenAt={user.firstSeenAt} />
+        </div>
       </div>
     </Page>
   );

app/profile/[login]/profile-summary.gql

@@ -37,6 +37,7 @@ query User($login: String!) {
     name
     twitterUsername
     websiteUrl
+    firstSeenAt
     socialAccounts {
       totalCount
       nodes {

components/timeline/timeline.tsx

@@ -0,0 +1,29 @@
+import { format, parseISO } from 'date-fns';
+
+import { cn } from '@/lib/utils';
+
+export const Timeline = ({ children }: { children: React.ReactNode }) => {
+  return <ol className="relative border-s border-border">{children}</ol>;
+};
+
+export const TimelineItem = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <li className="mb-10 ms-4 last:mb-0">
+      <div className="absolute w-3 h-3 bg-border rounded-full mt-1.5 -start-1.5 border border-border"></div>
+      {children}
+    </li>
+  );
+};
+
+export const TimelineTime = ({ isoDate }: { isoDate: string }) => {
+  const formatted = format(parseISO(isoDate), 'dd MMM yyyy');
+  return <time className="mb-1 text-sm font-normal text-muted-foreground">{formatted}</time>;
+};
+
+export const TimelineTitle = ({ children }: { children: React.ReactNode }) => {
+  return <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{children}</h3>;
+};
+
+export const TimelineDescription = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+  return <div className={cn(className)}>{children}</div>;
+};