Skip to content

refactor: not making calls to member's endpoint to get membership status #1831

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

Merged
sriramveeraghanta merged 2 commits into from
Aug 10, 2023
Merged

refactor: not making calls to member's endpoint to get membership status #1831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e380311
refactor: not making call to members endpoint to get membership status
dakshesh14 Aug 10, 2023
61f25c7
refactor: type for IProject
dakshesh14 Aug 10, 2023
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
220 changes: 105 additions & 115 deletions apps/app/components/project/single-project-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@ import { mutate } from "swr";
// services
import projectService from "services/project.service";
// hooks
import useProjectMembers from "hooks/use-project-members";
import useToast from "hooks/use-toast";
// ui
import { CustomMenu, Loader, Tooltip } from "components/ui";
import { CustomMenu, Tooltip } from "components/ui";
// icons
import {
CalendarDaysIcon,
Expand Down Expand Up @@ -46,11 +45,8 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({

const { setToastAlert } = useToast();

// fetching project members information
const { members, hasJoined, isOwner, isMember } = useProjectMembers(
workspaceSlug as string,
project.id
);
const isOwner = project.member_role === 20;
const isMember = project.member_role === 15;

const handleAddToFavorites = () => {
if (!workspaceSlug) return;
Expand Down Expand Up @@ -125,125 +121,119 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({

return (
<>
{members ? (
<div className="flex flex-col rounded-[10px] bg-custom-background-90 shadow">
<div className="flex flex-col rounded-[10px] bg-custom-background-90 shadow">
<Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
<a>
<div className="relative h-32 w-full rounded-t-[10px]">
<img
src={
project.cover_image ??
"https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
}
alt={project.name}
className="absolute top-0 left-0 h-full w-full object-cover rounded-t-[10px]"
/>
<div className="absolute bottom-4 left-4 flex items-center gap-3 text-white">
{!project.is_member ? (
<button
type="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setToJoinProject(project.id);
}}
className="flex cursor-pointer items-center gap-1 rounded bg-green-600 px-2 py-1 text-xs"
>
<PlusIcon className="h-3 w-3" />
<span>Select to Join</span>
</button>
) : (
<span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">
Member
</span>
)}
{project.is_favorite && (
<span className="grid h-6 w-9 cursor-default place-items-center rounded bg-orange-400">
<StarIcon className="h-3 w-3" />
</span>
)}
</div>
</div>
</a>
</Link>
<div className="flex h-full flex-col rounded-b-[10px] p-4 text-custom-text-200">
<Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
<a>
<div className="relative h-32 w-full rounded-t-[10px]">
<img
src={
project.cover_image ??
"https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
}
alt={project.name}
className="absolute top-0 left-0 h-full w-full object-cover rounded-t-[10px]"
/>
<div className="absolute bottom-4 left-4 flex items-center gap-3 text-white">
{!hasJoined ? (
<button
type="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setToJoinProject(project.id);
}}
className="flex cursor-pointer items-center gap-1 rounded bg-green-600 px-2 py-1 text-xs"
>
<PlusIcon className="h-3 w-3" />
<span>Select to Join</span>
</button>
) : (
<span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">
Member
</span>
)}
{project.is_favorite && (
<span className="grid h-6 w-9 cursor-default place-items-center rounded bg-orange-400">
<StarIcon className="h-3 w-3" />
</span>
)}
</div>
<div className="flex items-center gap-1">
<h3 className="text-1.5xl font-medium text-custom-text-100">{project.name}</h3>
{project.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(project.emoji)}
</span>
) : project.icon_prop ? (
renderEmoji(project.icon_prop)
) : null}
</div>
<p className="mt-3.5 mb-7 break-words">
{truncateText(project.description ?? "", 100)}
</p>
</a>
</Link>
<div className="flex h-full flex-col rounded-b-[10px] p-4 text-custom-text-200">
<Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
<a>
<div className="flex items-center gap-1">
<h3 className="text-1.5xl font-medium text-custom-text-100">{project.name}</h3>
{project.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(project.emoji)}
</span>
) : project.icon_prop ? (
renderEmoji(project.icon_prop)
) : null}
</div>
<p className="mt-3.5 mb-7 break-words">
{truncateText(project.description ?? "", 100)}
</p>
</a>
</Link>
<div className="flex h-full items-end justify-between">
<Tooltip
tooltipContent={`Created at ${renderShortDateWithYearFormat(project.created_at)}`}
position="bottom"
>
<div className="flex cursor-default items-center gap-1.5 text-xs">
<CalendarDaysIcon className="h-4 w-4" />
{renderShortDateWithYearFormat(project.created_at)}
</div>
</Tooltip>
{hasJoined ? (
<div className="flex items-center">
{(isOwner || isMember) && (
<Link href={`/${workspaceSlug}/projects/${project.id}/settings`}>
<a className="grid cursor-pointer place-items-center rounded p-1 duration-300 hover:bg-custom-background-90">
<PencilIcon className="h-4 w-4" />
</a>
</Link>
<div className="flex h-full items-end justify-between">
<Tooltip
tooltipContent={`Created at ${renderShortDateWithYearFormat(project.created_at)}`}
position="bottom"
>
<div className="flex cursor-default items-center gap-1.5 text-xs">
<CalendarDaysIcon className="h-4 w-4" />
{renderShortDateWithYearFormat(project.created_at)}
</div>
</Tooltip>
{project.is_member ? (
<div className="flex items-center">
{(isOwner || isMember) && (
<Link href={`/${workspaceSlug}/projects/${project.id}/settings`}>
<a className="grid cursor-pointer place-items-center rounded p-1 duration-300 hover:bg-custom-background-90">
<PencilIcon className="h-4 w-4" />
</a>
</Link>
)}
<CustomMenu width="auto" verticalEllipsis>
{isOwner && (
<CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}>
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete project</span>
</span>
</CustomMenu.MenuItem>
)}
<CustomMenu width="auto" verticalEllipsis>
{isOwner && (
<CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}>
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete project</span>
</span>
</CustomMenu.MenuItem>
)}
{project.is_favorite ? (
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
<span className="flex items-center justify-start gap-2">
<StarIcon className="h-4 w-4" />
<span>Remove from favorites</span>
</span>
</CustomMenu.MenuItem>
) : (
<CustomMenu.MenuItem onClick={handleAddToFavorites}>
<span className="flex items-center justify-start gap-2">
<StarIcon className="h-4 w-4" />
<span>Add to favorites</span>
</span>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={handleCopyText}>
{project.is_favorite ? (
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy project link</span>
<StarIcon className="h-4 w-4" />
<span>Remove from favorites</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
) : null}
</div>
) : (
<CustomMenu.MenuItem onClick={handleAddToFavorites}>
<span className="flex items-center justify-start gap-2">
<StarIcon className="h-4 w-4" />
<span>Add to favorites</span>
</span>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy project link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
) : null}
</div>
</div>
) : (
<Loader>
<Loader.Item height="144px" />
</Loader>
)}
</div>
</>
);
};
2 changes: 2 additions & 0 deletions apps/app/types/projects.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ export interface IProject {
id: string;
identifier: string;
is_favorite: boolean;
is_member: boolean;
member_role: 5 | 10 | 15 | 20 | null;
issue_views_view: boolean;
module_view: boolean;
name: string;
Expand Down