Skip to content

feat: Display all teams in profile page #13178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

feat: Display all teams in profile page #13178

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8a319c8
feat: Display all teams in profile page
rafaeelaudibert Oct 11, 2025
ca36286
tab if >1 teams
corywatilo Oct 11, 2025
055dd8d
fix: Display person in the same page
rafaeelaudibert Oct 11, 2025
f379768
fix: Use `data` for self
rafaeelaudibert Oct 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 81 additions & 50 deletions src/pages/community/profiles/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -733,11 +733,11 @@ const LikedPosts = ({ profileID }) => {
)
}

const Block = ({ title, children, url }) => {
const Block = ({ title, children, url, className }) => {
return (
<Fieldset
data-scheme="secondary"
className="bg-primary"
className={`bg-primary ${className}`}
legend={
url ? (
<Link className="font-semibold group" to={url} state={{ newWindow: true }}>
Expand Down Expand Up @@ -1381,54 +1381,48 @@ export default function ProfilePage({ params }: PageProps) {
errors={errors}
setFieldValue={setFieldValue}
/>
<div className="mt-6">
{profile.teams?.data?.length > 0 &&
profile.teams.data[0].attributes.profiles?.data?.length > 0 && (
<Block
title={`${team.attributes.name} Team`}
url={`/teams/${team.attributes.slug}`}
>
<div className="grid grid-cols-2 gap-3 @lg:grid-cols-3 @3xl:grid-cols-4 pt-8">
{team.attributes.profiles.data
.filter((teammate) => teammate.id !== data?.id)
.map((teammate) => {
return (
<Link
key={teammate.id}
to={`/community/profiles/${teammate.id}`}
state={{ newWindow: true }}
>
<TeamMember
avatar={{
url:
teammate.attributes.avatar?.data?.attributes
?.url ||
teammate.attributes.avatar?.url,
}}
firstName={teammate.attributes.firstName}
lastName={teammate.attributes.lastName}
companyRole={teammate.attributes.companyRole}
country={teammate.attributes.country}
location={teammate.attributes.location}
squeakId={teammate.id}
color={teammate.attributes.color || 'yellow'}
biography={teammate.attributes.biography || ''}
teamCrestMap={teamCrestMap}
pineappleOnPizza={
teammate.attributes.pineappleOnPizza
}
startDate={teammate.attributes.startDate}
isTeamLead={team.attributes?.leadProfiles?.data?.some(
({ id: leadID }) => leadID === teammate.id
)}
/>
</Link>
)
})}
</div>
</Block>
)}
</div>
{profile?.teams?.data?.length === 1 ? (
// Single team - use Block (OSFieldset)
<div className="mt-6">
<Block
title={`${profile.teams.data[0].attributes.name} Team`}
url={`/teams/${profile.teams.data[0].attributes.slug}`}
className="pt-6"
>
<div className="grid grid-cols-2 gap-3 @lg:grid-cols-3 @3xl:grid-cols-4 pt-8">
<TeamMembersList self={profile} team={profile.teams.data[0]} />
</div>
</Block>
</div>
) : profile?.teams?.data?.length > 1 ? (
// Multiple teams - use OSTabs
<div className="mt-6" data-scheme="secondary">
<OSTabs
tabs={profile.teams.data.map((team) => ({
value: team.attributes.slug,
label: <>{team.attributes.name} Team</>,
content: (
<div className="grid grid-cols-2 gap-3 @lg:grid-cols-3 @3xl:grid-cols-4">
<div className="col-span-full border-b border-primary pb-2 mb-10">
<Link
to={`/teams/${team.attributes.slug}`}
state={{ newWindow: true }}
className="group font-bold flex items-center gap-1 hover:underline"
>
{team.attributes.name} Team
<IconArrowUpRight className="size-3 text-muted group-hover:text-secondary" />
</Link>
</div>
<TeamMembersList self={profile} team={team} />
</div>
),
}))}
defaultValue={profile.teams.data[0].attributes.slug}
triggerDataScheme="primary"
/>
</div>
) : null}

{profile.amaEnabled && (
<div className="mt-6">
<Block title="Comments">
Expand All @@ -1451,6 +1445,43 @@ export default function ProfilePage({ params }: PageProps) {
)
}

const TeamMembersList = ({ self, team }) => {
const selfTeammate = team.attributes.profiles.data.find((teammate) => teammate.id === self.id)
const otherTeammates = team.attributes.profiles.data.filter((teammate) => teammate.id !== self.id)
const teammates = [selfTeammate, ...otherTeammates].filter(Boolean)

return (
<>
{teammates.map((teammate) => {
return (
<Link key={teammate.id} to={`/community/profiles/${teammate.id}`} state={{ newWindow: true }}>
<TeamMember
avatar={{
url:
teammate.attributes.avatar?.data?.attributes?.url ||
teammate.attributes.avatar?.url,
}}
firstName={teammate.attributes.firstName}
lastName={teammate.attributes.lastName}
companyRole={teammate.attributes.companyRole}
country={teammate.attributes.country}
location={teammate.attributes.location}
squeakId={teammate.id}
color={teammate.attributes.color || 'yellow'}
biography={teammate.attributes.biography || ''}
pineappleOnPizza={teammate.attributes.pineappleOnPizza}
startDate={teammate.attributes.startDate}
isTeamLead={team.attributes?.leadProfiles?.data?.some(
({ id: leadID }) => leadID === teammate.id
)}
/>
</Link>
)
})}
</>
)
}

const Achievement = ({ title, description, image, icon, id, mutate, profile, ...other }) => {
const { user, getJwt } = useUser()
const [hidden, setHidden] = useState(other.hidden)
Expand Down