plane/apps/app/components/ui/avatar/avatar.tsx

91 lines
2.7 KiB
TypeScript
Raw Normal View History

Refactoring Phase 1 (#199) * style: added cta at the bottom of sidebar, added missing icons as well, showing dynamic workspace member count on workspace dropdown * refractor: running parallel request, made create/edit label function to async function * fix: sidebar dropdown content going below kanban items outside click detection in need help dropdown * refractor: making parallel api calls fix: create state input comes at bottom, create state input gets on focus automatically, form is getting submitted on enter click * refactoring file structure and signin page * style: changed text and added spinner for signing in loading * refractor: removed unused type * fix: my issue cta in profile page sending to 404 page * fix: added new s3 bucket url in next.config.js file increased image modal height * packaging UI components * eslint config * eslint fixes * refactoring changes * build fixes * minor fixes * adding todo comments for reference * refactor: cleared unused imports and re ordered imports * refactor: removed unused imports * fix: added workspace argument to useissues hook * refactor: removed api-routes file, unnecessary constants * refactor: created helpers folder, removed unnecessary constants * refactor: new context for issue view * refactoring issues page * build fixes * refactoring * refactor: create issue modal * refactor: module ui * fix: sub-issues mutation * fix: create more option in create issue modal * description form debounce issue * refactor: global component for assignees list * fix: link module interface * fix: priority icons and sub-issues count added * fix: cycle mutation in issue details page * fix: remove issue from cycle mutation * fix: create issue modal in home page * fix: removed unnecessary props * fix: updated create issue form status * fix: settings auth breaking * refactor: issue details page Co-authored-by: Dakshesh Jain <dakshesh.jain14@gmail.com> Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Co-authored-by: venkatesh-soulpage <venkatesh.marreboyina@soulpageit.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia1001@gmail.com>
2023-01-26 18:12:20 +00:00
import Image from "next/image";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import workspaceService from "services/workspace.service";
// icons
import User from "public/user.png";
// types
import { IUser, IUserLite } from "types";
// fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
type AvatarProps = {
user: Partial<IUser> | Partial<IUserLite> | undefined;
index?: number;
};
export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
<div className={`relative z-[1] h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-2.5" : ""}`}>
{user && user.avatar && user.avatar !== "" ? (
<div
className={`h-5 w-5 rounded-full border-2 ${
index ? "border-white bg-white" : "border-transparent"
}`}
>
<Image
src={user.avatar}
height="100%"
width="100%"
className="rounded-full"
alt={user.first_name}
/>
</div>
) : (
<div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 text-white capitalize">
{user?.first_name && user.first_name !== ""
? user.first_name.charAt(0)
: user?.email?.charAt(0)}
</div>
)}
</div>
);
type AsigneesListProps = {
users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
userIds?: string[];
length?: number;
};
export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, length = 5 }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: people } = useSWR(
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
);
if ((users && users.length === 0) || (userIds && userIds.length === 0))
return (
<div className="h-5 w-5 rounded-full border-2 border-white bg-white">
<Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
</div>
);
return (
<>
{users && (
<>
{users.slice(0, length).map((user, index) => (
<Avatar key={user?.id} user={user} index={index} />
))}
{users.length > length ? <span>+{users.length - length}</span> : null}
</>
)}
{userIds && (
<>
{userIds.slice(0, length).map((userId, index) => {
const user = people?.find((p) => p.member.id === userId)?.member;
return <Avatar key={userId} user={user} index={index} />;
})}
{userIds.length > length ? <span>+{userIds.length - length}</span> : null}
</>
)}
</>
);
};