From d58d6391906e4f88c6dc570414a6fd9a5b8cb451 Mon Sep 17 00:00:00 2001
From: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Date: Wed, 11 Oct 2023 20:04:47 +0530
Subject: [PATCH] fix: project card fixes

---
 web/components/project/card-list.tsx |  2 ++
 web/components/project/card.tsx      | 32 ++++++++++++++++------------
 web/services/project.service.ts      | 23 ++++++++++----------
 web/store/project.ts                 |  4 +++-
 4 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/web/components/project/card-list.tsx b/web/components/project/card-list.tsx
index 1c8e5958e..e64a92b0e 100644
--- a/web/components/project/card-list.tsx
+++ b/web/components/project/card-list.tsx
@@ -22,6 +22,8 @@ export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
 
   const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
 
+  console.log("projects", projects);
+
   if (!projects) {
     return (
       <Loader className="grid grid-cols-3 gap-4">
diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
index 5e95395d6..401f56508 100644
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@@ -5,6 +5,7 @@ import { mutate } from "swr";
 import { observer } from "mobx-react-lite";
 // icons
 import { CalendarDaysIcon, LinkIcon, PencilIcon, PlusIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { Star } from "lucide-react";
 // services
 import projectService from "services/project.service";
 // hooks
@@ -136,7 +137,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
                 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">
+              <div className="absolute bottom-4 right-4 flex items-center gap-3 text-white">
                 {!project.is_member ? (
                   <button
                     type="button"
@@ -153,11 +154,21 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
                 ) : (
                   <span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">Joined</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" />
+              </div>
+
+              <div className="absolute top-4 right-4 bg-slate-300 rounded">
+                <span className="grid h-6 w-9 place-items-center cursor-pointer  ">
+                  <Star className="h-3 w-3" />
+                </span>
+              </div>
+              <div className="absolute bottom-4 left-4 bg-slate-300 rounded-md">
+                {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>
             </div>
           </a>
@@ -167,13 +178,6 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
             <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>
@@ -209,14 +213,14 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
                   {project.is_favorite ? (
                     <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
                       <span className="flex items-center justify-start gap-2">
-                        <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                        <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                         <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" />
+                        <Star className="h-4 w-4" />
                         <span>Add to favorites</span>
                       </span>
                     </CustomMenu.MenuItem>
diff --git a/web/services/project.service.ts b/web/services/project.service.ts
index d700d0e5a..2d5b4b156 100644
--- a/web/services/project.service.ts
+++ b/web/services/project.service.ts
@@ -5,7 +5,7 @@ import trackEventServices from "services/track_event.service";
 // types
 import type {
   GithubRepositoriesResponse,
-  ICurrentUserResponse,
+  IUser,
   IProject,
   IProjectBulkInviteFormData,
   IProjectMember,
@@ -44,15 +44,8 @@ export class ProjectService extends APIService {
       });
   }
 
-  async getProjects(
-    workspaceSlug: string,
-    params: {
-      is_favorite: "all" | boolean;
-    }
-  ): Promise<IProject[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/`, {
-      params,
-    })
+  async getProjects(workspaceSlug: string): Promise<IProject[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -93,7 +86,7 @@ export class ProjectService extends APIService {
     workspaceSlug: string,
     projectId: string,
     data: IProjectBulkInviteFormData,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/add/`, data)
       .then((response) => {
@@ -291,6 +284,14 @@ export class ProjectService extends APIService {
       });
   }
 
+  async getUserProjectFavorites(workspaceSlug: string): Promise<any[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async addProjectToFavorites(workspaceSlug: string, project: string): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`, { project })
       .then((response) => response?.data)
diff --git a/web/store/project.ts b/web/store/project.ts
index 45fb40bcc..bb25fdc47 100644
--- a/web/store/project.ts
+++ b/web/store/project.ts
@@ -232,10 +232,11 @@ class ProjectStore implements IProjectStore {
    * get Workspace projects using workspace slug
    * @param workspaceSlug
    * @returns
+   *
    */
   fetchProjects = async (workspaceSlug: string) => {
     try {
-      const projects = await this.projectService.getProjects(workspaceSlug, { is_favorite: "all" });
+      const projects = await this.projectService.getProjects(workspaceSlug);
       runInAction(() => {
         this.projects = {
           ...this.projects,
@@ -244,6 +245,7 @@ class ProjectStore implements IProjectStore {
       });
     } catch (error) {
       console.log("Failed to fetch project from workspace store");
+      throw error;
     }
   };