Skip to content

Commit

Permalink
feat: hide highlights tab components on profiles without highlights (#…
Browse files Browse the repository at this point in the history 
…1304)

* feat: conditionally render/display Highlights Tabs 'Content' and 'Trigger' component

* refactor!: cleaned un-used conditional logic
  • Loading branch information
@babblebey
babblebey authored Jun 27, 2023
1 parent ee59c6e commit 976739f
Showing 1 changed file with 87 additions and 92 deletions.
179 changes: 87 additions & 92 deletions components/organisms/ContributorProfileTab/contributor-profile-tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ const ContributorProfileTab = ({
"data-[state=active]:border-sauced-orange shrink-0 data-[state=active]:border-b-2 text-2xl",
tab === "Recommendations" &&
"font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#EA4600] to-[#EB9B00]",
user?.user_metadata.user_name !== login && !hasHighlights && tab === "Highlights" && "hidden",
user && user.user_metadata.user_name !== login && tab === "Recommendations" && "hidden",
user && user.user_metadata.user_name !== login && tab === "Requests" && "hidden",
!user && tab === "Recommendations" && "hidden",
Expand All @@ -155,105 +156,99 @@ const ContributorProfileTab = ({

{/* Highlights Tab details */}

<TabsContent value="Highlights">
{inputVisible && user?.user_metadata.user_name === login && (
<div className="lg:pl-20 lg:gap-x-3 pt-4 flex max-w-[48rem]">
<div className="hidden lg:inline-flex">
<Avatar
alt="user profile avatar"
size="sm"
avatarURL={`https://www.github.com/${githubName}.png?size=300`}
/>
</div>

<HighlightInputForm refreshCallback={mutate} />
</div>
)}
<div className="flex flex-col gap-8 mt-8">
{/* <HightlightEmptyState /> */}
{(user?.user_metadata.user_name === login || hasHighlights) && (
<TabsContent value="Highlights">
{inputVisible && user?.user_metadata.user_name === login && (
<div className="lg:pl-20 lg:gap-x-3 pt-4 flex max-w-[48rem]">
<div className="hidden lg:inline-flex">
<Avatar
alt="user profile avatar"
size="sm"
avatarURL={`https://www.github.com/${githubName}.png?size=300`}
/>
</div>

{isError && <>An error occured</>}
{isLoading && (
<>
{Array.from({ length: 2 }).map((_, index) => (
<div className="flex flex-col gap-2 lg:flex-row lg:gap-6" key={index}>
<SkeletonWrapper width={100} height={20} />
<div className="md:max-w-[40rem]">
<SkeletonWrapper height={20} width={500} classNames="mb-2" />
<SkeletonWrapper height={300} />
</div>
</div>
))}
</>
<HighlightInputForm refreshCallback={mutate} />
</div>
)}
<>
{!isError && highlights && highlights.length > 0 ? (
<div>
{highlights.map(({ id, title, highlight, url, shipped_at, created_at }) => (
<div className="flex flex-col gap-2 mb-6 lg:flex-row lg:gap-7" key={id}>
<Link href={`/feed/${id}`}>
<p className="text-sm text-light-slate-10">
{formatDistanceToNowStrict(new Date(created_at), { addSuffix: true })}
</p>
</Link>
<ContributorHighlightCard
emojis={emojis}
id={id}
user={login || ""}
title={title}
desc={highlight}
prLink={url}
shipped_date={shipped_at}
refreshCallBack={mutate}
/>
<div className="flex flex-col gap-8 mt-8">
{/* <HightlightEmptyState /> */}

{isError && <>An error occured</>}
{isLoading && (
<>
{Array.from({ length: 2 }).map((_, index) => (
<div className="flex flex-col gap-2 lg:flex-row lg:gap-6" key={index}>
<SkeletonWrapper width={100} height={20} />
<div className="md:max-w-[40rem]">
<SkeletonWrapper height={20} width={500} classNames="mb-2" />
<SkeletonWrapper height={300} />
</div>
</div>
))}
{meta.pageCount > 1 && (
<div className="mt-10 max-w-[48rem] flex px-2 items-center justify-between">
<div>
<PaginationResults metaInfo={meta} total={meta.itemCount} entity={"highlights"} />
</>
)}
<>
{!isError && highlights && highlights.length > 0 ? (
<div>
{highlights.map(({ id, title, highlight, url, shipped_at, created_at }) => (
<div className="flex flex-col gap-2 mb-6 lg:flex-row lg:gap-7" key={id}>
<Link href={`/feed/${id}`}>
<p className="text-sm text-light-slate-10">
{formatDistanceToNowStrict(new Date(created_at), { addSuffix: true })}
</p>
</Link>
<ContributorHighlightCard
emojis={emojis}
id={id}
user={login || ""}
title={title}
desc={highlight}
prLink={url}
shipped_date={shipped_at}
refreshCallBack={mutate}
/>
</div>
))}
{meta.pageCount > 1 && (
<div className="mt-10 max-w-[48rem] flex px-2 items-center justify-between">
<div>
<PaginationResults metaInfo={meta} total={meta.itemCount} entity={"highlights"} />
</div>
<Pagination
pages={[]}
totalPage={meta.pageCount}
page={meta.page}
pageSize={meta.itemCount}
goToPage
hasNextPage={meta.hasNextPage}
hasPreviousPage={meta.hasPreviousPage}
onPageChange={function (page: number): void {
setPage(page);
}}
/>
</div>
<Pagination
pages={[]}
totalPage={meta.pageCount}
page={meta.page}
pageSize={meta.itemCount}
goToPage
hasNextPage={meta.hasNextPage}
hasPreviousPage={meta.hasPreviousPage}
onPageChange={function (page: number): void {
setPage(page);
}}
/>
</div>
)}
</div>
) : (
<DashContainer>
<div className="text-center">
{user?.user_metadata.user_name === login ? (
<>
<p>
You don&apos;t have any highlights yet! <br /> Highlights are a great way to show off your
contributions. Merge any pull requests recently?
</p>
{!inputVisible && (
<Button onClick={() => setInputVisible(true)} className="mt-5" variant="primary">
Add a highlight
</Button>
)}
</>
) : (
<>
<p>{` ${login} hasn't posted any highlights yet!`}</p>
</>
)}
</div>
</DashContainer>
)}
</>
</div>
</TabsContent>
) : (
<DashContainer>
<div className="text-center">
<p>
You don&apos;t have any highlights yet! <br /> Highlights are a great way to show off your
contributions. Merge any pull requests recently?
</p>
{!inputVisible && (
<Button onClick={() => setInputVisible(true)} className="mt-5" variant="primary">
Add a highlight
</Button>
)}
</div>
</DashContainer>
)}
</>
</div>
</TabsContent>
)}

{/* Contributions Tab Details */}

Expand Down

0 comments on commit 976739f

Please sign in to comment.