style: projects list page

apps/app/components/project/join-project-modal.tsx

@@ -13,9 +13,7 @@ type TJoinProjectModalProps = {
   onJoin: () => Promise<void>;
 };
 
-export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
+export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, onJoin, data }) => {
-  const { onClose, onJoin, data } = props;
-
   const [isJoiningLoading, setIsJoiningLoading] = useState(false);
 
   const handleJoin = () => {
@@ -36,7 +34,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
 
   return (
     <Transition.Root show={Boolean(data)} as={React.Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={handleClose}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -49,7 +47,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
           <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
             <Transition.Child
               as={React.Fragment}
@@ -71,8 +69,8 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
                   </p>
                   <div className="space-y-3" />
                 </div>
-                <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+                <div className="mt-5 flex justify-end gap-2">
-                  <Button theme="secondary" onClick={handleClose}>
+                  <Button type="button" theme="secondary" onClick={handleClose}>
                     Cancel
                   </Button>
                   <Button type="submit" onClick={handleJoin} disabled={isJoiningLoading}>

apps/app/components/project/single-project-card.tsx

@@ -2,20 +2,27 @@ import React from "react";
 
 import { useRouter } from "next/router";
 import Link from "next/link";
+import Image from "next/image";
 
+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 } from "components/ui";
+import { CustomMenu, Loader, Tooltip } from "components/ui";
 // icons
 import { CalendarDaysIcon, PencilIcon, PlusIcon } from "@heroicons/react/24/outline";
 import { StarIcon } from "@heroicons/react/20/solid";
 // helpers
 import { renderShortNumericDateFormat } from "helpers/date-time.helper";
-import { copyTextToClipboard } from "helpers/string.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import type { IProject } from "types";
+// fetch-keys
+import { PROJECTS_LIST } from "constants/fetch-keys";
 
 export type ProjectCardProps = {
   project: IProject;
@@ -34,11 +41,75 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
   const { setToastAlert } = useToast();
 
   // fetching project members information
-  const { members, isMember, canDelete, canEdit } = useProjectMembers(
+  const { members, hasJoined, isOwner, isMember } = useProjectMembers(
     workspaceSlug as string,
     project.id
   );
 
+  const handleAddToFavourites = () => {
+    if (!workspaceSlug) return;
+
+    projectService
+      .addProjectToFavourites(workspaceSlug as string, {
+        project: project.id,
+      })
+      .then(() => {
+        mutate<IProject[]>(
+          PROJECTS_LIST(workspaceSlug as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => ({
+              ...p,
+              is_favourite: p.id === project.id ? true : p.is_favourite,
+            })),
+          false
+        );
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully added the project to favourites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the project from favourites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavourites = () => {
+    if (!workspaceSlug || !project) return;
+
+    projectService
+      .removeProjectFromFavourites(workspaceSlug as string, project.id)
+      .then(() => {
+        mutate<IProject[]>(
+          PROJECTS_LIST(workspaceSlug as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => ({
+              ...p,
+              is_favourite: p.id === project.id ? false : p.is_favourite,
+            })),
+          false
+        );
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully removed the project from favourites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the project from favourites. Please try again.",
+        });
+      });
+  };
+
   const handleCopyText = () => {
     const originURL =
       typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
@@ -55,72 +126,103 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
   return (
     <>
       {members ? (
+        <div className="flex flex-col shadow rounded-[10px]">
           <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
-          <a className="shadow rounded-[10px]">
+            <a>
-            <div
+              <div className="relative h-32 w-full rounded-t-[10px]">
-              className="relative h-32 bg-center bg-cover bg-no-repeat rounded-t-[10px]"
+                <Image
-              style={{
+                  src={
-                backgroundImage: `url(${
                     project.cover_image ??
-                  "https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80"
+                    "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}
-            >
+                  layout="fill"
+                  className="rounded-t-[10px]"
+                />
                 <div className="absolute left-7 bottom-4 flex items-center gap-3 text-white">
-                {!isMember ? (
+                  {!hasJoined ? (
                     <button
                       type="button"
-                    onClick={() => {
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
                         setToJoinProject(project.id);
                       }}
-                    className="flex cursor-pointer items-center gap-1 rounded border p-2 text-xs font-medium duration-300 hover:bg-gray-100"
+                      className="flex cursor-pointer items-center gap-1 bg-green-600 px-2 py-1 rounded text-xs"
                     >
                       <PlusIcon className="h-3 w-3" />
                       <span>Select to Join</span>
                     </button>
                   ) : (
-                  <span className="bg-[#09A953] px-2 py-1 rounded text-xs">Member</span>
+                    <span className="bg-green-600 px-2 py-1 rounded text-xs">Member</span>
                   )}
-                <span className="bg-[#f7ae59] h-6 w-9 grid place-items-center rounded">
+                  {project.is_favourite && (
+                    <span className="bg-orange-400 h-6 w-9 grid place-items-center rounded">
                       <StarIcon className="h-3 w-3" />
                     </span>
+                  )}
                 </div>
               </div>
-            <div className="px-7 py-4 rounded-b-[10px]">
+            </a>
-              <div className="flex items-center justify-between">
+          </Link>
-                <div className="text-1.5xl font-semibold">{project.name}</div>
+          <div className="flex flex-col px-7 py-4 rounded-b-[10px] h-full">
+            <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
+              <a>
+                <div className="flex items-center gap-1">
+                  <h3 className="text-1.5xl font-semibold">{project.name}</h3>
+                  {project.icon && (
+                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                      {String.fromCodePoint(parseInt(project.icon))}
+                    </span>
+                  )}
                 </div>
-              <p className="mt-3.5 mb-7">{project.description}</p>
+                <p className="mt-3.5 mb-7">{truncateText(project.description ?? "", 100)}</p>
-              <div className="flex justify-between">
+              </a>
+            </Link>
+            <div className="flex justify-between items-end h-full">
+              <Tooltip
+                tooltipContent={`Created at ${renderShortNumericDateFormat(project.created_at)}`}
+                position="bottom"
+                theme="dark"
+              >
                 <div className="flex items-center gap-1.5 text-xs">
                   <CalendarDaysIcon className="h-4 w-4" />
                   {renderShortNumericDateFormat(project.created_at)}
                 </div>
-                {isMember ? (
+              </Tooltip>
+              {hasJoined ? (
                 <div className="flex items-center">
-                    {canEdit && (
+                  {(isOwner || isMember) && (
                     <Link href={`/${workspaceSlug}/projects/${project.id}/settings`}>
                       <a className="grid cursor-pointer place-items-center rounded p-1 duration-300 hover:bg-gray-100">
                         <PencilIcon className="h-4 w-4" />
                       </a>
                     </Link>
                   )}
-                    {canDelete && (
                   <CustomMenu width="auto" verticalEllipsis>
+                    {isOwner && (
                       <CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}>
                         Delete project
                       </CustomMenu.MenuItem>
+                    )}
+                    {project.is_favourite ? (
+                      <CustomMenu.MenuItem onClick={handleRemoveFromFavourites}>
+                        Remove from favourites
+                      </CustomMenu.MenuItem>
+                    ) : (
+                      <CustomMenu.MenuItem onClick={handleAddToFavourites}>
+                        Add to favourites
+                      </CustomMenu.MenuItem>
+                    )}
                     <CustomMenu.MenuItem onClick={handleCopyText}>
                       Copy project link
                     </CustomMenu.MenuItem>
                   </CustomMenu>
-                    )}
                 </div>
               ) : null}
             </div>
           </div>
-          </a>
+        </div>
-        </Link>
       ) : (
         <Loader>
           <Loader.Item height="144px" />

apps/app/components/ui/tooltip.tsx

@@ -24,6 +24,7 @@ type Props = {
   children: JSX.Element;
   disabled?: boolean;
   className?: string;
+  theme?: "light" | "dark";
 };
 
 export const Tooltip: React.FC<Props> = ({
@@ -33,21 +34,18 @@ export const Tooltip: React.FC<Props> = ({
   children,
   disabled = false,
   className = "",
+  theme = "light",
 }) => (
   <Tooltip2
     disabled={disabled}
     content={
       <div
-        className={`flex flex-col justify-center items-start gap-1 max-w-[600px] text-xs rounded-md bg-white p-2 shadow-md capitalize text-left ${className}`}
+        className={`${className} flex flex-col justify-center items-start gap-1 max-w-[600px] text-xs rounded-md p-2 shadow-md text-left ${
+          theme === "light" ? "bg-white text-gray-700" : "bg-black text-white"
+        }`}
       >
-        {tooltipHeading ? (
+        {tooltipHeading && <h5 className="font-medium">{tooltipHeading}</h5>}
-          <>
+        <p>{tooltipContent}</p>
-            <h5 className="font-medium">{tooltipHeading}</h5>
-            <p className="text-gray-700">{tooltipContent}</p>
-          </>
-        ) : (
-          <p className="text-gray-700">{tooltipContent}</p>
-        )}
       </div>
     }
     position={position}

apps/app/hooks/use-project-members.tsx

@@ -13,20 +13,24 @@ const useProjectMembers = (workspaceSlug: string, projectId: string) => {
     projectService.projectMembers(workspaceSlug, projectId)
   );
 
-  const isMember = members?.some((item: any) => item.member.id === (user as any)?.id);
+  const hasJoined = members?.some((item: any) => item.member.id === (user as any)?.id);
 
-  const canEdit = members?.some(
+  const isOwner = members?.some((item) => item.member.id === (user as any)?.id && item.role === 20);
-    (item) => (item.member.id === (user as any)?.id && item.role === 20) || item.role === 15
+  const isMember = members?.some(
+    (item) => item.member.id === (user as any)?.id && item.role === 15
   );
-  const canDelete = members?.some(
+  const isViewer = members?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 20
+    (item) => item.member.id === (user as any)?.id && item.role === 10
   );
+  const isGuest = members?.some((item) => item.member.id === (user as any)?.id && item.role === 5);
 
   return {
     members,
+    hasJoined,
+    isOwner,
     isMember,
-    canEdit,
+    isViewer,
-    canDelete,
+    isGuest,
   };
 };
 

apps/app/hooks/use-projects.tsx

@@ -1,10 +1,8 @@
 import useSWR from "swr";
 import { useRouter } from "next/router";
-// types
-import { IProject } from "types";
 // services
 import projectService from "services/project.service";
-// constants
+// fetch-keys
 import { PROJECTS_LIST } from "constants/fetch-keys";
 
 const useProjects = () => {
@@ -12,7 +10,7 @@ const useProjects = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // api fetching
-  const { data: projects, mutate: mutateProjects } = useSWR<IProject[]>(
+  const { data: projects, mutate: mutateProjects } = useSWR(
     workspaceSlug ? PROJECTS_LIST(workspaceSlug as string) : null,
     workspaceSlug ? () => projectService.getProjects(workspaceSlug as string) : null
   );

apps/app/next.config.js

@@ -9,6 +9,7 @@ const nextConfig = {
       "vinci-web.s3.amazonaws.com",
       "planefs-staging.s3.ap-south-1.amazonaws.com",
       "planefs.s3.amazonaws.com",
+      "images.unsplash.com",
     ],
   },
   output: "standalone",

apps/app/pages/[workspaceSlug]/projects/index.tsx

@@ -57,6 +57,7 @@ const ProjectsPage: NextPage = () => {
         onJoin={async () => {
           const project = projects?.find((item) => item.id === selectedProjectToJoin);
           if (!project) return;
+
           await projectService
             .joinProject(workspaceSlug as string, {
               project_ids: [project.id],

apps/app/services/project.service.ts

@@ -222,7 +222,7 @@ class ProjectServices extends APIService {
   }
 
   async syncGiuthubRepository(
-    slug: string,
+    workspaceSlug: string,
     projectId: string,
     workspaceIntegrationId: string,
     data: {
@@ -233,7 +233,7 @@ class ProjectServices extends APIService {
     }
   ): Promise<any> {
     return this.post(
-      `/api/workspaces/${slug}/projects/${projectId}/workspace-integrations/${workspaceIntegrationId}/github-repository-sync/`,
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${workspaceIntegrationId}/github-repository-sync/`,
       data
     )
       .then((response) => response?.data)
@@ -255,6 +255,27 @@ class ProjectServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async addProjectToFavourites(
+    workspaceSlug: string,
+    data: {
+      project: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/user-favourite-projects/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeProjectFromFavourites(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/user-favourite-projects/${projectId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new ProjectServices();

apps/app/types/projects.d.ts

@@ -10,6 +10,7 @@ export interface IProject {
   icon: string;
   id: string;
   identifier: string;
+  is_favourite: boolean;
   module_view: boolean;
   name: string;
   network: number;