feat: list user experiences

packages/shared/src/features/profile/components/experience/ProfileUserExperiences.tsx

@@ -0,0 +1,46 @@
+import { useQuery } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import { generateQueryKey, RequestKey, StaleTime } from '../../../../lib/query';
+import { useAuthContext } from '../../../../contexts/AuthContext';
+import type { PublicProfile } from '../../../../lib/user';
+import { getUserProfileExperiences } from '../../../../graphql/user/profile';
+import { UserExperienceList } from './UserExperiencesList';
+
+interface ProfileUserExperiencesProps {
+  user: PublicProfile;
+}
+
+export function ProfileUserExperiences({
+  user,
+}: ProfileUserExperiencesProps): ReactElement {
+  const { user: loggedUser } = useAuthContext();
+  const { data } = useQuery({
+    queryKey: generateQueryKey(
+      RequestKey.UserExperience,
+      loggedUser,
+      'profile',
+    ),
+    queryFn: () => getUserProfileExperiences(user.id),
+    staleTime: StaleTime.Default,
+  });
+
+  const list = useMemo(
+    () => ({
+      work: data?.work?.edges?.map(({ node }) => node),
+      education: data?.education?.edges?.map(({ node }) => node),
+      cert: data?.certification?.edges?.map(({ node }) => node),
+      project: data?.project?.edges?.map(({ node }) => node),
+    }),
+    [data],
+  );
+
+  return (
+    <>
+      <UserExperienceList experiences={list.work} title="Work Experiences" />
+      <UserExperienceList experiences={list.education} title="Education" />
+      <UserExperienceList experiences={list.cert} title="Certifications" />
+      <UserExperienceList experiences={list.project} title="Projects" />
+    </>
+  );
+}

packages/shared/src/features/profile/components/experience/UserExperienceItem.tsx

@@ -0,0 +1,142 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type {
+  UserExperience,
+  UserExperienceCertification,
+  UserExperienceProject,
+  UserExperienceWork,
+} from '../../../../graphql/user/profile';
+import { Image, ImageType } from '../../../../components/image/Image';
+import { Pill, PillSize } from '../../../../components/Pill';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../../../../components/typography/Typography';
+import { formatDate, TimeFormatType } from '../../../../lib/dateFormat';
+import { anchorDefaultRel, concatStrings } from '../../../../lib/strings';
+import { currrentPill } from './common';
+import { Button } from '../../../../components/buttons/Button';
+
+interface UserExperienceItemProps {
+  experience: UserExperience;
+  grouped?: {
+    isLastItem?: boolean;
+  };
+}
+
+export function UserExperienceItem({
+  experience,
+  grouped,
+}: UserExperienceItemProps): ReactElement {
+  const { company, title, description, startedAt, endedAt, subtitle } =
+    experience;
+  const { skills, verified } = experience as UserExperienceWork;
+  const { url } = experience as UserExperienceProject;
+  const { externalReferenceId } = experience as UserExperienceCertification;
+
+  return (
+    <li key={experience.id} className="flex flex-row gap-2">
+      {grouped ? (
+        <div className="relative flex w-8 justify-center overflow-hidden">
+          <div className="absolute left-4 h-6 w-8 -translate-x-px rounded-bl-10 border-b-2 border-l-2 border-accent-pepper-subtle" />
+          {!grouped.isLastItem && (
+            <div className="absolute h-full w-0.5 bg-accent-pepper-subtle" />
+          )}
+        </div>
+      ) : (
+        <Image
+          className="h-8 w-8 rounded-max object-cover"
+          type={ImageType.Organization}
+          src={company?.image}
+        />
+      )}
+      <div
+        className={classNames('flex flex-1 flex-col gap-2', {
+          'pt-3': !!grouped,
+        })}
+      >
+        <div className="flex flex-col gap-1">
+          <Typography type={TypographyType.Subhead} bold>
+            {title}
+            {!grouped && !endedAt && currrentPill}
+            {url && (
+              <Button
+                tag="a"
+                target="_blank"
+                rel={anchorDefaultRel}
+                href={url}
+              />
+            )}
+          </Typography>
+          {!!subtitle && (
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Secondary}
+            >
+              {subtitle}
+            </Typography>
+          )}
+          {!grouped && (
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Secondary}
+            >
+              {company?.name}
+              {!!verified && (
+                <span className="ml-1 text-text-quaternary">Verified</span>
+              )}
+            </Typography>
+          )}
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            {concatStrings(
+              [
+                formatDate({
+                  value: startedAt,
+                  type: TimeFormatType.TopReaderBadge,
+                }),
+                !!endedAt &&
+                  formatDate({
+                    value: endedAt,
+                    type: TimeFormatType.TopReaderBadge,
+                  }),
+              ],
+              ' - ',
+            )}
+          </Typography>
+          {!!externalReferenceId && (
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Tertiary}
+            >
+              {externalReferenceId}
+            </Typography>
+          )}
+        </div>
+        <Typography
+          type={TypographyType.Subhead}
+          color={TypographyColor.Secondary}
+          className="flex w-full max-w-full flex-1 break-words"
+        >
+          {description}
+        </Typography>
+        {skills?.length > 0 && (
+          <div className="flex flex-row gap-2">
+            {skills.map((skill) => (
+              <Pill
+                key={skill.value}
+                label={skill.value}
+                size={PillSize.Small}
+                className="border border-border-subtlest-tertiary text-text-quaternary"
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </li>
+  );
+}

packages/shared/src/features/profile/components/experience/UserExperiencesGroupedList.tsx

@@ -0,0 +1,63 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { UserExperience } from '../../../../graphql/user/profile';
+import { Image, ImageType } from '../../../../components/image/Image';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../../../../components/typography/Typography';
+import { UserExperienceItem } from './UserExperienceItem';
+import { formatDate, TimeFormatType } from '../../../../lib/dateFormat';
+import { currrentPill } from './common';
+
+interface UserExperiencesGroupedListProps {
+  company: string;
+  experiences: UserExperience[];
+}
+
+export function UserExperiencesGroupedList({
+  company,
+  experiences,
+}: UserExperiencesGroupedListProps): ReactElement {
+  const [first] = experiences;
+  const last = experiences[experiences.length - 1];
+  const duration = formatDate({
+    value: new Date(last.startedAt),
+    type: TimeFormatType.Experience,
+    now: first.endedAt ? new Date(first.endedAt) : new Date(),
+  });
+
+  return (
+    <>
+      <li className="flex flex-row gap-2">
+        <Image
+          className="h-8 w-8 rounded-max object-cover"
+          type={ImageType.Organization}
+          src={first.company?.image}
+        />
+        <div className="flex flex-1 flex-col">
+          <Typography type={TypographyType.Subhead} bold>
+            {company}
+            {!first.endedAt && currrentPill}
+          </Typography>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Secondary}
+          >
+            {duration}
+          </Typography>
+        </div>
+      </li>
+      <ul className="flex flex-col">
+        {experiences.map((experience, index) => (
+          <UserExperienceItem
+            key={experience.id}
+            experience={experience}
+            grouped={{ isLastItem: index === experiences.length - 1 }}
+          />
+        ))}
+      </ul>
+    </>
+  );
+}

packages/shared/src/features/profile/components/experience/UserExperiencesList.tsx

@@ -0,0 +1,69 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import type { UserExperience } from '../../../../graphql/user/profile';
+import {
+  Typography,
+  TypographyTag,
+  TypographyType,
+} from '../../../../components/typography/Typography';
+import { UserExperienceItem } from './UserExperienceItem';
+import { UserExperiencesGroupedList } from './UserExperiencesGroupedList';
+
+interface UserExperienceListProps<T extends UserExperience> {
+  experiences: T[];
+  title: string;
+}
+
+const groupListByCompany = <T extends UserExperience>(
+  experiences: T[],
+): [string, T[]][] => {
+  if (!experiences?.length) {
+    return [];
+  }
+
+  const grouped = experiences.reduce((acc, node) => {
+    const name = node.customCompanyName || node.company?.name;
+    if (!acc[name]) {
+      acc[name] = [];
+    }
+    acc[name].push(node);
+    return acc;
+  }, {} as Record<string, T[]>);
+
+  return Object.entries(grouped);
+};
+
+export function UserExperienceList<T extends UserExperience>({
+  experiences,
+  title,
+}: UserExperienceListProps<T>): ReactElement {
+  const groupedByCompany: [string, T[]][] = useMemo(
+    () => groupListByCompany(experiences),
+    [experiences],
+  );
+
+  if (!experiences?.length) {
+    return <></>;
+  }
+
+  return (
+    <div className="flex flex-col gap-3 pt-4">
+      <Typography tag={TypographyTag.H2} type={TypographyType.Body} bold>
+        {title}
+      </Typography>
+      <ul className="flex flex-col">
+        {groupedByCompany?.map(([company, list]) =>
+          list.length === 1 ? (
+            <UserExperienceItem key={list[0].id} experience={list[0]} />
+          ) : (
+            <UserExperiencesGroupedList
+              key={company}
+              company={company}
+              experiences={list}
+            />
+          ),
+        )}
+      </ul>
+    </div>
+  );
+}

packages/shared/src/features/profile/components/experience/common.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Pill, PillSize } from '../../../../components/Pill';
+
+export const currrentPill = (
+  <Pill
+    label="Current"
+    size={PillSize.XSmall}
+    className="ml-1 border border-border-subtlest-tertiary text-text-secondary"
+  />
+);