style: projects list page

2023-03-01 14:11:27 +05:30 · 2023-03-01 14:11:27 +05:30 · 6afcf1f0e3
commit 6afcf1f0e3
parent 76b8b9eaef
9 changed files with 214 additions and 90 deletions
--- a/apps/app/components/project/join-project-modal.tsx
+++ b/apps/app/components/project/join-project-modal.tsx
@ -13,9 +13,7 @@ type TJoinProjectModalProps = {
  onJoin: () => Promise<void>;
 };

-export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
-  const { onClose, onJoin, data } = props;
-
+export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, onJoin, data }) => {
  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">
-                  <Button theme="secondary" onClick={handleClose}>
+                <div className="mt-5 flex justify-end gap-2">
+                  <Button type="button" theme="secondary" onClick={handleClose}>
                    Cancel
                  </Button>
                  <Button type="submit" onClick={handleJoin} disabled={isJoiningLoading}>
--- a/apps/app/components/project/single-project-card.tsx
+++ b/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 ? (
-        <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
-          <a className="shadow rounded-[10px]">
-            <div
-              className="relative h-32 bg-center bg-cover bg-no-repeat rounded-t-[10px]"
-              style={{
-                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"
-                })`,
-              }}
-            >
-              <div className="absolute left-7 bottom-4 flex items-center gap-3 text-white">
-                {!isMember ? (
-                  <button
-                    type="button"
-                    onClick={() => {
-                      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"
-                  >
-                    <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-[#f7ae59] h-6 w-9 grid place-items-center rounded">
-                  <StarIcon className="h-3 w-3" />
-                </span>
+        <div className="flex flex-col shadow rounded-[10px]">
+          <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
+            <a>
+              <div className="relative h-32 w-full rounded-t-[10px]">
+                <Image
+                  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}
+                  layout="fill"
+                  className="rounded-t-[10px]"
+                />
+                <div className="absolute left-7 bottom-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 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-green-600 px-2 py-1 rounded text-xs">Member</span>
+                  )}
+                  {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>
-            <div className="px-7 py-4 rounded-b-[10px]">
-              <div className="flex items-center justify-between">
-                <div className="text-1.5xl font-semibold">{project.name}</div>
-              </div>
-              <p className="mt-3.5 mb-7">{project.description}</p>
-              <div className="flex justify-between">
+            </a>
+          </Link>
+          <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">{truncateText(project.description ?? "", 100)}</p>
+              </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 ? (
-                  <div className="flex items-center">
-                    {canEdit && (
-                      <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>
+              </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-gray-100">
+                        <PencilIcon className="h-4 w-4" />
+                      </a>
+                    </Link>
+                  )}
+                  <CustomMenu width="auto" verticalEllipsis>
+                    {isOwner && (
+                      <CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}>
+                        Delete project
+                      </CustomMenu.MenuItem>
                    )}
-                    {canDelete && (
-                      <CustomMenu width="auto" verticalEllipsis>
-                        <CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}>
-                          Delete project
-                        </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem onClick={handleCopyText}>
-                          Copy project link
-                        </CustomMenu.MenuItem>
-                      </CustomMenu>
+                    {project.is_favourite ? (
+                      <CustomMenu.MenuItem onClick={handleRemoveFromFavourites}>
+                        Remove from favourites
+                      </CustomMenu.MenuItem>
+                    ) : (
+                      <CustomMenu.MenuItem onClick={handleAddToFavourites}>
+                        Add to favourites
+                      </CustomMenu.MenuItem>
                    )}
-                  </div>
-                ) : null}
-              </div>
+                    <CustomMenu.MenuItem onClick={handleCopyText}>
+                      Copy project link
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              ) : null}
            </div>
-          </a>
-        </Link>
+          </div>
+        </div>
      ) : (
        <Loader>
          <Loader.Item height="144px" />
--- a/apps/app/components/ui/tooltip.tsx
+++ b/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 ? (
-          <>
-            <h5 className="font-medium">{tooltipHeading}</h5>
-            <p className="text-gray-700">{tooltipContent}</p>
-          </>
-        ) : (
-          <p className="text-gray-700">{tooltipContent}</p>
-        )}
+        {tooltipHeading && <h5 className="font-medium">{tooltipHeading}</h5>}
+        <p>{tooltipContent}</p>
      </div>
    }
    position={position}
--- a/apps/app/hooks/use-project-members.tsx
+++ b/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(
-    (item) => (item.member.id === (user as any)?.id && item.role === 20) || item.role === 15
+  const isOwner = members?.some((item) => item.member.id === (user as any)?.id && item.role === 20);
+  const isMember = members?.some(
+    (item) => item.member.id === (user as any)?.id && item.role === 15
  );
-  const canDelete = members?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 20
+  const isViewer = members?.some(
+    (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,
-    canDelete,
+    isViewer,
+    isGuest,
  };
 };

--- a/apps/app/hooks/use-projects.tsx
+++ b/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
  );
--- a/apps/app/next.config.js
+++ b/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",
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/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],
--- a/apps/app/services/project.service.ts
+++ b/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();
--- a/apps/app/types/projects.d.ts
+++ b/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;